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