本文是《10分鐘帶你看懂支付寶的交互設(shè)計》系列的第二篇。本文主要從支付寶的底部導航欄中的“財富”、“朋友”、“我的”三個部分，為大家分析支付寶頁面中的交互設(shè)計。

上篇文章中，我們分析了支付寶的首頁，了解了：支付寶的首頁是如何通過設(shè)計實現(xiàn)了其主要功能？

接下來的文章中，我們來看看：支付寶在其它界面的交互設(shè)計又是怎么樣的呢？

一、“財富”篇

按照“國際分析案例”，我們先瞇著眼來看財富頁面的整體布局，財富里將界面劃分為了導航欄、個人財富、備用金花唄、支付寶系列產(chǎn)品、活動推廣五個區(qū)域，如圖1所示。

圖1. 支付寶“財富”界面

在頂部導航欄，“財富”二字表明用戶目前所在位置，右邊搜索欄是是對股票相關(guān)的一些搜索；在個人財富里，將總資產(chǎn)（用戶最關(guān)心的血汗錢）和昨日收益（用戶關(guān)心的利益）置于頂部，字體最大，讓用戶一眼即可看見，并且在總資產(chǎn)旁邊，用“保障中”幾個字，讓用戶放心，增強用戶對支付寶的信任度。

在個人財富欄，整體采用上文下數(shù)（上面為類別，下面顯示數(shù)額）的設(shè)計風格，清晰明了。備用金和花唄緊挨著個人財富區(qū)，在邏輯上面來說是可以的（當用戶個人財富沒有了，就會想到備用金和花唄）。但是這里的排版設(shè)計的不是很好，沒有延續(xù)上文下數(shù)的風格，而且這個版塊位置太小，而且做得沒有吸引力，并不能很好的讓用戶發(fā)現(xiàn)。

接下來是支付寶系列產(chǎn)品的入口區(qū)，只留了五個入口，不多不少，既不會讓用戶感到選擇困難，又對產(chǎn)品有很好的曝光。接下來是活動推廣區(qū)，延續(xù)了支付寶首頁活動推廣的設(shè)計風格，在界面上保持了一致性，這里就不做贅述了。

二、“朋友”篇

朋友界面，一共分為四個部分——導航欄、搜索欄、產(chǎn)品入口區(qū)、聊天信息區(qū)，如圖2所示：

圖2. 支付寶“朋友”界面

頂部中間位置是朋友（導航作用，顯示所在頁面），右邊為通訊錄和“+”，和首頁的一樣，為“+”設(shè)置多個入口，強調(diào)了“+”的重要性。

此處的搜索框與首頁的搜素框一致，但是在朋友界面加入這個與朋友關(guān)系不太強的界面，是不太明智的決定（用戶在朋友界面，多數(shù)使用場景是想看信息，又何必在此處增加頁面視覺干擾呢？首頁已經(jīng)在明顯位置安排了搜索框，在此處安排實屬不知道意義何在？）。

生活號、小程序、生活圈放在此處，同樣增加了視覺噪音，這里可能是因為商業(yè)的需求，需要將這三個入口放在一級頁面。

朋友信息界面也是奇葩，各種通知信息也算是朋友？明顯邏輯不對，正確的做法應(yīng)該是將各類非朋友信息歸入一類，這樣整個界面看起來就會明朗許多。但是此處應(yīng)該是涉及了商業(yè)需求，不然阿里的設(shè)計師早就按照微信的樣子來做了。

這里我想預言一點東西：支付寶一定在等某個合適的機遇（也許是等騰訊系社交產(chǎn)品遭遇到重大風波，也許是等支付寶的粘性足夠強大的時候），等時機一旦成熟，支付寶一定會將社交屬性提取出來，另辟山頭，做專屬于支付寶特色的社交產(chǎn)品。這樣做既能減輕支付寶的負擔，又能使阿里專注社交功能的開發(fā)。

三、“我的”篇

整體看來，我的界面設(shè)計的很清晰，采用細條目的方式，增加了各個內(nèi)容曝光的機會并且具有很好的擴展性。

細條目采用左logo+名稱，右指向性標志的設(shè)計風格，并且可以在細條目中添加更多信息，刺激用戶去點擊，以此來促進用戶的轉(zhuǎn)化率，如圖3所示：

圖3. 支付寶“我的”界面

四、“總結(jié)”

通過這次分析總結(jié)，我發(fā)現(xiàn)了支付寶的設(shè)計有以下特點：

1. 界面風格統(tǒng)一，具有很強的一致性；
2. 每個界面的擴展性都極強；
3. 很好的平衡了商業(yè)需求和用戶需求；
4. 在細節(jié)處理上面花了很多心思；
5. 情感化體驗設(shè)計突出.

支付寶作為一款國民化的支付工具，好的設(shè)計當然不止這些，歡迎大家在評論區(qū)交流自己的想法。

五、寫在后面

上一次的文章，有很多的前輩指出了我的缺點和錯誤，在此表示感謝。 我的實力很有限，寫的文章大家看看就好，覺得不對的，有不同意見的，歡迎和我一起討論。

相對于其它頁面，為什么我會對首頁花那么多文字去介紹，我想有這幾個方面的原因：

1. 一個APP的首頁一定是設(shè)計的最精彩的地方，所以分析首頁就能得到很多有用的信息，能看出這個APP的設(shè)計水準；
2. 成功的APP，它的交互設(shè)計、界面設(shè)計，都會在一定程度上保持一致性。

所以，基本上首頁分析完了，其它界面的設(shè)計思路和方法也就大同小異了。

本文由 @交互設(shè)計師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議