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

影響移動電商網(wǎng)站轉(zhuǎn)化率的設(shè)計(jì)元素有哪些？

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

層級與導(dǎo)航

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

Currys的響應(yīng)式網(wǎng)站就做得不錯。它提供了一個側(cè)滑頂部導(dǎo)航欄、一個下滑式搜索框、快捷購物車入口、賬戶入口和一個發(fā)現(xiàn)店鋪入口，在用戶逛商店的過程中，這些元素簡潔地固定在一個地方。

當(dāng)你下滑時，頂部的logo區(qū)域消失，五個主菜單選項(xiàng)上移頂格，減少了網(wǎng)頁頭部所占高度，將用戶關(guān)注的內(nèi)容更好地呈現(xiàn)出來。

犧牲可用性和加載時間去強(qiáng)化品牌的導(dǎo)航

有時候我們需要妥協(xié)。當(dāng)我們在為Crockett&Jones設(shè)計(jì)移動網(wǎng)站時，他們豐富的品牌線和企業(yè)對品質(zhì)的追求驅(qū)使我們選擇了更加形象的菜單結(jié)構(gòu)，以便強(qiáng)化品牌。我們測試了5種導(dǎo)航方式。

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

【圖】彈出式導(dǎo)航、矩陣式子菜單、商品搜索結(jié)果

固定式導(dǎo)航VS非固定式導(dǎo)航

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

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

意象與產(chǎn)品圖片

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

1、單品整體照

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

2、細(xì)節(jié)照片

這是一張產(chǎn)品特殊功能或設(shè)計(jì)細(xì)節(jié)的特寫，比如，針腳走線工藝，用料，標(biāo)簽或者一些手工細(xì)節(jié)。

3、組件照片

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

4、360度展示

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

5、產(chǎn)品組合照

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

6、使用場景照

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

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

拓?fù)潢P(guān)系

怎樣趕走一位移動網(wǎng)頁用戶？讓他們?nèi)シ糯罂s小調(diào)整閱讀網(wǎng)頁內(nèi)容即可。必須縮放才能閱讀網(wǎng)頁文字會令人非常不爽，所以要保證網(wǎng)頁拓?fù)涞目勺x性、對比度、響應(yīng)性和布局合理。有一些響應(yīng)式設(shè)計(jì)的拓?fù)?/a>供我們參考。

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

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

1、分類樹的導(dǎo)航；

2、搜索按鈕和篩選器（特別是那些需要精確點(diǎn)擊的復(fù)選框）；

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

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

5、產(chǎn)品圖片的縮略圖；

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

對比顏色和光照條件

不論你采用什么配色，按鈕顏色的強(qiáng)對比性都非常有必要，因?yàn)樗梢栽黾佑脩舻狞c(diǎn)擊行為。如果一個控件與背景混淆了，用戶很可能會覺察不到它。

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

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

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

留白與封裝

留白給內(nèi)容以呼吸的空間、讓眼睛舒服也能防止元素扎堆。可以讓用戶在做出購買決定時感到放松。

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

文案

多數(shù)客戶（譯者注：此處客戶是指甲方，給錢讓別人做網(wǎng)站的人，不是用戶哈）會提供產(chǎn)品、分類和網(wǎng)頁的文案，因?yàn)樵O(shè)計(jì)師和攻城獅沒有客戶那么了解產(chǎn)品。然而，我們知道勸導(dǎo)性用辭也明白這能導(dǎo)致更多轉(zhuǎn)化。比如“安全支付”比“結(jié)算”更具引導(dǎo)性，也灌注了更多的信任。

小屏幕上的長介紹文字會很煩人?？紤]使用一個“了解更多”的鏈接去展示多余的文字，或?qū)⒚枋龇殖蓭讉€選項(xiàng)卡，這樣用戶就能快速定位到他感興趣的內(nèi)容。

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

表格

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

用戶結(jié)算流程中還要明確告知用戶當(dāng)前的狀態(tài)，這樣他們對于結(jié)算的流程才能有一個固定的心理預(yù)期。Derek Nelson對此有非常棒的見解–“設(shè)計(jì)更好的移動結(jié)算流程”。

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

我認(rèn)為我們很難得到一個“完美的”產(chǎn)品單頁，因?yàn)榭倳腥丝吹奖任覀兌嗟膯栴}。然而Currys的產(chǎn)品頁面確實(shí)非常棒。讓我們來拆解一下它吧。

Currys的產(chǎn)品頁面具有以下特點(diǎn)：

1、清晰的產(chǎn)品標(biāo)題，符合企業(yè)色調(diào)的響應(yīng)式拓?fù)洌?/p>

2、價格顏色對比強(qiáng)烈，突出并相對其他價格信息更具可讀性的響應(yīng)式拓?fù)洌?/p>

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

4、很棒的產(chǎn)品圖片，用戶做決定所需的所有照片都有（單品、組合和細(xì)節(jié)）；

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

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

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

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

做這些值得嗎？

Crockett&Jones

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

總結(jié)

整合出一個移動電商網(wǎng)站是一個多套規(guī)則的任務(wù)，這包括商業(yè)管理、設(shè)計(jì)、開發(fā)和營銷。不論你所在的組織規(guī)模有多大，你都可以創(chuàng)造一套模板，可以幫你跟進(jìn)所有網(wǎng)站并能為不同項(xiàng)目定義不同細(xì)節(jié)。在計(jì)劃階段，你需要考慮以下幾方面：

1、你為誰設(shè)計(jì)（你的用戶）？他們的購買習(xí)慣是什么樣的？什么驅(qū)動他們買東西？

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

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

4、產(chǎn)出所有關(guān)鍵頁面的細(xì)節(jié)線框圖（主頁、分類頁、產(chǎn)品頁、搜索頁和購物車）；

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

這樣去規(guī)劃，對于打造一個適合移動設(shè)備的電商網(wǎng)站來說很有幫助，它專注于你的目標(biāo)用戶，將更多來訪用戶轉(zhuǎn)化為買家。

本文由人人都是產(chǎn)品經(jīng)理@Tobbi翻譯，轉(zhuǎn)載請注明來源且保留本文鏈接。

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

?《人人譯客》由人人都是產(chǎn)品經(jīng)理（woshiPM）團(tuán)隊(duì)@核桃、@石頭、@Tobbi 組成。作為國內(nèi)第一支專注于翻譯產(chǎn)品干貨的團(tuán)隊(duì)，我們將第一時間為大家奉上國外有價值的產(chǎn)品文章，帶您先睹最I(lǐng)N的國外商業(yè)模式，領(lǐng)略最先進(jìn)的產(chǎn)品理念。“高質(zhì)量，干內(nèi)容”是我們的產(chǎn)出原則，關(guān)注《人人譯客》，“墻外”的產(chǎn)品世界從此不再陌生。