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

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

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

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

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

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

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

Pinterest CEO說過：“我真的相信相機(jī)將成為下一個鍵盤?！?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文開頭提到的幾個APP中采用的CTA按鈕有幾種常見模式。通常在用戶不同瀏覽階段會有不同的CTA按鈕。

例如，Ebay有連續(xù)的“保存”、“添加到購物車”和“現(xiàn)在購買”按鈕。當(dāng)你想立即購買某一特定物品時，“立即購買”是很好的選擇。然而，當(dāng)用戶等待打折或比較商品時，“省錢”按鈕則是更好的選擇?！疤砑拥劫徫镘嚒痹谟脩粢淮钨徺I少量物品時很有意義的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

注：文章由站長之家編譯自uxdesign，原文標(biāo)題《7 UI patterns in e-commerce apps》。

手機(jī)點(diǎn)擊關(guān)注站長之家旗下公眾號【站長視界，ID：chinazshijie】，可閱讀更多精彩創(chuàng)業(yè)案例，讓你收獲新的賺錢思路。

（舉報）