最近使用因?yàn)橘I東西會經(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)航先是一級分類然后是二級分類，分類標(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)航根本無法看出，所以用戶一般會把鼠標(biāo)放在每一行的最左側(cè)，進(jìn)行懸浮，再加上還比amazon寬了50px的距離，可見用戶要操作一次菜單是多么的不爽。

3、文字

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

解決方案

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

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

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

這樣我們就得出一個(gè)改善方法：通過整體性，減少鼠標(biāo)移動(dòng)距離，改善整體體驗(yàn)。也就是說從直覺角度來增加用戶的可浮動(dòng)區(qū)域，這樣的話用戶就會把一行看成一個(gè)整體，雖然整個(gè)導(dǎo)航的寬度不變，但是因?yàn)榘岩恍锌闯梢粋€(gè)整體，這樣用戶在鼠標(biāo)浮動(dòng)選擇的時(shí)候，就會偏向于中心，這樣就達(dá)到減少鼠標(biāo)左右移動(dòng)的效果了。