網(wǎng)站設(shè)計(jì)導(dǎo)航中有一個(gè)很熱門的話題：側(cè)邊欄導(dǎo)航。就目前來看，在實(shí)際的設(shè)計(jì)工作中，更多的設(shè)計(jì)師正在使用垂直的側(cè)邊導(dǎo)航為它們的設(shè)計(jì)增添一些吸引眼球以及不同于傳統(tǒng)設(shè)計(jì)的亮點(diǎn)元素。很明顯，大多數(shù)的網(wǎng)頁設(shè)計(jì)在頁面的左側(cè)，你可以更多的考慮在特定位置添加這一元素。

雖然它看起來不錯(cuò)，可以有效的幫助簡(jiǎn)化整體設(shè)計(jì)的混亂情況，不過，它真的有效嗎？用戶是否會(huì)響應(yīng)側(cè)邊導(dǎo)航？這是你應(yīng)該考慮使用的設(shè)計(jì)趨勢(shì)嗎？今天，我們將嘗試用一些實(shí)用和可用的答案來解決這個(gè)問題的核心。

1.側(cè)邊導(dǎo)航優(yōu)點(diǎn)
側(cè)邊導(dǎo)航具有很多關(guān)于美學(xué)方面的價(jià)值。雖然這個(gè)概念在網(wǎng)絡(luò)的早期經(jīng)常被使用過，但今天的垂直導(dǎo)航菜單是在時(shí)尚的基礎(chǔ)上演化出來的另一種更貼近現(xiàn)代感的時(shí)尚。
使用垂直側(cè)導(dǎo)航的優(yōu)點(diǎn)包括：
· 左側(cè)垂直導(dǎo)航其實(shí)更符合現(xiàn)代用戶的瀏覽體驗(yàn)，因?yàn)樽髠?cè)垂直導(dǎo)航正好位于f型“瀏覽路徑”上，用戶首先從頂部看到左下方，左側(cè)作為內(nèi)容瀏覽的起始點(diǎn)為最自然的閱讀模式。
· 菜單項(xiàng)在最初不會(huì)作為隱藏項(xiàng)被隱藏，這就區(qū)別于其他的時(shí)尚風(fēng)格，如漢堡包菜單。
· 所有元素在面板上方可以保持相等的重量。
· 當(dāng)元素之間有足夠的間距時(shí)，自上而下的閱讀更有助于瀏覽。
· 為其他部分的設(shè)計(jì)區(qū)留下整潔的畫布。
· 提供不同的形狀畫布，可以增加視覺感興趣，或使用戶更容易使用某些圖像或視頻內(nèi)容。
· 可以通過更干凈的方式包含更多的鏈接。
2.側(cè)導(dǎo)航缺點(diǎn)
這里仍然有一部分人不喜歡垂直導(dǎo)航。而且在可用性方面的抱怨經(jīng)常和側(cè)邊導(dǎo)航掛鉤，一些設(shè)計(jì)師認(rèn)為，垂直導(dǎo)航的方式為用戶的瀏覽和開發(fā)人員增加了一定程度的復(fù)雜性。
使用垂直方向?qū)Ш降脑虬ǎ?br />· 垂直導(dǎo)航在響應(yīng)框架中可能很難正常工作。
· 導(dǎo)航中的單詞必須足夠短，以適應(yīng)窄列的同時(shí)不至于使文字不可讀。
· 為垂直導(dǎo)航使用的空間可能對(duì)其他內(nèi)容更有價(jià)值。
· 對(duì)于更寬的屏幕來說，需要滾動(dòng)更遠(yuǎn)的距離，這樣可能導(dǎo)致一些導(dǎo)航元素“丟失”。
· 來自垂直導(dǎo)航的額外“空間”可能會(huì)鼓勵(lì)一些設(shè)計(jì)師跳過導(dǎo)航菜單，與頂部，水平導(dǎo)航一樣，只貼站點(diǎn)內(nèi)的前四或五個(gè)鏈接。
· 許多鼠標(biāo)用戶（右撇子）必須跨屏幕點(diǎn)擊導(dǎo)航元素。這可能是一個(gè)麻煩的用戶模式。
· 垂直導(dǎo)航需要滾動(dòng)并粘貼到屏幕上，以便用戶不會(huì)在瀏覽過程中失去它。通常垂直導(dǎo)航在單頁設(shè)計(jì)上工作良好，但是隨著更廣泛的使用而變得有些尷尬。
3.側(cè)邊導(dǎo)航無處不在
側(cè)邊導(dǎo)航其實(shí)是隱藏式導(dǎo)航和其他一些有趣的菜單風(fēng)格所融合、演變的一部分產(chǎn)物。響應(yīng)式網(wǎng)站設(shè)計(jì)幾乎迫使設(shè)計(jì)師考慮其他的方案來替代傳統(tǒng)的導(dǎo)航模式，使得整體的設(shè)計(jì)在小屏幕上面的瀏覽變得更容易。漢堡包導(dǎo)航菜單圖標(biāo)就這樣誕生了（很神奇對(duì)嗎？）。
從漢堡包圖標(biāo)開始，這種風(fēng)格演變成更多的彈出式樣。其中一些導(dǎo)航菜單完全開放，而其他導(dǎo)航菜單則可以提供一個(gè)完整的用戶選項(xiàng)通過設(shè)置一個(gè)可以下拉或展開的面板來承載欄目。不過，它們都有一個(gè)共同的主題，那就是漢堡包導(dǎo)航的圖標(biāo)進(jìn)入了垂直滑動(dòng)導(dǎo)航中。
全邊欄導(dǎo)航似乎是這個(gè)想法的延伸。
不過就目前來看，這種迭代的趨勢(shì)主要是左側(cè)的側(cè)邊欄導(dǎo)航。它們往往很簡(jiǎn)單，通過使用單一的純色（或覆蓋），包括少量的欄目或按鈕可供用戶點(diǎn)擊和選擇。同時(shí)，導(dǎo)航欄同樣包括logo或其他可代表品牌的標(biāo)記，文本鏈接和社交媒體等其他圖標(biāo)和搜索的組合。
使這一趨勢(shì)發(fā)揮作用的關(guān)鍵是確保側(cè)邊欄和周圍的其他元素有足夠的對(duì)比度，以便雖然置于屏幕的其余部分之上，它仍然能夠清晰可見。同時(shí)，它必須適用于移動(dòng)設(shè)備（這可能相當(dāng)棘手），并且足夠?qū)挿阂员ＷC字體仍具有可讀性。
在考慮垂直側(cè)邊導(dǎo)航的同時(shí)，還有一個(gè)建議是：不要為了填滿標(biāo)準(zhǔn)分辨率屏幕的深度來而填補(bǔ)這些元素?？瞻椎目臻g是完全可以接受的——我們甚至強(qiáng)烈推薦使用空白作為這種導(dǎo)航格式的輔助工具?？催@篇文章中的例子，你可以看到，在空間之中留出其他的空間，或者將元素對(duì)齊到頂部，底部或中心與周圍的空間都可以很有吸引力。導(dǎo)航欄中的額外空間將有助于吸引眼球，有助于增加整體的可用性。
4.它真的有效嗎？
垂直側(cè)導(dǎo)航是否可以正常工作？
現(xiàn)在還不能蓋棺定論。
這個(gè)趨勢(shì)可以讓你的網(wǎng)站設(shè)計(jì)看起來引人注目。所以在這一方面還是有一些價(jià)值的，因?yàn)橛脩舢吘箷?huì)會(huì)看到它。如果你的導(dǎo)航是點(diǎn)擊模式和用戶流程的重要組成部分，則可以考慮此選項(xiàng)。
總的來說，這種導(dǎo)航風(fēng)格似乎對(duì)于只有少數(shù)導(dǎo)航選項(xiàng)和有限內(nèi)容的小型網(wǎng)站最有效。這篇文章中的許多例子似乎是針對(duì)房地產(chǎn)相關(guān)的網(wǎng)頁設(shè)計(jì)（完全是偶然的），但是它同樣也可以用于創(chuàng)意或代理型網(wǎng)站。任何具有大量?jī)?nèi)容的設(shè)計(jì)都可能使側(cè)邊導(dǎo)航在設(shè)計(jì)和內(nèi)容層次結(jié)構(gòu)方面受到很大的限制。
5.其他導(dǎo)航怎么樣？
非傳統(tǒng)的導(dǎo)航風(fēng)格是打破傳統(tǒng)舊導(dǎo)航設(shè)計(jì)模式的有趣方式。垂直側(cè)邊導(dǎo)航只是幾種想法之一。
任何非標(biāo)準(zhǔn)用戶模式的導(dǎo)航縮帶來的問題是你可能需要冒著混淆用戶感官的風(fēng)險(xiǎn)，這甚至可能導(dǎo)致他們完全放棄網(wǎng)站。所以，任何這樣的實(shí)驗(yàn)最好是在那些具有簡(jiǎn)單的整體視覺流程的較小的站點(diǎn)來測(cè)試。
還有另外兩種導(dǎo)航方式，其中包括aurora（上圖）和andculture使用的90度傾斜文本導(dǎo)航（下圖）所使用的水平漢堡包彈出式菜單。
這兩種風(fēng)格都提供了一些有點(diǎn)讓人意想不到的功能，并且在各自的環(huán)境中都能很好地工作，盡管他們可能是難以理解的不同于傳統(tǒng)的設(shè)計(jì)。與任何設(shè)計(jì)技術(shù)一樣，如果你在正常用戶模式之外執(zhí)行某些操作，請(qǐng)務(wù)必經(jīng)常分析和測(cè)試你的設(shè)計(jì)對(duì)于用戶來說實(shí)際的操作和體驗(yàn)是否合理。如果有奇怪的點(diǎn)擊模式，或者如果用戶停止瀏覽導(dǎo)航，你可能會(huì)遇到所有非傳統(tǒng)設(shè)計(jì)的共同問題，這樣，你就需要盡早重新思考如何調(diào)整了。
總結(jié)
有一件事是肯定的，在臺(tái)式機(jī)和移動(dòng)設(shè)備上類似的格式，當(dāng)談到導(dǎo)航趨勢(shì)，用戶和設(shè)計(jì)師似乎厭倦了完全隱藏的風(fēng)格和需求選項(xiàng)。這可能是垂直導(dǎo)航模式成為流行趨勢(shì)的原因之一。

網(wǎng)站標(biāo)題：網(wǎng)站設(shè)計(jì)中側(cè)邊欄導(dǎo)航要還不要,這是個(gè)問題
文章出自：http://www.rwnh.cn/news22/106622.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)