最近，國(guó)外設(shè)計(jì)師Jennifer Jhang對(duì)一些頂級(jí)的電子商務(wù)APP如耐克、蘋(píng)果、三星、Ebay、Banggood以及Best Buy等產(chǎn)品進(jìn)行了研究，并總結(jié)了 7 種主要的用戶界面模式。

1. 登錄：多個(gè)選項(xiàng)

登錄通常是第一個(gè)障礙，設(shè)置不當(dāng)會(huì)導(dǎo)致用戶花費(fèi)很多精力在上面。為了減少用戶登錄的難度，可以增加登錄的靈活性。

嘗試“懶人”登錄模式。這種情況下，應(yīng)該設(shè)計(jì)可選擇的登錄選項(xiàng)，比如可以讓用戶直達(dá)購(gòu)物車或者其他功能。比如允許用戶在創(chuàng)建賬戶之前，可以用游客的身份試用APP并體驗(yàn)其價(jià)值。

另外，考慮通過(guò)將登錄選項(xiàng)直接關(guān)聯(lián)外部賬戶如Facebook、谷歌(國(guó)內(nèi)的比如微博、微信等)就能注冊(cè)新的賬戶登錄。這讓用戶可以跳過(guò)填寫(xiě)注冊(cè)表單，而只需單擊 2 次即可登錄。

在Banggood的賬戶界面，你可以清楚的看到，想要訪問(wèn)“已查看”、“優(yōu)惠券”內(nèi)容就需要登錄，Banggood還在登錄時(shí)提供關(guān)聯(lián)外部賬戶選項(xiàng)。

2. 搜索：支持文本、圖像、聲音、條形碼

Pinterest CEO說(shuō)過(guò)：“我真的相信相機(jī)將成為下一個(gè)鍵盤(pán)。”

互聯(lián)網(wǎng)開(kāi)始于一個(gè)基于文本的搜索欄，但正在演變?yōu)榭梢圆扇∑渌喾N方式進(jìn)行搜索。比如采用一個(gè)文本和圖片方式的組合，無(wú)疑可以增強(qiáng)搜索交互。

通過(guò)視覺(jué)人工智能，圖像搜索開(kāi)辟了一個(gè)新的搜索方式。你不僅可以通過(guò)視覺(jué)線索識(shí)別產(chǎn)品，圖像搜索還可以讓你基于圖像上下文發(fā)現(xiàn)新想法。例如，如果你拍了一張西紅柿的照片，搜索結(jié)果可能會(huì)提供西紅柿炒蛋的食譜。

另外掃描條形碼可以減少出錯(cuò)的可能性，并能讓你直接找到產(chǎn)品。語(yǔ)音搜索增加了可訪問(wèn)性，并為忙于其它事務(wù)的用戶提供了便利。

3. 瀏覽：產(chǎn)品類別

除了直接搜索，用戶還參與瀏覽來(lái)查找商品。產(chǎn)品類別可以讓用戶更清晰有序的的方式瀏覽和發(fā)現(xiàn)產(chǎn)品。

產(chǎn)品類別通過(guò)以一種直觀的方式將產(chǎn)品進(jìn)行分組，從改善用戶搜索查找產(chǎn)品的能力。這就像走進(jìn)一家雜貨店，一眼望過(guò)去就是的我們想找的商品商品擺放的大概位置。

很多應(yīng)用程序有一個(gè)單獨(dú)的產(chǎn)品分類屏幕。其他的包括在“主頁(yè)”頁(yè)面上的產(chǎn)品類別部分。為了能向用戶提供更愉快的瀏覽體驗(yàn)，可以考慮將圖像或圖標(biāo)與類別標(biāo)簽結(jié)合起來(lái)。

下面，你將看到每個(gè)應(yīng)用程序處理產(chǎn)品類別顯示的不同方式。

4. 卡片的多樣性和一致性

卡片是用戶首先與APP交互的UI元素?？ㄆ亩鄻有院鸵恢滦杂兄跒閼?yīng)用創(chuàng)造一個(gè)讓人深刻的第一印象。

嘗試為不同類型的信息創(chuàng)建不同類型的卡片。這在視覺(jué)上區(qū)分了信息，并幫助用戶學(xué)習(xí)視覺(jué)語(yǔ)言。沒(méi)有多樣性，很難一眼就看出一張卡片代表了什么，因?yàn)樗鼈兛雌饋?lái)都一樣。

另外，也要努力使卡片在每個(gè)屏幕上保持一致。如果你有一個(gè)特定信息的卡片類型，試著讓它始終保持相同的設(shè)計(jì)風(fēng)格和尺寸大小等等，這樣它才容易識(shí)別。

蘋(píng)果商店使用了多樣性和一致性，創(chuàng)造了一個(gè)清晰的視覺(jué)詞匯。

5. 不同用戶階段采用不同的CTA(行動(dòng)呼吁)

本文開(kāi)頭提到的幾個(gè)APP中采用的CTA按鈕有幾種常見(jiàn)模式。通常在用戶不同瀏覽階段會(huì)有不同的CTA按鈕。

例如，Ebay有連續(xù)的“保存”、“添加到購(gòu)物車”和“現(xiàn)在購(gòu)買”按鈕。當(dāng)你想立即購(gòu)買某一特定物品時(shí)，“立即購(gòu)買”是很好的選擇。然而，當(dāng)用戶等待打折或比較商品時(shí)，“省錢(qián)”按鈕則是更好的選擇。“添加到購(gòu)物車”在用戶一次購(gòu)買少量物品時(shí)很有意義的。

而當(dāng)用戶還沒(méi)有完全準(zhǔn)備好購(gòu)買時(shí)，頁(yè)面只有一個(gè)“現(xiàn)在購(gòu)買”按鈕，那么無(wú)法解決他們的加購(gòu)需求。這可能會(huì)阻礙用戶的購(gòu)物體驗(yàn)。

6. 特定產(chǎn)品頁(yè)面的頂部標(biāo)簽

為了試圖包含購(gòu)買決策所需的所有細(xì)節(jié)，特定產(chǎn)品的詳情頁(yè)可能很長(zhǎng)。

根據(jù)尼爾森的一項(xiàng)研究，以下是一個(gè)產(chǎn)品頁(yè)面最受歡迎的功能列表：

必須擁有：產(chǎn)品名稱，圖像，價(jià)格，選項(xiàng)，可用性，添加到購(gòu)物車，描述

值得擁有的：評(píng)級(jí)或評(píng)論，附加圖片，視頻，縮放/平移，相關(guān)推薦，愿望列表

在頁(yè)面頂部放置標(biāo)簽是幫助用戶快速找到感興趣話題的一種方法。它們甚至在用戶開(kāi)始向下滾動(dòng)之前就顯示屏幕內(nèi)容。

標(biāo)簽應(yīng)該包含相同層級(jí)的相關(guān)內(nèi)容，同時(shí)應(yīng)該要可展開(kāi)更多詳情。在添加主題時(shí)，可以使用可滾動(dòng)的固定標(biāo)簽。

在這里，Samsung Shop和Chewy使用固定標(biāo)簽，而Drop使用可滾動(dòng)標(biāo)簽。

7.付款：漸進(jìn)式展示

漸進(jìn)式展示信息是指顯示適量的信息。它通過(guò)多屏展示分解信息，同時(shí)仍然揭示主要主題，從而降低了復(fù)雜性。

如果沒(méi)有做到這點(diǎn)，用戶可能會(huì)覺(jué)得結(jié)賬很乏味，甚至?xí)艞壻?gòu)物。面對(duì)一張?zhí)顫M信息的表格會(huì)讓人看著難受，看到同樣的表格被分成幾個(gè)部分，感覺(jué)上就更容易處理。還要記住，你需要在頁(yè)面的下半部分留出放置鍵盤(pán)的空間。

組織這種復(fù)雜性的一些方法是使用手風(fēng)琴效果、列表或進(jìn)度指示器。手風(fēng)琴垂直展開(kāi)，展開(kāi)列表就會(huì)展示一個(gè)屏幕頁(yè)面，顯示更多信息。進(jìn)度指示器顯示用戶在結(jié)賬步驟中的的進(jìn)程。

耐克似乎使用了手風(fēng)琴效果、chewy和使用列表模式，而Drop在結(jié)帳時(shí)使用了進(jìn)度指示器。

結(jié)論

通過(guò)研究當(dāng)前的APP，你可以學(xué)到很多東西。觀察產(chǎn)品設(shè)計(jì)決策背后的原因，我們可以找到新的見(jiàn)解。使用合適的UI模式創(chuàng)建一個(gè)從下載到結(jié)賬的無(wú)縫體驗(yàn)的APP。

注：文章由站長(zhǎng)之家編譯自u(píng)xdesign

文章來(lái)源：站長(zhǎng)之家

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