人們?cè)絹?lái)越多地使用他們的智能手機(jī)，臺(tái)式電腦的替代品，即使是活動(dòng)，如購(gòu)物和采購(gòu)。越來(lái)越多的人擺脫臺(tái)式機(jī)和手機(jī)優(yōu)化的網(wǎng)站上購(gòu)買的產(chǎn)品和服務(wù)，網(wǎng)站創(chuàng)建者可以使用建立的設(shè)計(jì)模式，以幫助啟動(dòng)一項(xiàng)移動(dòng)電子商務(wù)項(xiàng)目。
有一個(gè)很好的移動(dòng)電子商務(wù)的經(jīng)驗(yàn)是相當(dāng)重要的。事實(shí)上，最近的研究發(fā)現(xiàn)，人們有67％的可能進(jìn)行購(gòu)買，如果一個(gè)網(wǎng)站，他們已經(jīng)達(dá)到了自己的手機(jī)是智能手機(jī)友好的。
電源的設(shè)計(jì)模式，他們告訴你其他設(shè)計(jì)師如何解決類似的問(wèn)題，所以，你是不是總是重新發(fā)明輪子。它們還可以使您設(shè)計(jì)的方式，以滿足人們的期望開(kāi)發(fā)從他們使用的其他網(wǎng)站，他們鼓勵(lì)你考慮的設(shè)計(jì)方法，你會(huì)不會(huì)想到在自己的網(wǎng)站。
在這篇文章中，專注于智能手機(jī)，而不是平板電腦，我們來(lái)看看設(shè)計(jì)模式和方法用于移動(dòng)電子商務(wù)功能，包括以下內(nèi)容：
- 首頁(yè)頁(yè)面，
- 網(wǎng)站導(dǎo)航，
- 建議搜索，
- 搜索結(jié)果中，
- 搜索過(guò)濾和排序，
- 產(chǎn)品頁(yè)，
- 照片畫廊，
- 購(gòu)物車，
- 檢查的帳戶或作為嘉賓，
- 表格。
本文中的所有例子都來(lái)自運(yùn)行在智能手機(jī)上的瀏覽器的移動(dòng)網(wǎng)站。大多數(shù)是從大型跨部門的零售商，因?yàn)樗麄冇写罅康漠a(chǎn)品目錄的功能，如搜索，過(guò)濾和排序的搜索結(jié)果，需要一個(gè)深思熟慮的方法。電子商務(wù)也有無(wú)數(shù)的本地應(yīng)用程序，這些模式可以適用于他們。
主頁(yè)
在移動(dòng)設(shè)備上訪問(wèn)時(shí)，主頁(yè)的有關(guān)內(nèi)容，幫助用戶找到他們所尋找的。常見(jiàn)的模式是簡(jiǎn)單的單欄布局的特色網(wǎng)站或產(chǎn)品類別的促銷和單欄列表。關(guān)鍵字搜索，通常包括主頁(yè)，鏈接到商店定位器和注冊(cè)形式的宣傳電郵及忠誠(chéng)度計(jì)劃。
亞馬遜和梅西的混合使用的促銷內(nèi)容和列表菜單中。
目標(biāo)的宣傳內(nèi)容占用更多的屏幕空間，不是一個(gè)簡(jiǎn)單的列表，但更強(qiáng)的視覺(jué)沖擊。Threadless的使用的儀表盤模式，這是比較常見(jiàn)的，在本機(jī)應(yīng)用程序在移動(dòng)電子商務(wù)網(wǎng)站。
如果購(gòu)物者來(lái)到你的網(wǎng)站快速比較價(jià)格，然后一個(gè)簡(jiǎn)單的列表模式和搜索功能可能是更可取的。如果他們是來(lái)探索促銷和銷售，然后由目標(biāo)所采取的方式可能是比較合適的。為了回答這些問(wèn)題，你需要挖掘分析，以了解消費(fèi)者在您的網(wǎng)站正在做的。
站點(diǎn)范圍的導(dǎo)航
除了使用作為主導(dǎo)航中心的主頁(yè)，也有許多網(wǎng)站導(dǎo)航菜單大部分自己的網(wǎng)頁(yè)中，通常會(huì)在標(biāo)頭中。這使購(gòu)物者能夠很容易地從一個(gè)網(wǎng)站的一部分，到另一個(gè)，而無(wú)需返回到主頁(yè)。
Lowe的站點(diǎn)范圍內(nèi)的菜單的每個(gè)選項(xiàng)的圖標(biāo)。百思買的菜單中有兩欄布局，導(dǎo)航按鈕，而不是列表項(xiàng)。Lowe的菜單包括頁(yè)面出現(xiàn)時(shí)，而百思買的頁(yè)面的內(nèi)容推下來(lái)的畫面。
梅西的站點(diǎn)范圍內(nèi)的菜單，其中包含的子菜單選項(xiàng)。CVS有兩列菜單的每個(gè)選項(xiàng)的圖標(biāo)。在這兩種情況下，菜單被顯示在頁(yè)面頂部的。
正如你可以看到從上面的截圖中，有幾種方法來(lái)設(shè)計(jì)站點(diǎn)范圍內(nèi)的菜單。Lowe的設(shè)計(jì)是簡(jiǎn)單的，和圖標(biāo)添加一個(gè)漂亮的視覺(jué)拋光位。事實(shí)上，其余的頁(yè)面淡出到背景中，當(dāng)用戶選擇使用的導(dǎo)航幫助用戶專注于當(dāng)前的任務(wù)。CVS似乎比較混亂中，有兩列選項(xiàng)，每個(gè)項(xiàng)目都配有圖標(biāo)。CVS'菜單還放置的特定抽頭目標(biāo)彼此靠近，可呈現(xiàn)的觸摸屏上的可用性問(wèn)題。
有趣的是，大型電子商務(wù)網(wǎng)站通常沒(méi)有太多的導(dǎo)航選項(xiàng)一次顯示。他們?cè)噲D平衡視覺(jué)的導(dǎo)航與您的網(wǎng)站的信息架構(gòu)設(shè)計(jì)，仔細(xì)考慮的項(xiàng)目，應(yīng)在全球?qū)Ш健Ｊ褂镁W(wǎng)站分析看菜單選項(xiàng)購(gòu)物單擊幫助你決定了什么應(yīng)該是在菜單中。不同的設(shè)計(jì)方案進(jìn)行A / B測(cè)試和可用性測(cè)試，看一個(gè)人是否有太多的選項(xiàng)和壓倒的人，不只是建議，但必須找到最佳的解決方案 - 為您的企業(yè)和您的用戶。
建議搜索
建議搜索，也被稱為提前鍵入或自動(dòng)完成，結(jié)果顯示潛在的，作為購(gòu)物鍵入幾個(gè)字符。常用搜索到的條件，這是一個(gè)真正的方便購(gòu)物者，特別是如果搜索詞是長(zhǎng)期的。建議搜索的一個(gè)限制是，點(diǎn)擊虛擬鍵盤上錯(cuò)誤的字符是很容易的，這將改變建議的結(jié)果。顯示常見(jiàn)的“正確”的結(jié)果，而不是可能是有用的。另外，考慮使用一個(gè)改進(jìn)的自動(dòng)推薦圖案鍵入需要輸入查詢，以減少的量，以最有效的方式，并利用移動(dòng)帶寬較慢。
Office Depot的網(wǎng)站在搜索框中：鍵入“DRAF”?帶來(lái)了幾種可能的結(jié)果。錯(cuò)誤輸入“拖”而不是“DRAF”的人誰(shuí)是試圖找到起草用品會(huì)導(dǎo)致意外的結(jié)果。攻牙到預(yù)定的相鄰的信1是虛擬鍵盤上的常見(jiàn)問(wèn)題。
雖然設(shè)計(jì)者人錯(cuò)誤輸入查詢不能做任何事情，他們可以確保有其他的方法來(lái)得到到產(chǎn)品頁(yè)面輸入錯(cuò)誤的結(jié)果，如鉆的產(chǎn)品類別或站點(diǎn)范圍內(nèi)的菜單中的頂級(jí)類別的下拉列表。網(wǎng)站管理人員也可以罰款調(diào)整自己的搜索功能，建議“草案”查詢類型為“dragt的結(jié)果。”你有能力做到這一點(diǎn)，將取決于您使用的搜索引擎技術(shù)。
搜索結(jié)果
用于移動(dòng)電子商務(wù)網(wǎng)站的搜索結(jié)果：表顯示和網(wǎng)格顯示兩種主要的模式。表格顯示縮略圖的照片和一些基本信息，如產(chǎn)品名稱和價(jià)格在一個(gè)緊湊的行。網(wǎng)格顯示大圖片的描述性信息較少。有些網(wǎng)站允許消費(fèi)者在這兩種視圖之間切換。
Zappos的搜索結(jié)果中顯示其一個(gè)網(wǎng)格，允許其產(chǎn)品的大照片，一個(gè)明智的選擇，像鞋的銷售市場(chǎng)。沃爾格林有一個(gè)表，其中包括在商店尋找項(xiàng)目，將項(xiàng)目添加到購(gòu)物車按鈕。
OfficeMax公司要求消費(fèi)者在選擇一個(gè)子類別廣泛的搜索字詞，如“紙”。一個(gè)子類一旦被選中，結(jié)果顯示為一個(gè)表。搜索的“剪刀”，其中就有更少的子類，消費(fèi)者直接到表視圖的結(jié)果。
有消費(fèi)者選擇一個(gè)子類別，可能會(huì)出現(xiàn)問(wèn)題，如果它不清除的產(chǎn)品適合在一個(gè)復(fù)雜的層次結(jié)構(gòu)。在的OfficeMax公司上面的例子中，有人找他們的家用打印機(jī)為8.5×11英寸的紙張可能不知道是否在“復(fù)制”或“多用途紙激光打印紙?！币粋€(gè)更好的方法可能是在搜索過(guò)濾器中列出的子類別，在那里他們可以在上下文中與其它過(guò)濾器一樣，“顏色”和“大小”。定期測(cè)試（每4-6個(gè)星期）具有代表性的用戶，通常搜索的術(shù)語(yǔ)和最暢銷的產(chǎn)品可以讓您深入了解哪種方法是更好的。A / B測(cè)試也可以發(fā)現(xiàn)其中的一個(gè)方法是否得到更多的人的產(chǎn)品頁(yè)面，并導(dǎo)致更高的轉(zhuǎn)換率。
Gap的網(wǎng)站的訪問(wèn)者看到一個(gè)表，顯示默認(rèn)情況下，看到一個(gè)網(wǎng)格顯示的選項(xiàng)。請(qǐng)注意，差距也保持在關(guān)鍵字字段中的搜索字詞。
峽讓消費(fèi)者選擇如何，讓他們從一個(gè)簡(jiǎn)單的掃描列表的視圖放大圖片查看搜索結(jié)果。差距可能保留一些產(chǎn)品的信息，但-例如價(jià)格-在網(wǎng)格顯示（作為Zappo的）。詳細(xì)信息，如價(jià)格和顏色使它更容易為購(gòu)物者確定哪些產(chǎn)品，他們希望了解更多有關(guān)。
保持該領(lǐng)域中的術(shù)語(yǔ)也提醒消費(fèi)者他們尋找什么，并讓他們很容易縮小結(jié)果的另一個(gè)詞（如“紅”）的搜索字詞。
搜索峽為“男裝T恤”需要購(gòu)物的頁(yè)面沒(méi)有結(jié)果（未顯示），并沒(méi)有鏈接到搜索結(jié)果為“男子噸的襯衫。”間隙可以提高其搜索通過(guò)添加一個(gè)“難道你的意思嗎？”的類型結(jié)果頁(yè)面的問(wèn)題。谷歌處理這種情況，列出“男裝T恤”建議的查詢，然后提交結(jié)果為“男裝T恤”，如果該建議被忽略。
排序結(jié)果
結(jié)果排序，幫助消費(fèi)者組織沿著一個(gè)連續(xù)的值，通常是數(shù)字的，如價(jià)格和消費(fèi)者的評(píng)級(jí)結(jié)果一大套。通用接口模式進(jìn)行排序的按鈕和下拉菜單。
沃爾瑪讓消費(fèi)者選擇三個(gè)按鈕對(duì)結(jié)果進(jìn)行排序。西爾斯使用類似的方法，但與“分段控制”。JavaScript框架，如jQuery Mobile的這些應(yīng)用程序接口部件更容易為設(shè)計(jì)者提供。
JC Penney公司可以通過(guò)下拉菜單進(jìn)行排序，稍微定制的風(fēng)格，而Eddie Bauer的使用瀏覽器的默認(rèn)下拉菜單。這兩個(gè)觸發(fā)瀏覽器的本地控制下拉菜單（在這些例子中，iPhone選擇器）。
沃爾瑪?shù)陌粹o之間的間距的大小和大方，讓您更好的自來(lái)水的目標(biāo)，不過(guò)，公平地說(shuō)，沃爾瑪只有三個(gè)選項(xiàng)，而西爾斯有四個(gè)。西爾斯列入“全部”按鈕可以讓購(gòu)物者回到原來(lái)的結(jié)果頁(yè)面，如果他們沒(méi)有找到他們想要的東西后，排序。使用下拉菜單是一個(gè)比較安全的選擇，因?yàn)樗乾F(xiàn)代移動(dòng)瀏覽器的支持，并允許較長(zhǎng)的列表的排序選項(xiàng)。然而，它也需要花費(fèi)大量寶貴的空間。這些類型的設(shè)計(jì)權(quán)衡，可以定期檢測(cè)與評(píng)估。
篩選結(jié)果
過(guò)濾器使購(gòu)物者，縮小其結(jié)果的基礎(chǔ)上的一個(gè)或多個(gè)屬性，如顏色，品牌和規(guī)模。過(guò)濾器通常是組織的類型（稱為面），與每個(gè)小刻面（例如下出現(xiàn)的幾個(gè)值，顏色是一個(gè)面，和紅色的一個(gè)方面是值）。通用接口模式顯示過(guò)濾選項(xiàng)的下拉菜單，下拉列表和手風(fēng)琴顯示。從一個(gè)面內(nèi)時(shí)，可以應(yīng)用一個(gè)或多個(gè)值中選擇濾波。雖然允許一個(gè)單一的搜索值超過(guò)一個(gè)方面，技術(shù)上是可行的，它帶有一個(gè)更高的互動(dòng)成本，并可能導(dǎo)致的任何結(jié)果（例如，交叉培訓(xùn)，成本不超過(guò)75美元的運(yùn)動(dòng)鞋）。
CVS使用下拉菜單中的“篩選”選項(xiàng)卡中進(jìn)行篩選。選擇一個(gè)菜單選項(xiàng)，將立即對(duì)結(jié)果進(jìn)行篩選。JC Penney公司提供了一個(gè)下拉列表中，選擇過(guò)濾器和顯示產(chǎn)品的數(shù)量相匹配的過(guò)濾器值。JC Penney公司也可以在一個(gè)屏幕上，貿(mào)易是購(gòu)物者點(diǎn)擊“應(yīng)用”按鈕被選中多個(gè)值從一個(gè)方面。
科爾的每個(gè)過(guò)濾器類型，使用的手風(fēng)琴公開(kāi)了一組復(fù)選框。Threadless的暴露了其搜索方面作為按鈕的值。在這兩個(gè)網(wǎng)站，選擇一個(gè)過(guò)濾器值將立即篩選結(jié)果。
顯示項(xiàng)目的數(shù)量可根據(jù)每個(gè)面值到什么樣的消費(fèi)者將得到每次選擇提供了更大的透明度。Threadless的“的方式顯示所有可用的內(nèi)容值占據(jù)整個(gè)屏幕，但它為消費(fèi)者提供了在一目了然地查看所有的過(guò)濾提供給他們的選擇。無(wú)論你采取這種方式，或者使用像科爾的手風(fēng)琴很可能依賴上的方面值是多少目前對(duì)于一個(gè)給定的產(chǎn)品類別。如果您的目錄具有高度的變異面值為每個(gè)類別的數(shù)量，那么您將需要進(jìn)行實(shí)驗(yàn)，以找到合適的設(shè)計(jì)。你可以因?yàn)橄M(fèi)者使用這些產(chǎn)品類別過(guò)濾器的最優(yōu)化過(guò)濾界面。
產(chǎn)品頁(yè)
產(chǎn)品頁(yè)面是電子商務(wù)網(wǎng)站，真正展示他們的產(chǎn)品在細(xì)節(jié)。他們是不是一個(gè)“模式”這個(gè)詞的真正意義上的，而是一個(gè)集合的模式，包括如制表符，的手風(fēng)琴和照片畫廊。兩種常見(jiàn)的方法到產(chǎn)品頁(yè)面的所有產(chǎn)品的信息或一個(gè)網(wǎng)頁(yè)的標(biāo)簽或手風(fēng)琴，以便逐步披露的信息，消費(fèi)者需要一個(gè)很長(zhǎng)的網(wǎng)頁(yè)。
三星和戴爾的逐步披露內(nèi)容上的產(chǎn)品頁(yè)面，其中有很多購(gòu)物者的信息。三星使用的手風(fēng)琴公開(kāi)的信息塊，而戴爾使用制表符。
Cabela的辦公用品都使用了一個(gè)很長(zhǎng)的網(wǎng)頁(yè)顯示的產(chǎn)品信息。這種方法需要更多的刷卡向上和向下得到的信息，但它使購(gòu)物與小標(biāo)簽，或操縱手風(fēng)琴頭。你的選擇將取決于信息的量與產(chǎn)品相關(guān)聯(lián)的信息可以被分解成邏輯部分以及如何。
龍產(chǎn)品比分解成可管理的數(shù)據(jù)塊用制表符或手風(fēng)琴的頁(yè)面，頁(yè)面需要更多的滾動(dòng)。他們還要求消費(fèi)者把更多的精力放在尋找特定的信息，他們正在尋找。在我自己的可用性測(cè)試，我聽(tīng)到有人表示這兩種方法的喜好，但他們似乎有一個(gè)簡(jiǎn)單的工作分解成邏輯塊的頁(yè)面。如果你使用這種方法，請(qǐng)確保最初沒(méi)有顯示任何內(nèi)容呈現(xiàn)快速購(gòu)物者點(diǎn)擊的選項(xiàng)卡或手風(fēng)琴。
最明顯的方式來(lái)完成，這是加載頁(yè)面的所有內(nèi)容，一度讓隱藏的內(nèi)容幾乎立即出現(xiàn)。這種方法有它的優(yōu)勢(shì)，為用戶的網(wǎng)絡(luò)連接時(shí)下降，而他們之間的切換部分。最大的缺點(diǎn)是，所有的產(chǎn)品信息已被下載，無(wú)論是實(shí)際查看或不增加更多的負(fù)載對(duì)服務(wù)器和使用更多的購(gòu)物者的數(shù)據(jù)計(jì)劃，該計(jì)劃可計(jì)量。
圖片庫(kù)
照片畫廊特別是在電子商務(wù)行業(yè)，如服裝和消費(fèi)電子產(chǎn)品的關(guān)鍵。您可能需要從三個(gè)不同的角度，家得寶在購(gòu)物時(shí)，看到一個(gè)扳手，但更多的圖像時(shí)找衣服，鞋子或者高端智能手機(jī)或平板。幾個(gè)常用的模式是swipeable畫廊，“雙點(diǎn)擊放大，縮小”，用于選擇照片的縮略圖。
Payless使用一個(gè)swipeable的畫廊，從不同的角度，以顯示其產(chǎn)品。用戶也可以點(diǎn)擊放大才能看到細(xì)節(jié)，如縫合和扣眼。
Payless明智地保持其“絲錐放大”調(diào)出屏幕上的幾秒鐘，給購(gòu)物者的時(shí)間去了解如何瀏覽網(wǎng)頁(yè)，仍然注意到它。放大照片查看產(chǎn)品的詳細(xì)信息的能力是非常重要的服裝和鞋。
碼頭工人（上圖左）有一個(gè)swipeable照片畫廊，雙，挖掘到放大的細(xì)節(jié)的，消費(fèi)者可以看到一個(gè)產(chǎn)品在不同的顏色。列維的（右上圖）采取了類似的做法，加上縮略圖的表示照片在畫廊的角度。泊塢窗“網(wǎng)站上選擇一個(gè)新的顏色會(huì)導(dǎo)致整頁(yè)刷新，而李維斯沒(méi)有。
李維斯保持大多數(shù)的頁(yè)面刷新時(shí)，購(gòu)物者改變顏色，起初似乎是一個(gè)更好的用戶體驗(yàn)。但是，從簡(jiǎn)要回顧了兩個(gè)網(wǎng)站于同日在同一天的時(shí)間，碼頭工人的整頁(yè)刷新，出現(xiàn)了運(yùn)行速度更快的時(shí)候，我拍了拍色樣頁(yè)的新的照片出現(xiàn)的那一刻。列維的緩慢可能已造成需要被刷新，除了主照片，照片，或其他看不見(jiàn)的因素，如交通繁忙的負(fù)載由五個(gè)縮略圖。每種方法都有其取舍。
三星（左上圖）和戴爾（上圖右）都使用他們的產(chǎn)品swipeable照片畫廊。三星采用了畫廊到的手風(fēng)琴在其產(chǎn)品上，而戴爾使用一個(gè)單獨(dú)的頁(yè)面。
三星的做法似乎更加人性化，因?yàn)樗哂休^少的頁(yè)面瀏覽。三星和戴爾都去大型的高清晰度照片，在昂貴的產(chǎn)品時(shí)，因?yàn)楹苊黠@的圖像質(zhì)量是至關(guān)重要的。戴爾的方法的一個(gè)優(yōu)點(diǎn)是，它可以讓購(gòu)物者把重點(diǎn)放在自己的照片，沒(méi)有任何分散注意力的頁(yè)面內(nèi)容。
購(gòu)物車
購(gòu)物車顯示產(chǎn)品通常使用表模式。除了要購(gòu)買的內(nèi)容顯示，他們還提供額外的功能，例如能夠保存命令，保存到我的最愛(ài)我的喜愛(ài)，刪除或更新的數(shù)量，選擇送貨或店內(nèi)取貨，適用于促銷或優(yōu)惠券代碼，并檢查了。一旦產(chǎn)品已被添加，購(gòu)物車被普遍達(dá)到通過(guò)在網(wǎng)站的頁(yè)眉或全球?qū)Ш讲藛沃械倪x項(xiàng)圖標(biāo)。
每個(gè)表行的羅威的購(gòu)物車（左上圖）允許用戶刪除相應(yīng)的產(chǎn)品從他們的車，它包括用于運(yùn)輸或店內(nèi)取貨的選項(xiàng)。床浴和超越（右上圖）也允許刪除的項(xiàng)目;表中的每一項(xiàng)產(chǎn)品的數(shù)量可以改變一個(gè)按鈕上越走越遠(yuǎn)更新的頁(yè)面。
板條箱和桶（左上圖），允許用戶刪除產(chǎn)品，保存到收藏夾和更新數(shù)量的表中的行。每一行還包括運(yùn)輸成本和交貨時(shí)間等信息。Payless（右上圖），也可以讓消費(fèi)者更新的數(shù)量和刪除項(xiàng)目，它的車還提供了一個(gè)選擇的交付選項(xiàng)，包括將產(chǎn)品送到一個(gè)Payless專賣店（未顯示）。
購(gòu)物車應(yīng)提供最大的效用，因?yàn)橄M(fèi)者購(gòu)買的最后一點(diǎn)是接近的。讓購(gòu)物更改數(shù)量，移除項(xiàng)目和應(yīng)用推廣或優(yōu)惠券代碼，而不必去到另一個(gè)頁(yè)面，讓他們迅速通過(guò)采購(gòu)渠道的關(guān)鍵。如果你覺(jué)得這增加了太多的內(nèi)容的頁(yè)面，你可以使用漸進(jìn)披露背后的手風(fēng)琴，直到它需要隱藏一些內(nèi)容（如促銷代碼字段）。
結(jié)帳
Checkout是更多的比的圖案的方法，形成模式，雖然可以應(yīng)用到付款處流量。許多電子商務(wù)網(wǎng)站允許客戶使用移動(dòng)自己的網(wǎng)站上檢查出與現(xiàn)有的帳戶或作為嘉賓。人誰(shuí)已經(jīng)有一個(gè)帳戶，結(jié)帳過(guò)程是通過(guò)使用現(xiàn)有的付款和發(fā)貨信息，大大簡(jiǎn)化。
克拉奇菲爾德和諾德斯特龍都允許客戶檢查作為嘉賓或通過(guò)使用他們現(xiàn)有的帳戶。讓手機(jī)購(gòu)物已簽出作為嘉賓把他們的訂單后，創(chuàng)建一個(gè)帳戶和密碼重置都支持。
亞馬遜的電子郵件地址，要求的第一頁(yè)，結(jié)賬時(shí)，顧客是否有一個(gè)帳戶，或作為嘉賓被檢查出。的經(jīng)驗(yàn)是非常像網(wǎng)站用戶的桌面上。目標(biāo)移動(dòng)網(wǎng)站上提供的選項(xiàng)中的帳戶，以檢查為客人或創(chuàng)建一個(gè)帳戶。兩者都支持密碼重置。
允許客戶登錄或檢查作為嘉賓，并重置其密碼是一個(gè)必須為移動(dòng)電子商務(wù)的網(wǎng)站。另外，還要考慮邀請(qǐng)消費(fèi)者到自己的手機(jī)上創(chuàng)建一個(gè)帳戶后，把他們的訂單，因?yàn)樗麄円呀?jīng)給了你足夠的信息（輸入密碼除外），這樣做的。這可以讓客人更有可能的努力創(chuàng)建一個(gè)帳戶，因?yàn)樵谶@一點(diǎn)上應(yīng)該是最小的。
的“創(chuàng)建一個(gè)Target.com”的按鈕可能會(huì)導(dǎo)致一些廢棄的購(gòu)物車如果購(gòu)物者走這條路，并決定這是太多的努力。確認(rèn)訂單，然后再邀請(qǐng)注冊(cè)在發(fā)票上頁(yè)可能會(huì)更好。限制初始結(jié)帳屏幕兩種選擇，可以提高轉(zhuǎn)換，因?yàn)橘?gòu)物者將有更少的決定，使工作時(shí)，在小屏幕上。更少選擇的關(guān)鍵任務(wù)，如檢查出效果更好。
表格
形式是最常用的移動(dòng)電子商務(wù)，搜索，檢查，登記，并輸入優(yōu)惠券和促銷代碼。請(qǐng)注意形式為小屏幕設(shè)計(jì)時(shí)的一些良好做法：
- 將表格上面的標(biāo)簽輸入字段，使他們不推卸屏幕，當(dāng)用戶放大到輸入。
- 使用HTML5輸入類型顯示相應(yīng)的鍵盤使用領(lǐng)域。對(duì)于電子郵件地址，使用類型=“電子郵件”。對(duì)于數(shù)字字段，如郵政編碼，使用類型=“數(shù)字”或“電話”（后者將顯示一個(gè)數(shù)字鍵盤，更大的按鈕）。
- 領(lǐng)域的強(qiáng)制性只有在絕對(duì)必要。這將減少摩擦，讓客戶通過(guò)了結(jié)帳過(guò)程。
最好的方式來(lái)處理形式的智能手機(jī)是使用很少能可能。您可以使用地理位置建議購(gòu)物者的ZIP代碼，你可以讓客戶使用他們先前輸入的帳戶信息時(shí)，使用你的網(wǎng)站。請(qǐng)記住，最好的形式是一個(gè)購(gòu)物者從來(lái)沒(méi)有完成。
CVS（上圖左一）不帶數(shù)字鍵盤，當(dāng)用戶點(diǎn)擊“郵政編碼”字段，并在結(jié)賬頁(yè)面。這需要從購(gòu)物者，以獲得正確的鍵盤的一個(gè)不必要的抽頭。，CVS也贊同標(biāo)簽左邊的表單域，在那里他們可以得到推過(guò)屏幕，如果用戶縮放到一個(gè)領(lǐng)域。板條箱和桶（右上圖），有更多的移動(dòng)友好的形式。它帶來(lái)了大的數(shù)字鍵盤，當(dāng)有人點(diǎn)擊“郵政編碼”字段中。它還頂部對(duì)齊表單標(biāo)簽，這樣他們就不會(huì)滑落的頁(yè)面。
請(qǐng)記住，形式是如何的購(gòu)物網(wǎng)站上完成交易。要特別注意他們，并盡你所能來(lái)完成他們的互動(dòng)成本降低。有時(shí)，它甚至可能意味著試圖完全不同的東西。例如，Typeform最近提出了一種新的經(jīng)驗(yàn)，反應(yīng)更迅速，簡(jiǎn)單和用戶友好的Web表單。我們的想法是要求在一個(gè)時(shí)間只有一個(gè)問(wèn)題，但它突出顯示，讓用戶鍵入快捷鍵，填寫表格時(shí)。這不是選項(xiàng)，在任何情況下，將工作，但某些形式可能是相當(dāng)有幫助的。
結(jié)論
隨著移動(dòng)電子商務(wù)作為零售商的收入來(lái)源的重要性日益增加，手機(jī)優(yōu)化的網(wǎng)站都提供很多的功能，消費(fèi)者所需要和期望的基礎(chǔ)上桌面的購(gòu)物體驗(yàn)。的研究工作英鎊品牌和SmithGeiger顯示的，移動(dòng)的消費(fèi)者更愿意購(gòu)買時(shí)，該網(wǎng)站是移動(dòng)的。
通過(guò)使用現(xiàn)有的設(shè)計(jì)模式，能夠更迅速地得到您的電子商務(wù)網(wǎng)站準(zhǔn)備的小屏幕，你就可以開(kāi)始探索不同的選擇。但不停止現(xiàn)有的模式，使用它們作為出發(fā)點(diǎn)，探索設(shè)計(jì)，并幫助您考慮的選項(xiàng)，你可能沒(méi)有想到的。瀏覽器功能的增加，使界面設(shè)計(jì)和交互模式從本地應(yīng)用程序到您的瀏覽器為基礎(chǔ)的智能手機(jī)的購(gòu)物體驗(yàn)。
本文作者來(lái)自北京傳誠(chéng)信，轉(zhuǎn)載請(qǐng)注明出處：北京傳誠(chéng)信（www.zwaishen.com）
