現在人們漸漸用智慧手機代替 PC，連購物也是如此。正當越來越多的人由電腦桌面向移動網頁轉移，購買產品和服務，WordPress 網站建設可以使用已存的設計模式來開啟移動電子商務計劃。擁有良好的電子商務經驗非常重要。實際上，近期的研究發現，如果能用手機登陸購物網站且過程體驗良好，多於 67% 的人都願意下單。
WordPress 網站建設-SEO 站群認為使用設計模式的優點在於，您可以看到其他設計師是如何解決類似的問題，這樣您就不用走彎路。還能使您瞭解到人們在其他網站使用類似功能時的需求，並以此為參考來設計網站；並鼓勵您思考自己一個人做設計時不會想到的設計方法。
本文中，WordPress 網站建設-SEO 站群專注於智慧手機，而不是圖表。我們將介紹一些用於移動電子商務功能的設計模式和方法，如下：·主頁 ·導航 ·搜尋建議 ·搜尋結果·搜尋過濾和分類·產品頁·圖片庫·購物車·賬戶或遊客登入·表格
本文中所有例子都來源於移動網頁，在智慧手機瀏覽器中執行。大多數屬於大型百貨零售商，因為他們有龐大的產品目錄，這就需要考慮周全的設計方式，以突出搜尋，並將搜尋結果進行過濾和分類。本文還有許多基於電子商務的原生 WordPress APP，許多模式都能很好的運用其上。
主頁
在移動裝置上訪問網頁，主頁內容通常較少，更多是幫助多使用者找到所需的內容。常見的模式就是一欄促銷，一欄連結列表或產品目錄，很簡單。關鍵詞搜尋一般都有，還有店鋪的連結，訂閱促銷郵件及忠誠度計劃的登記表。
亞馬遜和梅西都使用促銷商品和列表目錄混排的方式。
塔吉特的促銷內容比簡單列表佔據螢幕更大的空間，極具視覺衝擊力。
Threadless 使用儀表盤模式，比起移動電子商務網頁，在原生應用中較為常見。
如果購物者來您的網站是為了快速比較價格，那麼他們更需要的便是簡單的列表樣式和搜尋功能。如果他們是來關注促銷和打折的，那麼塔吉特的設計模式就更合適。因此，您需要分析消費者來您的網站的目的，以此決定合適的設計模式。
導航
除了使用主頁作為主要的導航中心，許多網站也在多數頁面上設定了導航目錄，通常是作為頁頭。這讓消費者能輕鬆在頁面間跳轉，而無需回到主頁。
lowe 的導航目錄中，每個選項都有圖示。 best buy 的目錄則使用了兩欄的排版，並且用按鈕替代列表。 Lowe 的目錄出現時會覆蓋整個頁面，而 Best Buy 的目錄出現時會向下推擠螢幕上的其他內容。
Macy 的導航目錄包含下級選項。 CVS 則具有雙欄目錄，每個選項也有圖示。它們的目錄都在頁面頂端展示。
看了上面的螢幕截圖，設計網頁導航的方式多種多樣。 Lowe 的設計很簡潔，而且圖示帶來了一些視覺上的亮點。而導航以外的其餘內容都隱入背景，這使多使用者在選擇導航內容時，更集中於當前目標。 CVS 的版式相對雜亂，兩欄的選項，每個專案都搭配了圖示。 CVS 的目錄上有許多可以點選的 bar，相互之間很接近，這在觸控式螢幕上可能導致可用性問題。
有趣的是，大型電子商務網站通常不會一次顯示許多導航選項。它們嘗試在導航的視覺設計和網頁資訊構架之間尋求平衡，仔細考慮應存在於全站導航上的專案的數量。透過網站分析來確定消費者會點選哪個目錄選項，可以幫助您決定目錄上的內容。可對不同的設計進行 A/B 測試和可用性測試，看看哪種設計選項太多太雜，理想方案應使人們不但找到建議內容，也能找到需要的內容。——為了商業需求，也為了多使用者需求。
搜尋建議
搜尋建議，也叫輸入提示或自動填寫，當消費者鍵入前幾個字幕的時候就顯示出可能的輸入結果。在常用搜尋中，這對消費者來說真的很方便，特別是當輸入內容很長的時候。而搜尋建議的一個侷限就是：在虛擬鍵盤上很容易輸錯字，這會改變建議的結果。而顯示常見 “正確” 的結果可能更有用。而且，考慮使用改進的自動建議模式來減少輸入內容，在有效率的前提下使用更慢的移動頻寬。
在 Office Depot 網站的搜尋框中輸入 “draf” 時，會自動提示數個可能的結果。如果錯打成 “drag”，就會顯示出一些和搜尋內容無關的結果。在虛擬鍵盤上輸錯字母是很常見的問題。
人們在輸入時的錯誤，設計師也無可奈何。不過他們可以用其他方式使消費者找到產品頁，例如，產品類別或頂層類別的目錄可以向下延展出列表。網站管理者也可以最佳化搜尋引擎的功能，如當多使用者輸入 “dragt” 時，再建議 “draft” 的結果。您使用的搜尋引擎技術將決定您解決問題的方式。
搜尋結果
在移動電子商務網站上的搜尋結果主要使用兩種樣式：表格展示和網格展示。表格展示會顯示一張產品縮圖和一些密集排列的基本資訊如產品名稱、價格。網格展示則會顯示較大的圖片而使用更少的描述資訊。一些網站允許消費者在兩種展示方式之間切換。
zWordPress APPos 以網格顯示搜尋結果，這使它可以使用更大的產品圖片，使消費者買鞋的時候偏於以感性作出選擇。 Walgreens 使用包含按鈕的表格，按鈕的功能一個是在店中找到商品，另一個是將商品加入購物車。
OfficeMax 讓消費者在海量的搜尋專案中——如輸入 “紙” 搜尋——選擇子類別。一旦選擇了子類，搜尋結果將以表格展示出來。如果搜尋 “剪刀”，搜尋結果的子類別會較少，這讓消費者能直接在表格中看到結果。
如果產品的分級雜亂不清，此時讓消費者選擇子類別可能會導致一些問題。如上面在 OfficeMax 的例子中，某人想買 8.5×11 英寸的家用列印紙，他可能不知道該在 “影印紙& 多用紙” 還是該在 “鐳射紙” 的目錄下找。一種比較好的解決方式就是在搜尋過濾器下邊列出子目錄，可以與其它過濾方式並列呈現，如 “顏色” 和 “尺寸” 。每隔一段時間（4-6 周）就對具有代表性的多使用者、常見搜尋專案和熱銷產品進行測試，這可有助於您洞察哪種解決方式更佳。 A/B 測試也可以揭示出哪一種方式能讓更多多使用者到達產品頁並具有更高的支付率。
Gap 的預設搜尋結果以表格展示，同時提供網格展示方式的選擇。注意，Gap 也在關鍵詞區域保持搜尋專案。
Gap 的多使用者可以選擇搜尋商品的展示方式，這讓它們可以隨時在易於瀏覽的形式和具有大圖的形式之間轉換。但其實 Gap 可以在網格展示方式中保留一些商品資訊——如價格（像 ZWordPress APPo 所做的那樣）
一些諸如價格和顏色的細節讓多使用者更容易決定想要了解哪個商品的更多資訊。
在關鍵詞區域保持搜尋文字也可以提醒多使用者他們正在搜尋的內容，讓他們更容易透過新增一些限制詞（如 “紅色”）來細化搜尋結果。
在 Gap 中搜尋 “男式 tshirts（正確寫法為 t-shirts）”，您會來到無搜尋結果頁面（本文未截圖），而且也不提供 “男式 t-shirts” 的搜尋連結。 Gap 可以在搜尋結果頁面新增 “您是否要搜尋-某物品” 的搜尋建議來提升其多使用者體驗。 Google 就會列出 “mens t shirts” 的搜尋建議，如果多使用者忽略，它就會直接呈現出 “men’s t-shirts” 的搜尋結果。
結果分類
將搜尋結果分類可以幫助購買多使用者以一種有規律的方式組織起海量的搜尋結果，通常會按照價格和消費者評分排列。常見的分類介面樣式是按鈕和<選擇>選單。
Walmart 讓多使用者點選三個按鈕之一來將結果分類。 Sears 使用了類似的方式，但有一個 “分段控制”，Javas cript 框架如 jQuery 移動開發正在使這些類似 WordPress APP 的介面小部件對設計師來說更易用。
J.C. Penney 可以透過有點自定義樣式的<選擇>選單來分類結果，Eddie Bauer 則使用了瀏覽器的預設<選擇>選單。兩者都透過瀏覽器的本地控制來觸發<選擇>選單（本例中為 iphone 選擇器）
Walmart 的按鈕之間空間較大，點選起來不易出錯，但同時也因此無法容納更多選項，而 Sears 有四個按鈕，包含一個 “全部” 的按鈕，這使得多使用者在分類篩選後沒有找到所需商品時可以回到初始頁面。用<選擇>選單是一種很安全的選擇，因為現代移動瀏覽器都支援這種方式，這使應用可以列出更長的分類選項。但是，也佔用了許多有用空間。這些都是可用常規測試方法來評估的折中設計型別。
結果過濾
過濾器讓多使用者可以縮小搜尋範圍，一般基於諸如顏色，品牌和尺寸等屬性。過濾器通常要劃分型別（稱為分面），每個分面下會顯示數個值（比如，顏色就是一種分面，紅色是一種分面值）常見的展示過濾選項的介面樣式是<選擇>選單，下拉式選單和可摺疊選單。現在在技術上使單個搜尋包含數個分面值是可以實現的，但也因此帶來更高的互動成本，並導致無搜尋結果（比如，低於 75 美元的交叉訓練運動鞋）。
CVS 在其高階搜尋中使用<選擇>選單來過濾結果，選擇一個選單選項將立即對結果進行過濾。 JC Penney 則提供了一個下拉選單來過濾結果，並會提示出符合過濾值的產品數量。 JC Penney 也允許一個分面帶有多個值，以供多使用者進行一次性的選擇，確認資訊多使用者要觸碰 “WordPress APPly” 按鈕。
Kohl’s 在其每個過濾型別中使用摺疊方式收納系列核取方塊。 Threadless 把所有搜尋分面的值以按鈕體現。兩個網站中，您只需選擇一個過濾值就能立刻看到結果。
在每個分面值下面顯示商品數量能讓消費者更清楚地瞭解每個選擇為他們帶來的結果。 Threadless 的方式是用整一屏展示出所有可用的分面值，讓消費者對所有可用搜尋結果一目瞭然。您是選用這種方式還是使用 Kohl 的方式，取決於您打算為指定產品目錄提供多少過濾分面值。如果您的產品目錄在分面值方面變化不定，那麼您就需要進行試驗找出合適的設計方式。您可以最佳化那些熱門的產品目錄的過濾結果顯示頁面。
產品頁面
產品頁是電子商務網站真正展示產品細節的頁面。它們並不關於某種模式，而是關於系列模式，包括標籤，摺疊導航和照片庫等系列元素。產品頁有兩種展示方式，一是包含所有產品資訊的長頁面，二是包含標籤或摺疊導航能將資訊收起的短頁面。
三星和戴爾都在產品頁上逐步揭開內容，為消費者提供許多資訊。三星使用摺疊導航來展開大段內容，戴爾則使用標籤。
Cabela 和 Office Depot 都使用一整個長頁面來展示產品資訊。這種方式需要多使用者頻繁滑動螢幕來獲取資訊，但他們就不用觸碰標籤或展開摺疊導航欄。您需要根據產品資訊量的多少和分解資訊的方式來選擇合理的方式。
長的產品頁比起帶摺疊導航和標籤的頁面需要多使用者進行更多滾動操作，也令購買者需要更費力地找出特定資訊。在我自己的可用性測試中，我瞭解到人們對兩種方式各有偏好，但是似乎對網頁資訊進行劃分具有更高的可用性。如果您要採用這種方式，確保在人們觸碰標籤或摺疊導航欄的時候，被收起來的資訊能快速顯示。
一種辦法就是開始便一次性載入所有資訊內容，這樣觸碰標籤或摺疊導航的時候時，被收起的內容就會立即顯示。如果採用這種辦法，即使多使用者在各種資訊之間切換的過程中掉線了也沒關係。但是有個弊端：不管多使用者閱讀與否，也必須下載所有的產品資訊；這為伺服器帶來更大負荷，而且也會佔多使用者較多頻寬。
照片庫
照片庫對電子商務領域如服裝和消費電子行業來說特別重要。在 Home Depot 上購物時，看衣服、鞋子、高階智慧機或平板電腦您可能並不需要看到商品的三檢視，但圖片總是越多越好。常用的展示方式是可滑動的照片庫，“雙擊照片放大”，單擊縮圖以選擇照片。
Payless 非常英明地將 “雙擊放大” 的提示框放在螢幕中心並持續幾秒，給購物者充分的時間去消化理解網頁的操作方式。對服裝和鞋子來說，放大商品圖片檢視細節非常重要。
Dockers（上左圖）具有可滑動的照片庫，雙擊放大檢視細節，而且購物者可以檢視同一商品的不用顏色。 Levi（上右圖）也用了類似方式，但新增了商品縮圖，顯示照片庫內不同視角的照片。在 Docker 上，選擇另一種顏色的商品會令網頁重新整理，但 Levi 不會。
Levi 網站在多使用者選擇商品的不同色彩時大多數網頁不會重新整理，這似乎能帶給多使用者更好的體驗。但是，如果對比 Levi 和 Dockers 網站在同一天同一時刻的表現，您會發現觸碰 Levi 上的顏色標籤並等待響應照片載入所花的時間，竟然比 Dockers 重新整理一整個網頁的時間要多。 Levi 之所以這麼慢，可能是因為它還要重新整理那 5 個縮圖，加上主要照片和其他不可見的元素，這種負載比較重。看來每種方式都有利有弊。
三星（上圖左）和戴爾（上圖右）的照片庫都可以左右滑動。三星還將摺疊導航合併到產品也，戴爾則單純只有照片。
三星的方式似乎更人性化，因為頁面相對更少。三星和戴爾都使用了高解析度的照片，顯然在展示價值不菲的產品時圖片質量很重要。戴爾的方式有一個好處，那就是消費者會更專注於產品本身，而不被頁面的其他內容干擾。
購物車
購物車通常用表格來展示商品。除了展示需要購買的商品，還提供其他功能，比如可以儲存訂單，儲存商品到收藏夾，刪除商品或更新數量，選擇快遞或實物店拿貨，接受促銷卷或優惠券，以及結賬等。一旦加入了商品，就可以透過網站頁頭的購物車圖示或者全網站導航選單進入購物車。
Lowe 的購物車（上左）允許購物者從購物車中移除類似的商品，並提供快遞或實體店取貨的選項。 Bed Bath&Beyond（上右）的購物車也可以移除商品，商品數量可以在表格中修改，在頁面下部還有一個按鈕可以重新整理網頁。
Crate&Barrel（上左）的購物車每欄也允許多使用者移除商品，儲存到收藏夾以及更新數量。每欄還包含快遞資訊如費用及送貨時間。 Payless（上右）也允許消費者更新商品數量，移除商品；它的購物車還提供送貨選項，可以送到 Payless 實體店（沒展示截圖）
購物車應該提供大的實用性，因為購物者已經接近購買的後幾步了。允許購物者改變數量，移除商品，使用優惠券或促銷券而無須跳轉到它頁，這些功能在引導消費者快速購買的過程中十分重要。如果您覺得這會使網頁上內容太多，可以先將其隱藏到摺疊導航欄，然後使用逐步展開的方式來顯示內容（比如事先隱藏促銷券區域）。
結賬
結賬更像是一個流程而不是模式，但是模式可以應用到結賬的流程中。許多電子商務網站允許其移動端應用的顧客使用現有賬戶或以遊客身份結賬。對於已經擁有賬戶的多使用者，使用已存的支付和快遞資訊，結賬的過程將非常順暢。
Crutchfield 和 Nordstrom 都允許顧客以遊客身份或使用現有賬戶來結賬。都允許以遊客身份結賬的移動端應用的購買者在下訂單之後建立賬戶，都支援重置密碼。
Amazon 在結賬頁要求填寫郵件地址，無論購物者以現有賬戶抑或以遊客身份結賬。整個流程與使用電腦網頁的支付流程很相似。 Target 在移動端網頁提供了幾個選項：登陸或以遊客身份結賬或建立賬戶，支援密碼重置。
允許顧客登入或以遊客身份結賬，並可以重置密碼對於移動電子商務的網站來講是必要的功能。並且，應該考慮邀請手機端多使用者在提交訂單後建立賬戶，因為他們已經提供了足夠多的資訊（除了密碼之外）。而且到了這一步，顧客們建立賬戶已經非常輕鬆了，他們一般不會拒絕。
按下 “建立 Target.com 賬戶” 的按鈕之後，會導致顧客的購物車被清空，顧客會覺得太麻煩而放棄。因此，確保下單後再在發貨單邀請多使用者註冊可能更好。限制結賬頁面上只有兩種選項能提升支付率，因為顧客需要做出的決定更少了。在主要任務流程中如結賬，越少選擇通常效果越好。
表格
表格常用於移動電子商務的搜尋，結賬，註冊和輸入優惠券、促銷券程式碼時。在為小屏設計表格時，需明白一些好用的技巧：
·將表格標籤放到輸入欄的上面，以免當多使用者輸入時，標籤偏離了螢幕。
·使用 HTML 輸入型別來為輸入區域選擇合適的鍵盤。如果輸入郵件地址，使用；如果輸入號碼，如 ZIP 程式碼，使用或者（或者會顯示帶有大按鍵的數字小鍵盤）
·僅把非常必要的專案設定為必填項。這會使顧客在結賬的過程中更加順暢。
在智慧手機上，處理表格的理想方式就是要儘可能的少用它們。您可以使用地理位置服務來獲取並給與購物者郵編提示，您可以利用顧客早先在使用您的網站時輸入的賬戶資訊來引導它們進入結賬流程。記住知名的表格是多使用者不需要填完的表格。
CVS（上左）當多使用者觸碰結賬頁面的 ZIP 碼時，並不會彈出數字鍵盤。這使得多使用者還要再多一步（點選 123）才能彈出正確的鍵盤。 CVS 還把所有的標籤都左對齊了，這樣如果多使用者放大檢視某個表格區域時，這些標籤就可能被擠到了螢幕外。 Crate&Barrel（上右）的表格則具有更好的可用性。當多使用者觸碰 ZIP 碼區域，就會彈出大的數字鍵盤，所有的表格標籤頁都是放到表格區域的底部對齊。
記住，表格決定了購物者如何在網頁上完成交易。一定要特別重視它們，盡一切努力簡化多使用者完成表格所需的互動。有時候這甚至意味著嘗試一些完全不同的東西。例如，Typeform 近建議採取一種新的方式，使網路表格更積極響應，更簡單，也更可用。這種方式就是一次問一個問題，問題要顯著地展示，使多使用者填表時可以鍵入快捷鍵。雖然這種方法不一定適用於所有情況，但有時候確實很有效。
WordPress 網站建設-SEO 站群總結
移動電子商務是商家的收入來源，其重要性與日俱增。最佳化的移動網頁提供了許多多使用者在桌面購物體驗中需要和期望的功能，根據 Sterling Brands and SmithGeiger 的調查顯示，移動多使用者更願意透過移動網頁購物，如果網頁可用性高的話。
您可以使用現存的設計模式來探索不同的方法，使電子商務網頁能在小屏上更快載入。不要滿足於已存的樣式；把它們作為發掘設計和幫助您多思考新問題的跳板。隨著瀏覽器效能提升，考慮將原生應用程式的介面設計和互動模式應用到基於瀏覽器的智慧手機購物體驗中來。