一網(wǎng)打盡!電商網(wǎng)站導(dǎo)航設(shè)計(jì)超全面指南

0 評(píng)論 14220 瀏覽 28 收藏 17 分鐘

伴隨著互聯(lián)網(wǎng)的成長,通過電子商務(wù)網(wǎng)站實(shí)現(xiàn)商品交易越來越頻繁,而訪客在面對(duì)越來越龐大的信息量時(shí)會(huì)感到迷茫,因此,優(yōu)秀的導(dǎo)航設(shè)計(jì)能夠提高網(wǎng)站的易用性,對(duì)實(shí)現(xiàn)電子商務(wù)網(wǎng)站的高效運(yùn)作具有實(shí)際意義。

另,電子商務(wù)網(wǎng)站的首頁導(dǎo)航設(shè)計(jì)必須本著用戶體驗(yàn)為佳的原則,既要將網(wǎng)站中的所有信息都在有限的導(dǎo)航欄中體現(xiàn),又要為用戶反饋出重要的幫助信息。網(wǎng)站因其獨(dú)特的重要性和不可替代性,在電子商務(wù)網(wǎng)站設(shè)計(jì)中日漸凸顯出舉足輕重的地位。

1、符合網(wǎng)站內(nèi)容結(jié)構(gòu)

在設(shè)計(jì)電商網(wǎng)站的導(dǎo)航之前,事先應(yīng)該對(duì)網(wǎng)站整體的內(nèi)容有一個(gè)全面的了解,并且將網(wǎng)站內(nèi)容進(jìn)行歸類。這里涉及到的一個(gè)問題就是,無需把所有的板塊都在導(dǎo)航上一五一十的展現(xiàn)出來。電商網(wǎng)站普遍有兩個(gè)導(dǎo)航,分別是網(wǎng)站頭部的總導(dǎo)航和側(cè)邊的分類導(dǎo)航。一般來說,總導(dǎo)航會(huì)比較籠統(tǒng)的展示網(wǎng)站商品,而分類導(dǎo)航則會(huì)比較詳細(xì)。總導(dǎo)航的內(nèi)容過多無論在體驗(yàn)還是視覺上,都會(huì)有拖泥帶水的感覺。如下圖案例,當(dāng)當(dāng)網(wǎng)的總導(dǎo)航分類就顯得比較復(fù)雜瑣碎。

另一方面,導(dǎo)航中顯示的內(nèi)容應(yīng)該與網(wǎng)站內(nèi)容是緊密相關(guān)的,這也體現(xiàn)了導(dǎo)航與內(nèi)容的匹配度。

這其中牽涉到了導(dǎo)航中或?qū)Ш街車霈F(xiàn)的廣告,正如當(dāng)當(dāng)網(wǎng)案例所示,導(dǎo)航周邊融入一些廣告無可厚非,運(yùn)用的恰當(dāng)不僅不會(huì)遭到用戶的反感,相反還能提升 用戶的滿意度,但需要注意的是應(yīng)該盡量避免與本站內(nèi)容無關(guān),并且廣告成分過于明顯的一些內(nèi)容,過量的無關(guān)內(nèi)容勢必會(huì)讓用戶感覺在購物時(shí)受到干擾。

2、結(jié)合網(wǎng)站業(yè)務(wù)目標(biāo)

首頁中的導(dǎo)航就是網(wǎng)站當(dāng)下情況的一個(gè)縮影,用戶通過導(dǎo)航就能大概的了解到網(wǎng)站銷售哪些商品。

因此,導(dǎo)航很有必要隨著網(wǎng)站主營商品的變更,或是根據(jù)商品銷量而變化,讓呈現(xiàn)在用戶面前的導(dǎo)航始終與網(wǎng)站本身內(nèi)容以及時(shí)下熱門很貼合。(例如優(yōu)設(shè)網(wǎng) 的頂部導(dǎo)航,就挑選了最實(shí)用的設(shè)計(jì)師網(wǎng)址導(dǎo)航以及大牛云集的設(shè)計(jì)講座,強(qiáng)烈推薦同學(xué)們收藏起來)在電商網(wǎng)站的運(yùn)營過程中,許多問題會(huì)逐漸的浮現(xiàn)出來,所以 網(wǎng)站改版也是無法避免的過程之一,但在改版之前,應(yīng)該先列出所有的問題,再思考這些改動(dòng)能否真正解決問題。

改版前:

改版后:

設(shè)計(jì)師在不同項(xiàng)目的設(shè)計(jì)過程中,單從過程來說基本上大同小異,但至關(guān)重要的是,每一次網(wǎng)站設(shè)計(jì)會(huì)根據(jù)客戶不同的業(yè)務(wù)需求而產(chǎn)生不同的設(shè)計(jì)目標(biāo),當(dāng)你心中一旦有了這個(gè)目標(biāo),就應(yīng)該時(shí)刻提醒自己,你的設(shè)計(jì)無論多么花哨或是簡單,都必須把這一目標(biāo)完完整整的體現(xiàn)出來。

唯品會(huì)在目標(biāo)的體現(xiàn)上還是比較明顯的,把自家主營的商品欄目種類,包括近期的活動(dòng)用最清楚的方式展現(xiàn)出來,很有效的減少了用戶思考的時(shí)間,讓用戶在最短的時(shí)間內(nèi)為自己的點(diǎn)擊做出決定。

3、遵從用戶使用習(xí)慣

根據(jù)用戶的使用體驗(yàn)和感受來設(shè)計(jì)網(wǎng)站是必然的,但往往有很多設(shè)計(jì)師會(huì)用周圍同事的意見代替大部分用戶的意見,這一點(diǎn)是非常不可取的。在做導(dǎo)航設(shè)計(jì)的 時(shí)候,設(shè)計(jì)師應(yīng)該把使用對(duì)象都看成是新用戶或是沒有耐心的用戶,尤其是電商網(wǎng)站,在第一時(shí)間就要滿足用戶的需求,盡量削弱導(dǎo)航的學(xué)習(xí)性,比如鼠標(biāo)懸停的分 類打開方式就可以很大程度上的降低用戶的學(xué)習(xí)成本。

用戶在頁面停留的時(shí)間都是按秒來計(jì)算的,因此,導(dǎo)航必須一目了然,讓用戶產(chǎn)生依賴感。這里還要說一點(diǎn),當(dāng)網(wǎng)站決定改版的時(shí)候,導(dǎo)航盡量不要做很大的 改變,因?yàn)閷?dǎo)航是整個(gè)網(wǎng)站中比較重要的組成部分,也是用戶相對(duì)比較依賴的一個(gè)模塊,一旦導(dǎo)航有了很大的變化,會(huì)讓用戶在無形中產(chǎn)生一種陌生感和距離感,新 的技術(shù)只用在無關(guān)痛癢的地方。

關(guān)于用戶體驗(yàn),這里還有小細(xì)節(jié)可以和大家分享。當(dāng)用戶的鼠標(biāo)從一級(jí)導(dǎo)航移動(dòng)到二級(jí)導(dǎo)航的瞬間,有時(shí)會(huì)因?yàn)橐苿?dòng)角度和時(shí)間上的偏差,無意懸停到下面的 一級(jí)分類中。雖然只是一個(gè)不經(jīng)意的小細(xì)節(jié),但這會(huì)讓一些不耐心的用戶非常惱火。根據(jù)我們的初步調(diào)查,目前市面上比較主流的電商網(wǎng)站在這一點(diǎn)上都做得比較合 格。

另外,亞馬遜的網(wǎng)站過于“簡潔”,導(dǎo)航的底色與網(wǎng)頁底色,以及導(dǎo)航的字體與網(wǎng)頁的字體都過于相近,這在查看的某一瞬間會(huì)造成用戶的視覺混淆。(如下圖)

4、避免重復(fù)的分類

上文中已經(jīng)提到,在導(dǎo)航的設(shè)計(jì)過程中首先要對(duì)網(wǎng)站的整體運(yùn)營內(nèi)容有一個(gè)全面的了解,了解之后才能擬定出具體的板塊,而首頁導(dǎo)航的作用就是將這些板塊做出詳細(xì)的分類,在清楚導(dǎo)航的目的和重要性之后,把類似的板塊拼湊在一起,形成一個(gè)整體,這也就是主導(dǎo)航了。

在主導(dǎo)航的左下或右下方會(huì)有一個(gè)比較全面完整的分類導(dǎo)航,我們稱之為局部導(dǎo)航。在一些較為知名的電商網(wǎng)站中,局部導(dǎo)航的使用率可能更高于主導(dǎo)航,這兩者之間其實(shí)有一種微妙的遞進(jìn)關(guān)系,要盡量避免內(nèi)容重復(fù)。

無論是文字還是圖片,重復(fù)性的內(nèi)容會(huì)很容易讓用戶產(chǎn)生倦怠感。如天貓案例所示,“醫(yī)藥保健”和“醫(yī)藥館”在字意上很相近,而且點(diǎn)擊后的確進(jìn)入了同一個(gè)頁面,這樣的重復(fù)性內(nèi)容會(huì)明顯降低有針對(duì)性需求用戶的購物體驗(yàn)。

5、使用合適的文案

為了迎合用戶在導(dǎo)航上只愿意停留短短的幾秒鐘,導(dǎo)航文字內(nèi)容的可用性就變得至關(guān)重要。文字標(biāo)簽是傳達(dá)信息最有力的途徑,因此,導(dǎo)航中出現(xiàn)的文案應(yīng)該 避免使用一些用戶很難理解的詞匯,比如專業(yè)術(shù)語、縮寫和個(gè)性化語言等。其中最常見的就是縮寫,很多電商網(wǎng)站會(huì)由于排版美觀,或是文字長度上的限制而選用縮 寫,從而犧牲用戶體驗(yàn),增加了用戶對(duì)導(dǎo)航的理解難度。

在電商網(wǎng)站導(dǎo)航中,文案的首要任務(wù)就是讓每個(gè)用戶都能準(zhǔn)確快速的理解相關(guān)信息。而作為設(shè)計(jì)師,我們理所當(dāng)然的花費(fèi)許多時(shí)間一味的專注于視覺美學(xué),這 是幾乎所有設(shè)計(jì)師的通病,但這一通病在導(dǎo)航設(shè)計(jì)中卻成了致命傷。清晰明了的表達(dá)是美觀的前提,任何交互項(xiàng)目的最佳狀態(tài)就是實(shí)現(xiàn)透明化。

6、清晰的視覺體驗(yàn)

從視覺角度上來說,用戶只用幾秒鐘的時(shí)間掃視網(wǎng)站,所以導(dǎo)航的視覺設(shè)計(jì)必須符合邏輯,用色彩給用戶提供一種指引,成為用戶點(diǎn)擊的向?qū)?。可點(diǎn)擊的部分 盡可能的明顯一些,減少用戶對(duì)其的猜測。在色彩的使用上應(yīng)避免大片亮色,這會(huì)間接地降低導(dǎo)航文字的可識(shí)別度,與此同時(shí),電商網(wǎng)站面向的是所有的消費(fèi)者,因 此,在導(dǎo)航與導(dǎo)航文字內(nèi)容的色彩搭配上也要考慮到一些色彩障礙者。

京東的網(wǎng)站在這一點(diǎn)上做的還是比較好的,每一個(gè)層級(jí)的導(dǎo)航顏色由深及淺,讓用戶有一種循序漸進(jìn)的感覺。整個(gè)導(dǎo)航區(qū)域的色彩搭配也很恰當(dāng),無論鼠標(biāo)懸停在任何地方,所在的位置都能反應(yīng)出一個(gè)比較舒適的頁面。

7、為用戶提供反饋

當(dāng)用戶對(duì)導(dǎo)航中的某一個(gè)元素有了動(dòng)作之后,導(dǎo)航項(xiàng)都應(yīng)該對(duì)此做出相應(yīng)的回饋,比如當(dāng)用戶在分類導(dǎo)航上懸?;蚴屈c(diǎn)擊某些文字內(nèi)容后,文字應(yīng)該做出一些改變,可以是字體的大小、顏色的變化,或是任何其他合適的效果。關(guān)于這一點(diǎn),國內(nèi)的大部分電商網(wǎng)站都做的比較到位。

一號(hào)店的二級(jí)導(dǎo)航就有很恰當(dāng)?shù)姆答佇畔ⅲ徽麄€(gè)選中的板塊都被不刺眼的色彩所填充了,讓用戶很清楚的知道自己目前所在的位置。而展開的三級(jí)導(dǎo)航選中后的顏色就與其原本標(biāo)出的熱門商品的字體顏色有些重復(fù),比較容易混淆。

8、導(dǎo)航符合網(wǎng)站整體風(fēng)格

導(dǎo)航與網(wǎng)站整體風(fēng)格的搭配要區(qū)分為視覺和內(nèi)容兩個(gè)部分。

在視覺上,大多數(shù)網(wǎng)站基本不會(huì)出現(xiàn)大問題,因?yàn)樗械脑O(shè)計(jì)師都懂得導(dǎo)航基本上占據(jù)了整個(gè)頁面的主視覺這個(gè)道理,電商首頁中只有導(dǎo)航既需要迎合網(wǎng)站的整體又同時(shí)主導(dǎo)著網(wǎng)站風(fēng)格。

從內(nèi)容上來說,導(dǎo)航的內(nèi)容與網(wǎng)站的點(diǎn)擊量,甚至商品銷量都有著密切的關(guān)系。一旦用戶無法通過導(dǎo)航找到自己想要的商品,就意味著商家丟失了一位客戶。而如果能在導(dǎo)航中推薦一些商品給用戶,也許能促進(jìn)網(wǎng)站商品的銷售。

導(dǎo)航要符合網(wǎng)站整體的風(fēng)格可以細(xì)節(jié)到每一個(gè)小細(xì)節(jié),甚至于任何的線框字體。這樣做的目的主要是減少用戶的頁面跳躍感,盡量避免用戶因?yàn)轫撁嫣D(zhuǎn)的原因而產(chǎn)生的思考和反應(yīng)。同時(shí),對(duì)網(wǎng)站的整體美觀程度也有一定的好處。

9、利于搜索引擎優(yōu)化

搜索引擎的優(yōu)化是幾乎所有初創(chuàng)電商都會(huì)選擇的推廣方式,而電商導(dǎo)航是電商網(wǎng)站最主要的入口,基于此,有很多欄目的導(dǎo)航并不利于搜索引擎的抓取。在內(nèi) 容的設(shè)置上,應(yīng)該將主要內(nèi)容一目了然的展現(xiàn)出來,這樣的設(shè)計(jì)不僅利于用戶查看,也讓搜索引擎蜘蛛能順著導(dǎo)航目錄層層深入。所以,在導(dǎo)航欄中盡量使用文本, 減少用戶思考時(shí)間的同時(shí)利于搜索引擎的優(yōu)化,按鈕和圖片會(huì)阻礙到搜索引擎的訪問和抓取。

拍拍的導(dǎo)航相對(duì)于種類網(wǎng)站就顯得特別簡潔。主導(dǎo)航上只有幾個(gè)主要的模塊,既讓用戶能快速的了解到網(wǎng)站的主營項(xiàng)目,也實(shí)力利于搜索引擎的優(yōu)化。

10、趨于專業(yè)化的導(dǎo)航

商業(yè)化和專業(yè)化對(duì)B2B電子商務(wù)網(wǎng)站尤為重要。時(shí)下有很多電商網(wǎng)站的導(dǎo)航看起來比較凌亂,在色調(diào)和布局上也過于幼稚,這樣的導(dǎo)航會(huì)讓用戶對(duì)整個(gè)網(wǎng)站 的風(fēng)格基調(diào)產(chǎn)生截然不同的看法。如果電商網(wǎng)站需要體現(xiàn)出嚴(yán)肅簡潔的特點(diǎn),就應(yīng)該盡量避免過多的運(yùn)動(dòng)效果。作為導(dǎo)航欄,比其他標(biāo)題欄更高的高度,更大的加粗 字體是個(gè)不錯(cuò)的選擇,但一旦過度反而會(huì)看起來不夠精致。

樂蜂網(wǎng)雖然是一個(gè)偏向女性化的網(wǎng)站,但單看導(dǎo)航還是比較專業(yè)的。沒有過多的色彩,使用的顏色和字體也都趨于商務(wù)化,分類也盡可能的減少,這樣的風(fēng)格帶給用戶最直接的就是正規(guī)正統(tǒng),能在一定程度上增加用戶對(duì)網(wǎng)站的信任感。

總結(jié):

AnyForWeb認(rèn)為,電子商務(wù)網(wǎng)站的導(dǎo)航設(shè)計(jì)也不能一概而論,不同的網(wǎng)站類型有不同的設(shè)計(jì)側(cè)重點(diǎn)。比如,亞馬遜等綜合類電商網(wǎng)站的商品數(shù)量眾 多,那么4000萬商品和4000個(gè)商品的導(dǎo)航設(shè)計(jì)一定會(huì)有很大的區(qū)別。我們可以看到,淘寶由最初一級(jí)導(dǎo)航是按照用戶人群區(qū)分,到如今,不僅擴(kuò)大了搜索 框,一級(jí)導(dǎo)航也以功能作為劃分點(diǎn)。

而垂直類電商的用戶對(duì)商品更有目標(biāo)性,所以在導(dǎo)航的設(shè)計(jì)上往往需要按照自己的業(yè)務(wù)邏輯來進(jìn)行科學(xué)分類索引,比如京東和一號(hào)店的商品種類劃分。

還有一種類型就是由傳統(tǒng)企業(yè)轉(zhuǎn)型而來的電子商務(wù),這類電商網(wǎng)站的營銷通常以單個(gè)品牌為主,例如案例中的優(yōu)衣庫。由于分類和數(shù)量都很少,因此除了傳統(tǒng)的科學(xué)分類索引以外,首頁的單品推薦也對(duì)單個(gè)商品的營銷非常有效。

電子商務(wù)網(wǎng)站的導(dǎo)航設(shè)計(jì)還是應(yīng)該本著用戶體驗(yàn)為佳的原則,既要將網(wǎng)站中的所有信息都在有限的導(dǎo)航欄中體現(xiàn),又要為用戶反饋出重要的幫助信息。

 

原文地址:design.anyforweb

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!