淘寶店鋪裝修教程—無線端設計技巧

2016-06-20 11:31:59 文/無名氏人氣：6794

發現淘寶手機客戶端至今為止約4億次安裝，是京東客戶端的十幾倍。去年阿里巴巴雙11全天交易總額為912.17億元，其中無線端貢獻了68%的占比。所以現在無線端現在呈現出一種火熱的趨勢，無論是在商家數量、無線流量、成交額等都有一個量的提升。那么在此趨勢下，店鋪應該怎樣用過思維模式和技巧來提高轉化率呢?所以在設計無線端裝修的時候需要思考問題。

在開始無線裝修之前，我們首先要站在一個用戶的角度去分析移動終端購物的用戶使用習慣和購物環境，并思考如何通過頁面裝修引導消費。

一、移動端用戶使用特點

1.使用時間碎片化

絕大部分人都是利用閑散的時間來瀏覽，可能是在等車，可能是午休時間或是吃飯的時候等著上菜，更有可能是在上廁所的時候?？吹倪B貫時間可能不長，這就要求你的頁面有簡潔明了的表達，突出產品的賣點以及店鋪的利益點，讓消費者第一眼看得懂，其次有興趣看下去。

2.快速閱讀

對比在PC端的閱覽習慣，移動端的閱讀速度會相對更快。同時，用戶在使用移動終端時的視覺相對PC而言較短，注意力集中時間會縮短。

因此，針對以上移動端用戶特點，無線端的頁面設計有一定的局限性，并不能像pc端頁面那樣具有較大自由度的發揮空間。

二、無線端頁面設計要點

1.清晰的導購思路

用戶在看手機的時候會比較放松，如果在4秒內不能吸引到他，那么就會被無情地*走。因此，擁有一個清晰的導購思路是非常重要的。無線頁面的設計核心是模塊化，官方對頁面模塊的數量也是有限制，因此我們要利用有限的版塊創造更多的價值。

整店布局規劃——關鍵詞：關聯導購&閉環設計

首先我們來看一下，無線裝修包括哪些內容：無線首頁裝修、無線詳情頁裝修、二級頁面這個三個大版塊。我們要做的事情就是處理好這三者之間的銷售關聯。

我們經常要強調要以運營的思維去做設計，因為即使做得再漂亮但缺乏用戶認同的設計不是好設計。無線端展示的內容有限，因此用戶的瀏覽習慣肯定會有所不同。無線端的用戶一般是從單個寶貝開始瀏覽，之后才到首頁或二級頁的瀏覽。我們經過測試和實踐而總結出來的兩點經驗是：首頁的前三屏不放單品，改放模塊 (即分類入口或者海報)，這樣頁面的跳失率可以下降50%，我們通過這些模塊引導，可以很好地讓客戶一層一層地瀏覽，加深用戶的瀏覽興趣。

然后，在處理首頁——詳情頁——二級頁這三者的關聯上，我們要注意形成閉環的思路，在每一個頁面的底部利用好圖文模塊的關聯，搭建與其他頁面連接的橋梁，引導用戶到別的二級頁面瀏覽。

無線首頁布局規劃的重要性：我們首先要根據店鋪的消費人群進行分析，比如年齡、消費能力等，這些信息可以從江湖策進行查看。在確定好人群的喜好之后，我們就可以制定首頁的視覺風格，是歐美風還是日韓風，有針對性的設計能讓轉化率和點擊率更高哦!

普遍的無線首頁是由以下幾部分組成：店招、海報、分類入口、優惠券、單品展示等。一般而言，大都按照以下順序排列。

比如下面這個首頁案例，第一模塊的位置，可以利用無線即時效應，如新品上線或大型活動的前期可在手機端提前預熱，下面的模塊給用戶提供感興趣的導購入口，降低跳失率。接下來就可以利用無線端活動展示+產品推薦，讓用戶依賴無線端，提高回訪率。如果老客戶人群占比較高，可以采用新品展示為主、人氣產品展示為輔的形式呈現。

2.店鋪調性：同一板塊內不要超過3種顏色

在設計學中有一條“七秒鐘定律”，有研究表明“人關注一個商品的時間通常為7秒鐘，而這7秒鐘的時間內70%的人確定購買的第一要素是色彩”。

同一板塊內不要超過3種顏色。這三種顏色我們可以看作是主色、輔助色、提亮點綴。例如，上圖中恒大冰泉的無線端頁面，藍色是主色、白色是輔助色，黃色是點綴色。設計師使用這樣的配色方案是根據恒大冰泉的品牌VI色而決定的。這樣的配色方案就能讓這個頁面看起來十分地和諧統一，因為無線的頁面本身就很小，實在是不適合過多地賣弄色彩。

另外，在設計的時候可以多使用萬能搭配色，如黑、白、灰等顏色。因為這些顏色比較百搭，跟任何顏色搭配起來都會比較和諧和容易表現出高端的感覺。背景色盡量以淺色調為主，因為在移動端上觀看，淺色的背景色更能突出產品本身，使得買家注意力集中在產品上。

3.注重細節設計：

(1)選取半身圖或局部特寫圖

無線端的頁面大多是以豆腐塊的形式展現，范圍確實有限，因此在選擇圖片上要盡量使用半身圖或局部特寫圖，避免視覺上的不清晰。

(2)圖片與圖片之間的過渡搭配

如果全部都是用半身圖或特寫圖的話，頁面就會顯得單調和乏味。所以我們可以適當地穿插一些全景圖，有意識地調整頁面的節奏，使得整個頁面更加和諧活潑。

(3)圖文搭配的排列技巧

排版是為了統一文字和圖片的位置。在面積較小的情況下，統一能讓畫面看起來變得更大，還能避免因為“亂”和“雜”而產生的廉價感。

我們可以看到上面的無線海報案例相對于PC端的海報簡直是小菜一碟，但想要做好它也不是容易的事情，根據實操積累的經驗，我們可以得出以下技巧：

A.左圖右文(左文右圖)

文字的比例大多是占整個海報的1/2或1/3，文字盡量地放在同一個區域，在設計的時候，要注意文字間的關系，，字體上粗下細、上大下小，架構主次分明。

B.背景色彩統一