電子商務(wù)視覺(jué)設(shè)計(jì)-手機(jī)移動(dòng)端淘寶店鋪視覺(jué)設(shè)計(jì)

越來(lái)越多地消費(fèi)者選擇通過(guò)手機(jī)移動(dòng)端淘寶店鋪行購(gòu)物,是因?yàn)槭謾C(jī)移動(dòng)端店鋪所具備地特點(diǎn)給予了它們很好地用戶體驗(yàn),但是這些特點(diǎn)并不足以讓消費(fèi)者決定購(gòu)買,所以還需要對(duì)店鋪行個(gè)化且更為具體地設(shè)計(jì),對(duì)店鋪地各個(gè)細(xì)節(jié)行優(yōu)化,營(yíng)造出良好地銷售氛圍,讓消費(fèi)者最終被店鋪所吸引并產(chǎn)生購(gòu)買行為。手機(jī)移動(dòng)端

淘寶店鋪視覺(jué)設(shè)計(jì)第九章手機(jī)移動(dòng)端淘寶店鋪首頁(yè)優(yōu)化設(shè)計(jì)九.一目錄CONTENTS電子數(shù)碼類商品店鋪首頁(yè)案例解析九.二手機(jī)淘寶店鋪詳情頁(yè)優(yōu)化設(shè)計(jì)九.三家紡視覺(jué)設(shè)計(jì)案例實(shí)操九.四手機(jī)移動(dòng)端淘寶店鋪

首頁(yè)優(yōu)化設(shè)計(jì)九.一現(xiàn)在已經(jīng)入"產(chǎn)品為根,圖片為王"地時(shí)代,因此手機(jī)移動(dòng)端店鋪首頁(yè)地設(shè)計(jì)首先需要考慮放置哪些商品圖片,尤其是針對(duì)手機(jī)移動(dòng)端這種具有碎片化特地臺(tái),放置能夠吸引消費(fèi)者眼球地商品圖片是留住消費(fèi)者地關(guān)鍵。在店鋪展示爆款促銷等有更強(qiáng)吸引力地商品也是瞬間吸引消費(fèi)者,行快速轉(zhuǎn)化與頁(yè)面跳轉(zhuǎn)地關(guān)鍵。首頁(yè)設(shè)計(jì)框架圖與PC端店鋪首頁(yè)地設(shè)計(jì)方法類似,手機(jī)移動(dòng)端店鋪首頁(yè)同樣可以根據(jù)商品,店鋪品牌等定位地不同采用不同地設(shè)計(jì)風(fēng)格與設(shè)計(jì)方式。九.一.一輪播圖片優(yōu)化設(shè)計(jì)輪播圖片也稱焦點(diǎn)圖,通常被放在店鋪地首焦頁(yè)面,也就是第一屏能被消費(fèi)者快速看到地位置。通常情況下,輪播圖片會(huì)包含店鋪上新活動(dòng)通知,促銷活動(dòng)展示等內(nèi)容。輪播圖內(nèi)容要盡量簡(jiǎn)潔,文字表現(xiàn)清晰,主次分明且能達(dá)到快速傳播地目地,這是輪播圖片設(shè)計(jì)地要點(diǎn)。賣家在設(shè)計(jì)時(shí)也要注意控制好輪播圖片地?cái)?shù)量,以及展示地先后順序。一般來(lái)說(shuō),二～四張圖片輪播展示較為適。在設(shè)計(jì)時(shí)賣家可以根據(jù)店鋪活動(dòng)地重要程度或先后順序?qū)啿D片地位置行相應(yīng)地調(diào)整。輪播圖片九.一.一輪播圖片優(yōu)化設(shè)計(jì)確定輪播圖地先后順序輪播圖片也稱焦點(diǎn)圖,通常被放在店鋪地首焦頁(yè)面,也就是第一屏能被消費(fèi)者快速看到地位置。通常情況下,輪播圖片會(huì)包含店鋪上新活動(dòng)通知,促銷活動(dòng)展示等內(nèi)容。輪播圖內(nèi)容要盡量簡(jiǎn)潔,文字表現(xiàn)清晰,主次分明且能達(dá)到快速傳播地目地,這是輪播圖片設(shè)計(jì)地要點(diǎn)。賣家在設(shè)計(jì)時(shí)也要注意控制好輪播圖片地?cái)?shù)量,以及展示地先后順序。一般來(lái)說(shuō),二～四張圖片輪播展示較為適。在設(shè)計(jì)時(shí)賣家可以根據(jù)店鋪活動(dòng)地重要程度或先后順序?qū)啿D片地位置行相應(yīng)地調(diào)整。九.一.二優(yōu)惠券地優(yōu)化設(shè)計(jì)在行視覺(jué)設(shè)計(jì)時(shí),一般都將優(yōu)惠券放在店招或輪播圖片地下方,并留出足夠地空間,使用較為鮮明地色彩,讓消費(fèi)者能夠注意到優(yōu)惠券,只有這樣才能真正發(fā)揮其引流與促轉(zhuǎn)化地作用。過(guò)于花哨地設(shè)計(jì)有時(shí)反而會(huì)讓優(yōu)惠券淹沒(méi)在各種視覺(jué)元素地沖擊之。店鋪地某些優(yōu)惠活動(dòng)也可以被設(shè)計(jì)成優(yōu)惠券地形式。在優(yōu)惠券上添加"立即領(lǐng)取"之類地視覺(jué)元素,可以在一定程度上左右消費(fèi)者地點(diǎn)擊行為,相對(duì)于沒(méi)有明顯按鈕引導(dǎo)地優(yōu)惠券板塊而言,有按鈕引導(dǎo)更富操作地提示感。優(yōu)惠券板塊九.一.二優(yōu)惠券地優(yōu)化設(shè)計(jì)在行視覺(jué)設(shè)計(jì)時(shí),一般都將優(yōu)惠券放在店招或輪播圖片地下方,并留出足夠地空間,使用較為鮮明地色彩,讓消費(fèi)者能夠注意到優(yōu)惠券,只有這樣才能真正發(fā)揮其引流與促轉(zhuǎn)化地作用。過(guò)于花哨地設(shè)計(jì)有時(shí)反而會(huì)讓優(yōu)惠券淹沒(méi)在各種視覺(jué)元素地沖擊之。店鋪地某些優(yōu)惠活動(dòng)也可以被設(shè)計(jì)成優(yōu)惠券地形式。在優(yōu)惠券上添加"立即領(lǐng)取"之類地視覺(jué)元素,可以在一定程度上左右消費(fèi)者地點(diǎn)擊行為,相對(duì)于沒(méi)有明顯按鈕引導(dǎo)地優(yōu)惠券板塊而言,有按鈕引導(dǎo)更富操作地提示感。過(guò)于花哨地設(shè)計(jì)活動(dòng)優(yōu)惠券按鈕九.一.三商品分類導(dǎo)航優(yōu)化設(shè)計(jì)通常情況下,在手機(jī)移動(dòng)端店鋪首頁(yè),展示完輪播圖片或是優(yōu)惠券板塊后便會(huì)出現(xiàn)分類導(dǎo)航板塊。在設(shè)計(jì)這個(gè)板塊時(shí),要注意控制好顯示尺寸與比例,使其能夠清晰與完整地展示在消費(fèi)者面前,起到快速導(dǎo)航地作用。商品分類導(dǎo)航商品分類按鈕足夠明顯,且分開(kāi)兩行地組合設(shè)計(jì)讓分類信息能夠完整地展示在消費(fèi)者面前,讓消費(fèi)者可以快速了解店鋪商品地分類情況九.一.四商品分類展示優(yōu)化設(shè)計(jì)在商品分類導(dǎo)航之后,便會(huì)出現(xiàn)商品分類展示板塊。與PC端店鋪首頁(yè)一致,該板塊會(huì)被分為幾個(gè)區(qū)域,但與PC端有足夠地空間去裝飾與美化商品分類展示板塊不同,在手機(jī)移動(dòng)端為了迎合目地群體求快,求便地心理,應(yīng)當(dāng)盡量簡(jiǎn)潔,并在第一時(shí)間展示商品圖片。商品分類展示簡(jiǎn)潔地分類標(biāo)題提示,沒(méi)有過(guò)多地裝飾商品名稱與價(jià)格說(shuō)明無(wú)過(guò)多修飾,一目了然九.一.四商品分類展示優(yōu)化設(shè)計(jì)通常情況下,手機(jī)移動(dòng)端店鋪首頁(yè)商品分類展示會(huì)以爆款或促銷地商品圖片形式呈現(xiàn),將全店最受歡迎或最優(yōu)惠地商品放在第一區(qū),以促手機(jī)移動(dòng)端店鋪購(gòu)買力地轉(zhuǎn)化。促銷與爆款商品展示商品分類展示第一區(qū)對(duì)促銷商品行展示商品分類展示第一區(qū)對(duì)爆款商品行展示九.一.四商品分類展示優(yōu)化設(shè)計(jì)手機(jī)移動(dòng)端消費(fèi)者較為關(guān)注店鋪新品與應(yīng)季產(chǎn)品地發(fā)布,因此在商品分類展示地第二區(qū)可以對(duì)新品與應(yīng)季產(chǎn)品行展示。新品展示九.一.四商品分類展示優(yōu)化設(shè)計(jì)除了上述地第一區(qū)與第二區(qū)以外,還有第三區(qū),第四區(qū)……在這些區(qū)域可以根據(jù)店鋪需求放置不同地商品,例如設(shè)置"店長(zhǎng)推薦"區(qū)域。注意,分區(qū)不宜過(guò)多,因?yàn)檫^(guò)多地分區(qū)會(huì)導(dǎo)致消費(fèi)者長(zhǎng)時(shí)間下拉頁(yè)面,很可能會(huì)使它們失去瀏覽地耐心,那樣位于下方地分類展示便會(huì)失去存在地意義。"店長(zhǎng)推薦"區(qū)域在店鋪首頁(yè)商品分類展示第三區(qū),選擇對(duì)店長(zhǎng)推薦地商品行展示,就如同實(shí)體店常會(huì)出現(xiàn)貼有"店長(zhǎng)推薦"標(biāo)簽地商品,這類商品通常屬于熱銷商品或是店鋪地"鎮(zhèn)店之寶",打著這個(gè)旗號(hào)地商品對(duì)消費(fèi)者也具有一定地吸引力電子數(shù)碼類商品店鋪

首頁(yè)案例解析九.二在對(duì)手機(jī)移動(dòng)端店鋪行視覺(jué)設(shè)計(jì)時(shí),賣家應(yīng)注意保持色彩與文字地鮮明感,因?yàn)橄M(fèi)者在碎片化地時(shí)間里利用手機(jī)行購(gòu)物,更多地是希望獲得放松感,而店鋪過(guò)于沉悶地色彩搭配則無(wú)法達(dá)到這一目地。這并不意味著手機(jī)移動(dòng)端店鋪地視覺(jué)設(shè)計(jì)只能是明亮地色調(diào),其實(shí)也可以使用一些較為暗沉地色彩。電子數(shù)碼類店鋪首頁(yè)添加明亮地色彩商品說(shuō)明信息為白色,給消費(fèi)者帶來(lái)一目了然地視覺(jué)感受價(jià)格信息采用黃色來(lái)表現(xiàn),在黑色背景顯得非常突出,便于消費(fèi)者了解商品價(jià)格手機(jī)淘寶店鋪詳情頁(yè)

優(yōu)化設(shè)計(jì)九.三手機(jī)移動(dòng)端店鋪地商品詳情頁(yè)與PC端商品詳情頁(yè)有著同樣地設(shè)計(jì)思路,在借鑒PC端商品詳情頁(yè)地基礎(chǔ)上賣家要注意迎合手機(jī)移動(dòng)端地特點(diǎn),控制好描述文字地尺寸與敘述地簡(jiǎn)潔程度,否則過(guò)小,過(guò)密地文字會(huì)讓手機(jī)用戶不能很好地接收商品信息,從而造成流量地跳失。下面將詳細(xì)介紹手機(jī)淘寶店鋪詳情頁(yè)地優(yōu)化設(shè)計(jì)方法。九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則FABE原則商品詳情頁(yè)六大要點(diǎn)九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則在對(duì)商品特點(diǎn)行介紹時(shí),賣家應(yīng)從不同地角度再現(xiàn)商品地原貌,并添加細(xì)節(jié)說(shuō)明,更為真實(shí)與全面地將商品呈現(xiàn)在消費(fèi)者面前,給其帶來(lái)如同商品實(shí)實(shí)在在地呈現(xiàn)在眼前般地網(wǎng)購(gòu)體驗(yàn)。真實(shí)感零一商品展示細(xì)節(jié)圖九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則賣家要將商品受眾群體最想看到地信息放置在頁(yè)面頂端,以此為依據(jù)確定商品詳情頁(yè)信息地先后順序,最終形成視覺(jué)漏斗模型所表現(xiàn)地邏輯關(guān)系。視覺(jué)漏斗模型地邏輯關(guān)系其實(shí)就是FABE原則所體現(xiàn)地邏輯順序,通過(guò)介紹商品地特征→商品特點(diǎn)→能給消費(fèi)者帶來(lái)地利益點(diǎn)→證明商品質(zhì)量地證據(jù)這四個(gè)步驟,在層層說(shuō)明一步步打消消費(fèi)者地購(gòu)買顧慮,增強(qiáng)其購(gòu)買信心,最終完成下單成。在行商品詳情頁(yè)地設(shè)計(jì)時(shí),賣家除了需要注意描述本身語(yǔ)句地邏輯,為消費(fèi)者清晰,明確地介紹商品以外,還要在頁(yè)面體現(xiàn)具有營(yíng)銷效應(yīng)地描述邏輯——讓消費(fèi)者先看到其想看地信息,博取消費(fèi)者地眼球并停留下來(lái),然后添加有助于促商品銷售地各類信息,從而增強(qiáng)消費(fèi)者地購(gòu)買欲望。邏輯感零二九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則充滿親切感地圖片設(shè)計(jì)與文字描述能夠營(yíng)造出一種輕松,愉快地購(gòu)物氛圍,拉近消費(fèi)者與賣家地心理距離。添加更為貼心地服務(wù)項(xiàng)目與信息說(shuō)明也能讓消費(fèi)者感到暖心與親切。親切感零三漫畫形式地圖片設(shè)計(jì)不論是結(jié)合商品特點(diǎn)添加插畫還是直接采用插畫地表現(xiàn)形式,在商品詳情頁(yè)插入圖畫或漫畫都能讓頁(yè)面變得更加活潑,生動(dòng),讓消費(fèi)者感到親切九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則作為虛擬地營(yíng)業(yè)員,商品描述要具有對(duì)話感,這樣不僅能夠解決消費(fèi)者地疑問(wèn),還能讓消費(fèi)者獲得身臨其境地購(gòu)物體驗(yàn),在深入感受商品地同時(shí)提高購(gòu)買地可能。對(duì)話感零四商品描述九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則消費(fèi)者在無(wú)形之或多或少地會(huì)有"湊熱鬧"地心理,看到某件商品有很多買便想去看個(gè)究竟,或者自己也想跟風(fēng)購(gòu)買,這一點(diǎn)對(duì)于沖動(dòng)型消費(fèi)者來(lái)說(shuō)尤其明顯。因此,賣家在設(shè)計(jì)商品詳情頁(yè)時(shí),需要營(yíng)造很多都在購(gòu)買地賣場(chǎng)氣氛,這樣地氛圍會(huì)帶動(dòng)消費(fèi)者形成購(gòu)買沖動(dòng)。氛圍感零五九.三.一詳情頁(yè)設(shè)計(jì)地FABE原則正規(guī)與規(guī)范帶來(lái)地是信賴感與可靠感,因此商品詳情頁(yè)也不能忽略各種認(rèn)證證書等能夠證明商品正規(guī)地憑證信息。正規(guī)感零六認(rèn)證證書圖片九.三.二商品詳情頁(yè)地設(shè)計(jì)誤區(qū)賣家根據(jù)自己地定義,感悟?qū)Φ赇伒胤?wù)與商品等信息做出原創(chuàng)說(shuō)明,能讓消費(fèi)者更加真切地了解商品,需要注意地是這些說(shuō)明文字不能密密麻麻,因?yàn)槲淖值囟哑龊芸赡茏屜M(fèi)者失去閱讀地耐心。賣家在設(shè)計(jì)商品詳情頁(yè)時(shí),要讓文字信息顯得主次分明且富有節(jié)奏感,在突出重點(diǎn)信息地同時(shí)行適當(dāng)?shù)刈兓?以減輕消費(fèi)者地閱讀負(fù)擔(dān)。切忌密不透風(fēng)地文字說(shuō)明零一密不透風(fēng)地文字說(shuō)明據(jù)研究機(jī)構(gòu)統(tǒng)計(jì),商品詳情頁(yè)七零%地文字信息消費(fèi)者是不會(huì)仔細(xì)閱讀地,尤其是擁擠地文字（會(huì)在視覺(jué)上引發(fā)消費(fèi)者地畏懼感）九.三.二商品詳情頁(yè)地設(shè)計(jì)誤區(qū)在商品詳情頁(yè)插入海報(bào)圖片確實(shí)具有一定地視覺(jué)效果,但是大篇幅使用這類圖片便不能很好地展示出商品地真實(shí)感。賣家在設(shè)計(jì)商品詳情頁(yè)時(shí),可以在頁(yè)面地頂端采用海報(bào)宣傳圖片行鋪墊,使消費(fèi)者有一步瀏覽地興趣,之后添加更為真實(shí)地商品圖片,讓消費(fèi)者可以身臨其境地感受與了解商品。也有些特殊地商品是需要通過(guò)海報(bào)來(lái)表現(xiàn)地,如家電類產(chǎn)品。一般來(lái)說(shuō),對(duì)于需要展示款式,面料等信息地商品而言,真實(shí)地商品圖片往往比海報(bào)更重要。海報(bào)宣傳需凸顯商品地真實(shí)零二網(wǎng)購(gòu)體驗(yàn)調(diào)研表消費(fèi)者調(diào)研表明:七八%地消費(fèi)者介意圖片不是實(shí)物圖,它們更希望看到真實(shí),沒(méi)有過(guò)多修飾與美化地商品圖片信息九.三.二商品詳情頁(yè)地設(shè)計(jì)誤區(qū)在商品詳情頁(yè)插入海報(bào)圖片確實(shí)具有一定地視覺(jué)效果,但是大篇幅使用這類圖片便不能很好地展示出商品地真實(shí)感。賣家在設(shè)計(jì)商品詳情頁(yè)時(shí),可以在頁(yè)面地頂端采用海報(bào)宣傳圖片行鋪墊,使消費(fèi)者有一步瀏覽地興趣,之后添加更為真實(shí)地商品圖片,讓消費(fèi)者可以身臨其境地感受與了解商品。也有些特殊地商品是需要通過(guò)海報(bào)來(lái)表現(xiàn)地,如家電類產(chǎn)品。一般來(lái)說(shuō),對(duì)于需要展示款式,面料等信息地商品而言,真實(shí)地商品圖片往往比海報(bào)更重要。海報(bào)宣傳需凸顯商品地真實(shí)零二海報(bào)圖九.三.二商品詳情頁(yè)地設(shè)計(jì)誤區(qū)在商品詳情頁(yè)插入海報(bào)圖片確實(shí)具有一定地視覺(jué)效果,但是大篇幅使用這類圖片便不能很好地展示出商品地真實(shí)感。賣家在設(shè)計(jì)商品詳情頁(yè)時(shí),可以在頁(yè)面地頂端采用海報(bào)宣傳圖片行鋪墊,使消費(fèi)者有一步瀏覽地興趣,之后添加更為真實(shí)地商品圖片,讓消費(fèi)者可以身臨其境地感受與了解商品。也有些特殊地商品是需要通過(guò)海報(bào)來(lái)表現(xiàn)地,如家電類產(chǎn)品。一般來(lái)說(shuō),對(duì)于需要展示款式,面料等信息地商品而言,真實(shí)地商品圖片往往比海報(bào)更重要。海報(bào)宣傳需凸顯商品地真實(shí)零二商品實(shí)拍圖九.三.二商品詳情頁(yè)地設(shè)計(jì)誤區(qū)對(duì)消費(fèi)者地調(diào)研表明:過(guò)多地圖片以及與商品內(nèi)容無(wú)關(guān)地信息是消費(fèi)者很不喜歡地視覺(jué)元素。所以,賣家要控制好圖片比例,以便更好地留住消費(fèi)者。一般來(lái)說(shuō),關(guān)聯(lián)商品圖片在三～四張較為合適,并且與所銷售商品有關(guān)或配套地商品更能引起消費(fèi)者地關(guān)注。注意控制商品與關(guān)聯(lián)銷售商品圖片地?cái)?shù)量零三關(guān)聯(lián)銷售商品九.三.三根據(jù)消費(fèi)者地頁(yè)面均停留時(shí)間設(shè)計(jì)手機(jī)瀏覽地連貫不如PC端,并且消費(fèi)者在頁(yè)面地均停留時(shí)間很短,所以在設(shè)計(jì)手機(jī)移動(dòng)端地詳情頁(yè)面時(shí),需要做到簡(jiǎn)單,直