支付寶作為一個(gè)“簡(jiǎn)單、安全、快速”的支付工具，其交互設(shè)計(jì)與其他產(chǎn)品有何不同呢？不同的原因?yàn)楹危?

這篇文章是《10分鐘帶你看懂支付寶的交互設(shè)計(jì)》的（一）首頁(yè)篇，后面還會(huì)繼續(xù)更新。

下面進(jìn)入正文：

一、了解支付寶的產(chǎn)品定位

體驗(yàn)操作系統(tǒng)：手機(jī)iPhone6s；

支付寶版本號(hào)：10.1.58；

在開(kāi)始產(chǎn)品分析前，我們先來(lái)看看支付寶的產(chǎn)品定位。

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

圖1  產(chǎn)品定位

從百度上支付寶的網(wǎng)頁(yè)介紹（圖2）和百度百科（圖3）的介紹中，可以看出支付寶的產(chǎn)品定位為：致力于為廣大用戶(hù)提供“簡(jiǎn)單、安全、快速”的支付解決方案。

那么支付寶的產(chǎn)品定位可分解為：

• 使用人群：廣大用戶(hù)；

• 主要功能：支付；

• 產(chǎn)品特色：簡(jiǎn)單、安全、快捷。

圖2  支付寶網(wǎng)頁(yè)介紹

圖3  百度百科介紹

二、整體分析

當(dāng)用戶(hù)打開(kāi)支付寶，看到的第一個(gè)界面，就是支付寶的歡迎界面，支付寶的歡迎界面很有特點(diǎn)——停留時(shí)間很短（因?yàn)闀r(shí)間太短，導(dǎo)致我無(wú)法成功截屏，所以這里就不放圖了）。為什么支付寶的歡迎界面從來(lái)不像其它APP（如抖音等）一樣會(huì)有一個(gè)廣告呢（如圖4）？

這與我們之前提到的支付寶的產(chǎn)品定位有關(guān)，支付寶作為一個(gè)“簡(jiǎn)單、安全、快速”的支付工具。當(dāng)用戶(hù)打開(kāi)它時(shí)，多數(shù)場(chǎng)景下，都是用于支付，作為一個(gè)以“快速”為特色的工具類(lèi)產(chǎn)品，就限制了它不能在歡迎界面做太長(zhǎng)的停留，也不能做廣告（盡管這種廣告的收入很大），因?yàn)檫@樣會(huì)造成用戶(hù)極大的不舒適。

舉個(gè)例子，當(dāng)你早上急急忙忙的起了床趕去教室上課，在食堂買(mǎi)早餐時(shí)，打開(kāi)支付寶付款，（原本你的內(nèi)心就很著急）卻還要像其它APP一樣看一段廣告！我想你此時(shí)一定會(huì)默默的罵馬云，并且心里會(huì)慢慢開(kāi)始對(duì)支付寶產(chǎn)生一種厭惡的情緒。

如果你有一天看見(jiàn)支付寶歡迎界面都開(kāi)始做廣告的時(shí)候，請(qǐng)相信我，支付寶一定活不到102歲那一天！

圖4  抖音歡迎界面的廣告

任何一個(gè)成功的APP，用戶(hù)進(jìn)去見(jiàn)到的第一個(gè)界面，一定是該產(chǎn)品最想讓你看到的界面，也是存放產(chǎn)品主要功能的界面。在支付寶中，它的首頁(yè)就是最主要的界面。

從整個(gè)支付寶APP的布局來(lái)看，底部采用五個(gè)Tab導(dǎo)航，分別是首頁(yè)、財(cái)富、口碑、朋友、我的，當(dāng)處于相應(yīng)界面時(shí)，底部導(dǎo)航會(huì)變成支付寶的品牌“藍(lán)”（圖5所示），這個(gè)設(shè)計(jì)有三個(gè)作用：

①在視覺(jué)上與其它導(dǎo)航相區(qū)別，表示用戶(hù)當(dāng)前所處頁(yè)面；

②利用品牌的顏色加強(qiáng)用戶(hù)對(duì)品牌的認(rèn)知；

③增強(qiáng)APP的界面一致性。

圖5  支付寶底部導(dǎo)航

在首頁(yè)這一界面，從整體看，總共被劃分為了六個(gè)板塊，從上至下分別是核心功能區(qū)、擴(kuò)展功能區(qū)、信息通知區(qū)、活動(dòng)展示區(qū)、其它產(chǎn)品區(qū)、導(dǎo)航欄（如圖6）。

整個(gè)頁(yè)面布局清晰，因?yàn)槭且詨K狀來(lái)劃分層次，可擴(kuò)展性也比較強(qiáng)（可以根據(jù)需要?jiǎng)澐猪?yè)面層次，同時(shí)界面改變也不會(huì)太大，不會(huì)影響用戶(hù)的正常使用）。

在未來(lái)，如果支付寶需要發(fā)展其它重量級(jí)產(chǎn)品，就可以很方便的加入首頁(yè)。（這里教大家一個(gè)方法——如何看出一個(gè)界面的模塊劃分，只需要把眼睛瞇起來(lái)，不去關(guān)注內(nèi)容，而是關(guān)注框架，就可以輕易的看見(jiàn)該界面的層次結(jié)構(gòu)了。）

圖6  支付寶首頁(yè)層次劃分

三、核心功能區(qū)

我們按照從上到下的順序來(lái)分析支付寶的首頁(yè)。

核心功能區(qū)位于頁(yè)面頂端，是視覺(jué)焦點(diǎn)，又有一個(gè)支付寶的品牌“藍(lán)”作為底色，一下就成為了視覺(jué)重心，很顯然這個(gè)位置應(yīng)該存放支付寶的主要功能，也就是支付功能。

支付寶的支付功能包括哪些呢？限于技術(shù)，目前支付寶主要通過(guò)識(shí)別二維碼進(jìn)行支付，所以掃一掃自然就是最常用的功能，所以放在第一個(gè)，付錢(qián)、收錢(qián)隨后，敢預(yù)言，不管以后支付寶的版本怎么改，他的支付功能始終位于首頁(yè)，而且是首頁(yè)的視覺(jué)焦點(diǎn)。為什么此處卡包也置于頁(yè)面最顯眼的位置呢？

與支付寶的很多活動(dòng)有關(guān)，因?yàn)楹芏嗌虡I(yè)活動(dòng)都靠贈(zèng)送各類(lèi)卡卷來(lái)實(shí)現(xiàn)（也就是所謂的商業(yè)需求）。將搜索框置于頂層，看似搶了核心功能的風(fēng)頭，其實(shí)不然，設(shè)計(jì)師巧妙的在這里進(jìn)行了處理，首先將搜索框的大小變?。ǖ遣挥绊懹脩?hù)的正常點(diǎn)擊）,然后將掃一掃那一欄的圖標(biāo)變大，將字號(hào)也變大，視覺(jué)重心依然回到了掃一掃那一欄。但是為什么會(huì)將搜索框置于如此明顯的位置呢？

首先隨著支付寶的功能越來(lái)越多，由于頁(yè)面的第一層級(jí)裝不下，就會(huì)根據(jù)優(yōu)先級(jí)進(jìn)行排序，將優(yōu)先級(jí)靠后的功能放入后一層級(jí)，因此很多功能的層級(jí)就會(huì)比較深。有了搜索框之后，用戶(hù)就可以通過(guò)首頁(yè)的搜索，快速進(jìn)入用戶(hù)需要的功能（用戶(hù)需求），另外一方面，又可以在搜索框進(jìn)行商業(yè)推廣（商業(yè)需求）。

將通訊錄也置于顯眼位置，是支付寶對(duì)于社交功能的探索，從此處可以看出，支付寶對(duì)于社交功能的渴望。加號(hào)打開(kāi)是掃一掃、收錢(qián)、乘車(chē)碼、智能管理，將掃一掃置于該層級(jí)，可能是為了方便單手操作的用戶(hù)，這樣不管哪只手操作，都能方便的進(jìn)行使用。

四、擴(kuò)展功能區(qū)

擴(kuò)展功能區(qū)，也就是支付寶擴(kuò)展業(yè)務(wù)或第三方合作方入口，4*3的設(shè)計(jì)，與上方掃一掃、付錢(qián)、收錢(qián)、卡包對(duì)齊，增加了整個(gè)頁(yè)面的整齊度，該區(qū)域的圖標(biāo)、字號(hào)，都相應(yīng)的減弱，避免喧賓奪主。

大家注意看(圖7)，最后一個(gè)圖標(biāo)是更多，擴(kuò)展性極強(qiáng)，只要有第三方想和支付寶合作，馬云只需要增加一個(gè)廣告位，然后笑著用自己的支付寶收錢(qián)就好了（我猜后期版本，支付寶會(huì)把“更多”這個(gè)按鈕做的比其它按鈕更搶眼一點(diǎn)，因?yàn)檫@是一個(gè)很大的流量入口，能夠滿(mǎn)足很多商業(yè)需求）。同時(shí)，該區(qū)域還有一個(gè)很好的交互方式，當(dāng)用戶(hù)進(jìn)行長(zhǎng)按圖標(biāo)，就可以進(jìn)行調(diào)節(jié)，給了用戶(hù)自主權(quán)。

圖7  首頁(yè)—更多

五、信息通知區(qū)

在信息通知這一欄，當(dāng)有新的信息時(shí)，左邊的螞蟻會(huì)拿著一個(gè)信封微微擺動(dòng)，不注意根本看不見(jiàn)，但是當(dāng)你觀察到了，你就會(huì)覺(jué)得好可愛(ài)，支付寶好用心啊，心里默默就會(huì)給支付寶一個(gè)好評(píng)，這就是情感化體驗(yàn)，給用戶(hù)一個(gè)小驚喜。同時(shí)右邊有一個(gè)小紅點(diǎn)，會(huì)誘惑你去點(diǎn)擊，去閱讀信息，當(dāng)你閱讀了信息之后，就只有螞蟻的觸須在動(dòng)，信封就消失了（見(jiàn)圖8）。

圖8  信息通知區(qū)

六、活動(dòng)展示區(qū)

在活動(dòng)展示欄（圖9），雖然這個(gè)條目已經(jīng)處于視覺(jué)中心以外，但是，聰明的設(shè)計(jì)師絕不會(huì)浪費(fèi)任何一個(gè)可以利用的界面，于是設(shè)計(jì)師就利用輪播的圖片來(lái)吸引你的眼球，輪播的好處在于，一方面可以播放多個(gè)廣告（擴(kuò)展性也比較好），另外一方面運(yùn)動(dòng)的物體可以吸引用戶(hù)的眼球（這個(gè)原理源于在古代我們的祖先為了安全，總是會(huì)關(guān)注到運(yùn)動(dòng)的物體，這也就是為什么大多數(shù)網(wǎng)頁(yè)中的廣告都采用動(dòng)畫(huà)的形式，就是為了吸引你的眼球，去點(diǎn)擊它。

圖9  活動(dòng)展示欄

七、其它產(chǎn)品區(qū)

其它產(chǎn)品區(qū)，就是一些活動(dòng)和商業(yè)推廣的入口（這就純屬于商業(yè)需求，為別的產(chǎn)品引流）。

說(shuō)一下這里的設(shè)計(jì)吧，這里的“惠支付”字號(hào)比上面都還要大，是不是會(huì)搶了風(fēng)頭，答案是——不會(huì)，因?yàn)檫@已經(jīng)是頁(yè)面底端了，如果再不通過(guò)這種方式來(lái)強(qiáng)調(diào)這個(gè)版塊，可能用戶(hù)根本就看不見(jiàn)了。

同時(shí)，設(shè)計(jì)師利用親密性原理——在視覺(jué)上挨得近的我們會(huì)認(rèn)為是一組，而沒(méi)有采用實(shí)線來(lái)分割，使整個(gè)界面簡(jiǎn)約了不少（圖10）。

圖10  “惠支付”

在首頁(yè)，為了讓用戶(hù)知道下面還有內(nèi)容，故意漏出一半的內(nèi)容，告訴用戶(hù)下面還有內(nèi)容，同時(shí)，當(dāng)整個(gè)頁(yè)面下拉時(shí)，掃一掃、付錢(qián)、收錢(qián)、搜索，加號(hào)的圖標(biāo)就會(huì)置于頁(yè)面上方，驗(yàn)證了我之前分析的一些結(jié)論（核心功能始終置頂顯示、始終放在用戶(hù)一眼就能看見(jiàn)的地方），當(dāng)滑到低端時(shí)，一句文案“我是有底線的”，讓人感覺(jué)這個(gè)APP還有一點(diǎn)人性、俏皮可愛(ài)，同時(shí)明確的告訴用戶(hù)該頁(yè)面已經(jīng)結(jié)束了。

可能是因?yàn)橹Ц秾毷菈K狀的結(jié)構(gòu)，為了避免發(fā)生誤觸，所以進(jìn)行頁(yè)面切換時(shí)，并不支持左右滑動(dòng)切，只能通過(guò)下方Tab導(dǎo)航進(jìn)行切換。

八、總結(jié)

從對(duì)支付寶的首頁(yè)界面進(jìn)行分析，可以看出，在進(jìn)行交互設(shè)計(jì)時(shí)，不僅要重視用戶(hù)體驗(yàn)，同時(shí)要兼顧商業(yè)需求（當(dāng)然還有技術(shù)，但是這里我不做表述），在兩者發(fā)生沖突時(shí)，要考慮兩者的優(yōu)先級(jí)和重要性，綜合考慮，尋求一個(gè)最佳點(diǎn)。

比如歡迎界面的廣告，支付寶就永遠(yuǎn)不能做，因?yàn)檫@樣做下來(lái)用戶(hù)體驗(yàn)會(huì)很差，可能會(huì)流失一大批用戶(hù)，但是支付寶可以在APP內(nèi)接入廣告來(lái)實(shí)現(xiàn)商業(yè)需求，這就是考慮用戶(hù)體驗(yàn)、商業(yè)需求之后做出的決定，從而設(shè)計(jì)的界面，是一個(gè)很好的案例。

很多時(shí)候，交互設(shè)計(jì)更像是做減法，知道哪些該減去，而不應(yīng)該做加法，把所有功能胡亂疊加，導(dǎo)致用戶(hù)體驗(yàn)極差。用戶(hù)體驗(yàn)差的產(chǎn)品，商業(yè)價(jià)值一定是無(wú)法實(shí)現(xiàn)的。

當(dāng)然，除了像12306這種強(qiáng)勢(shì)的APP……

文章來(lái)源：人人都是產(chǎn)品經(jīng)理     作者：交互設(shè)計(jì)汪

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)