Will Hacker

2012年，各大電商巨頭以及品牌商的移動(dòng)終端訂單量都呈現(xiàn)出迅猛增長(zhǎng)的態(tài)勢(shì)。人人都已看見(jiàn)，移動(dòng)電商已經(jīng)來(lái)了。那么設(shè)計(jì)優(yōu)良的移動(dòng)購(gòu)物體驗(yàn)必將能爭(zhēng)奪更多的用戶，提升銷售額。

現(xiàn)在越來(lái)越多的人使用智能手機(jī)來(lái)替代臺(tái)式電腦購(gòu)物和購(gòu)買。隨著更多的人從電腦轉(zhuǎn)移到移動(dòng)設(shè)備上購(gòu)買產(chǎn)品和服務(wù)，網(wǎng)站創(chuàng)建者可以使用一些設(shè)計(jì)模式以幫助快速啟動(dòng)一個(gè)移動(dòng)電商項(xiàng)目。

良好的移動(dòng)購(gòu)物體驗(yàn)是很重要的。最近的研究發(fā)現(xiàn)，67%的顧客愿意在設(shè)計(jì)體驗(yàn)友好的移動(dòng)端進(jìn)行購(gòu)物。

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

主頁(yè)=門戶+導(dǎo)航

在移動(dòng)端訪問(wèn)時(shí)，主頁(yè)的首要作用是幫助用戶找到他們想要的東西。常見(jiàn)的模式有為促銷設(shè)計(jì)的單列布局以及單欄的鏈接列表，鏈接到網(wǎng)站的特色區(qū)域或產(chǎn)品目錄頁(yè)。主頁(yè)一般還包含關(guān)鍵詞查詢、商店位置指引、促銷郵件及忠誠(chéng)度計(jì)劃的注冊(cè)表。

亞馬遜（Amazon）和Macys均混合使用了促銷元素及列表菜單。蘇寧促銷區(qū)域比簡(jiǎn)單的列表占用了更多的屏幕區(qū)域但也因此有更強(qiáng)的視覺(jué)沖擊力。1號(hào)店使用了在本地應(yīng)用中更常見(jiàn)的儀表盤設(shè)計(jì)模式。

如果顧客訪問(wèn)網(wǎng)站的目的是為了快速比價(jià)，那么簡(jiǎn)單的列表模式和搜索功能會(huì)更合適。如果他們是想找促銷，蘇寧的設(shè)計(jì)方案會(huì)更好。究竟采用哪種方案則需要你進(jìn)行數(shù)據(jù)挖掘，分析消費(fèi)者使用你的網(wǎng)站時(shí)的行為。

全站導(dǎo)航工具

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

Lowes的全站導(dǎo)航菜單每一個(gè)選項(xiàng)是一個(gè)圖標(biāo)。百思買（Best Buy）的導(dǎo)航采用兩欄布局，選項(xiàng)是按鈕的形式。Lowes的菜單覆蓋在內(nèi)容上，而百思買的下拉菜單推動(dòng)內(nèi)容相應(yīng)下移。

Macys的全站導(dǎo)航菜單包含了二級(jí)子菜單的選項(xiàng)。CVS的兩欄菜單中每個(gè)選項(xiàng)都配了一個(gè)圖標(biāo)。這兩個(gè)案例的菜單均是置于頁(yè)面頂部。

上面幾個(gè)案例展示了幾種全站導(dǎo)航的方式。Lowes的設(shè)計(jì)很簡(jiǎn)單，并且圖標(biāo)加了視覺(jué)效果，內(nèi)容區(qū)置灰融入背景中可以讓用戶更專注于導(dǎo)航菜單，即當(dāng)前的任務(wù)上。而CVS兩欄的圖標(biāo)設(shè)計(jì)則顯得比較凌亂，觸摸目標(biāo)之間過(guò)于接近也會(huì)帶來(lái)許多可用性問(wèn)題。

搜索建議

搜索建議又稱“輸入提示”或“自動(dòng)完成”，指當(dāng)用戶輸入字符時(shí)顯示可能的搜索目標(biāo)。對(duì)于常見(jiàn)的、名稱較長(zhǎng)的搜索目標(biāo)來(lái)說(shuō)，自動(dòng)完成可以大大方便顧客。但也有一個(gè)問(wèn)題，虛擬鍵盤容易誤操作從而使建議的搜索目標(biāo)不準(zhǔn)確。顯示常見(jiàn)的“正確”目標(biāo)會(huì)非常有效。同時(shí)也可以考慮使用改進(jìn)的自動(dòng)完成模式來(lái)減少顧客的輸入，用最有效的方式利用較慢的移動(dòng)帶寬。

在Office Depot網(wǎng)站的搜索框中輸入“d-r-a-f”有幾種可能的搜索目標(biāo)。而錯(cuò)誤輸入“d-r-a-g”導(dǎo)致非用戶期望的搜索目標(biāo)。在使用虛擬鍵時(shí)不小心輸入目標(biāo)相鄰的字母是很常見(jiàn)需要解決的問(wèn)題。

如果設(shè)計(jì)師無(wú)法改善用戶誤輸入的問(wèn)題，那么最好提供其它的方式讓用戶可以從錯(cuò)誤的搜索結(jié)果到達(dá)目標(biāo)產(chǎn)品頁(yè)面，如產(chǎn)品目錄的下拉列表或是頂級(jí)類別的全站導(dǎo)航。網(wǎng)站經(jīng)理也可以微調(diào)改進(jìn)搜索功能，比如為“dragt”顯示“draft”的建議搜索。

搜索結(jié)果準(zhǔn)確率的重要性

兩種移動(dòng)電商網(wǎng)站常見(jiàn)的設(shè)計(jì)模式：表格和網(wǎng)格模式。表格模式每一行展示商品的縮略圖及基本的相關(guān)信息如商品名和價(jià)格。網(wǎng)格模式則使用更大的圖片更少的信息。有的網(wǎng)站允許用戶在兩種模式中切換。

美國(guó)的好樂(lè)買——Zappos采用網(wǎng)格的形式展示較大的商品圖，對(duì)于展示如鞋這類的商品是一種不錯(cuò)的方式。Walgreens 的表格模式則突出了購(gòu)物和查找商品的功能。

OfficeMax 在大的類目“paper”下讓用戶選擇更細(xì)的子分類，然后呈現(xiàn)相應(yīng)的子分類的商品結(jié)果。如果像“Scissors”這類較少子分類的商品則直接呈現(xiàn)商品結(jié)果。

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

Gap默認(rèn)用表格模式展示搜索結(jié)果，也提供以網(wǎng)格的模式查看結(jié)果。展示結(jié)果的同時(shí)在搜過(guò)框保留搜索詞。

如果在Gap輸入“mens shirts”則找不到搜索結(jié)果，亦沒(méi)有導(dǎo)向“mens t-shirts”搜索結(jié)果的鏈接。改進(jìn)的辦法比如Gap可以增加詢問(wèn)語(yǔ)句“您是想找？”，Google則處理的很好，列出可能的搜索目標(biāo)“mens t-shirts”并且呈現(xiàn)相關(guān)的搜索結(jié)果。

搜索排序

通過(guò)不同的指標(biāo)將搜索結(jié)果排序可以幫助顧客組織信息，如價(jià)格排序，用戶評(píng)分排序。常見(jiàn)的排序界面模式有按鈕及選擇菜單。

沃爾瑪（Wal-Mart）提供三個(gè)篩選的按鈕。Seras相似，采用的分段控件。J.C.Penney采用定制風(fēng)格的選擇菜單，而Eddie Bauer則用瀏覽器默認(rèn)的選擇菜單。兩者均調(diào)用了瀏覽器自帶的選擇菜單控件。

沃爾瑪?shù)娜齻€(gè)按鈕的大小及距離保證了目標(biāo)較好的可點(diǎn)擊性，盡管這使得沃爾瑪只能提供三個(gè)選擇而Sears有四個(gè)。Sears的“all”選項(xiàng)，如果顧客在排序結(jié)果中找不到想要的目標(biāo)，則可以快速回到最初的搜索結(jié)果頁(yè)。絕大多數(shù)的瀏覽器都支持選擇菜單控件，而且選擇菜單可以容納更多的選項(xiàng)，不過(guò)也占用更多的空間，因此需要做測(cè)試來(lái)權(quán)衡和評(píng)估這些設(shè)計(jì)模式的優(yōu)缺點(diǎn)。

多重搜索的過(guò)濾

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

CVS的過(guò)濾使用選擇菜單，選擇相應(yīng)選項(xiàng)后會(huì)馬上更新搜索結(jié)果。J.C.Penney使用下拉列表并且標(biāo)明對(duì)應(yīng)每項(xiàng)過(guò)濾維度的結(jié)果數(shù)量，還允許同時(shí)選擇多項(xiàng)維度，而要權(quán)衡的是顧客要多進(jìn)行一次點(diǎn)擊“apply”。

凡客使用可折疊的面板（手風(fēng)琴式面板）來(lái)組織篩選的維度，每個(gè)面板展開(kāi)是維度的不同數(shù)值選擇。Threadless則將所有維度的數(shù)值直接呈現(xiàn)在一個(gè)界面中。每選一個(gè)數(shù)值，搜索結(jié)果即時(shí)更新。

直接呈現(xiàn)所有維度及數(shù)值可以讓顧客一目了然有哪些篩選的數(shù)值選擇。采用這種模式或可折疊的面板模式取決于你產(chǎn)品的篩選維度的多少。如果產(chǎn)品的篩選維度多種多樣，非常豐富，則需要不斷嘗試來(lái)找到最好的設(shè)計(jì)方案。你可以優(yōu)化那些顧客最經(jīng)常使用篩選功能的產(chǎn)品的界面。

產(chǎn)品頁(yè)的多樣設(shè)計(jì)

產(chǎn)品頁(yè)是電商網(wǎng)站詳細(xì)展示商品的頁(yè)面。它們往往包含不止一種設(shè)計(jì)模式，如標(biāo)簽，可折疊的面板及圖片陳列。兩種常見(jiàn)的產(chǎn)品頁(yè)形式，一種是包含所有詳細(xì)信息的長(zhǎng)頁(yè)面，一種是嵌有標(biāo)簽或可折疊面板多模塊頁(yè)面，讓用戶根據(jù)需要展開(kāi)不同的信息。

三星（Samsung）和戴爾（Dell）均采用漸進(jìn)式的方式呈現(xiàn)商品，這類商品通常包含大量的詳細(xì)信息。三星使用可折疊的面板，戴爾使用標(biāo)簽。

Cobela和Office Depot均是一個(gè)長(zhǎng)頁(yè)面來(lái)展示商品所有信息。這種模式使用時(shí)需要經(jīng)常上下滾動(dòng)頁(yè)面獲取信息，但是免去了切換標(biāo)簽和面板的麻煩。采用哪種模式取決于產(chǎn)品的信息量大小以及如何有效的組織信息模塊。

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

最容易的方法就是一次性加載所有產(chǎn)品頁(yè)的信息，包括隱藏在標(biāo)簽和面板中的信息，以便用戶切換時(shí)可以馬上顯示。這種方法好處是用戶斷網(wǎng)時(shí)仍然可以繼續(xù)瀏覽，而缺點(diǎn)是不管是否需要，一次性要加載所有的信息，這會(huì)增加你的服務(wù)器負(fù)擔(dān)，并且消耗用戶更多的數(shù)據(jù)流量。因此你需要權(quán)衡。

圖片陳列

圖片陳列對(duì)于服飾及消費(fèi)類電子產(chǎn)品來(lái)說(shuō)尤為重要。你也許不需要從三個(gè)不同的角度看一個(gè)扳手，但是對(duì)于衣服、鞋類和高端的智能手機(jī)來(lái)說(shuō)圖片很重要。常見(jiàn)的設(shè)計(jì)模式有可滑動(dòng)的陳列，雙擊放大及縮略圖。

Payless使用可滑動(dòng)的陳列從不同的角度展示商品，用戶也可以雙擊放大查看細(xì)節(jié)。并且Payless的雙擊放大在屏幕上保持幾秒后會(huì)消失，以保證用戶有足夠的時(shí)間理解和注意到如何操作。放大查看細(xì)節(jié)的功能對(duì)于服飾和鞋類商品很重要。

Dockers采用圖片陳列的方式，雙擊放大查看細(xì)節(jié)，同時(shí)用戶可以切換不同的顏色。Levis類似的，多了可選擇的不同視角的縮略圖。Dockers切換不同顏色時(shí)整個(gè)頁(yè)面重新刷新，而Levis則不是。

Levis在用戶切換不同顏色時(shí)保持大部分內(nèi)容不刷新，乍看會(huì)覺(jué)得這是更好的用戶體驗(yàn)，但實(shí)際上，在同一天的同一時(shí)刻對(duì)比來(lái)看，Docker的全頁(yè)刷新加載要快的多。Levis 加載過(guò)慢可能是由于除了主圖外還要加載刷新五張縮略圖，或者有其它的原因如網(wǎng)絡(luò)塞車。每種模式都有優(yōu)劣勢(shì)。

三星和戴爾均使用圖片陳列方式展示商品。三星在可折疊面板中嵌套使用，而戴爾則使用一個(gè)單獨(dú)的頁(yè)面展示。

三星的方式似乎更友好，減少了頁(yè)面切換。三星和戴爾均使用的高分辨率的圖片，圖片質(zhì)量對(duì)于用戶使用體驗(yàn)來(lái)說(shuō)是很重要的。Dell的設(shè)計(jì)優(yōu)勢(shì)在于讓顧客專注于圖片，減少其它內(nèi)容的干擾。

購(gòu)物車

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

淘寶提供了將商品從購(gòu)物車刪除、更改購(gòu)物車中商品購(gòu)買數(shù)量的選項(xiàng)。凡客和京東等網(wǎng)上商店的購(gòu)物車功能大同小異，也有移除商品和可更改商品數(shù)量的功能。

但不同的是凡客和京東會(huì)提供更多購(gòu)買細(xì)節(jié)，比如優(yōu)惠金額和贈(zèng)送積分?jǐn)?shù)量等功能。同時(shí)包括配送信息如支持貨到付款等等。

購(gòu)物車必須要提供最好的用戶體驗(yàn)，因?yàn)轭櫩驮谶@里離最后的購(gòu)買只差一步了。允許用戶無(wú)需跳轉(zhuǎn)頁(yè)面就可更改數(shù)量、移除商品、使用優(yōu)惠券對(duì)于快速流暢的購(gòu)買體驗(yàn)來(lái)說(shuō)至關(guān)重要。如果頁(yè)面承載信息過(guò)多，可以使用可折疊面板隨著用戶的需要漸進(jìn)的展示信息。

支付

支付更多的是一個(gè)流程而不是模式。許多電商網(wǎng)站允許用戶使用已有的賬戶或是訪客身份進(jìn)行支付結(jié)算。對(duì)于已有賬戶的顧客來(lái)說(shuō)，使用已有的支付方式和配送信息將大大簡(jiǎn)化支付流程。

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

亞馬遜在支付頁(yè)面的首頁(yè)詢問(wèn)顧客的電子郵件地址，并詢問(wèn)是否已有注冊(cè)賬戶。這與其pc端網(wǎng)站的做法保持一致。蘇寧在移動(dòng)網(wǎng)頁(yè)端提供登錄、注冊(cè)及以訪客身份結(jié)算、更改密碼的功能。

對(duì)于大多數(shù)電商網(wǎng)站來(lái)說(shuō)，允許顧客用已有賬戶或訪客身份支付結(jié)算是必須的。同時(shí)，考慮邀請(qǐng)顧客在支付結(jié)算完成后注冊(cè)賬戶，因?yàn)榇藭r(shí)顧客已輸入了足夠的信息進(jìn)行注冊(cè)。這會(huì)大大提高顧客注冊(cè)的成功率，因?yàn)榇藭r(shí)顧客幾乎無(wú)需再多付出多少努力。

蘇寧的“Create Target.com account”按鈕很有可能引導(dǎo)顧客偏離購(gòu)買流程因?yàn)檫@需要顧客付出很多努力。先下單結(jié)算再邀請(qǐng)顧客注冊(cè)會(huì)更好。限制顧客結(jié)算時(shí)的選擇可大大提高購(gòu)買成功率，減少顧客需要做的決定。

表單

表單在移動(dòng)電商中使用非常頻繁，如搜索、支付、注冊(cè)、使用優(yōu)惠券及促銷碼。以下是設(shè)計(jì)移動(dòng)端表單時(shí)的一些原則。

首先，標(biāo)簽應(yīng)置于輸入?yún)^(qū)上方，以避免用戶放大輸入?yún)^(qū)時(shí)標(biāo)簽溢出。其次，使用HTML5調(diào)用合適的鍵盤，符合使用情景。如輸入郵件地址時(shí)調(diào)用郵件的輸入鍵盤，輸入數(shù)字時(shí)調(diào)用數(shù)字鍵盤。同時(shí)，在真正必要時(shí)才強(qiáng)迫用戶輸入需要的信息，這將大大減少顧客支付流程的阻礙。

在手機(jī)上處理表單的最佳方式就是盡量少的使用它們。你可以調(diào)用地理定位功能來(lái)幫助顧客填寫(xiě)區(qū)號(hào)，你可以在顧客結(jié)算時(shí)自動(dòng)調(diào)用用戶以前輸入過(guò)的信息。記住最好的表單是用戶無(wú)需完成的。

CVS在用戶輸入?yún)^(qū)號(hào)時(shí)未調(diào)用數(shù)字鍵盤。這讓用戶不得不從多了一步操作，切換鍵盤。CVS的標(biāo)簽采用左對(duì)齊，當(dāng)用戶放大頁(yè)面時(shí)存在標(biāo)簽溢出的問(wèn)題。Crate&Barrel的表單則更友好，當(dāng)用戶輸入?yún)^(qū)號(hào)時(shí)自動(dòng)調(diào)用數(shù)字鍵盤，標(biāo)簽采用頂對(duì)齊。

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

總結(jié)

隨著移動(dòng)電商貢獻(xiàn)的銷售額越來(lái)越高，基于移動(dòng)瀏覽器的購(gòu)物網(wǎng)站提供許多顧客在pc端使用和期待的功能。正如Sterling Brands 和 SmithGeiger 調(diào)查顯示，移動(dòng)用戶更愿意在友好的網(wǎng)站上購(gòu)買。

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

（編輯：楊磊）