幾大國內(nèi)電商的首屏布局和導(dǎo)航設(shè)計(jì) - [信息架構(gòu)]

版權(quán)聲明：轉(zhuǎn)載時請以超鏈接形式標(biāo)明文章原始出處和作者信息及本聲明
http://niangaotuantuan./logs/214553230.html

如果要分析現(xiàn)在國內(nèi)電子商務(wù)網(wǎng)站的首頁設(shè)計(jì)，網(wǎng)站logo、導(dǎo)航、輪轉(zhuǎn)圖、促銷信息、熱賣單品展示、甚至還有站內(nèi)搜索，應(yīng)該是幾大必不可少的元素。

在大的元素一致甚至大的布局一致下，這些國內(nèi)電商的首屏布局和導(dǎo)航設(shè)計(jì)是否有細(xì)微的差別？

先來看看幾大電商的首屏截圖（為了LOGO和首屏的完整，圖大，請自行點(diǎn)開看吧）p.s.由于淘寶的特殊性，這里不列入分析范圍。

可以看到，這五大電商基本都采取了左側(cè)分類導(dǎo)航的設(shè)計(jì)，并且除了亞馬遜外，都又有頂部的導(dǎo)航。
頂部的導(dǎo)航又分成了兩種，一種是對網(wǎng)站不同產(chǎn)品線的導(dǎo)航（如當(dāng)當(dāng)?shù)奶厣?wù)、京東和蘇寧易購）；還有一種是對自己網(wǎng)站的熱門產(chǎn)品分類的快速導(dǎo)航（如當(dāng)當(dāng)?shù)牡谝慌艑?dǎo)航和凡客的兩排導(dǎo)航）。
另外這里需要注意的是，凡客的導(dǎo)航略顯啰嗦：第一排是熱門標(biāo)簽（tag），是不可展開的；第二排是熱門分類（category），是可以展開的。

下面再來看看這幾大電商的左側(cè)分類導(dǎo)航展開后的狀態(tài)：

應(yīng)該說，除了亞馬遜只采用了大分類下的二級導(dǎo)航外，其他幾大電商都采用了多級導(dǎo)航。
并且在多級導(dǎo)航的最右側(cè)還都加入了知名品牌或者促銷活動的推廣區(qū)域。

但是，注意第一張圖，也就是當(dāng)當(dāng)?shù)膶?dǎo)航。當(dāng)當(dāng)是唯一一家在導(dǎo)航分類名稱左側(cè)還有ICON的國內(nèi)電商。那這個ICON有什么用呢？繼續(xù)向下看。

上面兩張圖分別是當(dāng)當(dāng)點(diǎn)擊了不同的導(dǎo)航分類后的頁面。注意看兩張圖的右側(cè)，尤其是第二張圖的四個紫色I(xiàn)CON。
再對比左側(cè)的導(dǎo)航ICON。

其實(shí)如果大家自己點(diǎn)擊當(dāng)當(dāng)?shù)木W(wǎng)站然后自己嘗試一下就明白了。
左側(cè)的導(dǎo)航是會隨著拉動滾動條向下而消失不見的，對此當(dāng)當(dāng)?shù)慕鉀Q辦法是什么呢？
就 是加入右側(cè)的這個導(dǎo)航。這個導(dǎo)航是會隨著滾動條向下而一直浮動在右側(cè)的，也就是一直在網(wǎng)站訪客的視野里。并且就像我們經(jīng)?？吹降恼衅妇W(wǎng)頁一樣，點(diǎn)擊某個職 位的名稱，可以快速定位到網(wǎng)頁對這個職位的描述的位置上，而不用用戶自行下拉尋找。這個導(dǎo)航也是類似的作用，點(diǎn)擊不同的ICON或者“女性”等分類，可以 快速定位到頁面的對應(yīng)分區(qū)。

但是很遺憾，就像上面兩張圖一樣，當(dāng)當(dāng)在不同的大分類下都采用了不同的設(shè)計(jì)。初衷是好的，但本身就是一個新穎的改變用戶習(xí)慣的設(shè)計(jì)，這樣的復(fù)雜程度很可能一時會讓用戶不知所措，難以接受。

最后再來簡單看看單個分類頁面的布局設(shè)計(jì)，兩個有特色的電商是：

上面的凡客的化妝品分類頁面。因?yàn)椴豢赡軟]有輪轉(zhuǎn)圖，于是為了減弱導(dǎo)航在下拉過程中“消失”的影響，凡客和現(xiàn)在很多的淘寶店家首頁設(shè)計(jì)一樣，采用了 輪轉(zhuǎn)圖下再次出現(xiàn)分類導(dǎo)航的布局設(shè)計(jì)（如圖中“熱門分類”）。這樣的設(shè)計(jì)比較清晰也容易融入布局中，是很簡便又效果不錯的做法。

上圖是京東的化妝品分類頁面的布局。這個頁面的特別之處在于，每個再低一級的分類都有一張代表圖片（如圖中的面部護(hù)理、彩妝等），這個設(shè)計(jì)同樣也出 現(xiàn)在現(xiàn)在手機(jī)端的導(dǎo)購類產(chǎn)品設(shè)計(jì)中（如蘑菇街、美麗說的熱門分類或者熱門標(biāo)簽）。更值得注意的是，在網(wǎng)頁設(shè)計(jì)中，京東的商品背景色幾乎都是白色，且沒有邊 框。這樣很好的模糊了導(dǎo)航的代表圖片和商品單品展示圖片之間的區(qū)別，使得整個頁面渾然一體。

總結(jié)來說，幾大國內(nèi)電商的首屏布局和導(dǎo)航設(shè)計(jì)基本相似，從而也就建立了固定的用戶體驗(yàn)規(guī)則。

而很多國內(nèi)的B2C電商在設(shè)計(jì)時常常沒有注意到這些用戶體驗(yàn)規(guī)則，也就影響了自身網(wǎng)站的用戶體驗(yàn)。