用戶體驗丨頂部導(dǎo)航和側(cè)邊導(dǎo)航的好壞

2021-04-12

7626

哈嘍各位小伙伴，本期和大家分享一下「導(dǎo)航」設(shè)計。如何在頂部導(dǎo)航和側(cè)邊導(dǎo)航之間做出合理的選擇呢？兩種不同的設(shè)計方式能帶來完全差異化的體驗效果？

先來了解一下項目的背景。Conduira online是一個線上的教育平臺，為準(zhǔn)備考試的用戶提供有用的工具和資源。這個平臺目前有一個側(cè)邊導(dǎo)航欄，上面有11個選項。

后來由于平臺的變化，將主導(dǎo)航的選項縮減到3個——主頁、實習(xí)和課程。

導(dǎo)航的數(shù)量變少了，團隊又迎來了新的問題：是應(yīng)該繼續(xù)保留側(cè)邊導(dǎo)航的設(shè)計樣式還是切換成頂部導(dǎo)航的樣式呢？

為了做出最合理的選擇，我們需要回答三個基本的問題。

主導(dǎo)航中有幾個選項？

在選擇導(dǎo)航時回答這個問題很重要。這里介紹一個有趣的的交互概念叫做視覺固定(Visual Fixation)：注意力一直保持在同一個地方。

在頂部導(dǎo)航中，一個視覺固定點通常只適合一個選項。然而，側(cè)邊導(dǎo)航上的單一視覺固定點可以同時容納兩個選項。

結(jié)果很明確。與頂部導(dǎo)航相比，用戶在一次視覺觀察中可以在側(cè)邊導(dǎo)航上查看和感知更多菜單選項。當(dāng)然頂部導(dǎo)航也有自己的優(yōu)勢，為每個菜單項賦予各自的權(quán)重，而不是讓它們的重要性被其他選項分散。

對于具有過濾選項或帶有二級菜單的電商網(wǎng)站，視覺固定的概念起到了非常重要的作用。因為在這些情況下，我們希望用戶能夠在單一的視覺點上盡可能多的選擇。

Tips：這里的選擇僅僅取決于界面上有多少選項。如果主導(dǎo)航的菜單項不多于5個，只需使用頂部導(dǎo)航，這樣能夠更好地控制用戶在整個平臺上的體驗旅程。

主導(dǎo)航與選項優(yōu)先級的關(guān)系？

用戶在瀏覽網(wǎng)頁或App時會有各種各樣的瀏覽順序，其中一種就是“F型模式”。

看起來像這樣：

F型布局的特點是將注視力集中在頁面的頂部和左側(cè):

用戶首先以水平移動的方式瀏覽內(nèi)容區(qū)域，這個動線構(gòu)成了F型布局的頂欄；
接下來用戶掃描頁面左側(cè)的垂直線，進(jìn)行第二次水平移動瀏覽。隨著路徑越來越長，閱讀覆蓋的區(qū)域一次比一次短，構(gòu)成了F型布局下面的部分；
最后用戶以垂直移動的方式瀏覽整個頁面的內(nèi)容。

這種模式的含義是同一頁面上的第一行文本比后幾行文本受到更多的關(guān)注；每行文本左邊的幾個字比后面的文字接受度更多。

因此，在頂部導(dǎo)航中最左邊的選項比其他選項具有更多的視覺權(quán)重，因為它位于主要視覺區(qū)域，優(yōu)先級更高。

側(cè)邊導(dǎo)航采用了垂直移動，這是用戶瀏覽網(wǎng)頁的一個自然方向，但是選項優(yōu)先級的排序是個限制。當(dāng)選項的優(yōu)先級相同時，可以使用側(cè)邊導(dǎo)航，這樣用戶就可以完整瀏覽列表并確定對他們重要的內(nèi)容。

是否考慮使用二級導(dǎo)航？

如果是的話，可以考慮利用以下兩種設(shè)計樣式：

水平導(dǎo)航——在頁面頂部設(shè)置一個主導(dǎo)航，在主導(dǎo)航下面設(shè)置二級導(dǎo)航進(jìn)一步來區(qū)分內(nèi)容。

側(cè)邊欄——在頂部設(shè)置一個主導(dǎo)航，然后在側(cè)邊設(shè)置一個側(cè)邊欄菜單來處理其他內(nèi)容。

總結(jié)

頂部導(dǎo)航和側(cè)邊導(dǎo)航之間的選擇實際上取決于以上三個基本的問題。

另外由于現(xiàn)在的設(shè)備有了更大的屏幕尺寸，如今許多設(shè)計趨勢已轉(zhuǎn)向側(cè)邊導(dǎo)航，因為它看起來更干凈并優(yōu)化了更多的屏幕空間。

最后將導(dǎo)航的選擇歸結(jié)為兩點：

1.主導(dǎo)航包含的選項數(shù)量;

2.是希望用戶根據(jù)優(yōu)先級瀏覽項目，還是希望用戶可視化地瀏覽并根據(jù)其偏好選擇項目。

以上就是本期分享的內(nèi)容啦。希望對各位小伙伴有所啟發(fā)~

轉(zhuǎn)載聲明：本文來源于網(wǎng)絡(luò)，不作任何商業(yè)用途

免責(zé)聲明：本文內(nèi)部分內(nèi)容來自網(wǎng)絡(luò)，所涉繪畫作品及文字版權(quán)與著作權(quán)歸原作者，若有侵權(quán)或異議請聯(lián)系我們處理。

全部評論

您還沒登錄

登錄 / 注冊

暫無留言，趕緊搶占沙發(fā)

相關(guān)標(biāo)簽詞

動漫培訓(xùn) maya貼圖不顯示 maya烘焙貼圖 maya透明貼圖 maya凹凸貼圖 maya導(dǎo)入貼圖 maya貼圖步驟 maya材質(zhì)貼圖教程 maya材質(zhì)貼圖 maya展uv貼圖步驟 maya貼圖素材 maya法線貼圖 maya貼圖 maya貼圖教程 maya人物貼圖

繪學(xué)霸是國內(nèi)專業(yè)的CG數(shù)字藝術(shù)設(shè)計線上線下學(xué)習(xí)平臺，在繪學(xué)霸有2D繪畫、3D模型、影視后期、動畫、特效等數(shù)字藝術(shù)培訓(xùn)課程，也有學(xué)習(xí)資源下載，還有行業(yè)社區(qū)交流。學(xué)習(xí)、交流，來繪學(xué)霸就對了。

IOS下載

安卓下載

小程序

版權(quán)聲明

本網(wǎng)站所有產(chǎn)品設(shè)計、功能及展示形式，均已受版權(quán)或產(chǎn)權(quán)保護(hù)，任何公司及個人不得以任何方式復(fù)制部分或全部，違者將依法追究責(zé)任，特此聲明。

熱線電話

18026259035

咨詢時間：9:00～21:00

在線客服

聯(lián)系網(wǎng)站客服

客服微信：18026259035

公司地址

中國·廣州

廣州市海珠區(qū)曉港中馬路130號之19

Copyright ? 2008 -2020 CGWANG廣州市王氏教育科技有限公司版權(quán)所有電信與信息服務(wù)業(yè)務(wù)經(jīng)營許可證：粵B2-20201042 廣播電視節(jié)目制作經(jīng)營許可證編號：（粵）字第04146號粵ICP備09115880號

繪學(xué)霸客戶端（權(quán)限暫無，用于CG資源與教程交流分享）

開發(fā)者：廣州王氏軟件科技有限公司 | 應(yīng)用版本：Android：6.0，IOS：5.1 | App隱私政策> | 應(yīng)用權(quán)限 | 更新時間：2020.1.6

91久久九色_99精品在线免费_91精品欧美一区二区三区_成人一级毛片_国产精品久久久久免费视频_99精彩视频在线观看

用戶體驗丨頂部導(dǎo)航和側(cè)邊導(dǎo)航的好壞

主導(dǎo)航中有幾個選項？

主導(dǎo)航與選項優(yōu)先級的關(guān)系？

是否考慮使用二級導(dǎo)航？

總結(jié)

全部評論

熱門資訊

什么是重復(fù)構(gòu)成？

【AI排版技巧】在AI軟件中如何調(diào)整字距效果...

【UI設(shè)計】UI設(shè)計師快速上手B端設(shè)計指南

深圳美工設(shè)計培訓(xùn)班哪個專業(yè)？

文字太多PPT應(yīng)該如何排版？

【平面設(shè)計】如何做出高端的logo設(shè)計

深圳學(xué)設(shè)計哪家學(xué)校有名？

ui設(shè)計和原型設(shè)計有什么區(qū)別？

ui和ue設(shè)計有什么區(qū)別嗎？

沒有原創(chuàng)作品能找到UI設(shè)計工作嗎?

相關(guān)推薦

熱門標(biāo)簽詞

相關(guān)標(biāo)簽詞