這種左側(cè)導(dǎo)航欄常見的UI設(shè)計到底好不好

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

 

無處不在的側(cè)邊欄導(dǎo)航

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

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

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

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

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

 

側(cè)邊欄導(dǎo)航的優(yōu)點

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

側(cè)邊欄導(dǎo)航的優(yōu)點如下：

·側(cè)邊欄導(dǎo)航通常位于左側(cè)，它位于F式布局的最左側(cè)，作為信息主干，也符合用戶的瀏覽習(xí)慣
·側(cè)邊欄導(dǎo)航不會像漢堡菜單一樣一開始就隱藏其中的條目
·側(cè)邊欄中的條目優(yōu)先級基本一致
·當(dāng)間距足夠的時候，側(cè)邊欄中的條目會非常的一目了然
·今天的側(cè)邊欄通常會留有足夠的空間，讓后續(xù)的條目能夠加入進去
·側(cè)邊欄讓右側(cè)的畫板形狀尺寸不盡相同，設(shè)計師可以以非常規(guī)的方式來展現(xiàn)視頻和圖片，創(chuàng)造更獨特的視覺體驗
·側(cè)邊欄導(dǎo)航以更加干凈優(yōu)雅的方式呈現(xiàn)更多的鏈接

 

側(cè)邊欄導(dǎo)航的缺點

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

使用垂直導(dǎo)航，或者說側(cè)邊欄導(dǎo)航，存在的問題：

·垂直式的導(dǎo)航在響應(yīng)式布局當(dāng)中很難正常工作
·導(dǎo)航中的詞匯必須足夠簡短，否則導(dǎo)航欄會設(shè)計的很寬，或者部分內(nèi)容無法顯示
·垂直導(dǎo)航所占據(jù)的空間，可能會擠壓其他更有價值的內(nèi)容
·在同等內(nèi)容量之下，側(cè)邊欄導(dǎo)航會讓用戶滾動頁面的時間更長
·頂部導(dǎo)航通常只能放四五個鏈接，而側(cè)邊欄導(dǎo)航無疑能放更多，這可能會促使部分設(shè)計師，在導(dǎo)航欄中塞入過多導(dǎo)航條目
·絕大多數(shù)用戶是右撇子，這些用戶需要橫快整個屏幕去點擊導(dǎo)航
·垂直導(dǎo)航通常在單頁式頁面上非常好用，但是其他類型的網(wǎng)頁上則沒有想象中那么好使

 

側(cè)邊欄導(dǎo)航真的好使么？

說真的，討論很多，結(jié)論并不那么明朗。

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

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

 

其他的導(dǎo)航模式

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

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

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

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