京東的左側(cè)導(dǎo)航到底比amazon的差在哪里了?_策劃盈利教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:聽陳年談電子商務(wù)的本質(zhì)
      經(jīng)濟(jì)觀察報:從卓越網(wǎng)到我有網(wǎng)再到現(xiàn)在的凡客誠品,你一直都在電子 商務(wù) 的行業(yè)之內(nèi),似乎不愿意離開,是因為你對這個行業(yè)有感情呢,還是因為你相信電子商務(wù)的未來? 陳年:其實就是因為經(jīng)驗。我的個人經(jīng)驗,就在電子商務(wù),過去那么多年的經(jīng)驗積累,為什么不

      最近使用因為買東西會經(jīng)常去京東,但是一直覺得京東的左側(cè)導(dǎo)航用起來不舒服,這個導(dǎo)航完全是效仿amazon設(shè)計的。但是在amazon上使用就很舒服。到底兩個導(dǎo)航差在哪里呢?我們來仔細(xì)分析一下。

      2009-07-09_115532

      2009-07-09_115648

      1、寬度

      京東的左側(cè)導(dǎo)航寬度為211px,amazon的左側(cè)導(dǎo)航寬度為161px,整整差了50px。而這個導(dǎo)航是屬于左側(cè)懸浮滑動彈出的,所以用戶要把鼠標(biāo)在懸浮在左側(cè)標(biāo)簽上,這樣顯示出相應(yīng)的導(dǎo)航內(nèi)容在右側(cè)的浮動層上。這樣的話就相當(dāng)于用戶每一次選擇,都要往右側(cè)多移動50px的距離,才能到達(dá)顯示的菜單進(jìn)行選擇。

      2、間隔線

      京東的左側(cè)導(dǎo)航先是一級分類然后是二級分類,分類標(biāo)簽之間上下間距來區(qū)別,amazon的導(dǎo)航只有一層分類,分類標(biāo)簽采用了間隔線來區(qū)分。這個導(dǎo)航的設(shè)計特點就是,當(dāng)鼠標(biāo)懸浮到標(biāo)簽整個一行都是可以激活顯示子菜單層的。而從視覺設(shè)計上,京東的導(dǎo)航根本無法看出,所以用戶一般會把鼠標(biāo)放在每一行的最左側(cè),進(jìn)行懸浮,再加上還比amazon寬了50px的距離,可見用戶要操作一次菜單是多么的不爽。

      3、文字

      京東導(dǎo)航的標(biāo)簽文字,只有二級分類是黑色文字,并且可以點擊的。而三級分類在默認(rèn)值是灰色,而且當(dāng)鼠標(biāo)懸浮以后只顯示二級分類三級分消失了。而amazon的默認(rèn)導(dǎo)航標(biāo)簽中只有一級分類,當(dāng)鼠標(biāo)懸浮以后才出現(xiàn)二級分類。這樣用戶在使用的時候根據(jù)效果暗示,只有最左邊的二級分類標(biāo)簽可以選擇,那么當(dāng)鼠標(biāo)懸浮以后,右側(cè)的灰色三級導(dǎo)航消失了。這樣從最左邊的二級分類標(biāo)簽,到最右邊顯示的三級分類標(biāo)簽。有相當(dāng)長一段的空白,讓人感覺十分奇怪。雖然這里這么設(shè)計的目的可能是為了避免,相同的三級導(dǎo)航內(nèi)容重復(fù)出現(xiàn)。

      解決方案

      京東的左側(cè)導(dǎo)航到底比amazon的差在哪里了?

      In: 交互設(shè)計&體驗| 電子商務(wù)

      13 2009

      最近使用因為買東西會經(jīng)常去京東,但是一直覺得京東的左側(cè)導(dǎo)航用起來不舒服,這個導(dǎo)航完全是效仿amazon設(shè)計的。但是在amazon上使用就很舒服。到底兩個導(dǎo)航差在哪里呢?我們來仔細(xì)分析一下。

      2009-07-09_115532

       2009-07-09_115648

      1、寬度
      京東的左側(cè)導(dǎo)航寬度為211px,amazon的左側(cè)導(dǎo)航寬度為161px,整整差了50px。而這個導(dǎo)航是屬于左側(cè)懸浮滑動彈出的,所以用戶要把鼠標(biāo)在懸浮在左側(cè)標(biāo)簽上,這樣顯示出相應(yīng)的導(dǎo)航內(nèi)容在右側(cè)的浮動層上。這樣的話就相當(dāng)于用戶每一次選擇,都要往右側(cè)多移動50px的距離,才能到達(dá)顯示的菜單進(jìn)行選擇。
       

      2、間隔線
      京東的左側(cè)導(dǎo)航先是一級分類然后是二級分類,分類標(biāo)簽之間上下間距來區(qū)別,amazon的導(dǎo)航只有一層分類,分類標(biāo)簽采用了間隔線來區(qū)分。這個導(dǎo)航的設(shè)計特點就是,當(dāng)鼠標(biāo)懸浮到標(biāo)簽整個一行都是可以激活顯示子菜單層的。而從視覺設(shè)計上,京東的導(dǎo)航根本無法看出,所以用戶一般會把鼠標(biāo)放在每一行的最左側(cè),進(jìn)行懸浮,再加上還比amazon寬了50px的距離,可見用戶要操作一次菜單是多么的不爽。

      3、文字
      京東導(dǎo)航的標(biāo)簽文字,只有二級分類是黑色文字,并且可以點擊的。而三級分類在默認(rèn)值是灰色,而且當(dāng)鼠標(biāo)懸浮以后只顯示二級分類三級分消失了。而amazon的默認(rèn)導(dǎo)航標(biāo)簽中只有一級分類,當(dāng)鼠標(biāo)懸浮以后才出現(xiàn)二級分類。這樣用戶在使用的時候根據(jù)效果暗示,只有最左邊的二級分類標(biāo)簽可以選擇,那么當(dāng)鼠標(biāo)懸浮以后,右側(cè)的灰色三級導(dǎo)航消失了。這樣從最左邊的二級分類標(biāo)簽,到最右邊顯示的三級分類標(biāo)簽。有相當(dāng)長一段的空白,讓人感覺十分奇怪。雖然這里這么設(shè)計的目的可能是為了避免,相同的三級導(dǎo)航內(nèi)容重復(fù)出現(xiàn)。

      解決方案

      DSC00309_1

      上圖,左邊是amazon,右邊是京東,從這個結(jié)構(gòu)簡圖就可以看出了問題了,根據(jù)認(rèn)知心理學(xué)的兩條論據(jù)

      一個直覺呈現(xiàn)中的元素主要依據(jù)接近律進(jìn)行組合或聚合

      同域律:觀察者傾向于把屬于同一區(qū)域或范圍的元素直覺為一個整體

      這樣我們就得出一個改善方法:通過整體性,減少鼠標(biāo)移動距離,改善整體體驗。也就是說從直覺角度來增加用戶的可浮動區(qū)域,這樣的話用戶就會把一行看成一個整體,雖然整個導(dǎo)航的寬度不變,但是因為把一行看成一個整體,這樣用戶在鼠標(biāo)浮動選擇的時候,就會偏向于中心,這樣就達(dá)到減少鼠標(biāo)左右移動的效果了。

      2009-07-09_114630

       

      分享:談19樓如何找到自己的商業(yè)模式
      上周杭州5G的嘉賓單位是19樓。19樓的代表是他們的產(chǎn)品、設(shè)計、運營負(fù)責(zé)人,和一位斑竹。整體而言大家聊的還是比較深入,前半場圍繞19樓的運營方向和地域性,后半場圍繞著他們具體的產(chǎn)品設(shè)計疑問。 備忘一下我的主要發(fā)言觀點: 1、19樓如果想從戰(zhàn)略上走出杭州

      來源:模板無憂//所屬分類:策劃盈利教程/更新時間:2009-09-03
      相關(guān)策劃盈利教程