世界著名的網(wǎng)頁易用性專家尼爾森曾經(jīng)有報告顯示，首屏以上的關(guān)注度為80.3%，首屏以下的關(guān)注度僅有19.7%。這兩個數(shù)據(jù)足以表明，首屏對每一個需要轉(zhuǎn)化率的網(wǎng)站都很重要，尤其是電商網(wǎng)站。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站設(shè)計、做網(wǎng)站與策劃設(shè)計,尚志網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:尚志等地區(qū)。尚志做網(wǎng)站價格咨詢:13518219792

相關(guān)閱讀：電子商務(wù)網(wǎng)站設(shè)計分析系列之一：首頁導(dǎo)航

在電子商務(wù)網(wǎng)站中，用戶最急切需要獲得的不外乎兩點：吸引人的商品或店鋪，以及網(wǎng)站能夠給予他的信任感。信任需要積累，因此，各類宣傳推廣信息就成了電商首屏展示的不二之選。

一個能引人駐足停留的首屏一定會為網(wǎng)站帶來更多的客戶和利益，筆者會告訴你如何策劃設(shè)計出一個好看好用的電商首屏。

1.確定可視范圍

 根據(jù)統(tǒng)計報告顯示，2014年使用率最高的Internet用戶屏幕分辨率為1366px*768px。以此為例，瀏覽器邊框?qū)挾绕毡樵?1左右，所以網(wǎng)頁首屏寬度在無干擾因素的情況下可以確定為1345；而屏幕總高度為768，除去任務(wù)欄高度40、店鋪頁頭106、瀏覽器（工具欄、邊框等）160和位置工具欄30，初步估算首屏高度控制在432較為合適。因此我們可以得出，最符合時下趨勢的首屏設(shè)計寬高基本范圍是1345*432，重要的內(nèi)容可以盡量放在這個區(qū)間里。

2.展示吸引用戶的信息

 首頁的首屏位置在整個網(wǎng)站中都稱得上寸土寸金，正因為如此，此處展示的文字應(yīng)該短小精悍，盡可能用最少的篇幅就把信息表達(dá)清楚。標(biāo)題性文字更應(yīng)該把商家的商業(yè)訴求清晰直接的表達(dá)出來，在這類文字的策劃上需注意符合網(wǎng)站的整體風(fēng)格。

一號店的banner文案就能很好的抓住瀏覽者的眼球，有趣的標(biāo)題文字加上“0元領(lǐng)”這樣的醒目的字眼，讓用戶充滿了好奇心。

Gap的首屏雖然沒有將廣告的下半部分很完整的展現(xiàn)出來，但是這似乎并沒有影響到用戶想要繼續(xù)點擊的心情，真正吸引用戶的信息點都被整齊的陳列在首屏中，供用戶逐一了解。

3.視覺焦點要顯眼

大多數(shù)用戶的瀏覽習(xí)慣是走馬觀花式的，以如今國內(nèi)電商網(wǎng)站普遍的布局來看，用戶在第一屏中的視覺焦點基本上以Banner和導(dǎo)航為主。因此，其中所表現(xiàn)的無論是文字還是大圖，都應(yīng)該讓用戶一眼看清內(nèi)容，減少其思考時間。設(shè)計師在設(shè)計時可以用“去色”的方法來檢驗實際效果。

去色前：

去色后：

易迅首屏算是個反面教材。首屏原圖會令人覺得太過繁復(fù)，所以視覺焦點自然會分散開來。

通過去色前后的對比圖我們可以發(fā)現(xiàn)，去色后，導(dǎo)航上的文字內(nèi)容會變得不夠清晰，因此我們可以得出，色彩是鎖定用戶視覺焦點的主要問題。

去色前：

去色后：

唯品會首屏去色后的效果就截然不同了。去色后，Banner上的內(nèi)容仍然可以很容易的辨認(rèn)出來，文字和背景都很清晰。

5、使用合適的文案

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

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

6、清晰的視覺體驗

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

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

7、為用戶提供反饋

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

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

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

導(dǎo)航與網(wǎng)站整體風(fēng)格的搭配要區(qū)分為視覺和內(nèi)容兩個部分。在視覺上，大多數(shù)網(wǎng)站基本不會出現(xiàn)大問題，因為所有的設(shè)計師都懂得導(dǎo)航基本上占據(jù)了整個頁面的主視覺這個道理，電商首頁中只有導(dǎo)航既需要迎合網(wǎng)站的整體又同時主導(dǎo)著網(wǎng)站風(fēng)格。從內(nèi)容上來說，導(dǎo)航的內(nèi)容與網(wǎng)站的點擊量，甚至商品銷量都有著密切的關(guān)系。一旦用戶無法通過導(dǎo)航找到自己想要的商品，就意味著商家丟失了一位客戶。而如果能在導(dǎo)航中推薦一些商品給用戶，也許能促進(jìn)網(wǎng)站商品的銷售。

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

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

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

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

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

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

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

總結(jié)：

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

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

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

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

本文標(biāo)題：電子商務(wù)網(wǎng)站設(shè)計分析系列之一：首頁導(dǎo)航
文章鏈接：http://jinyejixie.com/article14/egdjde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計公司、網(wǎng)站營銷、建站公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)