2021-4-16 資深UI設(shè)計(jì)者
做中后臺(tái)產(chǎn)品的設(shè)計(jì)，基本都逃不開導(dǎo)航布局這個(gè)大框架。
基于用戶的 Z 字形掃描行為，重要的導(dǎo)航應(yīng)當(dāng)選擇左側(cè)導(dǎo)航或頂部導(dǎo)航。
可是橫著豎著有那么大差別嗎？被人問道為什么這么選擇，該如何回答？
今天給大家些靈感，從以下四個(gè)角度分析一下：
JR Kingsburg 曾經(jīng)做過一次實(shí)驗(yàn)（A comparison of three-level menu navigation structures for web design），研究 3 層導(dǎo)航中，哪種組合使用效率更高。
這三層中，每一層都有橫向和縱向兩種可能性，所以實(shí)驗(yàn)總共有 2×2×2=8 種對(duì)照組：
他為這 8 種導(dǎo)航布局做了不同電商原型，讓用戶來買東西，并記錄各種數(shù)據(jù)，結(jié)果發(fā)現(xiàn)了很多有意思的數(shù)據(jù)：
綜合這些數(shù)據(jù)，看起來整體表現(xiàn)較好都是「左上上」、「左左上」、「左左左」。
科學(xué)雖然很嚴(yán)謹(jǐn)，卻缺乏靈活度，例如本次試驗(yàn)的場景單一（電商購物），而且用來測試的界面未免也太簡陋了吧！
所以我們再從其他角度思考看看。
從占據(jù)面積的角度來看，橫向?qū)Ш奖瓤v向?qū)Ш绞〉胤?，因?yàn)橹灰?xì)細(xì)一條就好了。
然而，選項(xiàng)數(shù)量不多時(shí)橫向是可以；選項(xiàng)多起來，橫向?qū)Ш骄秃軗頂D了。
畢竟縱向?qū)Ш椒奖銤L動(dòng)，橫向?qū)Ш胶苌儆杏脩魰?huì)嘗試滾動(dòng)查看的，「…」也不是什么方便的操作。
所以，如果確定選項(xiàng)少可以選橫向，不確定或者數(shù)量多建議保險(xiǎn)起見選縱向。
任何導(dǎo)航，都要占據(jù)屏幕不少空間，這對(duì)尺寸適配都是一件麻煩事。哪怕產(chǎn)品并不需要為移動(dòng)端做響應(yīng)式布局，只要是網(wǎng)頁端，就得考慮窗口尺寸的變化問題。因?yàn)樵O(shè)計(jì)師的 Mac 和大量用戶的 PC 甚至平板電腦之間，展示上的差異真的不小。
橫向?qū)Ш秸紦?jù)空間最小，同時(shí)也是最難做尺寸適配的。尤其是如果上面除了導(dǎo)航之外，還放有各種 logo、頭像、圖標(biāo)、搜索…各種東西時(shí)。橫向?qū)Ш揭话愣加腥N狀態(tài)：展開、折疊和收起。但是縱向?qū)Ш骄秃唵瘟耍恍枰獌蓚€(gè)狀態(tài)：展開和收起。頂多再讓展開狀態(tài)的寬度能夠自適應(yīng)變化或手動(dòng)拉伸就差不多了。
這么看來，如果產(chǎn)品需要考慮很多不同尺寸適配的問題，縱向?qū)Ш绞亲詈唵蔚倪x擇，除非橫向?qū)Ш降膬?nèi)容不多維護(hù)起來不麻煩。
我之前為了研究確定按鈕放在左邊還是放在右邊好，做了一系列實(shí)驗(yàn)分析，結(jié)果得出超出我預(yù)期的結(jié)論…放哪都沒多大問題，統(tǒng)一就好。于是，我想這個(gè)問題也可以類比一下。
大部分網(wǎng)站都是橫向?qū)Ш剑哉f如果產(chǎn)品是以網(wǎng)頁版為主，且用戶會(huì)經(jīng)常穿插跳轉(zhuǎn)使用其它網(wǎng)頁，那么也使用橫向?qū)Ш奖容^符合習(xí)慣。
而無論 PC 還是 Mac，系統(tǒng)頁面的導(dǎo)航在左側(cè)的情況比較多，所以說如果產(chǎn)品是系統(tǒng)軟件的話，縱向?qū)Ш奖容^符合習(xí)慣。
然而，更更更更更重要的是，千萬不要同一個(gè)產(chǎn)品不同端或不同子系統(tǒng)的導(dǎo)航不一樣！用戶很可能一會(huì)兒用這個(gè)，一會(huì)兒用那個(gè)，結(jié)果操作習(xí)慣換來換去，人都弄暈啦！還有，就是改版換導(dǎo)航肯定要讓老用戶不滿，好不容易養(yǎng)成習(xí)慣改起來容易嗎？所以說，決定導(dǎo)航布局時(shí)還是要謹(jǐn)慎才好哦。
文章來源：優(yōu)設(shè) 作者：體驗(yàn)進(jìn)階
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com