在這篇文章中，我們將規(guī)劃一個高轉(zhuǎn)換率的移動電子商務(wù)網(wǎng)站時，遍歷所有的重要步驟。 你要問最重要的問題是：

1. 我們是誰建立這個移動網(wǎng)站？
2. 我們將如何衡量成功轉(zhuǎn)換？
3. 什么樣的設(shè)計因素會影響移動電子商務(wù)的轉(zhuǎn)化率？
4. 什么是理想的產(chǎn)品頁面？

讓我們開始吧。

那么，誰正在我們建立這個手機(jī)網(wǎng)站的？

移動客戶是誰，我們都在不斷學(xué)習(xí)作為移動應(yīng)用變得更加廣泛和過濾器到日常生活。 要規(guī)劃一個移動電子商務(wù)商店，我們需要把自己在移動客戶的心態(tài)，了解他們的意圖和情緒。

手機(jī)使用位置

移動設(shè)備是一個生命入侵的設(shè)備。 我們用它在各種不同的情況：

• 一邊看電視;
• 購物時或在晚上出去;
• 在床上，或在浴室;
• 而吃了一頓（寵物恨我的！）;
• 無聊或守候在我們的辦公桌，在火車站或汽車乘客的時候。

在上述每一種情況中，人的心靈會處于不同的狀態(tài)，并可能會或可能不會在“采購模式。”我們還用手機(jī)在一天中的不同時段。

這是如何幫助我們呢？ 嗯，比如說，你可以策略性地放置不同的橫幅您的手機(jī)電子商務(wù)網(wǎng)站，如降價促銷，折扣或優(yōu)惠券，或許提供清晨折扣乘客，同時提供電視晚餐觀眾別的東西在的主頁上晚上（類似“看無聊的肥皂??？現(xiàn)在抓住一個DVD捆綁！”）。

移動購物者的主要類型

哥倫比亞大學(xué)商學(xué)院確定的五種類型的移動購物者在展廳和專賣店：剝削者，savvys，價格敏感者，體驗者和傳統(tǒng)主義者。 我已經(jīng)走了一步，思考人們?nèi)绾问褂盟麄兊氖謾C(jī)在展廳外面來決定是否購買產(chǎn)品。

• 該比較器
  該比較器瀏覽的產(chǎn)品在磚和迫擊炮商店，而他們的移動設(shè)備上的價格檢查。 他們可能會在店內(nèi)購買，使用網(wǎng)上價格作為談判籌碼。 但是，如果網(wǎng)上報價是足夠強(qiáng)大，產(chǎn)品可用，他們將購買他們的電話那里，然后，或當(dāng)他們回家后。
• 這筆交易的愛人
  此人喜歡便宜貨，而當(dāng)他們在店里，他們會找一個在線優(yōu)惠券，一個Groupon的交易或東西從買在高街的價格拯救他們。 他們不同于他們愿意相信他們所得到特殊處理，在有限的要約或獨(dú)家推廣（想秘密逃逸的獨(dú)家協(xié)議或Booking.com的最低價格保證），該比較器。
• 社交購物者
  不斷地連接到各種社會渠道，社會的購物者如下名流，行業(yè)領(lǐng)袖和品牌上的Instagram，Twitter和Pinterest的，尋找最新的流行趨勢，小工具等。 點(diǎn)擊通過一切從復(fù)古過濾的照片，嚴(yán)重喜歡的衣服，他們只需要購買要準(zhǔn)備好周末。
• 時間匆匆過客
  此人只需要打發(fā)時間，等待某人或某事。 他們沖動買家通常，瀏覽商店，他們已經(jīng)知道（指揮交通的一種形式）的最新產(chǎn)品。 他們可能會訂閱新聞提要或電子郵件列表，并通過點(diǎn)擊直接推動社會渠道了。

所有這些類型的手機(jī)購物者有移動電子商務(wù)門店很高的期望。

為什么這很重要？ 你需要確保你迎合各種不同類型的購物者誰可能訪問移動設(shè)備上的存儲。 你得找出他們，給他們他們尋求和展示信息的格式，他們習(xí)慣使用的選項。 如果沒有，你最終會討厭他們，而不是增加你的客戶的底線。

我們?nèi)绾螌y量轉(zhuǎn)換成功？

我們需要定義的成功看起來是什么樣的轉(zhuǎn)換。 通常情況下，轉(zhuǎn)換分為以下類別之一：

• 采購
  訪問者已完成購買交易。
• 社會促進(jìn)
  訪問者可以按照你的社會渠道;份額，鳴叫或喜歡你的產(chǎn)品或品牌，寫評論，訂閱時事通訊，等等
• 完成任務(wù)
  訪問者已經(jīng)完成了一些任務(wù)，無論是玩游戲，填寫調(diào)查顯示，進(jìn)入一個競爭等。

然后，我們需要給自己訂了一些SMART目標(biāo) （由Paul J.邁耶所定義）來跟蹤和衡量我們的成功。 這些目標(biāo)也將幫助我們專注于項目，而不是得意忘形過spec’ing或過度設(shè)計的網(wǎng)站。 那么，什么是SMART目標(biāo)？

• S pecific
  我們的目標(biāo)應(yīng)該是明確的，應(yīng)該定義我們希望達(dá)到的目標(biāo)。
• M easureable
  我們?nèi)绾蝸砗饬磕兀?通過什么方法？ 我們可以說誰是負(fù)責(zé)報告這一點(diǎn)，就是他們將報告走得更遠(yuǎn)。
• 一個 ttainable
  如何將這個目標(biāo)可以實(shí)現(xiàn)嗎？ 需要做的事情要做到這一點(diǎn)呢？ 我們有沒有預(yù)算，技術(shù)和時間？
• ?elevant
  這是與我們的整體愿景？ 是市場準(zhǔn)備好了嗎？ 是我們合適的人這樣做呢？
• 噸輸入法綁定
  如何快速才能實(shí)現(xiàn)這一目標(biāo)？ 我們什么時候開始和結(jié)束？

以下是三組，我們已經(jīng)在過去設(shè)定的目標(biāo)。 這些將直接影響怎么一去有關(guān)設(shè)計和開發(fā)移動電子商務(wù)商店。

SMART目標(biāo)1

• 具體
  增加35％的移動電子商務(wù)轉(zhuǎn)換。
• 測
  在Magento分部銷售報告。
• 達(dá)到
  通過創(chuàng)建一個具有響應(yīng)性的電子商務(wù)商店做到這一點(diǎn)。
• 相應(yīng)
  這符合我們整體轉(zhuǎn)換的目標(biāo)和目的采用移動技術(shù)。
• 時限
  網(wǎng)站的推出在三個月內(nèi)完成它。

SMART目標(biāo)2

• 具體
  通過5英鎊增加移動平均訂單。
• 測
  結(jié)合分割銷售報告在Magento給日均訂單價值。
• 達(dá)到
  改善向上銷售和交叉銷售的商品頁面，并在購物車推薦配套產(chǎn)品。
• 相應(yīng)
  這符合我們整體轉(zhuǎn)換的目標(biāo)。
• 時限
  在30天內(nèi)完成這項工作，然后通過不斷的測試和迭代改進(jìn)。

SMART目標(biāo)3

• 具體
  降低跳出率低于56％的頂級類別。
• 測
  分析一組時間段在谷歌Analytics（分析）頁面訪問的報告。
• 達(dá)到
  改善加載時間低于3G網(wǎng)絡(luò)在四秒，并提高著陸頁面設(shè)計。
• 相應(yīng)
  雖然不是直接變換本身，這將提高其他所有的轉(zhuǎn)化率通過保持用戶在網(wǎng)站上的時間更長，提高訪問的每個用戶的頁面數(shù)。
• 時限
  測試超過14天的滾動周期，迭代的設(shè)計，直到我們擊中目標(biāo)。

小提示：打印這些目標(biāo)在一個大的字體大小，并把它們所在的整個團(tuán)隊可以看到他們。 問團(tuán)隊成員的工作將如何有助于共同目標(biāo)。 如果任務(wù)不出力的話，那么質(zhì)疑它的需要。

哪些設(shè)計因素影響移動電子商務(wù)轉(zhuǎn)換率？

讓我們通過對影響客戶如何瀏覽一個電子商務(wù)網(wǎng)站的因素，從移動的角度。

層次結(jié)構(gòu)和導(dǎo)航

空間是在移動的溢價。 我們沒有提供大型的菜單供用戶瀏覽多類別的奢侈品。 因此，我們需要優(yōu)先考慮的主要功能和內(nèi)容，并提供一個搜索框，這是在一致的位置很方便。 采納了帆布導(dǎo)航正成為普遍的用戶開始了解如何使用它。

Currys的’敏感網(wǎng)站通過提供離線帆布頂級導(dǎo)航，搜索下拉框，即時購物車和帳戶訪問和存儲取景器，所有在一個非常小的空間，仍然是整個客戶的全程一貫做這非常好。

當(dāng)你再向下滾動，標(biāo)志區(qū)消失，五個主菜單項上移，減少了報頭所占用的空間，并給訪問者所感興趣的內(nèi)容優(yōu)先

貿(mào)易可用性和品牌導(dǎo)航加載時間

有時候，你需要做一個權(quán)衡。 當(dāng)我們開發(fā)克羅克特和瓊斯的移動網(wǎng)站，我們的品牌指導(dǎo)方針和公司的傳統(tǒng)和質(zhì)量信譽(yù)使我們更加畫報菜單系統(tǒng)，以強(qiáng)化品牌。 我們嘗試了5直觀的導(dǎo)航方法：

從我們的研究進(jìn)入了領(lǐng)先的移動電子商務(wù)網(wǎng)站，我們認(rèn)為，在頂部有一個固定的菜單將提供最佳的可用性。 像Currys的那些圖標(biāo)觀眾的網(wǎng)站克羅克特和瓊斯不會是正確的“。 相反，我們使用一個菜單按鈕し下降到一個導(dǎo)航列表，與通過一個矩陣菜單加載子頁面。 這使我們空間添加圖像，給那的外觀和感覺的英國遺產(chǎn)。

固定導(dǎo)航比。 非固定式導(dǎo)航

固定導(dǎo)航坐的地方，總是看到他們是否向上或向下滾動用戶。 非固定導(dǎo)航是相反的，可見的，只有當(dāng)用戶是在頁面的頂部。

基于各大品牌我都跟著電子商務(wù)網(wǎng)站，但趨勢是固定的導(dǎo)航，我認(rèn)為這是有道理的。 對于我來說，固定導(dǎo)航的手中奪下來，不得不一路往回滾動到頁面頂部找到菜單欄是煩人。 有了固定的導(dǎo)航，你永遠(yuǎn)只能快速的手指運(yùn)動遠(yuǎn)離訪問網(wǎng)站的深層部分。 實(shí)現(xiàn)這個很容易與MeanMenu jQuery插件或引導(dǎo)的導(dǎo)航條 。

圖像和產(chǎn)品攝影

我們都知道，攝影可以使或打破一個網(wǎng)站的外觀和感覺。 移動用戶希望看到的影像深深吸引他們，激勵他們進(jìn)行購買，無論是度假或鍋里。 產(chǎn)品攝影的基礎(chǔ)知識是永遠(yuǎn)重要的位置，所以一定要得到所有的客戶需要做出決定的圖片。

• 個人拍攝
  這是一個鏡頭的產(chǎn)品處于最佳角度，通常對一個白色的背景。

• 詳細(xì)拍攝
  這是一個特寫鏡頭顯示產(chǎn)品的特殊功能或設(shè)計的細(xì)節(jié) – 例如，拼接的質(zhì)量，所用的材料，標(biāo)簽或手工制作的細(xì)節(jié)。

• 拍攝組件
  如果它是一個家庭影院系統(tǒng)，然后利用它的各個部分的鏡頭，包括DVD播放機(jī)，音箱，遙控器及配件。

• 360°拍攝
  這是一個動畫圖像組，允許用戶通過旋轉(zhuǎn)360°的自旋的乘積。 它通常由36次射門，每10°。 我們用這個夢幻般的效果與上克羅克特和瓊斯的網(wǎng)站鞋 。 我們拍攝的EME數(shù)字的大360攝影系統(tǒng) ，然后編寫自定義jQuery來控制旋轉(zhuǎn)的效果。

• 組鏡頭
  這通常是用在類別層次或組合產(chǎn)品。 集體照 – 無論是為了一系列的鍋或比薩餅，一邊喝 – 展示配套產(chǎn)品，并幫助廠商追加銷售給客戶。

• 在使用拍攝
  一個重要但經(jīng)常被遺忘的鏡頭是正在使用的產(chǎn)品之一。 例如，衣服看起來平放時比當(dāng)上一個真人模特表現(xiàn)得非常不同。 這些鏡頭是理想，可以高度激勵顧客購買。

在移動，速度是一個障礙，所以記得要優(yōu)化圖像快速加載，不影響質(zhì)量。 當(dāng)然，很多的努力正在投入開發(fā)一個響應(yīng)的圖像解決方案 ，但是你采取任何方式只會不如你的攝影。 彼得·克勞福德越過如何“ 提高你的電子商務(wù)設(shè)計與輝煌的產(chǎn)品照片 。“

活版印刷

想知道如何關(guān)閉移動用戶很快？ 使他們不得不捏和縮放閱讀文字！ 不必放大，使在手機(jī)上的文字清晰易讀是很煩人的，因此請確保您的字體是可讀的，對比，反應(yīng)迅速，以及間隔。 有技術(shù)響應(yīng)排版 ，我們可以遵循。

我們用一個簡單的CSS媒體查詢來實(shí)現(xiàn)上面的版式的基礎(chǔ)上，引導(dǎo)3的斷點(diǎn)設(shè)備寬度，以確保所有設(shè)備的一致性。

 @media screen and (max-width: 320px) { .hero h2 { color: white; font-size: 2em; font-weight: 100; font-family: "bebas-neue"; } }

手指友好

所有這些關(guān)鍵的呼吁行動應(yīng)足夠大，以用手指按壓。 據(jù)“ 手指友好的設(shè)計：理想的移動觸摸屏目標(biāo)尺寸 ，“那是約57個像素寬的手指和72個像素寬的拇指。 文章還指出，“這是一致的菲茨定律 ，它說，要達(dá)到一個目標(biāo)的時間較長，如果目標(biāo)是較小的。 一個小目標(biāo)用戶減慢下來，因為他們要格外注意準(zhǔn)確地命中目標(biāo)。“我會說，我們大多數(shù)人都忽略了這個事實(shí)了很多年，尤其是我們調(diào)整了我們的1024×768的心態(tài)。

這是通用于移動電子商務(wù)網(wǎng)站的所有領(lǐng)域非常重要的：

• 類別樹的導(dǎo)航;
• 搜索按鈕和過濾器（需要精確的觸摸特別是復(fù)選框）;
• 所有按鈕，包括“添加到購物車”和“現(xiàn)在安全支付”;
• 表單字段中輸入付款和發(fā)貨的細(xì)節(jié);
• 產(chǎn)品圖片的縮略圖;
• 刷卡，而不是攻左，右箭頭的產(chǎn)品照片，。

對比的色彩和光線條件

無論調(diào)色板您選擇，強(qiáng)烈的反差是刻不容緩的按鈕，并呼吁采取行動。 如果一個對象在融合，用戶很可能會錯過它。

考慮移動用戶的照明條件和如何將它們?nèi)菁{在該網(wǎng)站的外觀和感覺。 試試關(guān)掉燈，走出去到明亮的陽光下反射燈緊緊地團(tuán)結(jié)在一起，看看你的調(diào)色板執(zhí)行。 您可以調(diào)整CSS來解釋不同的光線條件與什么被稱為輕級別的媒體查詢 。

 @media (light-level: normal) { p { background: url("texture.jpg"); color: #333 } } @media (light-level: dim) { p { background: #222; color: #ccc } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } }

雖然沒有瀏覽器目前支持這些，光級媒體查詢是，希望能采納，因為一旦移動設(shè)備真的是在不同的光照條件下使用一個很酷的功能。 這種技術(shù)可以提高轉(zhuǎn)化率，在黑暗和明亮的陽光下移動使用。 人們甚至可以想像交換宣傳標(biāo)語為白天和夜間！

提示：不要害怕紅色按鈕。 轉(zhuǎn)換已經(jīng)增加了一噸的網(wǎng)站切換到紅色的強(qiáng)烈對比。 測試和迭代！

白色的空間和封裝

白色的空間讓內(nèi)容喘息的機(jī)會，輔助眼流和declutters。 它可以在決定購買時，放松身心的游客。

使用封裝提請游客注意的元素，比如一個“添加到購物車”按鈕。 創(chuàng)建按鈕的容器用對比的背景顏色。 Unbounce做了偉大的工作，解釋封裝 。

文案

廣大客戶將向您提供一份他們的產(chǎn)品，類別和通用的頁面，因為我們的設(shè)計師和開發(fā)人員總是不知道該產(chǎn)品，以及我們的客戶（希望如此）。 然而，我們確實(shí)知道有說服力的措辭，以及如何使用它呼吁采取行動。 例如，“支付安全現(xiàn)在是”更激勵和灌輸更多的信任不僅僅是“退房”。

龍的描述，可惱人的小屏幕上。 認(rèn)為“閱讀更多”的鏈接以顯示更多的文字，或分裂的描述成幾個標(biāo)簽，讓移動用戶能夠翻翻他們正在尋找的信息。

提示：如果您的客戶端寫產(chǎn)品說明，讓他們讀克雷格·安德森的“ E 商貿(mào)文案：本教程以銷售更多 ，“這將遍歷編寫好的副本的基本知識。

表格

表格大家慢下來。 用戶必須停下來想一想在加油吧，提供正確的數(shù)據(jù)，掃描精度，檢查并取消勾選框等。 形式可以是特別麻煩的移動設(shè)備上，所以一定要確保你的手指是友好的和清晰的。 記住要使用正確的輸入類型（URL，電子郵件，電話等），以便在移動瀏覽器中顯示相應(yīng)的鍵盤。

顯示給用戶他們在結(jié)帳過程中的地位，也讓他們看到自己的進(jìn)步，看到了光在隧道的盡頭。 德里克·納爾遜說得好在“ 設(shè)計一個更好的移動結(jié)帳過程 ?！?/p>

理想的產(chǎn)品頁面

我不認(rèn)為你所能得到的“完美”的產(chǎn)品頁面，因為很多是留給旁觀者的眼睛。 然而，Currys的“產(chǎn)品頁面變得相當(dāng)?shù)慕咏?讓我們把它分解。

Currys的“具有以下屬性：

• 明確產(chǎn)品稱號，并于企業(yè)調(diào)色板響應(yīng)排版;
• 價格對比色，響應(yīng)排版突出的，是可讀高于其他所有的價格信息;
• 行動突出的上述網(wǎng)頁上的所有其他環(huán)節(jié)非常清晰的通話（與簡單的形式封裝和手指友好）;
• 偉大的攝影，所有用戶需要做出購買決策（包括個人，分量和細(xì)節(jié)鏡頭）的鏡頭;
• 簡短的描述給人的產(chǎn)品的功能的簡要概述;
• 關(guān)于產(chǎn)品的研究型客戶更詳細(xì)的信息;
• 指示的可用性，顯示何時何地，客戶可以得到它（用簡單的形式封裝）。

總體而言，該頁面是很好間距，與20像素的塊級元素之間的空白。 企業(yè)品牌是存在不使頁面變得混亂，而目標(biāo)渠道得到明確界定。 如果游客有興趣的產(chǎn)品和價格是正確的，那么他們就沒有障礙購買它。

這一切值得嗎？

克羅克特和瓊斯

該結(jié)果克羅克特和瓊斯是壓倒性的，增加的時間在頁，360°照片（我們設(shè)定為在谷歌Analytics（分析）轉(zhuǎn)換目標(biāo)來衡量其有效性）和降低跳出率，為移動用戶，我強(qiáng)烈地增加了看法相信是由于內(nèi)容的質(zhì)量，圖像和視頻。 訪問過的網(wǎng)頁也漲了，這是我的屬性的導(dǎo)航布局。 不斷擴(kuò)大的菜單固定在頂部使得它很容易為??用戶跳來跳去的網(wǎng)站，并找到自己的方式回來，同時堅持品牌的傳統(tǒng)。 頁面速度肯定會有所改善，但我們不得不與體現(xiàn)品牌的高品質(zhì)圖像的優(yōu)化平衡，這肯定是我們還在努力。

總結(jié)

組建了一個手機(jī)電子商務(wù)網(wǎng)站，它包括企業(yè)管理，設(shè)計，開發(fā)和營銷一個多學(xué)科的任務(wù)。 無論你的機(jī)構(gòu)的大小，創(chuàng)建一個樣板的過程，你可以按照對所有的網(wǎng)站，但你能適應(yīng)每個項目的具體情況。 在這個過程中的規(guī)劃階段，包括以下內(nèi)容：

• 你是誰設(shè)計的（即你的客戶）？ 什么是他們的購買習(xí)慣，是什么驅(qū)使他們購買？
• 放在一起，讓您和客戶的共同愿景SMART目標(biāo)。
• 創(chuàng)建一個樣式指南，適合于移動設(shè)備，包括按鍵設(shè)計，字體大小等等。
• 生成線框，詳情所有關(guān)鍵頁面（首頁，分類頁，產(chǎn)品頁，搜索和購物車）。
• 將所有的數(shù)字資產(chǎn)（攝影，錄像及復(fù)印件）在一起。

規(guī)劃以這種方式將幫助您實(shí)現(xiàn)一個電子商務(wù)網(wǎng)站，是很適合移動優(yōu)化，這是針對你的客戶的客戶和覆羽更多的游客到買家。