支付寶作爲一個“簡單、安全、快速”的支付工具，其交互設計與其他產品有何不同呢？不同的原因爲何？

這篇文章是《10分鐘帶你看懂支付寶的交互設計》的（一）首頁篇，後面還會繼續更新。

下面進入正文：

一、瞭解支付寶的產品定位

體驗操作系統：手機iPhone6s；

支付寶版本號：10.1.58；

在開始產品分析前，我們先來看看支付寶的產品定位。

所謂產品定位，包括以下三方面：使用人羣、主要功能、產品特色。如圖1所示：

圖1 產品定位

從百度上支付寶的網頁介紹（圖2）和百度百科（圖3）的介紹中，可以看出支付寶的產品定位爲：致力於爲廣大用戶提供“簡單、安全、快速”的支付解決方案。

那麼支付寶的產品定位可分解爲：

• 使用人羣：廣大用戶；
• 主要功能：支付；
• 產品特色：簡單、安全、快捷。

圖2 支付寶網頁介紹

圖3 百度百科介紹

二、整體分析

當用戶打開支付寶，看到的第一個界面，就是支付寶的歡迎界面，支付寶的歡迎界面很有特點——停留時間很短（因爲時間太短，導致我無法成功截屏，所以這裏就不放圖了）。爲什麼支付寶的歡迎界面從來不像其它APP（如抖音等）一樣會有一個廣告呢（如圖4）？

這與我們之前提到的支付寶的產品定位有關，支付寶作爲一個“簡單、安全、快速”的支付工具。當用戶打開它時，多數場景下，都是用於支付，作爲一個以“快速”爲特色的工具類產品，就限制了它不能在歡迎界面做太長的停留，也不能做廣告（儘管這種廣告的收入很大），因爲這樣會造成用戶極大的不舒適。

舉個例子，當你早上急急忙忙的起了牀趕去教室上課，在食堂買早餐時，打開支付寶付款，（原本你的內心就很着急）卻還要像其它APP一樣看一段廣告！我想你此時一定會默默的罵馬雲，並且心裏會慢慢開始對支付寶產生一種厭惡的情緒。

如果你有一天看見支付寶歡迎界面都開始做廣告的時候，請相信我，支付寶一定活不到102歲那一天！

圖4 抖音歡迎界面的廣告

任何一個成功的APP，用戶進去見到的第一個界面，一定是該產品最想讓你看到的界面，也是存放產品主要功能的界面。在支付寶中，它的首頁就是最主要的界面。

從整個支付寶APP的佈局來看，底部採用五個Tab導航，分別是首頁、財富、口碑、朋友、我的，當處於相應界面時，底部導航會變成支付寶的品牌“藍”（圖5所示），這個設計有三個作用：

①在視覺上與其它導航相區別，表示用戶當前所處頁面；

②利用品牌的顏色加強用戶對品牌的認知；

③增強APP的界面一致性。

圖5 支付寶底部導航

在首頁這一界面，從整體看，總共被劃分爲了六個板塊，從上至下分別是核心功能區、擴展功能區、信息通知區、活動展示區、其它產品區、導航欄（如圖6）。

整個頁面佈局清晰，因爲是以塊狀來劃分層次，可擴展性也比較強（可以根據需要劃分頁面層次，同時界面改變也不會太大，不會影響用戶的正常使用）。

在未來，如果支付寶需要發展其它重量級產品，就可以很方便的加入首頁。（這裏教大家一個方法——如何看出一個界面的模塊劃分，只需要把眼睛眯起來，不去關注內容，而是關注框架，就可以輕易的看見該界面的層次結構了。）

圖6 支付寶首頁層次劃分

三、核心功能區

我們按照從上到下的順序來分析支付寶的首頁。

核心功能區位於頁面頂端，是視覺焦點，又有一個支付寶的品牌“藍”作爲底色，一下就成爲了視覺重心，很顯然這個位置應該存放支付寶的主要功能，也就是支付功能。

支付寶的支付功能包括哪些呢？限於技術，目前支付寶主要通過識別二維碼進行支付，所以掃一掃自然就是最常用的功能，所以放在第一個，付錢、收錢隨後，敢預言，不管以後支付寶的版本怎麼改，他的支付功能始終位於首頁，而且是首頁的視覺焦點。爲什麼此處卡包也置於頁面最顯眼的位置呢？

與支付寶的很多活動有關，因爲很多商業活動都靠贈送各類卡捲來實現（也就是所謂的商業需求）。將搜索框置於頂層，看似搶了核心功能的風頭，其實不然，設計師巧妙的在這裏進行了處理，首先將搜索框的大小變小（但是不影響用戶的正常點擊）,然後將掃一掃那一欄的圖標變大，將字號也變大，視覺重心依然回到了掃一掃那一欄。但是爲什麼會將搜索框置於如此明顯的位置呢？

首先隨着支付寶的功能越來越多，由於頁面的第一層級裝不下，就會根據優先級進行排序，將優先級靠後的功能放入後一層級，因此很多功能的層級就會比較深。有了搜索框之後，用戶就可以通過首頁的搜索，快速進入用戶需要的功能（用戶需求），另外一方面，又可以在搜索框進行商業推廣（商業需求）。

將通訊錄也置於顯眼位置，是支付寶對於社交功能的探索，從此處可以看出，支付寶對於社交功能的渴望。加號打開是掃一掃、收錢、乘車碼、智能管理，將掃一掃置於該層級，可能是爲了方便單手操作的用戶，這樣不管哪隻手操作，都能方便的進行使用。

四、擴展功能區

擴展功能區，也就是支付寶擴展業務或第三方合作方入口，4*3的設計，與上方掃一掃、付錢、收錢、卡包對齊，增加了整個頁面的整齊度，該區域的圖標、字號，都相應的減弱，避免喧賓奪主。

大家注意看(圖7)，最後一個圖標是更多，擴展性極強，只要有第三方想和支付寶合作，馬雲只需要增加一個廣告位，然後笑着用自己的支付寶收錢就好了（我猜後期版本，支付寶會把“更多”這個按鈕做的比其它按鈕更搶眼一點，因爲這是一個很大的流量入口，能夠滿足很多商業需求）。同時，該區域還有一個很好的交互方式，當用戶進行長按圖標，就可以進行調節，給了用戶自主權。

圖7 首頁—更多

五、信息通知區

在信息通知這一欄，當有新的信息時，左邊的螞蟻會拿着一個信封微微擺動，不注意根本看不見，但是當你觀察到了，你就會覺得好可愛，支付寶好用心啊，心裏默默就會給支付寶一個好評，這就是情感化體驗，給用戶一個小驚喜。同時右邊有一個小紅點，會誘惑你去點擊，去閱讀信息，當你閱讀了信息之後，就只有螞蟻的觸鬚在動，信封就消失了（見圖8）。

圖8 信息通知區

六、活動展示區

在活動展示欄（圖9），雖然這個條目已經處於視覺中心以外，但是，聰明的設計師絕不會浪費任何一個可以利用的界面，於是設計師就利用輪播的圖片來吸引你的眼球，輪播的好處在於，一方面可以播放多個廣告（擴展性也比較好），另外一方面運動的物體可以吸引用戶的眼球（這個原理源於在古代我們的祖先爲了安全，總是會關注到運動的物體，這也就是爲什麼大多數網頁中的廣告都採用動畫的形式，就是爲了吸引你的眼球，去點擊它。

圖9 活動展示欄

七、其它產品區

其它產品區，就是一些活動和商業推廣的入口（這就純屬於商業需求，爲別的產品引流）。

說一下這裏的設計吧，這裏的“惠支付”字號比上面都還要大，是不是會搶了風頭，答案是——不會，因爲這已經是頁面底端了，如果再不通過這種方式來強調這個版塊，可能用戶根本就看不見了。

同時，設計師利用親密性原理——在視覺上捱得近的我們會認爲是一組，而沒有采用實線來分割，使整個界面簡約了不少（圖10）。

圖10 “惠支付”

在首頁，爲了讓用戶知道下面還有內容，故意漏出一半的內容，告訴用戶下面還有內容，同時，當整個頁面下拉時，掃一掃、付錢、收錢、搜索，加號的圖標就會置於頁面上方，驗證了我之前分析的一些結論（核心功能始終置頂顯示、始終放在用戶一眼就能看見的地方），當滑到低端時，一句文案“我是有底線的”，讓人感覺這個APP還有一點人性、俏皮可愛，同時明確的告訴用戶該頁面已經結束了。

可能是因爲支付寶是塊狀的結構，爲了避免發生誤觸，所以進行頁面切換時，並不支持左右滑動切，只能通過下方Tab導航進行切換。

八、總結

從對支付寶的首頁界面進行分析，可以看出，在進行交互設計時，不僅要重視用戶體驗，同時要兼顧商業需求（當然還有技術，但是這裏我不做表述），在兩者發生衝突時，要考慮兩者的優先級和重要性，綜合考慮，尋求一個最佳點。

比如歡迎界面的廣告，支付寶就永遠不能做，因爲這樣做下來用戶體驗會很差，可能會流失一大批用戶，但是支付寶可以在APP內接入廣告來實現商業需求，這就是考慮用戶體驗、商業需求之後做出的決定，從而設計的界面，是一個很好的案例。

很多時候，交互設計更像是做減法，知道哪些該減去，而不應該做加法，把所有功能胡亂疊加，導致用戶體驗極差。用戶體驗差的產品，商業價值一定是無法實現的。

當然，除了像12306這種強勢的APP……

各位同行大家好，我是一個熱愛交互設計、勵志進入阿里設計部的陽光大男孩。目前就讀於西南石油大學（成都校區）工業設計系（大三）。我從2018年9月份開始自學交互設計，由於是自學，學藝不精（內容僅是我個人理解），文章不免有錯誤之處，還望各位可以不吝指出。

寫文章目的有二：其一，對自己所學的東西進行總結並用於實踐；其二，發表出來，供大家批評指教，共同學習、進步。如果各位合適的有交互設計實習崗位推薦，歡迎留言哦！（渴望實踐的設計狗）

本文由 @交互設計汪 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議