亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗更好?

2020-9-10    資深UI設(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)航和側(cè)邊導(dǎo)航,哪一種用戶體驗更好?

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

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

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

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

頂部導(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型模式」。

看起來像這樣:

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗更好?

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

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

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

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

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗更好?

側(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)航進一步來區(qū)分內(nèi)容。

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗更好?

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

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗更好?

總結(jié)

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

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

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

  • 主導(dǎo)航包含的選項數(shù)量;
  • 是希望用戶根據(jù)優(yōu)先級瀏覽項目,還是希望用戶可視化地瀏覽并根據(jù)其偏好選擇項目。

文章來源:優(yōu)設(shè)    作者:Clip設(shè)計夾


藍藍設(shè)計www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.chinatradebeam.com

存檔

亚洲av国产爽歪歪无码| 女人高潮叫床污话| 曰本胸大巨胸做爰视频| 国产丰满美女a级毛片| 无码无套少妇毛多69xxx| 欧美激情精品久久久久久| 吸咬奶头狂揉60分钟视频| 国产成人免费ā片在线观看 | 日韩精品无码一区二区中文字幕| 日日摸日日碰人妻无码| 精品一区二区三区在线观看| 国产精品久久久久久影视| 与亲女洗澡时伦了毛片| 俺去俺来也在线www色官网| 18禁男女爽爽爽午夜网站免费| 中文字幕日本人妻久久久免费| 亚洲国产精品无码中文在线| 日本人妻巨大乳挤奶水免费| 亚洲精品国产精品乱码视色| 国产精品久久| 少妇粉嫩小泬喷水视频www| 亚洲人成网站观看在线播放 | 无码精品a∨在线观看十八禁| 藏精阁av无码亚洲av| 丰满人妻熟妇乱又伦精品软件| 狠狠精品干练久久久无码中文字幕| 好爽又高潮了毛片免费下载| ysl千人千色短视频专区| 无码日本精品xxxxxxxxx| 欧美精产国品一二三产品区别 | 国产xxx69麻豆国语对白| 99精品亚洲av无码国产另类| 97精品国产97久久久久久免费| 国内精品久久久久影视老司机| 国产精品h片在线播放| 久久国产成人午夜AV影院| 国产精品久久久久久吹潮| 亚洲欧美国产毛片在线| 色综合久久久久久久久五月| 国产又爽又粗又猛的视频| 无码jk粉嫩小泬在线观看欧美|