電商如何做好移動(dòng)端優(yōu)化

本文主題淘寶,淘寶頁(yè)面,淘寶問(wèn)答。

現(xiàn)在，隨著移動(dòng)設(shè)備的興起，電商也逐漸的步入了移動(dòng)端的時(shí)代，那么對(duì)于電商來(lái)說(shuō)，移動(dòng)端應(yīng)該怎么去進(jìn)行優(yōu)化才能夠有一個(gè)不錯(cuò)的流量排名呢？想了解的可以來(lái)這一探究竟。

移動(dòng)端的設(shè)計(jì)問(wèn)題，其實(shí)已經(jīng)有不少大神說(shuō)明了，但是本文依然有一些新鮮的觀點(diǎn)，特別關(guān)于跳失率的問(wèn)題，鄙人深諳其中原理，分享一二，與朋友們交流。

說(shuō)在前面的廢話：

由于90%的用戶已經(jīng)往移動(dòng)端轉(zhuǎn)移，移動(dòng)端的裝修視覺(jué)成為了店鋪的重中之重。盡管PC看起來(lái)更大氣，呈現(xiàn)效果更加完美，但是它已經(jīng)不是我們的主戰(zhàn)場(chǎng)。商家應(yīng)該把90%的精力花在移動(dòng)端。而移動(dòng)端雖然看起來(lái)簡(jiǎn)單，卻里面暗藏玄機(jī)，完全不是許多人臆想的那樣：移動(dòng)不就是PC視覺(jué)的縮小版嗎。

這其中不僅僅是手機(jī)和電腦兩種展示器材的差異，用戶的習(xí)慣也是有所不同的，移動(dòng)端的用戶，時(shí)間碎片化、隨時(shí)隨地化，因而他們本身沒(méi)有耐心，所以標(biāo)題黨橫行。其次，移動(dòng)端用戶喜歡手勢(shì)順勢(shì)滑動(dòng)，如果不能抓住他們的注意力，就會(huì)被直接PASS。

要做好移動(dòng)端需要從以下幾方面入手。

首圖展示

由于移動(dòng)端進(jìn)入寶貝詳情頁(yè)時(shí)，首圖的位置占據(jù)了全屏的二分之一，用戶需要下拉經(jīng)過(guò)標(biāo)題、評(píng)價(jià)、店鋪信息、關(guān)聯(lián)寶貝、海報(bào)等過(guò)渡展示，才能進(jìn)入寶貝的詳情頁(yè)面，所以對(duì)于許多用戶來(lái)說(shuō)，他們養(yǎng)成了直接側(cè)滑首圖看產(chǎn)品的習(xí)慣，也就是說(shuō)，如果首圖能夠吸引他們，就會(huì)往下看詳情頁(yè)面，反之則直接離開(kāi)了。

這意味著，比之于PC端，首圖的重要性大大增加了，就像一篇文章，如果第一個(gè)段落讀起來(lái)索然無(wú)趣，再想吸引用戶閱讀第二段落就難了。那么針對(duì)移動(dòng)端的這個(gè)特性，我們可以做哪些優(yōu)化呢?

首先，首圖位置其實(shí)是一個(gè)黃金位置，這個(gè)位置占屏比高，下面有標(biāo)題、價(jià)格等產(chǎn)品信息(實(shí)際上就比較全面的介紹了這個(gè)產(chǎn)品)，用戶的眼球會(huì)集中在主圖本身。所以這個(gè)頁(yè)面用戶的停留時(shí)間一定是比較長(zhǎng)的，然后主圖可以設(shè)置5張圖片，通過(guò)左右滑動(dòng)可以切換。由于這個(gè)操作具有移動(dòng)端的操作習(xí)慣(如手機(jī)程序的前進(jìn)后退，通過(guò)滑動(dòng)完成)，所以5張主圖的曝光展示，要比PC端高很多。

那么這5張主圖，就不能像PC那樣設(shè)置：第一張展示全面，其余四張展示細(xì)節(jié)。而是要充分利用每一張主圖，展示產(chǎn)品個(gè)性角度，以及特色，甚至在主圖上就可以做賣(mài)點(diǎn)分析，力求一針見(jiàn)血，抓住用戶的需求。其次，5張主圖在滑動(dòng)完以后，會(huì)跳轉(zhuǎn)到詳情頁(yè)第一屏，所以怎么吸引用戶連續(xù)的滑動(dòng)，把頁(yè)面看完，也是非常關(guān)鍵的。具體來(lái)說(shuō)，我們可以通過(guò)各個(gè)頁(yè)面之間的關(guān)聯(lián)，如展示產(chǎn)品前、后、左、右”的角度，如陳列產(chǎn)品的賣(mài)點(diǎn)一、二、三、四”，通過(guò)關(guān)聯(lián)，讓用戶不知不覺(jué)已經(jīng)滑動(dòng)完了5屏，跳轉(zhuǎn)到了詳情頁(yè)第一屏。

當(dāng)然，最重要的是，5張主圖必須圖片清晰、展示美觀，細(xì)節(jié)突出……并且占屏的比例可以比PC端更大。

做好移動(dòng)端的首圖，可以大大減少寶貝的跳失率，增加寶貝的停留時(shí)間和轉(zhuǎn)化率。也許一個(gè)寶貝當(dāng)天看不出多大差別，但是一個(gè)店鋪的寶貝呢?一個(gè)月、一年呢?

區(qū)別于PC的個(gè)性瀏覽

移動(dòng)端與PC的差異性是非常大的，這種差異原因無(wú)非來(lái)自于，展示器的尺寸和比例，看似是一個(gè)放大和縮小的事情，實(shí)際上，卻是兩種完全不同的視覺(jué)體驗(yàn)。

豎屏

首先移動(dòng)端和PC的屏幕比例是不同的，電腦多為寬屏，移動(dòng)端手機(jī)多為豎屏，這意味著PC端橫著占完一屏圖案和文字，放到移動(dòng)端，按比例縮小后，是占不完一屏的，所以直接從PC復(fù)制詳情頁(yè)到移動(dòng)端，圖片文字看起來(lái)更小。而要解決這個(gè)問(wèn)題，從根本上，設(shè)計(jì)要采用豎屏作圖。

而淘寶給我們做了一個(gè)很好的示范，淘寶二樓”的短視頻，全部用豎屏拍攝，對(duì)于用戶來(lái)說(shuō)，這種感受是全新的，你不用解鎖旋轉(zhuǎn)屏幕，豎立拿著手機(jī)，就可以全屏看完視頻。

而切換到移動(dòng)端的視覺(jué)上，我們就要采用豎屏的作圖思路。這里面有三個(gè)重要的要素：

一、所有圖片的設(shè)計(jì)盡量以16:9豎屏比例設(shè)計(jì)，產(chǎn)品的展示背景畫(huà)面減少，產(chǎn)品(或模特)占屏更大更集中。

二、圖片的設(shè)計(jì)一圖一主題。因?yàn)橐苿?dòng)端沒(méi)有PC的屏幕大，一張圖基本上就占完了屏幕，所以最好一張圖要表達(dá)清楚一個(gè)完整的意思。

三、圖片使用上下分欄，與PC的寬屏不一樣，豎屏不能使用左文右圖的結(jié)構(gòu)，應(yīng)該利用長(zhǎng)度空間的富余，采用上下結(jié)構(gòu)，如上圖下文、上文下圖。

總之，豎屏是移動(dòng)端與PC最大的區(qū)別之一，設(shè)計(jì)者要遵循豎屏的設(shè)計(jì)規(guī)則。

文案編排

由于移動(dòng)端的手機(jī)屏幕較小，我們?nèi)绻裀C一個(gè)頁(yè)面的信息內(nèi)容，通過(guò)移動(dòng)端使用一個(gè)屏幕展示出來(lái)，信息就會(huì)擁擠、文字會(huì)變小看不清楚，這就是移動(dòng)端直接復(fù)制PC圖片視覺(jué)，最大的問(wèn)題文案失效了。

而要解決這個(gè)問(wèn)題，就需要我們對(duì)移動(dòng)視覺(jué)的文案進(jìn)行不一樣的設(shè)計(jì)編排。具體來(lái)說(shuō)，需要遵循以下幾個(gè)原則：

放大標(biāo)題，將圖片上的標(biāo)題文字放大，起到一目了然，少文字概括總信息的作用。這樣可以增加對(duì)用戶的吸引力，即使用戶瀏覽匆匆一瞥，也知道你想表達(dá)什么。

減少文案內(nèi)容，文案貴在精不在多，移動(dòng)端的文案尤其如此，文字太多，在一方小屏幕里，要么顯得過(guò)于細(xì)小，不便于閱讀，要么文字太多，影響了圖片的展示。

文字展示清晰，文案是視覺(jué)的重要部分，既是說(shuō)明也是補(bǔ)充，而讓文案清晰展現(xiàn)也非常重要，這里首先要注意的是圖片背景，文字落腳處背景必須簡(jiǎn)單干凈，利于文字的展現(xiàn)。其次，當(dāng)需要長(zhǎng)文字說(shuō)明時(shí)，盡量多排，增大行距，以利于文字的清晰展示。

注意細(xì)節(jié)

事實(shí)上，無(wú)論我們?cè)谝苿?dòng)端如何呈現(xiàn)產(chǎn)品，通過(guò)產(chǎn)品所看到的細(xì)節(jié)都是比不上PC端的，所以放大產(chǎn)品細(xì)節(jié)，做細(xì)節(jié)特寫(xiě)可以彌補(bǔ)這種不足，采用細(xì)節(jié)特寫(xiě)+文案的編排，能夠迅速的抓住用戶的吸引力。當(dāng)然，在進(jìn)行設(shè)計(jì)時(shí)，還是要遵循豎屏的原則。

針對(duì)移動(dòng)端的個(gè)性瀏覽，需要設(shè)計(jì)者打破原有的PC設(shè)計(jì)習(xí)慣，努力去挖掘移動(dòng)端的視覺(jué)特性，以及用戶的瀏覽習(xí)慣。一切必須順著移動(dòng)端特性來(lái)開(kāi)展。其實(shí)移動(dòng)端雖然屏幕變小了，但是聚焦性加強(qiáng)了，只要通過(guò)濃縮視覺(jué)內(nèi)容，合理的編排，其對(duì)用戶的視覺(jué)沖擊力，并不比PC端差。

形成閉環(huán)

由于移動(dòng)端的屏幕較小，展示的頁(yè)面比較狹小集中，這可以帶來(lái)產(chǎn)品展示的聚焦效果，用戶觀看一個(gè)頁(yè)面會(huì)更加專注，但是同時(shí)，每個(gè)頁(yè)面對(duì)關(guān)聯(lián)產(chǎn)品的展示比PC端效果差，用戶非常容易從一個(gè)頁(yè)面直接跳失離開(kāi)，所以形成移動(dòng)端的瀏覽路徑閉環(huán)，是非常必要的。

具體可以從以下幾方面進(jìn)行：

詳情頭部適當(dāng)關(guān)聯(lián)

詳情頁(yè)的頭部可以適當(dāng)?shù)姆抨P(guān)聯(lián)產(chǎn)品，方便用戶瀏覽時(shí)，獲取更多的其他產(chǎn)品信息，以增加用戶深度瀏覽，需要注意的是，詳情頭部的關(guān)聯(lián)產(chǎn)品不宜太多，否則需要用戶多次下拉，增加跳失率。

增加搭配推薦

在詳情頁(yè)中增加與寶貝相搭配的關(guān)聯(lián)產(chǎn)品，也可以增加用戶的瀏覽深度，減少跳失率。具體上，選擇的關(guān)聯(lián)寶貝要注意有明顯的搭配性，并且通過(guò)移動(dòng)端編輯，能夠跳轉(zhuǎn)(直接從PC端復(fù)制是不能跳轉(zhuǎn)的)。

詳情頁(yè)長(zhǎng)度適中

詳情頁(yè)的長(zhǎng)度不宜太長(zhǎng)，否則容易讓用戶在單個(gè)寶貝瀏覽上耗費(fèi)大量時(shí)間，從而減少跳轉(zhuǎn)其他頁(yè)面的興趣。設(shè)計(jì)者可以根據(jù)生意參謀的寶貝分析工具，了解該類目用戶最喜歡的詳情長(zhǎng)度。

詳情尾部個(gè)性推薦

詳情尾部的個(gè)性推薦對(duì)增加用戶二次寶貝瀏覽，起著關(guān)鍵性作用。一般而言，只要詳情頁(yè)長(zhǎng)短適中，詳情頁(yè)本身富有一定的吸引力，用戶都會(huì)瀏覽到詳情頁(yè)的尾部，這時(shí)候尾部的關(guān)聯(lián)推薦，就起了非常重要的作用。

我們可以利用店鋪裝修智能版，聚星臺(tái)可以設(shè)定千人千面的關(guān)聯(lián)推薦，即關(guān)聯(lián)推薦會(huì)根據(jù)每個(gè)用戶的特性，千人千面?zhèn)€性展示，從而增加了用戶的點(diǎn)擊率。

菜單分類

當(dāng)用戶進(jìn)入店鋪后，菜單分類也是影響用戶繼續(xù)瀏覽的因素，怎么讓用戶一目了然的了解店鋪的商品分類?怎么讓用戶迅速找到自己想要的產(chǎn)品?菜單的分類設(shè)計(jì)，要站在用戶的角度，盡量減少專業(yè)名詞分類，或者模糊的劃分。

首頁(yè)規(guī)劃明確

首頁(yè)是移動(dòng)端最大的二次承接頁(yè)面，首頁(yè)的排版設(shè)計(jì)，直接影響到用戶的留存。相比較于PC端的首頁(yè)，移動(dòng)端首頁(yè)要花費(fèi)更大的心思，增加對(duì)用戶的吸引力，首頁(yè)可以多放置一些熱銷款，并且通過(guò)裝修熱力圖，調(diào)整推薦高點(diǎn)擊率的產(chǎn)品。

同時(shí)也可以使用裝修智能版，利用千人千面的個(gè)性化首頁(yè)，采用不同的興趣展示吸引用戶，從而形成再次頁(yè)面跳轉(zhuǎn)。

總結(jié)：對(duì)于移動(dòng)端來(lái)說(shuō)，用戶瀏覽習(xí)慣隨意性強(qiáng)，時(shí)間碎片化嚴(yán)重，怎么根據(jù)用戶的瀏覽路徑，設(shè)計(jì)閉環(huán)以增加用戶的瀏覽深度，具有重要的意義。

看完了這些，大家對(duì)于移動(dòng)端的優(yōu)化方法是不是有所了解了呢，Hi客也希望這篇文章能夠幫到各位正在移動(dòng)端優(yōu)化的電商人哦。

幕思城為您更新最近最有用的電商資訊、電商規(guī)則淘寶,淘寶頁(yè)面淘寶問(wèn)答。了解更多電商資訊、行業(yè)動(dòng)向，記得關(guān)注幕思城！

這個(gè)問(wèn)題還有疑問(wèn)的話，可以加幕.思.城火星老師免費(fèi)咨詢，微.信號(hào)是為: msc496。