網(wǎng)站設(shè)計(jì)中側(cè)邊欄導(dǎo)航要還不要,這是個(gè)問(wèn)題

2021-04-07    分類: 網(wǎng)站設(shè)計(jì)

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

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


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

h5響應(yīng)式網(wǎng)站建設(shè)