10分鐘帶你看懂支付寶的互動設計（二）
本文是《10分鐘帶你看懂支付寶的互動設計》系列的第二篇。本文主要從支付寶的底部導航欄中的“財富”、“朋友”、“我的”三個部分，為大家分析支付寶頁面中的互動設計。
上篇文章中，我們分析了支付寶的首頁，瞭解了：支付寶的首頁是如何通過設計實現了其主要功能？
接下來的文章中，我們來看看：支付寶在其它介面的互動設計又是怎麼樣的呢？
一、“財富”篇
按照“國際分析案例”，我們先眯著眼來看財富頁面的整體佈局，財富里將介面劃分為了導航欄、個人財富、備用金花唄、支付寶系列產品、活動推廣五個區域，如圖1所示。
圖1. 支付寶“財富”介面
在頂部導航欄，“財富”二字表明使用者目前所在位置，右邊搜尋欄是是對股票相關的一些搜尋；在個人財富里，將總資產（使用者最關心的血汗錢）和昨日收益（使用者關心的利益）置於頂部，字型最大，讓使用者一眼即可看見，並且在總資產旁邊，用“保障中”幾個字，讓使用者放心，增強使用者對支付寶的信任度。
在個人財富欄，整體採用上文下數（上面為類別，下面顯示數額）的設計風格，清晰明瞭。備用金和花唄緊挨著個人財富區，在邏輯上面來說是可以的（當用戶個人財富沒有了，就會想到備用金和花唄）。但是這裡的排版設計的不是很好，沒有延續上文下數的風格，而且這個版塊位置太小，而且做得沒有吸引力，並不能很好的讓使用者發現。
接下來是支付寶系列產品的入口區，只留了五個入口，不多不少，既不會讓使用者感到選擇困難，又對產品有很好的曝光。接下來是活動推廣區，延續了支付寶首頁活動推廣的設計風格，在介面上保持了一致性，這裡就不做贅述了。
二、“朋友”篇
朋友介面，一共分為四個部分——導航欄、搜尋欄、產品入口區、聊天資訊區，如圖2所示：
圖2. 支付寶“朋友”介面
頂部中間位置是朋友（導航作用，顯示所在頁面），右邊為通訊錄和“+”，和首頁的一樣，為“+”設定多個入口，強調了“+”的重要性。
此處的搜尋框與首頁的搜素框一致，但是在朋友介面加入這個與朋友關係不太強的介面，是不太明智的決定（使用者在朋友介面，多數使用場景是想看資訊，又何必在此處增加頁面視覺干擾呢？首頁已經在明顯位置安排了搜尋框，在此處安排實屬不知道意義何在？）。
生活號、小程式、生活圈放在此處，同樣增加了視覺噪音，這裡可能是因為商業的需求，需要將這三個入口放在一級頁面。
朋友資訊介面也是奇葩，各種通知資訊也算是朋友？明顯邏輯不對，正確的做法應該是將各類非朋友資訊歸入一類，這樣整個介面看起來就會明朗許多。但是此處應該是涉及了商業需求，不然阿里的設計師早就按照微信的樣子來做了。
這裡我想預言一點東西：支付寶一定在等某個合適的機遇（也許是等騰訊系社交產品遭遇到重大風波，也許是等支付寶的粘性足夠強大的時候），等時機一旦成熟，支付寶一定會將社交屬性提取出來，另闢山頭，做專屬於支付寶特色的社交產品。這樣做既能減輕支付寶的負擔，又能使阿里專注社交功能的開發。
三、“我的”篇
整體看來，我的介面設計的很清晰，採用細條目的方式，增加了各個內容曝光的機會並且具有很好的擴充套件性。
細條目採用左logo+名稱，右指向性標誌的設計風格，並且可以在細條目中新增更多資訊，刺激使用者去點選，以此來促進使用者的轉化率，如圖3所示：
圖3. 支付寶“我的”介面
四、“總結”
通過這次分析總結，我發現了支付寶的設計有以下特點：
- 介面風格統一，具有很強的一致性；
- 每個介面的擴充套件性都極強；
- 很好的平衡了商業需求和使用者需求；
- 在細節處理上面花了很多心思；
- 情感化體驗設計突出.
支付寶作為一款國民化的支付工具，好的設計當然不止這些，歡迎大家在評論區交流自己的想法。
五、寫在後面
上一次的文章，有很多的前輩指出了我的缺點和錯誤，在此表示感謝。 我的實力很有限，寫的文章大家看看就好，覺得不對的，有不同意見的，歡迎和我一起討論。
相對於其它頁面，為什麼我會對首頁花那麼多文字去介紹，我想有這幾個方面的原因：
- 一個APP的首頁一定是設計的最精彩的地方，所以分析首頁就能得到很多有用的資訊，能看出這個APP的設計水準；
- 成功的APP，它的互動設計、介面設計，都會在一定程度上保持一致性。
所以，基本上首頁分析完了，其它介面的設計思路和方法也就大同小異了。
本文由 @互動設計師 原創釋出於人人都是產品經理。未經許可，禁止轉載