亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 網站 > 平面設計 > 正文

設計師設計優秀的網頁導航欄六大要點

2024-09-03 19:31:14
字體:
來源:轉載
供稿:網友

手機屏幕尺寸越做越大,作為互聯網的深度用戶,我相信你已經深刻體會到側抽屜導航在移動(和桌面)端是如何降低用戶體驗的。先不談它較低的可發現性和使用效率,拿出你的手機試著只用一手去按屏幕左上角。

欣慰的是,越來越多的應用和網站正在嘗試用更有效的方法解決這個問題。這里我整理出了市面上能見到的所有方法進行比較。有趣的是,Youtube 作為側抽屜的開山鼻祖,它也不用了。

一、選項卡

如果應用的選項不是很多(一般不超過5個),而且使用頻次較高用戶需要經常來回切換,選項卡導航是個不錯的解決方案:

這樣做似乎非常行之有效,但是,需要在設計考慮一些事情:

選項不建議超過5個

選項在視覺觀感上應得到強化

選項優先級隨順序逐級降低,符合用戶心理預期

除了被用戶所熟知的圖標(如主頁、圖片、個人中心等)其它圖標建議標簽文字說明

例如:淘票票 和 開眼

二、“更多”項

當主要部分超過5個時,一個切實可行的解決方案是顯示四至五個優先級最高的選項,將其它的歸位一類叫做更多項:

這個方案的設計原則和選項卡基本一致,更多項的子類可以在導航頁面的下拉菜單中顯示:

你可以說這種方案的使用效率比抽屜導航強不到哪去,對大多數用戶而言,只要可見項優先級足夠高,有四至五個可見的高頻功能會極大的降低學習成本,改善用戶體驗。

例如:Facebook

動態消息、好友請求、通知和搜索總是可見,剩下的所有功能是可以在“更多”菜單里

三、折疊菜單

在網頁設計中,情況稍顯復雜,采用標簽+更多的導航設計,能夠自適應屏幕寬度,顯示盡可能多的選項,其它的歸到更多項:

這意味著更多項中包含的子相會隨著屏幕寬度的減小而變多,沒有足夠的空間項目就會折疊起來。尤其當寬度處于中間時,這個解決方案的靈活性提供了一個更好的用戶體驗。

例如:BBC

四、滾動導航

如果導航項的數量較大,而且優先級幾乎沒什么區別,采用“更多”項將會是一個糟糕的妥協,另一個方案是滾動視圖中列出的所有項目:

這種方案的缺點是用戶只能看到可見范圍內的幾個選項,其余的選項用戶不可預知。盡管如此,當用戶探索購物或新聞類選項時,這依然是可接受的解決方案。

作為視覺設計,需要確保提供足夠的視覺線索,表明在水平滾動后有更多的元素,弱化邊緣元素就是個不錯的辦法。

例如:C Channel

榮獲 2016年度 Material Design 設計獎(創意導航組)

五、下拉菜單

當其他部分的可見性和可訪問性并不重要時,一個少見但有趣的方案是使用下拉菜單:

下拉菜單有一個雙重角色:首先,它作為一個頁面標題,雖然選項隱藏其下,向下箭頭表明有可能迅速切換到相似的部分。其二,除了切換同級選項,切換到下級項目也是能被用戶接受的。

例如:多鄰國

通過下拉菜單快速切換練習語言

六、抽屜導航不一定很糟

對于大多數用戶來說,下拉菜單的交互方式并不常見。令人意外的是,抽屜導航可能是一個不錯的選擇。它的主要缺點是較低的可發現性,當設計二級導航選項是,這種模式可能是一個適當的解決方案。

例如:Uber(優步) & Red Dot(紅點)

屏幕上的一切都是為了請求一輛車,諸如歷史、設置這類的二級選項不應該比從一個漢堡包菜單更突出

結論

沒有萬能的導航欄設計,它取決于產品定位、用戶需求以及內容信息。適用于其它應用的導航可能不會為你工作,反之亦然。每一個優秀的導航設計,是對優先級、信息架構、邏輯結構和用戶需求的高度把控。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
欧美大人香蕉在线| 在线观看久久久久久| 性欧美长视频免费观看不卡| 777午夜精品福利在线观看| 欧美在线激情网| 91免费的视频在线播放| 在线免费观看羞羞视频一区二区| 亚洲天堂色网站| 成人国内精品久久久久一区| 国产精品视频免费观看www| 91在线国产电影| 亚洲第一视频在线观看| 色www亚洲国产张柏芝| 精品国产一区二区三区久久狼黑人| 97国产真实伦对白精彩视频8| 欧美大秀在线观看| 午夜精品久久久久久久99热| 午夜精品久久久久久久99黑人| 98视频在线噜噜噜国产| 国产日韩中文字幕在线| 尤物99国产成人精品视频| 国产精品久久久久久av| 欧美夫妻性生活视频| 欧美激情免费在线| 美女视频黄免费的亚洲男人天堂| 亚洲深夜福利视频| 欧美激情图片区| 亚洲自拍小视频免费观看| 性欧美长视频免费观看不卡| 一区二区亚洲欧洲国产日韩| 国内精品伊人久久| 色青青草原桃花久久综合| 亚洲一级一级97网| 国产亚洲精品一区二555| 国产精品久久久久久久久久新婚| 国产精品一区二区三| 国产中文字幕日韩| 亚洲一区亚洲二区亚洲三区| 日韩精品免费综合视频在线播放| 亚洲第五色综合网| 少妇高潮久久77777| 亚洲国产一区二区三区在线观看| 国产美女高潮久久白浆| 国产精品看片资源| 国产午夜精品免费一区二区三区| 久久五月情影视| 日韩精品高清在线| 欧美在线观看视频| 日韩在线观看免费高清| 亚洲成人网久久久| 欧美成人免费小视频| 久久国产精彩视频| 一区二区中文字幕| 国产福利精品在线| 亚洲国产精品国自产拍av秋霞| 国产视频久久久久| 国产精品视频久久久久| 久久久精品久久| 国产精品免费久久久久久| 亚洲福利小视频| 欧美精品电影在线| 国产成人亚洲综合91精品| 亚洲国产精品成人一区二区| 精品亚洲aⅴ在线观看| 亚洲一区二区三区乱码aⅴ蜜桃女| 亚洲精品在线91| 日韩视频在线一区| 日本精品视频在线播放| 久久精品久久久久久国产 免费| 2019国产精品自在线拍国产不卡| 国内精品在线一区| 国产日韩一区在线| 国产精品国产三级国产aⅴ浪潮| 中文字幕久久亚洲| 欧美综合在线第二页| 久久视频中文字幕| 国模视频一区二区三区| 日韩av电影在线免费播放| 欧美国产亚洲精品久久久8v| 欧美国产日韩二区| 一区二区三区精品99久久| 亚洲一区二区久久久久久| 国产999精品久久久| 奇米一区二区三区四区久久| 国产成人涩涩涩视频在线观看| 亚洲xxxx在线| 久久久免费观看视频| 亚州欧美日韩中文视频| 欧美www在线| 日本亚洲欧美成人| 欧美国产亚洲视频| 国产在线播放91| 色777狠狠综合秋免鲁丝| 国产91精品在线播放| 欧美激情在线观看视频| 亚洲欧美激情视频| 精品一区二区三区四区在线| 欧美日韩亚洲激情| 国产精品视频999| 成人性教育视频在线观看| 91精品视频在线看| 国产成人啪精品视频免费网| 久久久久在线观看| 国产精品夜色7777狼人| 激情久久av一区av二区av三区| 欧美在线亚洲一区| 成人国产精品免费视频| 日韩大陆欧美高清视频区| 日韩av在线天堂网| 亚洲成人999| 国产成人一区二| 亚洲一区av在线播放| 国产欧美日韩亚洲精品| 96sao精品视频在线观看| 久久久91精品| 91在线网站视频| 亚洲国产婷婷香蕉久久久久久| 精品成人69xx.xyz| 91精品国产色综合久久不卡98| 狠狠综合久久av一区二区小说| 成人妇女淫片aaaa视频| 亚洲男人天堂网站| 国产综合在线观看视频| 欧美综合国产精品久久丁香| 免费成人高清视频| 日韩日本欧美亚洲| 国产精品欧美激情在线播放| 8090成年在线看片午夜| 欧美日韩不卡合集视频| 一区二区三区回区在观看免费视频| 欧美一级大片视频| 日韩av电影在线免费播放| 欧美午夜精品久久久久久浪潮| 欧美性xxxx极品hd满灌| 国产精品91在线| 日本精品视频在线播放| 亚洲片国产一区一级在线观看| 成人国产精品免费视频| 亚洲一区二区三区乱码aⅴ蜜桃女| 国产亚洲视频在线观看| 国产在线视频一区| 日韩欧美aaa| 欧美黑人xxxx| 精品国产91久久久久久老师| 亚洲国产天堂久久综合| 亚洲精品之草原avav久久| 91高清免费在线观看| 国产亚洲精品高潮| 亚洲第一av在线| 日韩精品极品在线观看| 亚洲自拍小视频免费观看| 欧美超级免费视 在线| 成人乱色短篇合集| 国产精品视频公开费视频| 亚洲区免费影片| 久久影院资源网| 成人黄色免费在线观看| 亚洲成人精品久久久| 精品久久久久久久中文字幕| 国产成人综合av| 国产一区二区色| 国产精品视频精品视频| 国内精品久久久久伊人av| 欧美在线播放视频|