最近，國外設計師Jennifer Jhang對一些頂級的電子商務APP如耐克、蘋果、三星、Ebay、Banggood以及Best Buy等產品進行了研究，并總結了 7 種主要的用戶界面模式。
1. 登錄：多個選項
登錄通常是第一個障礙，設置不當會導致用戶花費很多精力在上面。為了減少用戶登錄的難度，可以增加登錄的靈活性。
嘗試“懶人”登錄模式。這種情況下，應該設計可選擇的登錄選項，比如可以讓用戶直達購物車或者其他功能。比如允許用戶在創建賬戶之前，可以用游客的身份試用APP并體驗其價值。
另外，考慮通過將登錄選項直接關聯外部賬戶如Facebook、谷歌(國內的比如微博、微信等)就能注冊新的賬戶登錄。這讓用戶可以跳過填寫注冊表單，而只需單擊 2 次即可登錄。
在Banggood的賬戶界面，你可以清楚的看到，想要訪問“已查看”、“優惠券”內容就需要登錄，Banggood還在登錄時提供關聯外部賬戶選項。
2. 搜索：支持文本、圖像、聲音、條形碼
Pinterest CEO說過：“我真的相信相機將成為下一個鍵盤。”
互聯網開始于一個基于文本的搜索欄，但正在演變為可以采取其他多種方式進行搜索。比如采用一個文本和圖片方式的組合，無疑可以增強搜索交互。
通過視覺人工智能，圖像搜索開辟了一個新的搜索方式。你不僅可以通過視覺線索識別產品，圖像搜索還可以讓你基于圖像上下文發現新想法。例如，如果你拍了一張西紅柿的照片，搜索結果可能會提供西紅柿炒蛋的食譜。
另外掃描條形碼可以減少出錯的可能性，并能讓你直接找到產品。語音搜索增加了可訪問性，并為忙于其它事務的用戶提供了便利。
3. 瀏覽：產品類別
除了直接搜索，用戶還參與瀏覽來查找商品。產品類別可以讓用戶更清晰有序的的方式瀏覽和發現產品。
產品類別通過以一種直觀的方式將產品進行分組，從改善用戶搜索查找產品的能力。這就像走進一家雜貨店，一眼望過去就是的我們想找的商品商品擺放的大概位置。
很多應用程序有一個單獨的產品分類屏幕。其他的包括在“主頁”頁面上的產品類別部分。為了能向用戶提供更愉快的瀏覽體驗，可以考慮將圖像或圖標與類別標簽結合起來。
下面，你將看到每個應用程序處理產品類別顯示的不同方式。
4. 卡片的多樣性和一致性
卡片是用戶首先與APP交互的UI元素?？ㄆ亩鄻有院鸵恢滦杂兄跒閼脛撛煲粋€讓人深刻的第一印象。
嘗試為不同類型的信息創建不同類型的卡片。這在視覺上區分了信息，并幫助用戶學習視覺語言。沒有多樣性，很難一眼就看出一張卡片代表了什么，因為它們看起來都一樣。
另外，也要努力使卡片在每個屏幕上保持一致。如果你有一個特定信息的卡片類型，試著讓它始終保持相同的設計風格和尺寸大小等等，這樣它才容易識別。
蘋果商店使用了多樣性和一致性，創造了一個清晰的視覺詞匯。
5. 不同用戶階段采用不同的CTA(行動呼吁)
本文開頭提到的幾個APP中采用的CTA按鈕有幾種常見模式。通常在用戶不同瀏覽階段會有不同的CTA按鈕。
例如，Ebay有連續的“保存”、“添加到購物車”和“現在購買”按鈕。當你想立即購買某一特定物品時，“立即購買”是很好的選擇。然而，當用戶等待打折或比較商品時，“省錢”按鈕則是更好的選擇。“添加到購物車”在用戶一次購買少量物品時很有意義的。
而當用戶還沒有完全準備好購買時，頁面只有一個“現在購買”按鈕，那么無法解決他們的加購需求。這可能會阻礙用戶的購物體驗。
6. 特定產品頁面的頂部標簽
為了試圖包含購買決策所需的所有細節，特定產品的詳情頁可能很長。
根據尼爾森的一項研究，以下是一個產品頁面最受歡迎的功能列表：
必須擁有：產品名稱，圖像，價格，選項，可用性，添加到購物車，描述
值得擁有的：評級或評論，附加圖片，視頻，縮放/平移，相關推薦，愿望列表
在頁面頂部放置標簽是幫助用戶快速找到感興趣話題的一種方法。它們甚至在用戶開始向下滾動之前就顯示屏幕內容。
標簽應該包含相同層級的相關內容，同時應該要可展開更多詳情。在添加主題時，可以使用可滾動的固定標簽。
在這里，Samsung Shop和Chewy使用固定標簽，而Drop使用可滾動標簽。
7.付款：漸進式展示
漸進式展示信息是指顯示適量的信息。它通過多屏展示分解信息，同時仍然揭示主要主題，從而降低了復雜性。
如果沒有做到這點，用戶可能會覺得結賬很乏味，甚至會放棄購物。面對一張填滿信息的表格會讓人看著難受，看到同樣的表格被分成幾個部分，感覺上就更容易處理。還要記住，你需要在頁面的下半部分留出放置鍵盤的空間。
組織這種復雜性的一些方法是使用手風琴效果、列表或進度指示器。手風琴垂直展開，展開列表就會展示一個屏幕頁面，顯示更多信息。進度指示器顯示用戶在結賬步驟中的的進程。
耐克似乎使用了手風琴效果、chewy和使用列表模式，而Drop在結帳時使用了進度指示器。
結論
通過研究當前的APP，你可以學到很多東西。觀察產品設計決策背后的原因，我們可以找到新的見解。使用合適的UI模式創建一個從下載到結賬的無縫體驗的APP。
注：文章由站長之家編譯自uxdesign
文章來源：站長之家
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務