時下流行的側邊欄導航到底好不好用?

      作者:譯文@陳子木
      2017-05-27
      4222

      側邊欄導航看起來不錯,它簡化布局的功能似乎也很強大,那么它真的有效么?用戶是否會認可這種設計呢?今天,我們仔細分析一下側邊欄導航的優(yōu)缺點和使用狀況。

      厭倦了傳統(tǒng)頂部導航的設計師,越來越偏愛側邊欄導航了。這種常見于頁面左側的側邊欄設計,已經(jīng)成了許多獨樹一幟的設計師的選擇了。

      側邊欄導航看起來不錯,它簡化布局的功能似乎也很強大,那么它真的有效么?用戶是否會認可這種設計呢?今天,我們仔細分析一下側邊欄導航的優(yōu)缺點和使用狀況,盡可能精準地對這種設計手法進行界定和判斷。

      無處不在的側邊欄導航

      側邊欄導航和菜單設計的演變有著密不可分的關系。響應式設計的流行使得向移動端偏移的網(wǎng)頁設計,不得不采用菜單欄來替代傳統(tǒng)的導航模式,其直接的影響就是催生了漢堡圖標。

      無處不在的側邊欄導航.jpg

      隨著漢堡圖標的流行,彈出式的菜單也越發(fā)的常見。其中有些菜單是完全開放式的,而有的菜單則帶著下拉框,還有一部分直接是彈出的菜單界面。而為了兼容大量的移動端界面,下拉和彈出式的菜單大多采用的是縱向布局——而這和側邊欄的設計,是如此的相似。換句話來說,這種垂直的導航就是一種彈出式的側邊欄導航。

      目前,這種左側側邊欄導航的設計已經(jīng)成為一種持續(xù)迭代中的設計趨勢了?,F(xiàn)在我們看到的側邊欄設計,常常使用單一的純色打底,包含較少(但是重要或常用的)選項,導航欄頂端通常會包含有品牌或者網(wǎng)站LOGO,文字鏈接,以及帶有小圖標的社交媒體帳號的鏈接。

      想要這種側邊欄設計能夠最大化的發(fā)揮作用,訣竅在于控制好側邊欄本身和右側網(wǎng)站內容的對比度,它要包含足夠清晰可見的導航條目,還要能在移動端上良好地運作。

      還有一點值得一提:不要因為屏幕側邊夠長,就試圖用鏈接和內容將側邊欄填滿。留白是完全可以接受的,在簡約之風大行其道的今天,盡量只保留必須的內容,讓留白來凸顯它們,才是合乎道理又符合趨勢的設計。今天的文章中的許多優(yōu)質案例,都遵循著這樣的設計邏輯。

      側邊欄導航的優(yōu)點

      側邊欄導航的優(yōu)點.jpg

      側邊欄導航的美學特征是毋庸置疑的。它在互聯(lián)網(wǎng)存在的早期就已經(jīng)存在,在軟件的GUI設計中常??梢钥吹?,但是在今天它仍然以一種時尚而前衛(wèi)的姿態(tài)出現(xiàn)。

      側邊欄導航的優(yōu)點如下:

      ○側邊欄導航通常位于左側,它位于F式布局的最左側,作為信息主干,也符合用戶的瀏覽習慣

      ○側邊欄導航不會像漢堡菜單一樣一開始就隱藏其中的條目

      ○側邊欄中的條目優(yōu)先級基本一致

      ○當間距足夠的時候,側邊欄中的條目會非常的一目了然

      ○今天的側邊欄通常會留有足夠的空間,讓后續(xù)的條目能夠加入進去

      ○側邊欄讓右側的畫板形狀尺寸不盡相同,設計師可以以非常規(guī)的方式來展現(xiàn)視頻和圖片,創(chuàng)造更獨特的視覺體驗

      ○側邊欄導航以更加干凈優(yōu)雅的方式呈現(xiàn)更多的鏈接

      側邊欄導航的缺點

      側邊欄導航的缺點.jpg

      不喜歡側邊欄導航的人也很多,有些爭論是關于導航欄放在右側會不會更好,還有人則覺得側邊欄導航本身就是個麻煩,一方面讓用戶面對更復雜的布局,另一方面還增加了開發(fā)的難度。

      使用垂直導航,或者說側邊欄導航,存在的問題:

      ○垂直式的導航在響應式布局當中很難正常工作

      ○導航中的詞匯必須足夠簡短,否則導航欄會設計的很寬,或者部分內容無法顯示

      ○垂直導航所占據(jù)的空間,可能會擠壓其他更有價值的內容

      ○在同等內容量之下,側邊欄導航會讓用戶滾動頁面的時間更長

      ○頂部導航通常只能放四五個鏈接,而側邊欄導航無疑能放更多,這可能會促使部分設計師,在導航欄中塞入過多導航條目

      ○絕大多數(shù)用戶是右撇子,這些用戶需要橫快整個屏幕去點擊導航

      ○垂直導航通常在單頁式頁面上非常好用,但是其他類型的網(wǎng)頁上則沒有想象中那么好使

      側邊欄導航真的好使么?

      側邊欄導航真的好使么.jpg

      說真的,討論很多,結論并不那么明朗。

      作為一種設計趨勢,側邊欄導航是引人注意的,作為導航欄,它常駐式的設計,讓它的功能性更強。如果你的導航是用戶流程中非常重要的存在,那么側邊欄導航是個不錯的選擇。

      總而言之,這種導航設計對于較少的導航內容的小型網(wǎng)站而言,頗為有用,尤其是對于產(chǎn)品展示型的網(wǎng)站而言。

      其他的導航模式

      其他的導航模式.gif

      其他的導航模式.jpg

      非常規(guī)的導航模式是打破了舊有的常規(guī)導航模式的有趣嘗試,除了側邊欄導航之外,還有一些其他的有趣的導航設計。

      當然,非常規(guī)的導航設計最主要的問題在于,用戶不熟悉,容易混淆,迷惑。對于小型站點,適當?shù)膰L試還好,對于復雜的大型網(wǎng)站,這樣的嘗試就有點得不償失了。

      在這里另外介紹兩種有趣的導航設計。Aurora 所采用的是隱藏式的導航,點擊LOGO旁邊的菜單按鈕能夠顯示,而AndCulture 則直接將頂部導航旋轉了90度直接放到側面。

      兩種設計雖然都有人讓人意想不到,但是都在各自的網(wǎng)站中良好的運行。當然,不管你要做多么奇怪的嘗試,在真正決定投入使用之前,盡量多做用戶測試,確保它們是有效的。


      -end-


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號

      主站蜘蛛池模板: 伊人久久精品无码av一区| 国产另类ts人妖一区二区三区 | 99久久精品国产免看国产一区| 日韩精品一区二区三区中文精品| 日本美女一区二区三区| 精品国产一区二区三区四区| 国产suv精品一区二区33| 国产伦精品一区二区三区无广告| 亚洲色一区二区三区四区| 麻豆一区二区三区精品视频| 无码人妻久久一区二区三区免费| 久久无码一区二区三区少妇| 精彩视频一区二区| 欧美一区内射最近更新| 欧美日韩精品一区二区在线观看 | 一区二区三区在线免费| 国产成人精品视频一区| 竹菊影视欧美日韩一区二区三区四区五区| 国产午夜精品一区二区三区| 国产午夜精品一区二区三区小说 | 人妻体体内射精一区二区| 久久一区二区精品| 99精品久久精品一区二区| 国产内射999视频一区| 无码人妻久久一区二区三区| 亚洲电影一区二区三区| 久久无码人妻一区二区三区午夜| 久久综合九九亚洲一区| 日韩精品中文字幕无码一区| 91精品一区二区三区久久久久| 精品欧洲AV无码一区二区男男| 亚洲码一区二区三区| 欧亚精品一区三区免费| 日韩AV在线不卡一区二区三区 | 亚洲色无码专区一区| 国产一区二区福利久久| 不卡无码人妻一区三区音频| 成人影片一区免费观看| 亚洲一区二区三区深夜天堂| 免费无码一区二区三区蜜桃大| 国产凸凹视频一区二区|