譯者注：此文是下半身，上半身也比較有料，沒看過上半身的童鞋，可以先看“《人人譯客》如何規劃你的移動電商網站（1）”

影響移動電商網站轉化率的設計元素有哪些？

讓我們從移動互聯網的角度來解釋一下，有哪些因素會影響用戶瀏覽移動電商網站的方式。

層級與導航

移動UI中，留白很關鍵。我們沒有資源去呈現龐雜的菜單給用戶，去瀏覽多級分類。因此，我們需要將主要功能和內容進行分類排序，并在固定的位置上提供一個搜索框。隨著用戶認知度的提升，側滑菜單導航越來越流行了。

Currys的響應式網站就做得不錯。它提供了一個側滑頂部導航欄、一個下滑式搜索框、快捷購物車入口、賬戶入口和一個發現店鋪入口，在用戶逛商店的過程中，這些元素簡潔地固定在一個地方。

當你下滑時，頂部的logo區域消失，五個主菜單選項上移頂格，減少了網頁頭部所占高度，將用戶關注的內容更好地呈現出來。

犧牲可用性和加載時間去強化品牌的導航

有時候我們需要妥協。當我們在為Crockett&Jones設計移動網站時，他們豐富的品牌線和企業對品質的追求驅使我們選擇了更加形象的菜單結構，以便強化品牌。我們測試了5種導航方式。

基于我們對主流移動電商網站的研究，我們覺得一個固定在頂部的菜單能提供最佳的易用性。但Currys使用的圖標菜單對于Crockett&Jones的用戶來說不太合適。所以，我們在頂部添加了一個菜單按鈕，它可以向下展開出一個導航列表和一個矩陣式的圖片菜單。這使得我們有空間去加載那些能夠體現英倫風格的圖像。

【圖】彈出式導航、矩陣式子菜單、商品搜索結果

固定式導航VS非固定式導航

固定的導航總是在某個位置上，用戶上下滑動時它都是可見的。非固定式導航就恰恰相反，當用戶滑動到頁面頂部時才能看得見。

從我關注的幾個主流電商網站來看，固定導航是大趨勢。在我看來這是合情理的，固定式導航完勝非固定式。要滑動到頂部去找菜單是一件很很惱人的事情，有了固定式菜單，輕輕移動手指就可以查看網站的其他分支頁面了。要實現這個很簡單，使用jQuery件MeanMenu或Bootstrap‘s的Navbar。

意象與產品圖片

我們都明白產品圖片可以造就一個網站的外觀或感覺。不論是在購買一次旅行計劃還是一個燉鍋，移動購物者都希望能看到抓住他們內心并能激發他們購買欲望的圖片。產品圖片的基本元素都在這里意義解讀，一定要保證有這些用戶要用來做決定的圖片。

1、單品整體照

這是一張從最佳角度拍攝的照片，一般來說應該是白色背景的。

2、細節照片

這是一張產品特殊功能或設計細節的特寫，比如，針腳走線工藝，用料，標簽或者一些手工細節。

3、組件照片

如果是一套家庭影院，拍一些單品照片，包括DVD、音響、遙控器和裝飾物。

4、360度展示

這是一套照片，能夠讓用戶旋轉拖動產品360去查看。一般來說是36張照片，每10度拍攝一張。我們使用這個方法在Crockett&Jones的網站上取得了很驚艷的效果。我們使用了Eme Digital的大型360度拍攝系統，然后自定義jQuery去實現旋轉效果。

5、產品組合照

這個照片主要用于類別級展示或批發售賣。組合照–一系列的燉鍋或者披薩相關的用品和飲料，主要是一些互補產品，去幫助商家增加銷售量。

6、使用場景照

這是一張很重要但經常被忽視的一張照片，產品被使用的照片。比如，衣服穿在模特身上的效果和平鋪的效果有著天壤之別。這些照片非常具有激發性，會刺激用戶下單購買。

移動設備上，速度是個老問題了。所以一定要優化你的圖片以提高加載速度，但不要在圖片質量上打折扣。嗯，目前已經有很多人開發了響應式的網頁圖片解決方案，但不論你使用什么方法都要配得上你的精美圖片才行。Peter Crawfurd有一篇總結叫“聰明地使用產品圖片去改善你的電商網站”。

拓撲關系

怎樣趕走一位移動網頁用戶？讓他們去放大縮小調整閱讀網頁內容即可。必須縮放才能閱讀網頁文字會令人非常不爽，所以要保證網頁拓撲的可讀性、對比度、響應性和布局合理。有一些響應式設計的拓撲供我們參考。

我們基于Bootstrap3的設備屏寬斷點，然后通過一個簡單的CSS媒體查詢來實現上面的拓撲。

手指舒適度

所有關鍵交互動作涉及的控件都必須足夠大，手指點起來沒有困難。根據“手指舒適設計：理想移動觸摸屏幕上的目標尺寸”一文所述，一個手指大概需要57像素寬，一個大拇指大約需要72像素寬。文章還指出，“這是符合費茨法則的，也就是目標越小，接觸目標的時間就越長。小的目標會拖慢用戶的行為，因為用戶需要額外的精力去精確點擊目標?！蔽矣X得我們忽視這個事實已經很多年了，特別是當我們不再拘泥于1024*768像素的時候。

這些通用的法則對于移動電商網站也一樣重要：

1、分類樹的導航；

2、搜索按鈕和篩選器（特別是那些需要精確點擊的復選框）；

3、所有的按鈕，比如“放入購物車”和“安全支付”；

4、用來填寫賬單、快遞信息的格式化區域；

5、產品圖片的縮略圖；

6、滑動瀏覽產品圖片，而不是單擊左右箭頭；

對比顏色和光照條件

不論你采用什么配色，按鈕顏色的強對比性都非常有必要，因為它可以增加用戶的點擊行為。如果一個控件與背景混淆了，用戶很可能會覺察不到它。

考慮到移動用戶的光照條件，如何去調整網站使他們覺得舒適？試試關掉燈，走到太陽底下或者到一個臺燈下看看你的配色表現如何。你可以用光照度媒體查詢調整CSS去適應不同的光照條件。

盡管目前還沒有瀏覽器支持這些特性，光照度媒體查詢是一個很酷的功能，希望它會很快流行吧，因為移動設備的光照條件差異太明顯了。這個技術可以提高用戶在黑暗或強光下的轉化率。甚至可以想象將首頁的促銷Banner從白天模式切換到夜間模式。

Tip：不要害怕使用大紅的按鈕。很多網站在把按鈕改為紅色后轉化率都提高了不少。你需要大膽測試并迭代。

留白與封裝

留白給內容以呼吸的空間、讓眼睛舒服也能防止元素扎堆?？梢宰層脩粼谧龀鲑徺I決定時感到放松。

用封裝的方式去吸引用戶對某個元素的注意力，比如“加入購物車”按鈕。使用一個能與按鈕顏色產生鮮明對比的背景容器。Unbounce是使用封裝的高手。

文案

多數客戶（譯者注：此處客戶是指甲方，給錢讓別人做網站的人，不是用戶哈）會提供產品、分類和網頁的文案，因為設計師和攻城獅沒有客戶那么了解產品。然而，我們知道勸導性用辭也明白這能導致更多轉化。比如“安全支付”比“結算”更具引導性，也灌注了更多的信任。

小屏幕上的長介紹文字會很煩人?？紤]使用一個“了解更多”的鏈接去展示多余的文字，或將描述分成幾個選項卡，這樣用戶就能快速定位到他感興趣的內容。

Tip：如果你的客戶正在撰寫產品描述，請他們讀一下Craig Anderson的“電商文案：提升銷售量指南”，這篇文章講述了好文案的基本要點。

表格

表格拖慢了所有人。用戶需要停下來思考并填寫它，提供正確的數據，檢查準確性，勾選和撤銷勾選一些復選框等等。對于移動設備來說，表格真是個大累贅，一定要盡量確保你的表格清晰可見和易于填寫。設置正確的輸入類型（網址、郵箱、電話等），這樣移動瀏覽器才能彈出合適的鍵盤。

用戶結算流程中還要明確告知用戶當前的狀態，這樣他們對于結算的流程才能有一個固定的心理預期。Derek Nelson對此有非常棒的見解–“設計更好的移動結算流程”。

理想的產品頁面

我認為我們很難得到一個“完美的”產品單頁，因為總會有人看到比我們多的問題。然而Currys的產品頁面確實非常棒。讓我們來拆解一下它吧。

Currys的產品頁面具有以下特點：

1、清晰的產品標題，符合企業色調的響應式拓撲；

2、價格顏色對比強烈，突出并相對其他價格信息更具可讀性的響應式拓撲；

3、清晰并突出于其他鏈接的行為引導（簡潔的表格封裝、手指舒適性）；

4、很棒的產品圖片，用戶做決定所需的所有照片都有（單品、組合和細節）；

5、簡短的描述可以讓用戶快速了解產品的功能；

6、為“深究型”買家提供更多詳細的信息；

7、明確告訴用戶是否有存貨、何時在哪里能拿到商品（這些信息都做了簡潔的格式化封裝）。

總的來說，頁面布局很棒，區塊元素間都有20像素的留白。企業品牌合理呈現，并未使頁面擁擠，目標通道有清晰定義。如果用戶對產品感興趣且價格合適，他們購買不會遇到任何問題。

做這些值得嗎？

Crockett&Jones

Crockett&Jones取得的效果很是喜人，頁面停留時間增加了，360度產品照片的查看數陡增，移動用戶的流失率下降了，這些我覺得都得益于內容、圖片和視頻的質量提升。用戶瀏覽的頁面數量也增加了，我覺得是導航布局得當。頂部固定的彈出式菜單讓用戶很方便的在網站內跳轉到不同分類，也不會影響品牌的展示。頁面加載速度肯定有提升，但是我們也需要兼顧代表品牌形象的圖片質量，這也是我們繼續努力地方向。

總結

整合出一個移動電商網站是一個多套規則的任務，這包括商業管理、設計、開發和營銷。不論你所在的組織規模有多大，你都可以創造一套模板，可以幫你跟進所有網站并能為不同項目定義不同細節。在計劃階段，你需要考慮以下幾方面：

1、你為誰設計（你的用戶）？他們的購買習慣是什么樣的？什么驅動他們買東西？

2、整合”明智的目標”（文章上半部分有介紹），讓你和你的客戶共享一個愿景；

3、制作一本針對移動設備的風格指南，包括按鈕樣式、字體字號等；

4、產出所有關鍵頁面的細節線框圖（主頁、分類頁、產品頁、搜索頁和購物車）；

5、將其他素材集合到一起（照片、視頻和文案）；

這樣去規劃，對于打造一個適合移動設備的電商網站來說很有幫助，它專注于你的目標用戶，將更多來訪用戶轉化為買家。

本文由人人都是產品經理@Tobbi翻譯，轉載請注明來源且保留本文鏈接。

原文鏈接：http://www.smashingmagazine.com/2014/03/19/how-to-plan-your-next-mobile-e-commerce-website/

?《人人譯客》由人人都是產品經理（woshiPM）團隊@核桃、@石頭、@Tobbi 組成。作為國內第一支專注于翻譯產品干貨的團隊，我們將第一時間為大家奉上國外有價值的產品文章，帶您先睹最IN的國外商業模式，領略最先進的產品理念?！案哔|量，干內容”是我們的產出原則，關注《人人譯客》，“墻外”的產品世界從此不再陌生。