移動(dòng)端網(wǎng)店設(shè)計(jì)要點(diǎn)

電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作Design

and

Creation

of

E-commerce

WebPages移動(dòng)端網(wǎng)店設(shè)計(jì)要點(diǎn)主講人：傅俊THISIS導(dǎo)入：移動(dòng)端網(wǎng)店的趨勢(shì)移動(dòng)端網(wǎng)店的構(gòu)成移動(dòng)端網(wǎng)店的設(shè)計(jì)要點(diǎn)Content隨著智能移動(dòng)端設(shè)備的普及和高速發(fā)展，網(wǎng)店平臺(tái)向移動(dòng)端遷移成為了趨勢(shì)。移動(dòng)端網(wǎng)店不僅僅是PC端網(wǎng)店的補(bǔ)充，很多時(shí)候已經(jīng)超越了傳統(tǒng)的PC端的營(yíng)收和關(guān)注度。例如從2017年的雙十一近一個(gè)月的PC&移動(dòng)端趨勢(shì)走向可以看出全網(wǎng)的關(guān)注度來(lái)源，移動(dòng)端大概是PC端的4倍，更是占到總體趨勢(shì)的80%以上，這說(shuō)明大部分關(guān)注用戶是用手機(jī)等其他移動(dòng)設(shè)備進(jìn)行搜索。導(dǎo)入-移動(dòng)端網(wǎng)店的趨勢(shì)移動(dòng)端網(wǎng)店的主要組成元素同樣是圖像、文字、超鏈接等項(xiàng)目。其中文字和圖像是用來(lái)表達(dá)網(wǎng)店的商品和促銷活動(dòng)資料內(nèi)容。同時(shí)網(wǎng)店不可能只有一個(gè)頁(yè)面，超級(jí)鏈接就起到了串聯(lián)各個(gè)頁(yè)面的作用其中，最為明顯的就是圖像，用來(lái)宣傳網(wǎng)店活動(dòng)與展示網(wǎng)店中商品效果的作用。宣傳部分可以分為店標(biāo)、店招以及宣傳廣告等。特別是這些宣傳廣告具體可以分為單列圖像、雙列圖像、焦點(diǎn)圖、活動(dòng)頭圖像等。移動(dòng)端網(wǎng)店的構(gòu)成店標(biāo)店標(biāo)是移動(dòng)網(wǎng)店中的核心標(biāo)識(shí)，是店鋪的標(biāo)志，建議尺寸為80*80像素。這里移動(dòng)端和PC端在圖標(biāo)上面最多的區(qū)別，一個(gè)是尺寸上的，還有一個(gè)就是占比上的。店標(biāo)的占比和所處位置，移動(dòng)端就比PC端要明顯很多。這也使得當(dāng)顧客搜索店鋪類目，或是進(jìn)行店鋪收藏的時(shí)候，好的店標(biāo)設(shè)計(jì)容易讓人印象深刻。一般來(lái)說(shuō)移動(dòng)端店標(biāo)與PC端店標(biāo)使用的是同一個(gè)，在移動(dòng)端網(wǎng)店中通常放置在店招左側(cè)位置。移動(dòng)端網(wǎng)店的構(gòu)成店招移動(dòng)端的店招與PC端的店招作用是一樣的，一般一個(gè)平臺(tái)上的尺寸是一致的，如手機(jī)淘寶網(wǎng)店而言，店招為642*200像素。這個(gè)店招一般和PC端不一樣，沒(méi)有更多空間放置例如優(yōu)惠券、主推產(chǎn)品等其他元素，移動(dòng)端的店招相當(dāng)PC端而言更為簡(jiǎn)單，需要注意的是要給店標(biāo)預(yù)留位置，一般不希望店標(biāo)遮擋住店招的重要信息。移動(dòng)端網(wǎng)店的構(gòu)成宣傳網(wǎng)店商品的廣告圖在移動(dòng)端起到廣告宣傳作用的當(dāng)屬圖像，在細(xì)分的圖像模式中，目的還是為了吸引訪問(wèn)者的目光，增加流量，提升轉(zhuǎn)化率，這也是好的主題圖像廣告的作用。這類圖像被寄與很大希望，所占位置主要為焦點(diǎn)圖位置，幅面也占了首屏中大面積的位置從而來(lái)提高顧客的關(guān)注度。和PC端的焦點(diǎn)輪播圖一樣，有些移動(dòng)端網(wǎng)店在這一位置也引入了輪播圖，通過(guò)手指滑動(dòng)可以切換多張廣告圖。移動(dòng)端網(wǎng)店的構(gòu)成移動(dòng)端網(wǎng)店中的文字文字展示是移動(dòng)端網(wǎng)店的重要組成元素。這類文字主要有兩類，一類就是以文本形式加以展現(xiàn)的，另一類是圖文混合在一起的。無(wú)論是哪種，對(duì)于移動(dòng)端而言，可視性是最為重要的因素，這點(diǎn)遠(yuǎn)遠(yuǎn)大于PC端的要求。移動(dòng)端網(wǎng)店的構(gòu)成移動(dòng)端的鏈接網(wǎng)店不可能始終展示給消費(fèi)者就一個(gè)主頁(yè)，必然有其他欄目頁(yè)面和各商品的詳情頁(yè)來(lái)構(gòu)成，這點(diǎn)和PC端是一樣的，同樣存在網(wǎng)店的首頁(yè)。需要注意的是移動(dòng)端屏幕尺寸的影響，特別是手機(jī)端上，一般訪問(wèn)的更習(xí)慣縱向劃動(dòng)屏幕而不是橫向的劃動(dòng)，這樣導(dǎo)航的寬度往往有限，欄目的劃分會(huì)大大少于PC端。對(duì)于鏈接而言，更傾向于扁平化，更小的點(diǎn)擊次數(shù)。一般鏈接有直接到商品的詳情頁(yè)，不同類型產(chǎn)品通過(guò)分類、產(chǎn)品參數(shù)的鏈接做跳轉(zhuǎn)。還有一類點(diǎn)擊首頁(yè)的系列也就是類目，跳轉(zhuǎn)到類目頁(yè)，讓顧客再選具體商品。移動(dòng)端網(wǎng)店的構(gòu)成從總的流程和設(shè)計(jì)要素上來(lái)說(shuō)，移動(dòng)端網(wǎng)店與PC端網(wǎng)店并沒(méi)有本質(zhì)的不同。而且現(xiàn)階段越來(lái)越多網(wǎng)店被要求能夠具有跨平臺(tái)的特性。在設(shè)計(jì)之初就要考慮到在不同尺寸的平臺(tái)上加以展示。除了尺寸以外，當(dāng)然還是有些因素需要考慮的。PC端網(wǎng)頁(yè)在移動(dòng)端設(shè)備上首要的障礙就是導(dǎo)航的使用，這點(diǎn)前面也說(shuō)過(guò)。優(yōu)化移動(dòng)端頁(yè)面的幾個(gè)實(shí)用技巧：僅使用垂直滾動(dòng)。不要使用水平滾動(dòng)，讓用戶只需單方向滾動(dòng)就能瀏覽主要的內(nèi)容。盡量通過(guò)CSS來(lái)控制頁(yè)面寬度、位置和圖片的縮放?？刂品謾诘臄?shù)目，盡量使用一欄單列式的布局。移動(dòng)端網(wǎng)店的設(shè)計(jì)要點(diǎn)讓CTA（行為召喚按鈕）在移動(dòng)端上友好易用用戶經(jīng)常會(huì)忽略移動(dòng)端頁(yè)面上的一些元素，所以盡量使用CTA按鈕，確保用戶不會(huì)錯(cuò)過(guò)它們。和PC端的情況不同，需要將CTA按鈕置于主要、顯眼的位置，確保他們?nèi)菀装l(fā)現(xiàn)，容易點(diǎn)擊觸發(fā)。CTA按鈕應(yīng)該易于點(diǎn)擊，并且不會(huì)同頁(yè)面中其他的元素形成干擾或者干涉。要做到這點(diǎn)：是簡(jiǎn)潔的文案醒目的主色調(diào)易識(shí)別的形狀特別的圖形元素移動(dòng)端網(wǎng)店的設(shè)計(jì)要點(diǎn)讓菜單簡(jiǎn)短且易用詳細(xì)而全面的菜單設(shè)計(jì)在PC端上能夠良好運(yùn)行，但是當(dāng)它出現(xiàn)在移動(dòng)端上的時(shí)候，菜單就顯得過(guò)長(zhǎng)了，要在其中找到想要的內(nèi)容就相當(dāng)難了。根據(jù)以往的經(jīng)驗(yàn)，盡量不要讓菜單超過(guò)7個(gè)條目。讓搜索框顯眼在你的網(wǎng)店或者網(wǎng)站中，搜索具有重要的功能，那么在做移動(dòng)端頁(yè)面優(yōu)化的時(shí)候應(yīng)該突出這一功能，確保它足夠顯眼是很有必要的。搜索應(yīng)當(dāng)是用戶一打開頁(yè)面就能看到的控件。通常應(yīng)當(dāng)讓搜索框置于頁(yè)面頂部，以文本輸入框的形式存在。移動(dòng)端網(wǎng)店的設(shè)計(jì)要點(diǎn)設(shè)計(jì)便于觸摸交互的頁(yè)面針對(duì)移動(dòng)端的設(shè)計(jì)，離不開手指的觸摸。那么網(wǎng)頁(yè)中按鈕的尺寸應(yīng)當(dāng)和手指的大小相匹配。通過(guò)研究發(fā)現(xiàn)，指面的觸摸尺寸平均大小為10-14mm，而指尖的平均尺寸是8-10mm，也就是說(shuō)10mmx10mm的控件尺寸設(shè)計(jì)是比較合理的大小。另外一個(gè)需要考慮的是就是可觸摸控件指尖的距離。如果兩個(gè)按鈕比較靠近，那么用戶在移動(dòng)端上就很容易出現(xiàn)誤觸的情況了。如果想要解決這個(gè)問(wèn)題，就需要根據(jù)實(shí)際情況重新調(diào)整尺寸和按鈕之間的距離，以適應(yīng)用戶手指交互的需求。移動(dòng)端網(wǎng)店的設(shè)計(jì)要點(diǎn)為每項(xiàng)任務(wù)選擇最簡(jiǎn)單的輸入方法當(dāng)訪問(wèn)者需要從有限的幾個(gè)選項(xiàng)中做出選擇時(shí)，相較于輸入文字，通過(guò)圖標(biāo)按鈕或者列表菜單中進(jìn)行選擇，特別是點(diǎn)按大的切換圖標(biāo)會(huì)更方便。為每個(gè)任務(wù)選擇最簡(jiǎn)單的輸入方法，并始終確保點(diǎn)按的目標(biāo)足夠大，清晰可辨。讓用戶在一個(gè)瀏覽器窗口中完成操作移動(dòng)端的窗口間切換始終比PC端麻煩，用戶找不到原來(lái)的頁(yè)面的風(fēng)險(xiǎn)是現(xiàn)實(shí)存在的。盡量讓用戶在一個(gè)窗口中完成全部的瀏覽和操作，簡(jiǎn)化流程和復(fù)雜的交互，讓用戶一直待