譯者注：2012年，各大電商巨頭以及品牌商的移動終端訂單量都呈現出迅猛增長的態勢。人人已經看見，移動電商已經來了。那么設計優良的移動購物體驗必將能爭奪更多的用戶，提升銷售額。本文較為全面的介紹了移動購物流程中各環節的交互設計模式，供大家參考學習。

　　原文地址：http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/

　　現在越來越多的人使用智能手機來替代臺式電腦購物和購買。隨著更多的人從電腦轉移到移動設備上購買產品和服務，網站創建者可以使用一些設計模式以幫助快速啟動一個移動電商項目。

　　良好的移動購物體驗是很重要的。最近的研究發現，67%的顧客愿意在設計體驗友好的移動端進行購物。

　　設計模式的好處在于告訴你其他設計師是如何解決相似的問題的，而不需要你重新發明輪子。這樣你設計的網站可以滿足人們因使用其他網站而產生的預期，并且可以在這些設計模式的基礎上考慮更好的設計方案。

　　本文主要專注于為移動電子商務功能設計的模式和方法，包括以下幾個方面：

　　　主頁

　　　　全站導航

　　搜索建議

　　搜索結果

　　搜索過濾和排序

　　產品頁面

　　圖片陳列

　　購物車

　　使用已有賬戶/訪客 結算

　　表單

　　本文案例的界面主要選自大型百貨零售商的移動瀏覽器版本，大型零售商由于產品品類豐富更加需要深思熟慮的設計方案，比如搜索及搜索結果的過濾與排序。 這些設計模式同樣適用于本地應用。

　　　主頁

　　在移動端訪問時，主頁的首要作用是幫助用戶找到他們想要的東西。常見的模式有為促銷設計的單列布局以及單欄的鏈接列表，鏈接到網站的特色區域或產品目錄頁。主頁一般還包含關鍵詞查詢、商店位置指引、促銷郵件及忠誠度計劃的注冊表。

　　Amazon 和 Macy’s 均混合使用了促銷元素及列表菜單。

　　Target促銷區域比簡單的列表占用了更多的屏幕區域但也因此有更強的視覺沖擊力。Threadless 使用了在本地應用中更常見的儀表盤設計模式。

　　如果顧客訪問網站的目的是為了快速比價，那么簡單的列表模式和搜索功能會更合適。如果他們是想找促銷，Target的設計方案會更好。究竟采用哪種方案則需要你進行數據挖掘，分析消費者使用你的網站時的行為。

　　全站導航

　　除了使用主頁作為主要的導航中心外，許多網站亦會在其它頁面的頂部放置導航菜單。這樣顧客不必回到主頁就可以導航至別的頁面。

　　Lowe’s 的全站導航菜單每一個選項是一個icon。Best Buy的導航采用兩欄布局，選項是按鈕的形式。Lowe’s的菜單覆蓋在內容上，而Best Buy的下拉菜單推動內容相應下移。

　　Macy’s 的全站導航菜單包含了二級子菜單的選項。CVS的兩欄菜單中每個選項都配了一個icon。這兩個案例的菜單均是置于頁面頂部。

　　上面幾個案例展示了幾種全站導航的方式。Lowe’s 的設計很簡單，并且icon加了視覺效果，內容區置灰融入背景中可以讓用戶更專注于導航菜單，即當前的任務上。而CVS兩欄的icon設計則顯得比較凌亂，觸摸目標之間過于接近也會帶來許多可用性問題。

　　搜索建議

　　搜索建議又稱“輸入提示”或“自動完成”，指當用戶輸入字符時顯示可能的搜索目標。對于常見的、名稱較長的搜索目標來說，自動完成可以大大方便顧客。但也有一個問題，虛擬鍵盤容易誤操作從而使建議的搜索目標不準確。顯示常見的“正確”目標會非常有效。同時也可以考慮使用改進的自動完成模式來減少顧客的輸入，用最有效的方式利用較慢的移動帶寬。

　　在Office Depot’s Website 的搜索框中輸入“d-r-a-f”有幾種可能的搜索目標。而錯誤輸入“d-r-a-g”導致非用戶期望的搜索目標。在使用虛擬鍵時不小心輸入目標相鄰的字母是很常見需要解決的問題。

　　如果設計師無法改善用戶誤輸入的問題，那么最好提供其它的方式讓用戶可以從錯誤的搜索結果到達目標產品頁面，如產品目錄的下拉列表或是頂級類別的全站導航。網站經理也可以微調改進搜索功能，比如為“dragt”顯示“draft”的建議搜索。

　　搜索結果

　　兩種移動電商網站常見的設計模式：表格和網格模式。表格模式每一行展示商品的縮略圖及基本的相關信息如商品名和價格。網格模式則使用更大的圖片更少的信息。有的網站允許用戶在兩種模式中切換。

　　Zappos 采用網格的形式展示較大的商品圖，對于展示如鞋這類的商品是一種不錯的方式。Walgreens 的表格模式則突出了購物和查找商品的功能。

　　OfficeMax 在大的類目“paper”下讓用戶選擇更細的子分類，然后呈現相應的子分類的商品結果。如果像“Scissors”這類較少子分類的商品則直接呈現商品結果。

　　如果顧客不清楚要找的目標在復雜的類目層級中屬于哪一個類，這種模式就會有問題。在OfficeMax例子中，如果顧客要找8.5*11英寸的打印紙，就有可能屬于復制&多用途紙或激光打印紙。一個較好的解決辦法就是在每個過濾條件下列出對應的子分類，如顏色、尺寸。每4-6周找一些典型用戶做測試看看最常見的搜索詞和最暢銷產品的情況，你就可以大概判斷哪種解決方案更好。A/B測試同樣可以判斷哪種方案可以帶來更多的顧客及更高的購買轉化率。

　　Gap’s 默認用表格模式展示搜索結果，也提供以網格的模式查看結果。展示結果的同時在搜過框保留搜索詞。

　　如果在Gap輸入“men’s shirts”則找不到搜索結果，亦沒有導向“men’s t-shirts”搜索結果的鏈接。改進的辦法比如Gap可以增加詢問語句“您是想找?”，Google則處理的很好，列出可能的搜索目標“men’s t-shirts”并且呈現相關的搜索結果。

　　搜索排序

　　通過不同的指標將搜索結果排序可以幫助顧客組織信息，如價格排序，用戶評分排序。常見的排序界面模式有按鈕及選擇菜單。

　　Walmart提供三個篩選的按鈕。Seras相似，采用的分段控件。

　　J.C.Penney采用定制風格的選擇菜單，而Eddie Bauer則用瀏覽器默認的選擇菜單。兩者均調用了瀏覽器自帶的選擇菜單控件。

　　Walmart的三個按鈕的大小及距離保證了目標較好的可點擊性，盡管這使得Walmart只能提供三個選擇而Sears有四個。Sears的 “all”選項，如果顧客在排序結果中找不到想要的目標，則可以快速回到最初的搜索結果頁。絕大多數的瀏覽器都支持選擇菜單控件，而且選擇菜單可以容納更多的選項，不過也占用更多的空間，因此需要做測試來權衡和評估這些設計模式的優缺點。

　　搜多過濾

　　過濾允許顧客通過不同的維度來縮小搜索結果的范圍，如顏色，品牌和尺寸。過濾功能通常給出帶有數值的不同維度。常見的過濾界面模式有選擇菜單，下拉列表及可折疊的面板。選擇某個維度的一個或多個數值后就可以過濾結果了。然而如果過濾維度過多，選擇的數值過多就有可能導致搜索失敗及較高的交互成本。

　　CVS的過濾使用選擇菜單，選擇相應選項后會馬上更新搜索結果。J.C.Penney使用下拉列表并且標明對應每項過濾維度的結果數量，還允許同時選擇多項維度，而要權衡的是顧客要多進行一次點擊“apply”。

　　Kohl’s使用可折疊的面板(手風琴式面板)來組織篩選的維度，每個面板展開是維度的不同數值選擇。Threadless則將所有維度的數值直接呈現在一個界面中。每選一個數值，搜索結果即時更新。

　　直接呈現所有維度及數值可以讓顧客一目了然有哪些篩選的數值選擇。采用這種模式或可折疊的面板模式取決于你產品的篩選維度的多少。如果產品的篩選維度多種多樣，非常豐富，則需要不斷嘗試來找到最好的設計方案。你可以優化那些顧客最經常使用篩選功能的產品的界面。

　　產品頁

　　產品頁是電商網站詳細展示商品的頁面。它們往往包含不止一種設計模式，如標簽，可折疊的面板及圖片陳列。兩種常見的產品頁形式，一種是包含所有詳細信息的長頁面，一種是嵌有標簽或可折疊面板多模塊頁面，讓用戶根據需要展開不同的信息。

　　Samsung和Dell均采用漸進式的方式呈現商品，這類商品通常包含大量的詳細信息。Samsung使用可折疊的面板，Dell使用標簽。

　　Cobela’s和office Depot均是一個長頁面來展示商品所有信息。這種模式使用時需要經常上下滾動頁面獲取信息，但是免去了切換標簽和面板的麻煩。采用哪種模式取決于產品的信息量大小以及如何有效的組織信息模塊。

　　長頁面比邏輯模塊分割的頁面需要更多的頁面滾動，并且顧客需要花費更多努力找到他們需要的某條具體信息。在我做的可用性測試中，兩種模式都有用戶偏愛，但是很明顯用戶使用分成邏輯模塊的頁面更容易。如果使用邏輯分塊的頁面，確保用戶點擊標簽或面板后可以快速加載相應信息。

　　最容易的方法就是一次性加載所有產品頁的信息，包括隱藏在標簽和面板中的信息，以便用戶切換時可以馬上顯示。這種方法好處是用戶斷網時仍然可以繼續瀏覽，而缺點是不管是否需要，一次性要加載所有的信息，這會增加你的服務器負擔，并且消耗用戶更多的數據流量。因此你需要權衡。

　　　圖片陳列

　　圖片陳列對于服飾及消費類電子產品來說尤為重要。你也許不需要從三個不同的角度看一個扳手，但是對于衣服、鞋類和高端的智能手機來說圖片很重要。常見的設計模式有可滑動的陳列，雙擊放大及縮略圖。

　　Palyess使用可滑動的陳列從不同的角度展示商品，用戶也可以雙擊放大查看細節。

　　Payless的雙擊放大在屏幕上保持幾秒后消失以保證用戶有足夠的時間理解和注意到如何操作。放大查看細節的功能對于服飾和鞋類商品很重要。

　　Dockers(左上)采用圖片陳列的方式，雙擊放大查看細節，同時用戶可以切換不同的顏色。Levi’s(右上)類似的，多了可選擇的不同視角的縮略圖。Dockers切換不同顏色時整個頁面重新刷新，而Levi’s 則不是。

　　Levi’s在用戶切換不同顏色時保持大部分內容不刷新，乍看會覺得這是更好的用戶體驗，但實際上，在同一天的同一時刻對比來看，Docker的全頁刷新加載要快的多。Levi’s 加載過慢可能是由于除了主圖外還要加載刷新五張縮略圖，或者有其它的原因如網絡塞車。每種模式都有優劣勢。

　　Samsung 和Dell均使用圖片陳列方式展示商品。Samsung在可折疊面板中嵌套使用，而Dell則使用一個單獨的頁面展示。

　　Samsung的方式似乎更友好，減少了頁面切換。Samsung和Dell均使用的高分辨率的圖片，圖片質量對于用戶使用體驗來說是很重要的。Dell的設計優勢在于讓顧客專注于圖片，減少其它內容的干擾。

　　購物車

　　購物車通常使用表格模式展示產品。除了必要的購買信息外，還提供額外的功能如修改訂單，保存訂單，添加至收藏夾或愿望清單，刪除或更改數量，選擇提貨方式，使用優惠券、折扣券及支付等。用戶可通過網頁的頂部或全站導航進入購物車。

　　Lowe’s(左上)提供了將商品從購物車移除、選擇提貨方式的功能。Bed Bath &Beyond(右上)也有移除商品的功能，可更改商品數量。

　　Crate&Barrel(左上)提供移除商品、保存至收藏夾、更改數量的功能。同時包括配送信息如價格和時間。Payless(右上)也提供類似的功能。

　　購物車必須要提供最好的用戶體驗，因為顧客在這里離最后的購買只差一步了。允許用戶無需跳轉頁面就可更改數量、移除商品、使用優惠券對于快速流暢的購買體驗來說至關重要。如果頁面承載信息過多，可以使用可折疊面板隨著用戶的需要漸進的展示信息。

　　支付

　　支付更多的是一個流程而不是模式。許多電商網站允許用戶使用已有的賬戶或是訪客身份進行支付結算。對于已有賬戶的顧客來說，使用已有的支付方式和配送信息將大大簡化支付流程。

　　Crutchfield 和Nordstrom均允許用戶以訪客的身份或已有的賬戶來結算。兩者提供以訪客身份結算后再注冊賬戶的功能，以及更改密碼的功能。

　　Amazon在支付頁面的首頁詢問顧客的電子郵件地址，并詢問是否已有注冊賬戶。這與其pc端網站的做法保持一致。Target在移動網頁端提供登錄、注冊及以訪客身份結算、更改密碼的功能。

　　對于大多數電商網站來說，允許顧客用已有賬戶或訪客身份支付結算是必須的。同時，考慮邀請顧客在支付結算完成后注冊賬戶，因為此時顧客已輸入了足夠的信息進行注冊。這會大大提高顧客注冊的成功率，因為此時顧客幾乎無需再多付出多少努力。

　　Target的“Create Target.com account”按鈕很有可能引導顧客偏離購買流程因為這需要顧客付出很多努力。先下單結算再邀請顧客注冊會更好。限制顧客結算時的選擇可大大提高購買成功率，減少顧客需要做的決定。

　　表單

　　表單在移動電商中使用非常頻繁，如搜索、支付、注冊、使用優惠券及促銷碼。以下是設計移動端表單時的一些原則：

　　標簽置于輸入區上方以避免用戶放大輸入區時標簽溢出

　　使用HTML5調用合適的鍵盤，符合使用情景。如輸入郵件地址時調用郵件的輸入鍵盤，輸入數字時調用數字鍵盤。

　　只在真正必要時才強迫用戶輸入需要的信息。這將大大減少顧客支付流程的阻礙。

　　在手機上處理表單的最佳方式就是盡量少的使用它們。你可以調用地理定位功能來幫助顧客填寫區號，你可以在顧客結算時自動調用用戶以前輸入過的信息。記住最好的表單是用戶無需完成的。

　　CVS(左上)在用戶輸入區號時未調用數字鍵盤。這讓用戶不得不從多了一步操作，切換鍵盤。CVS的標簽采用左對齊，當用戶放大頁面時存在標簽溢出的問題。Crate&Barrel (右上)的表單則更友好，當用戶輸入區號時自動調用數字鍵盤，標簽采用頂對齊。

　　記住表單是幫助顧客在網站上完成購買的。你應該特別留心并且盡可能的減少顧客的交互成本。有時這意味著你需要嘗試其它更好的方法。

　　結論

　　隨著移動電商貢獻的銷售額越來越高，基于移動瀏覽器的購物網站提供許多顧客在pc端使用和期待的功能。正如Sterling Brands 和 SmithGeiger 調查顯示，移動用戶更愿意在友好的網站上購買。

　　利用已有的設計模式，你可以嘗試不同的方法來快速搭建你自己的適用于小屏幕的電商網站。但是不要滿足已有的設計模式，將它們作為起點去嘗試更多不同的設計方案。并且隨著瀏覽器性能的提升，觸屏版的設計可以更多的考慮借鑒本地應用的設計模式。