移動端網(wǎng)店設計要點

電子商務網(wǎng)頁設計與制作Design

and

Creation

of

E-commerce

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