<rt id="mie0q"><optgroup id="mie0q"></optgroup></rt>
<acronym id="mie0q"><xmp id="mie0q">
<acronym id="mie0q"></acronym>
<option id="mie0q"></option>
當前位置:100EC>電商金融>分析:10分鐘帶你看懂支付寶的交互設計
分析:10分鐘帶你看懂支付寶的交互設計
發布時間:2019年03月12日 10:22:37

(網經社訊)支付寶作為一個“簡單、安全、快速”的支付工具,其交互設計與其他產品有何不同呢?不同的原因為何?


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

下面進入正文:

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

體驗操作系統:手機iPhone6s;

支付寶版本號:10.1.58;

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

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖1  產品定位

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

那么支付寶的產品定位可分解為:

  • 使用人群:廣大用戶;

  • 主要功能:支付;

  • 產品特色:簡單、安全、快捷。


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖2  支付寶網頁介紹


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖3  百度百科介紹

二、整體分析

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

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

舉個例子,當你早上急急忙忙的起了床趕去教室上課,在食堂買早餐時,打開支付寶付款,(原本你的內心就很著急)卻還要像其它APP一樣看一段廣告!我想你此時一定會默默的罵馬云,并且心里會慢慢開始對支付寶產生一種厭惡的情緒。

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖4  抖音歡迎界面的廣告

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

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

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

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

③增強APP的界面一致性。


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖5  支付寶底部導航

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

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

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖6  支付寶首頁層次劃分

三、核心功能區

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

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

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

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

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

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

四、擴展功能區

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

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖7  首頁—更多

五、信息通知區

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖8  信息通知區

六、活動展示區

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖9  活動展示欄

七、其它產品區

其它產品區,就是一些活動和商業推廣的入口(這就純屬于商業需求,為別的產品引流)。

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

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


10分鐘帶你看懂支付寶的交互設計(首頁篇)


圖10  “惠支付”

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

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

八、總結

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

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

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

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

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

寫文章目的有二:其一,對自己所學的東西進行總結并用于實踐;其二,發表出來,供大家批評指教,共同學習、進步。如果各位合適的有交互設計實習崗位推薦,歡迎留言哦!( 來源:人人都是產品經理 文/交互設計汪 編選:網經社-電子商務研究中心

今年是《電子商務法》實施的第一個315“國際消費者權益日”。為此,網經社旗下電子商務消費糾紛調解平臺發起“‘律’動網購,我在行動!”的“3·15”主題活動,為期一月。通過報告發布、榜單評級、案例披露、投訴曝光、綠色通道、法律援助、消費預警、專題聚焦、滾動播報、全媒體矩陣和3000+注冊媒體記者通報等多種形式,對網絡消費維權難點、熱點和相關平臺點名鞭策。平臺“綠色通道”入駐持續開放中,包括京東、蘇寧易購、拼多多、唯品會、國美、網易考拉和嚴選、寶寶樹美囤媽媽、蜜芽、貝貝、亞馬遜中國、聚美優品、途虎養車、蘑菇街、美麗說、當當、綠森數碼、豐趣海淘、有贊、云集、楚楚推、寺庫、本來生活、i百聯、返利網、美團點評、飛豬、阿卡索外教網、攜程、去哪兒、藝龍、驢媽媽、同程旅游、分期樂在內的36家電商平臺已搶先入駐。

股票名稱/代碼
$/總資產
$/營收
$/凈利潤
  • 阿里巴巴BABA.US
  • 1092億
  • 385億
  • 94.5億
  • 京東JD.US
  • 282.6億
  • 557.4億
  • 7.7億
  • 唯品會VIPS.US
  • 583.2億
  • 112.2億
  • 0.4億
  • 寶尊電商BZUN.US
  • 4.60億
  • 6.40億
  • 0.3億
  • 聚美優品JMEI.US
  • 7.60億
  • 8.90億
  • -0.06億
  • 寺庫SECO.US
  • 3.60億
  • 5.80億
  • 0.03億
黑龙江11选5技巧