左導(dǎo)航還是頂導(dǎo)航好?
發(fā)布時間:2022-01-05 11:16 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

做中后臺產(chǎn)品的設(shè)計,基本都逃不開導(dǎo)航布局這個大框架。

基于用戶的 Z 字形掃描行為,重要的導(dǎo)航應(yīng)當(dāng)選擇左側(cè)導(dǎo)航或頂部導(dǎo)航。

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

可是橫著豎著有那么大差別嗎?被人問道為什么這么選擇,該如何回答?

今天給大家些靈感,從以下四個角度分析一下:

  • 科學(xué)角度
  • 布局角度
  • 尺寸適配角度
  • 統(tǒng)一性角度


科學(xué)角度


JR Kingsburg 曾經(jīng)做過一次實驗(A comparison of three-level menu navigation structures for web design),研究 3 層導(dǎo)航中,哪種組合使用效率更高。

這三層中,每一層都有橫向和縱向兩種可能性,所以實驗總共有 2×2×2=8 種對照組:

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

他為這 8 種導(dǎo)航布局做了不同電商原型,讓用戶來買東西,并記錄各種數(shù)據(jù),結(jié)果發(fā)現(xiàn)了很多有意思的數(shù)據(jù):

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

綜合這些數(shù)據(jù),看起來整體表現(xiàn)較好都是「左上上」、「左左上」、「左左左」。

科學(xué)雖然很嚴(yán)謹,卻缺乏靈活度,例如本次試驗的場景單一(電商購物),而且用來測試的界面未免也太簡陋了吧!

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

所以我們再從其他角度思考看看。


布局角度


從占據(jù)面積的角度來看,橫向?qū)Ш奖瓤v向?qū)Ш绞〉胤,因為只要細細一條就好了。

然而,選項數(shù)量不多時橫向是可以;選項多起來,橫向?qū)Ш骄秃軗頂D了。

畢竟縱向?qū)Ш椒奖銤L動,橫向?qū)Ш胶苌儆杏脩魰䥽L試滾動查看的,「…」也不是什么方便的操作。

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

所以,如果確定選項少可以選橫向,不確定或者數(shù)量多建議保險起見選縱向。


尺寸適配角度


任何導(dǎo)航,都要占據(jù)屏幕不少空間,這對尺寸適配都是一件麻煩事。哪怕產(chǎn)品并不需要為移動端做響應(yīng)式布局,只要是網(wǎng)頁端,就得考慮窗口尺寸的變化問題。因為設(shè)計師的 Mac 和大量用戶的 PC 甚至平板電腦之間,展示上的差異真的不小。

橫向?qū)Ш秸紦?jù)空間最小,同時也是最難做尺寸適配的。尤其是如果上面除了導(dǎo)航之外,還放有各種 logo、頭像、圖標(biāo)、搜索…各種東西時。橫向?qū)Ш揭话愣加腥N狀態(tài):展開、折疊和收起。但是縱向?qū)Ш骄秃唵瘟,只需要兩個狀態(tài):展開和收起。頂多再讓展開狀態(tài)的寬度能夠自適應(yīng)變化或手動拉伸就差不多了。

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

這么看來,如果產(chǎn)品需要考慮很多不同尺寸適配的問題,縱向?qū)Ш绞亲詈唵蔚倪x擇,除非橫向?qū)Ш降膬?nèi)容不多維護起來不麻煩。


統(tǒng)一性角度


我之前為了研究確定按鈕放在左邊還是放在右邊好,做了一系列實驗分析,結(jié)果得出超出我預(yù)期的結(jié)論…放哪都沒多大問題,統(tǒng)一就好。于是,我想這個問題也可以類比一下。

大部分網(wǎng)站都是橫向?qū)Ш剑哉f如果產(chǎn)品是以網(wǎng)頁版為主,且用戶會經(jīng)常穿插跳轉(zhuǎn)使用其它網(wǎng)頁,那么也使用橫向?qū)Ш奖容^符合習(xí)慣。

而無論 PC 還是 Mac,系統(tǒng)頁面的導(dǎo)航在左側(cè)的情況比較多,所以說如果產(chǎn)品是系統(tǒng)軟件的話,縱向?qū)Ш奖容^符合習(xí)慣。

用左導(dǎo)航還是頂導(dǎo)航?我從這4個角度做了一個完整分析!

然而,更更更更更重要的是,千萬不要同一個產(chǎn)品不同端或不同子系統(tǒng)的導(dǎo)航不一樣!用戶很可能一會兒用這個,一會兒用那個,結(jié)果操作習(xí)慣換來換去,人都弄暈啦!還有,就是改版換導(dǎo)航肯定要讓老用戶不滿,好不容易養(yǎng)成習(xí)慣改起來容易嗎?所以說,決定導(dǎo)航布局時還是要謹慎才好哦。


最后


看來,決定一個導(dǎo)航布局,可以考慮的東西還挺多的,也未必能找到絕對的答案。對于這個問題,你還有什么別的想法呢?

HTML基礎(chǔ)視頻教程
我要自學(xué)網(wǎng)商城 ¥30 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC