京東的左側(cè)導(dǎo)航到底比amazon的差在哪里了?_策劃盈利教程
推薦:聽陳年談電子商務(wù)的本質(zhì)經(jīng)濟(jì)觀察報(bào):從卓越網(wǎng)到我有網(wǎng)再到現(xiàn)在的凡客誠品,你一直都在電子 商務(wù) 的行業(yè)之內(nèi),似乎不愿意離開,是因?yàn)槟銓?duì)這個(gè)行業(yè)有感情呢,還是因?yàn)槟阆嘈烹娮由虅?wù)的未來? 陳年:其實(shí)就是因?yàn)榻?jīng)驗(yàn)。我的個(gè)人經(jīng)驗(yàn),就在電子商務(wù),過去那么多年的經(jīng)驗(yàn)積累,為什么不
最近使用因?yàn)橘I東西會(huì)經(jīng)常去京東,但是一直覺得京東的左側(cè)導(dǎo)航用起來不舒服,這個(gè)導(dǎo)航完全是效仿amazon設(shè)計(jì)的。但是在amazon上使用就很舒服。到底兩個(gè)導(dǎo)航差在哪里呢?我們來仔細(xì)分析一下。


1、寬度
京東的左側(cè)導(dǎo)航寬度為211px,amazon的左側(cè)導(dǎo)航寬度為161px,整整差了50px。而這個(gè)導(dǎo)航是屬于左側(cè)懸浮滑動(dòng)彈出的,所以用戶要把鼠標(biāo)在懸浮在左側(cè)標(biāo)簽上,這樣顯示出相應(yīng)的導(dǎo)航內(nèi)容在右側(cè)的浮動(dòng)層上。這樣的話就相當(dāng)于用戶每一次選擇,都要往右側(cè)多移動(dòng)50px的距離,才能到達(dá)顯示的菜單進(jìn)行選擇。
2、間隔線
京東的左側(cè)導(dǎo)航先是一級(jí)分類然后是二級(jí)分類,分類標(biāo)簽之間上下間距來區(qū)別,amazon的導(dǎo)航只有一層分類,分類標(biāo)簽采用了間隔線來區(qū)分。這個(gè)導(dǎo)航的設(shè)計(jì)特點(diǎn)就是,當(dāng)鼠標(biāo)懸浮到標(biāo)簽整個(gè)一行都是可以激活顯示子菜單層的。而從視覺設(shè)計(jì)上,京東的導(dǎo)航根本無法看出,所以用戶一般會(huì)把鼠標(biāo)放在每一行的最左側(cè),進(jìn)行懸浮,再加上還比amazon寬了50px的距離,可見用戶要操作一次菜單是多么的不爽。
3、文字
京東導(dǎo)航的標(biāo)簽文字,只有二級(jí)分類是黑色文字,并且可以點(diǎn)擊的。而三級(jí)分類在默認(rèn)值是灰色,而且當(dāng)鼠標(biāo)懸浮以后只顯示二級(jí)分類三級(jí)分消失了。而amazon的默認(rèn)導(dǎo)航標(biāo)簽中只有一級(jí)分類,當(dāng)鼠標(biāo)懸浮以后才出現(xiàn)二級(jí)分類。這樣用戶在使用的時(shí)候根據(jù)效果暗示,只有最左邊的二級(jí)分類標(biāo)簽可以選擇,那么當(dāng)鼠標(biāo)懸浮以后,右側(cè)的灰色三級(jí)導(dǎo)航消失了。這樣從最左邊的二級(jí)分類標(biāo)簽,到最右邊顯示的三級(jí)分類標(biāo)簽。有相當(dāng)長(zhǎng)一段的空白,讓人感覺十分奇怪。雖然這里這么設(shè)計(jì)的目的可能是為了避免,相同的三級(jí)導(dǎo)航內(nèi)容重復(fù)出現(xiàn)。
解決方案
京東的左側(cè)導(dǎo)航到底比amazon的差在哪里了?
In: 交互設(shè)計(jì)&體驗(yàn)| 電子商務(wù)
13 七 2009最近使用因?yàn)橘I東西會(huì)經(jīng)常去京東,但是一直覺得京東的左側(cè)導(dǎo)航用起來不舒服,這個(gè)導(dǎo)航完全是效仿amazon設(shè)計(jì)的。但是在amazon上使用就很舒服。到底兩個(gè)導(dǎo)航差在哪里呢?我們來仔細(xì)分析一下。


1、寬度
京東的左側(cè)導(dǎo)航寬度為211px,amazon的左側(cè)導(dǎo)航寬度為161px,整整差了50px。而這個(gè)導(dǎo)航是屬于左側(cè)懸浮滑動(dòng)彈出的,所以用戶要把鼠標(biāo)在懸浮在左側(cè)標(biāo)簽上,這樣顯示出相應(yīng)的導(dǎo)航內(nèi)容在右側(cè)的浮動(dòng)層上。這樣的話就相當(dāng)于用戶每一次選擇,都要往右側(cè)多移動(dòng)50px的距離,才能到達(dá)顯示的菜單進(jìn)行選擇。
2、間隔線
京東的左側(cè)導(dǎo)航先是一級(jí)分類然后是二級(jí)分類,分類標(biāo)簽之間上下間距來區(qū)別,amazon的導(dǎo)航只有一層分類,分類標(biāo)簽采用了間隔線來區(qū)分。這個(gè)導(dǎo)航的設(shè)計(jì)特點(diǎn)就是,當(dāng)鼠標(biāo)懸浮到標(biāo)簽整個(gè)一行都是可以激活顯示子菜單層的。而從視覺設(shè)計(jì)上,京東的導(dǎo)航根本無法看出,所以用戶一般會(huì)把鼠標(biāo)放在每一行的最左側(cè),進(jìn)行懸浮,再加上還比amazon寬了50px的距離,可見用戶要操作一次菜單是多么的不爽。
3、文字
京東導(dǎo)航的標(biāo)簽文字,只有二級(jí)分類是黑色文字,并且可以點(diǎn)擊的。而三級(jí)分類在默認(rèn)值是灰色,而且當(dāng)鼠標(biāo)懸浮以后只顯示二級(jí)分類三級(jí)分消失了。而amazon的默認(rèn)導(dǎo)航標(biāo)簽中只有一級(jí)分類,當(dāng)鼠標(biāo)懸浮以后才出現(xiàn)二級(jí)分類。這樣用戶在使用的時(shí)候根據(jù)效果暗示,只有最左邊的二級(jí)分類標(biāo)簽可以選擇,那么當(dāng)鼠標(biāo)懸浮以后,右側(cè)的灰色三級(jí)導(dǎo)航消失了。這樣從最左邊的二級(jí)分類標(biāo)簽,到最右邊顯示的三級(jí)分類標(biāo)簽。有相當(dāng)長(zhǎng)一段的空白,讓人感覺十分奇怪。雖然這里這么設(shè)計(jì)的目的可能是為了避免,相同的三級(jí)導(dǎo)航內(nèi)容重復(fù)出現(xiàn)。
解決方案

上圖,左邊是amazon,右邊是京東,從這個(gè)結(jié)構(gòu)簡(jiǎn)圖就可以看出了問題了,根據(jù)認(rèn)知心理學(xué)的兩條論據(jù)
一個(gè)直覺呈現(xiàn)中的元素主要依據(jù)接近律進(jìn)行組合或聚合
同域律:觀察者傾向于把屬于同一區(qū)域或范圍的元素直覺為一個(gè)整體
這樣我們就得出一個(gè)改善方法:通過整體性,減少鼠標(biāo)移動(dòng)距離,改善整體體驗(yàn)。也就是說從直覺角度來增加用戶的可浮動(dòng)區(qū)域,這樣的話用戶就會(huì)把一行看成一個(gè)整體,雖然整個(gè)導(dǎo)航的寬度不變,但是因?yàn)榘岩恍锌闯梢粋(gè)整體,這樣用戶在鼠標(biāo)浮動(dòng)選擇的時(shí)候,就會(huì)偏向于中心,這樣就達(dá)到減少鼠標(biāo)左右移動(dòng)的效果了。

分享:談19樓如何找到自己的商業(yè)模式上周杭州5G的嘉賓單位是19樓。19樓的代表是他們的產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)負(fù)責(zé)人,和一位斑竹。整體而言大家聊的還是比較深入,前半場(chǎng)圍繞19樓的運(yùn)營(yíng)方向和地域性,后半場(chǎng)圍繞著他們具體的產(chǎn)品設(shè)計(jì)疑問。 備忘一下我的主要發(fā)言觀點(diǎn): 1、19樓如果想從戰(zhàn)略上走出杭州
- 新站長(zhǎng)如何做淘寶客單品推廣
- 零費(fèi)用學(xué)習(xí)網(wǎng)絡(luò)營(yíng)銷
- 驗(yàn)證碼廣告:站長(zhǎng)增加收入新渠道
- 如何設(shè)計(jì)好B2B行業(yè)網(wǎng)站導(dǎo)航欄,提高易用性
- 網(wǎng)店管理細(xì)節(jié)流程問題
- 草根站長(zhǎng)網(wǎng)站運(yùn)營(yíng):運(yùn)氣創(chuàng)業(yè),勤能過日子!
- 淘寶客,該如何選擇適合自己的推廣方式
- 網(wǎng)站模板:網(wǎng)站前期必做的策劃與分析
- 網(wǎng)頁模板三個(gè)步驟建立熱門話題博客(微博)的策略
- 網(wǎng)頁模板新手站長(zhǎng)如何制定SEO計(jì)劃書
- 網(wǎng)頁模板網(wǎng)站盈利模式有哪些?
- 實(shí)戰(zhàn)總結(jié):月入過2萬的童裝小店的操作模式
策劃盈利教程Rss訂閱網(wǎng)站運(yùn)營(yíng)教程搜索
策劃盈利教程推薦
- 縣級(jí)門戶站只有做到第一 才有發(fā)展機(jī)會(huì)
- 從商業(yè)模式特點(diǎn)談互聯(lián)網(wǎng)創(chuàng)業(yè)
- 淺談電子郵件營(yíng)銷推廣的設(shè)計(jì)標(biāo)準(zhǔn)
- 解讀B2C網(wǎng)店服務(wù)的發(fā)展思路
- 怎樣找到適合你的網(wǎng)絡(luò)賺錢項(xiàng)目
- 多層聯(lián)署計(jì)劃
- 網(wǎng)站運(yùn)營(yíng)之運(yùn)營(yíng)、維護(hù)與編輯
- 談商務(wù)角度中“日賺300”的可行性
- Google Web Fonts服務(wù)更名 并簡(jiǎn)化網(wǎng)頁界面
- 網(wǎng)站,(100-1)% 的內(nèi)容是導(dǎo)航
猜你也喜歡看這些
- 愛麗網(wǎng)團(tuán)購出售假貨 售出團(tuán)購網(wǎng)潛規(guī)則
- 國際家居網(wǎng)創(chuàng)始人黃相如談網(wǎng)絡(luò)營(yíng)銷的發(fā)展
- 如何設(shè)計(jì)好B2B行業(yè)網(wǎng)站導(dǎo)航欄,提高易用性
- 為什么行業(yè)B2B門戶網(wǎng)站運(yùn)營(yíng)內(nèi)容為王
- 谷歌宣布將向四川雅安地震災(zāi)區(qū)捐款500萬元
- 什么決定了視頻網(wǎng)站的存活
- 淺談野蠻創(chuàng)新系列 喪失用戶體驗(yàn)才是滅頂之災(zāi)
- 產(chǎn)品經(jīng)理如何寫好產(chǎn)品文檔
- 什么樣的域名算是好域名
- 淺談SNS網(wǎng)站轉(zhuǎn)變才露尖尖角
- 相關(guān)鏈接:
- 教程說明:
策劃盈利教程-京東的左側(cè)導(dǎo)航到底比amazon的差在哪里了?
。