返回列表

作者:巨人電商

淘寶首頁導(dǎo)航設(shè)計(jì)之要點(diǎn)總結(jié)

POST TIME:2020-10-24

當(dāng)買家進(jìn)入你網(wǎng)店首頁的時候,看到這么多產(chǎn)品,如何快速找到自己想要的產(chǎn)品呢,這就要導(dǎo)航給予恰當(dāng)?shù)囊龑?dǎo)了。很多賣家說了,導(dǎo)航還不簡單,將自己的類目都展現(xiàn)出來,一看很明了,當(dāng)然這樣也要考慮到操作的可行性和美觀度。今天我們就一起來聊一聊淘寶首頁導(dǎo)航設(shè)計(jì)應(yīng)注意的問題。

認(rèn)識導(dǎo)航≠分類

現(xiàn)在有些賣家都有一個誤區(qū),以為導(dǎo)航就是分類。其實(shí)不然,導(dǎo)航指的是能讓買家快速查看店鋪某些頁面的功能型按鈕,和分類屬于包含與被包含的關(guān)系,可以理解為分類是導(dǎo)航的一種。所以在優(yōu)化導(dǎo)航的時候,絕不僅僅是把分類重新整理下就OK,而是應(yīng)從所以導(dǎo)航入口入手,來進(jìn)行優(yōu)化。

通常按位置可以將導(dǎo)航劃分為三個區(qū)域:

頂部導(dǎo)航:商品分類、搜索欄、自定義頁面(品牌故事、會員專區(qū)、購物須知等)

左側(cè)欄:商品分類、收藏按鈕、在線客服、熱銷熱藏、商品推薦、其他超鏈(手機(jī)店鋪、加入幫派等)

自由導(dǎo)航:圖片(文字)+超鏈(可以指向某一分類或自定義頁面,多數(shù)用于活動,可擺放在頁面的任意位置)

頂部導(dǎo)航:隱形推薦

很多賣家為了頁面美觀,特意將導(dǎo)航設(shè)計(jì)為“漂亮的圖片+超鏈”的形式,而不是常規(guī)的下拉分類形式。其實(shí)從用戶體驗(yàn)的角度來講,大多數(shù)的淘寶買家已經(jīng)習(xí)慣了簡單、常規(guī)且“不漂亮”的分類導(dǎo)航。如果店鋪導(dǎo)航的設(shè)計(jì)會讓買家花費(fèi)很多時間去思考,下一步該點(diǎn)擊什么?那這個頂部導(dǎo)航的設(shè)計(jì)就是失敗的,因?yàn)樗`背了導(dǎo)航以“快為先“的原則。而且假若店鋪商品比較多,但又想將分類劃分很細(xì)致的話,那么950px其實(shí)是遠(yuǎn)遠(yuǎn)不夠的。

在分類頁面上,給商品分類的方式很多,需要記?。骸笆娣蜏?zhǔn)確是比漂亮更高層次的藝術(shù)”。

常見商品分類方式:

?理性分類:按品牌劃分、按材質(zhì)劃分、按價格劃分、按季節(jié)劃分等,如果店鋪有(打算)老客戶基礎(chǔ),通過穩(wěn)定上新提升用戶粘性還可以按上新時間劃分(不宜過多)。

?感性分類:按風(fēng)格分類(日韓風(fēng)、歐美風(fēng))、按活動劃分、按感官劃分(顯瘦、白嫩MM區(qū))

賣家可以根據(jù)自身產(chǎn)品的特性,以及受眾的特性著重細(xì)化某一種分類,但其他分類形式也應(yīng)該有。比如,男裝店鋪的受眾是男性,通常男性購物往往帶有明確的目的性,只打算買一個商品,很難對其他品類也感興趣。所以理論上來講應(yīng)該把這個店鋪的分類做成理性類型的。但是商品受眾群體為男性,并不代表所有入店的訪客中就沒有會按照“牛仔控、潮流范”標(biāo)簽去查看商品的消費(fèi)者。其實(shí)通過數(shù)據(jù)顯示,搜索男性襯衫的男女比例約為64。其中還囊括四成女性訪客,所以我們在設(shè)置分類的時候應(yīng)該設(shè)置的十分全面,可以偏重某一個點(diǎn)但不能忽略其他。

左側(cè)欄:推薦利器

商品分類、收藏按鈕、在線客服、熱銷熱藏、商品推薦、其他超鏈(手機(jī)店鋪、加入幫派等)這些都可以是左側(cè)欄的內(nèi)容,其實(shí)和頂部導(dǎo)航一樣,左側(cè)欄早已被買家所熟悉,很多買家已經(jīng)習(xí)慣從左側(cè)欄尋找信息。但隨著店鋪模板升級,現(xiàn)在很多店鋪的左側(cè)欄漸漸的少了,不少賣家為了頁面的美觀而將左側(cè)欄遺棄到了角落。其實(shí),追求美麗的事物本身并沒有什么不好,但如果沒有超強(qiáng)的頁面布局能力,建議還是保留左側(cè)欄,畢竟瀏覽器下拉的瀏覽模式?jīng)Q定期存在的必要,因?yàn)橹灰I家下拉網(wǎng)頁,左側(cè)欄就會逐漸的展現(xiàn)在買家面前。 

合理布局左側(cè)欄

在結(jié)構(gòu)上建議賣家在設(shè)計(jì)的時候,將商品分類放在第一屏就可以看到的位置。而熱銷、熱藏寶貝展示建議放到左側(cè)欄的底端。配 “回到頂端”按鈕能方便不同習(xí)慣的買家快速查看,從而增加店鋪訪問深度,提升銷售概率。如下圖:

圖上文字:為了配合店鋪設(shè)計(jì),左側(cè)欄可以適當(dāng)下移,但一定要在第一屏出現(xiàn),目的和WP7的界面原理相同,是要告訴買家:這里有你想要看到的東西,即便你向下瀏覽也能快速查看分類等信息。

左側(cè)欄內(nèi)外應(yīng)一致

很多淘寶賣家是不知道首頁的左側(cè)欄和詳情頁的左側(cè)欄不是同一個模塊,偏偏又有很多的店鋪首頁左側(cè)欄和詳情頁左側(cè)欄布局也是完全不同。這樣的設(shè)置,其實(shí)是錯誤的,容易造成用戶體驗(yàn)上的不快,挑戰(zhàn)買家耐心的做法是不理智的。

自由導(dǎo)航:跳轉(zhuǎn)橋梁

首先解決一個基礎(chǔ)問題——什么是自由導(dǎo)航?顧名思義,自由導(dǎo)航是指能在店鋪任意位置擺放的具有導(dǎo)航作用的按鈕或圖片。自由導(dǎo)航其實(shí)有兩種形態(tài),一種是指向活動頁面或活動分類的大小banner,一種是直接指向某一分類的button。如下圖:

除了分類button,促銷banner也可以算作是自由導(dǎo)航的一種?,F(xiàn)在越來越多的店鋪選擇去掉首頁左側(cè)欄,買家在瀏覽這種店鋪的時候下拉一點(diǎn)網(wǎng)頁便看不到導(dǎo)航了。點(diǎn)擊TOP按鈕可能會面臨重新瀏覽一遍剛才瀏覽過的內(nèi)容,不點(diǎn)TOP按鈕又有無法查看分類的問題,所以這種頁面布局的情況下自由導(dǎo)航的作用就不言而喻了。不僅圖片能起到展示、推廣、傳遞信息的作用,還能起到頁面切換的功效。

自由導(dǎo)航的禁忌

? 不要過于浮夸。導(dǎo)航圖片以傳達(dá)信息為重,其實(shí)買家要的是快速理解圖片內(nèi)容,而不是看店鋪在炫耀美工技巧。

案例指導(dǎo):如上圖,店主主要表達(dá)的是“秋冬馬甲”這一內(nèi)容,而圖中視覺權(quán)重最高的是兩個男模和一堆看起來沒有任何用處的英文字母,造成的后果是只會吸引到對圖上兩款馬甲有興趣的消費(fèi)者點(diǎn)擊,而對這兩款不感興趣的消費(fèi)者則會認(rèn)為是宣傳海報(bào)而已,起不到引導(dǎo)作用。

? 不要有某張圖片過于搶眼。根據(jù)視線律動研究表明,在一個頁面中如果有一區(qū)域視覺權(quán)重過強(qiáng)(如,通體灰色調(diào),突然有張紅色的圖片)會導(dǎo)致瀏覽者的視線不穩(wěn)定或在權(quán)重較高的區(qū)域來回瀏覽,無論是哪一種都不是我們想要的。

? 不要太多類型的促銷活動。其實(shí)這個不僅和導(dǎo)航有關(guān)和營銷也有關(guān)系,同時出現(xiàn)了太多形式的促銷活動往往會造成買家的不解,引起買家的浮躁心理,從導(dǎo)航的角度會造成傳達(dá)不明確的后果。

首頁導(dǎo)航的三種形式的注意事項(xiàng),我們就介紹到這里了,如果你還想了解更多的淘寶裝修經(jīng)驗(yàn),請繼續(xù)關(guān)注開淘裝修網(wǎng)(https:///).