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