網(wǎng)頁(yè)布局：支付寶 PK 財(cái)付通

中國(guó)互聯(lián)網(wǎng)最牛的兩家交互設(shè)計(jì)公司--淘寶和騰訊，不僅在支付業(yè)務(wù)上不斷的進(jìn)行著pk，交互界面和用戶體驗(yàn)上也是拼的不分上下。

首先客戶量：

支付寶：依托淘寶網(wǎng)，3億客戶

財(cái)付通：依托QQ，1.5億客戶

色彩方面：

共同點(diǎn):

Logo都用了藍(lán)色與橙色,

紅色警告、綠色安全、藍(lán)色超鏈接，這已經(jīng)成為兩家公司的共同點(diǎn)。

不同點(diǎn)：

支付寶：繼承了淘寶網(wǎng)的風(fēng)格，用了大量的暖色元素-橙色，其中導(dǎo)航條橙色漸變，banner大色塊暖色炫目圖。偏向iPhone風(fēng)格。

財(cái)付通：大膽創(chuàng)新的色彩，淺灰色系+暖色圖標(biāo)，明暗度對(duì)比，黑白陰陽(yáng)圖標(biāo)，表現(xiàn)豐富，把黑白灰運(yùn)用的淋漓盡致。偏向windows phone7 風(fēng)格。

windows phone7 風(fēng)格將打破iPhone式高光陰影界面局面，將成為接下來流行的趨勢(shì)。從這點(diǎn)上說，財(cái)付通更具有前瞻性。

視覺心理：

支付寶：大量的橙色,給人激動(dòng)、興奮

財(cái)付通：清新淡雅，給人冷靜、平穩(wěn)

做為第三方支付，冷靜更為合適。淘寶購(gòu)物的時(shí)候用暖色系，它可以激發(fā)購(gòu)物熱情，這無可厚非，然而付費(fèi)的時(shí)候，我的體會(huì)給人冷靜的顏色較佳，因?yàn)椴蝗菀壮鲥e(cuò)。

口號(hào)：

支付寶：“支付寶 知托付” 在頁(yè)面上沒有明顯口號(hào)，這樣不夠有效的提高品牌宣傳度。

財(cái)付通：“會(huì)生活 會(huì)支付”在logo旁，醒目表現(xiàn)，提高品牌宣傳度

圖標(biāo)：

支付寶

財(cái)付通

相同點(diǎn)：圖標(biāo)都是飽和度高且豐富細(xì)致

布局:

支付寶：

1、塊面多：頁(yè)面小塊面太多，容易讓用戶眼花繚亂。用戶群有個(gè)人服務(wù)和商家服務(wù)，雖然在頁(yè)面上有大塊的區(qū)分兩者，但是對(duì)用戶來說，還是有些混亂（請(qǐng)看下圖）；

2、過于突出廣告：用了高飽和度的圖片廣告在最重要位置，搶走了頁(yè)面重點(diǎn)，弱化了目的信息；

3、布局遺憾：我們希望在第一屏看到內(nèi)容是：個(gè)人和商家享受的服務(wù)，然而在一般的分辨率顯示器下，商家服務(wù)內(nèi)容在第二屏才能看到。

財(cái)付通：

1.     色塊大而少

2.     色彩飽和度低，對(duì)比支付寶，財(cái)付通頁(yè)面久看而不累

3.     布局清晰，區(qū)域內(nèi)容表達(dá)清晰易懂。我們很高興一屏看到所表達(dá)的內(nèi)容--登錄和服務(wù)內(nèi)容。

綜合：

中國(guó)最牛的兩家交互設(shè)計(jì)公司--淘寶和騰訊，一直在PK。這次我的交互體驗(yàn)的感覺，在色彩、布局等，財(cái)付通都略勝一籌。大概支付寶已經(jīng)看到了自己的不足，開始改版了。讓我驚喜的是，這次改版支付寶駕馭在財(cái)付通之上，做了很多的優(yōu)化，改版前和改版后簡(jiǎn)直判若兩“人”。

接下來介紹下改版后的支付寶。

支付寶的進(jìn)步

1、 用色：支付寶開始模仿財(cái)付通用色了，降低了導(dǎo)航條飽和度了，灰底大塊面，給人干凈而整潔的感覺。

2、 塊面：倒影效果用得少了，塊面的運(yùn)用多了，頁(yè)面更加清新淡雅。

3、 布局：第一屏展示最重要的賬戶與交易，且把最具創(chuàng)意的年度賬單放在醒目位置，當(dāng)然這也是我們?cè)诘谝黄料肟吹降?。?dǎo)航條保持原用橫向，F型展示形式。差別在于支付寶用了通欄的展示賬戶信息，更加強(qiáng)調(diào)重點(diǎn)。

支付寶這次改版很成功，優(yōu)于財(cái)付通。我想財(cái)付通一定不甘落后，改版之日很快就要到來。支付寶、財(cái)付通在用戶體驗(yàn)方面都在不停的努力著，有很多學(xué)習(xí)之處。我們能做的是：研究他們，學(xué)習(xí)他們。

原文地址：http://www.zcool.com.cn/article/ZMzAxNTI=.html   作者：ShiftBee