10分鐘帶你看懂支付寶的交互設計(二)
本文是《10分鐘帶你看懂支付寶的交互設計》系列的第二篇。本文主要從支付寶的底部導航欄中的“財富”、“朋友”、“我的”三個部分,為大家分析支付寶頁面中的交互設計。
上篇文章中,我們分析了支付寶的首頁,了解了:支付寶的首頁是如何通過設計實現了其主要功能?
接下來的文章中,我們來看看:支付寶在其它界面的交互設計又是怎么樣的呢?
一、“財富”篇
按照“國際分析案例”,我們先瞇著眼來看財富頁面的整體布局,財富里將界面劃分為了導航欄、個人財富、備用金花唄、支付寶系列產品、活動推廣五個區域,如圖1所示。
圖1. 支付寶“財富”界面
在頂部導航欄,“財富”二字表明用戶目前所在位置,右邊搜索欄是是對股票相關的一些搜索;在個人財富里,將總資產(用戶最關心的血汗錢)和昨日收益(用戶關心的利益)置于頂部,字體最大,讓用戶一眼即可看見,并且在總資產旁邊,用“保障中”幾個字,讓用戶放心,增強用戶對支付寶的信任度。
在個人財富欄,整體采用上文下數(上面為類別,下面顯示數額)的設計風格,清晰明了。備用金和花唄緊挨著個人財富區,在邏輯上面來說是可以的(當用戶個人財富沒有了,就會想到備用金和花唄)。但是這里的排版設計的不是很好,沒有延續上文下數的風格,而且這個版塊位置太小,而且做得沒有吸引力,并不能很好的讓用戶發現。
接下來是支付寶系列產品的入口區,只留了五個入口,不多不少,既不會讓用戶感到選擇困難,又對產品有很好的曝光。接下來是活動推廣區,延續了支付寶首頁活動推廣的設計風格,在界面上保持了一致性,這里就不做贅述了。
二、“朋友”篇
朋友界面,一共分為四個部分——導航欄、搜索欄、產品入口區、聊天信息區,如圖2所示:
圖2. 支付寶“朋友”界面
頂部中間位置是朋友(導航作用,顯示所在頁面),右邊為通訊錄和“+”,和首頁的一樣,為“+”設置多個入口,強調了“+”的重要性。
此處的搜索框與首頁的搜素框一致,但是在朋友界面加入這個與朋友關系不太強的界面,是不太明智的決定(用戶在朋友界面,多數使用場景是想看信息,又何必在此處增加頁面視覺干擾呢?首頁已經在明顯位置安排了搜索框,在此處安排實屬不知道意義何在?)。
生活號、小程序、生活圈放在此處,同樣增加了視覺噪音,這里可能是因為商業的需求,需要將這三個入口放在一級頁面。
朋友信息界面也是奇葩,各種通知信息也算是朋友?明顯邏輯不對,正確的做法應該是將各類非朋友信息歸入一類,這樣整個界面看起來就會明朗許多。但是此處應該是涉及了商業需求,不然阿里的設計師早就按照微信的樣子來做了。
這里我想預言一點東西:支付寶一定在等某個合適的機遇(也許是等騰訊系社交產品遭遇到重大風波,也許是等支付寶的粘性足夠強大的時候),等時機一旦成熟,支付寶一定會將社交屬性提取出來,另辟山頭,做專屬于支付寶特色的社交產品。這樣做既能減輕支付寶的負擔,又能使阿里專注社交功能的開發。
三、“我的”篇
整體看來,我的界面設計的很清晰,采用細條目的方式,增加了各個內容曝光的機會并且具有很好的擴展性。
細條目采用左logo+名稱,右指向性標志的設計風格,并且可以在細條目中添加更多信息,刺激用戶去點擊,以此來促進用戶的轉化率,如圖3所示:
圖3. 支付寶“我的”界面
四、“總結”
通過這次分析總結,我發現了支付寶的設計有以下特點:
- 界面風格統一,具有很強的一致性;
- 每個界面的擴展性都極強;
- 很好的平衡了商業需求和用戶需求;
- 在細節處理上面花了很多心思;
- 情感化體驗設計突出.
支付寶作為一款國民化的支付工具,好的設計當然不止這些,歡迎大家在評論區交流自己的想法。
五、寫在后面
上一次的文章,有很多的前輩指出了我的缺點和錯誤,在此表示感謝。 我的實力很有限,寫的文章大家看看就好,覺得不對的,有不同意見的,歡迎和我一起討論。
相對于其它頁面,為什么我會對首頁花那么多文字去介紹,我想有這幾個方面的原因:
- 一個APP的首頁一定是設計的最精彩的地方,所以分析首頁就能得到很多有用的信息,能看出這個APP的設計水準;
- 成功的APP,它的交互設計、界面設計,都會在一定程度上保持一致性。
所以,基本上首頁分析完了,其它界面的設計思路和方法也就大同小異了。
本文由 @交互設計師 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
看完了你的兩篇文章,不得不說你的學習能力確實很強。在第一篇的時候,我以為是業內人士的作品,哈哈哈,佩服!
看完這篇之后,我有幾點想跟你交流一下。
1、財富頁面中,為什么備用金和花唄沒有與上面的資產項采用相同的上文下字的設計,我的看法是備用金和花唄與上面的幾項資產不同,他們屬于負債!負債是需要歸還的,是資產是能夠為你賺取收益的。你可以去看看你的信用卡,余額一定是負數。
2、朋友頁面的搜索是有意義的,就像微信首頁的搜索功能一樣。你想想,如果朋友列表的過長,你要找到某個好友時難道會去一個一個翻?效率最高的肯定是直接把他搜出來啦。
3、關于生活號等三個入口的位置。其實是與阿里之前想發展社交的愿望相關的,為了能夠建立用戶的社交粘性,加入了生活號(類似于微信公眾號)和生活圈(類似于朋友圈),小程序上線之后也將其放到了這里。因為支付寶的定位決定了它不可能再用其他頁面來做關于社交的內容了,所以只好放在這個頁面了。
4、評論區有人說到朋友頁面的搜索框默認是隱藏的,確實是這樣的,微信首頁的搜索框默認也是隱藏的,只有你下滑的時候才會發現(這是iOS系統的設計,安卓的直接固定在了右上角)。
以上是個人的一些愚見,歡迎交流。
挺棒的學習了。備用金區域我這邊依然是上文下數字0 0我覺得這樣的設計還不錯,多用于自己財富信息的展示吧,而且主次分明,可能不作為主要的入口。朋友頁面的搜索欄我這里是放在聯系人旁邊的搜索圖標,比作者例圖稍弱化一些,我覺得朋友里面的搜索也不是毫無用處,加好友的時候可以直接點擊搜索好友加人,更方便也更貼近人們的思維習慣吧。像微信,有“+”功能也有搜索的功能。我個人是很不建議支付寶注重社交這一塊,目前也能看出現在支付寶并沒有,好好做一個錢包,朋友界面基本上等于消息,和用來互相轉賬。阿里應該是做過社交軟件,都不太成功0 0
但是,為什么支付寶搞得很多活動都是驅動用戶拉新這種呢??
額,幾乎所有的項目都會這樣運營吧0 0無論哪些app都需要日活與留存那。像抖音已經是上億的日活,現在也要做社交,也只是出個多閃。
「朋友」那里的搜索框,默認情況是不顯示的,下拉才會出現
你的手機是安卓嗎??機型不一樣,設計的也不一樣哦
朋友界面的頭像對話框的大小比例也不太美觀
哈哈哈
這個我沒有太注意