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