網(wǎng)站導航欄的流行大勢！助你煉成優(yōu)秀的導航欄設(shè)計

時間：2023-09-09 19:00:01 | 來源：網(wǎng)站運營

時間：2023-09-09 19:00:01 來源：網(wǎng)站運營

網(wǎng)站導航欄的流行大勢！助你煉成優(yōu)秀的導航欄設(shè)計：網(wǎng)站導航欄相當于網(wǎng)站的指路牌，起到了重要的導向作用，也是用戶瀏覽網(wǎng)站時必須會用到的一個功能。以前的網(wǎng)站設(shè)計師大多把精力放在了頁面排版與圖片美化，如今他們也漸漸意識到，小小的導航欄其實大有文章可作，所以越來越多獨樹一幟的網(wǎng)站設(shè)計師舍棄了傳統(tǒng)的頂部導航，在導航欄設(shè)計玩出了多種創(chuàng)新花樣。




一、六大爆款




1、側(cè)邊導航




側(cè)邊導航真的很受網(wǎng)站設(shè)計師歡迎，通常分布在頁面的左側(cè)，使整體的網(wǎng)頁布局顯得簡約優(yōu)雅，讓欄目內(nèi)容一目了然。設(shè)計側(cè)邊導航時，可以把導航與BANNER融為一體，也可以用與BANNER主色對比強烈的純色進行打底，兩種手法都能給訪客獨特的視覺觀感。網(wǎng)站側(cè)邊相對于網(wǎng)站頂部來說，可擴展的空間也更廣，所以當網(wǎng)站需要改版增加欄目內(nèi)容時，側(cè)邊導航會比頂部導航更好調(diào)整。










2、底部導航




底部導航稱得上是對用戶瀏覽網(wǎng)站規(guī)律的一種挑戰(zhàn)，因為我們都知道導航位于頂部才是符合用戶的閱讀習慣。雖然用戶對底部導航或多或少會有點不適應，但無可否認底部導航確實比頂部導航更具有趣味性，也免去考慮導航與BANNER的相稱性，在設(shè)計上可以更自由。如果網(wǎng)站定位是愛新鮮的探索能力較強的年輕群體，選用底部導航能給他們更大的驚喜哦~







3、全屏導航




有沒有想象過一打開網(wǎng)站就是一個巨型的導航，幾乎占了整個屏幕，那種震撼沖擊真不是開玩笑的。我們常見的網(wǎng)站首頁都是以BANNER為核心的，全屏導航則是將導航作為首頁的主體，是一種非常大膽且前衛(wèi)的嘗試，設(shè)計合理的話，也更方便用戶快捷地切換到不同的頁面。







4、隱藏式導航




隱藏式導航顧名思義，并非真的是沒有了導航，而是把導航隱藏起來。與全屏導航是相反的設(shè)計邏輯，不是開門見山地刷足存在感，而是低調(diào)地等待著你的尋覓。當然，這個尋覓過程是十分簡單的，只要把鼠標移至某個標示或者點擊就能讓導航現(xiàn)身了。我們常說的滑動式菜單其實也算是隱藏式導航的一種，它可以最大幅度地展現(xiàn)網(wǎng)站內(nèi)容，給用戶愉悅的體驗。







5、滾動式導航




滾動式導航常見于單頁網(wǎng)站，因為是單頁網(wǎng)站，所以沒有任何的頁面跳轉(zhuǎn)，當你向下滾動頁面，導航與內(nèi)容也就合二為一地呈現(xiàn)在你眼前。很明顯地，這類型網(wǎng)站的展示容量全都濃縮在同一個頁面里，如果你是想做那種短小精致且不需要太多復雜功能的話，這種架構(gòu)簡單的單頁網(wǎng)站搭配滾動式導航就再適合不過了。







6、動畫式導航




我們都容易被炫酷的動效所吸引，如果在導航上添加動畫效果，更能清晰地引導用戶去點擊使用導航。例如當鼠標在導航懸停時，讓導航的字體產(chǎn)生變化、背景色塊產(chǎn)生大小變化等，這樣微小而利落的差異化已經(jīng)足夠了。像以下這個案例屬于圖文導航，前景是文字，后景是圖片，當鼠標移至相應導航時，靜態(tài)圖片就會發(fā)生輕幅度的動態(tài)變化。動畫式導航不需要太花俏的展現(xiàn)，否則會干擾視覺。







二、實操教程




以上總結(jié)的流行趨勢其實都只是導航欄設(shè)計創(chuàng)意的冰山一角，更多的未知還有待發(fā)掘。網(wǎng)站設(shè)計從來就沒有標準答案，下一個潮流風格很有可能就出自你手。所以，別一味單純地借鑒，要在學習中有意識地創(chuàng)新與突破，形成個人特色。現(xiàn)在凡科建站推出的新版導航欄，可以支持子級欄目的自由排版，其實也是鼓勵站長嘗試DIY，從固有的模板跳脫出來，做出自己的STYLE。下面就帶大家一探究竟吧~




把鼠標移至導航欄，在上方出現(xiàn)的快捷工具欄點擊“切換新版”，切換后再選擇“設(shè)置樣式”。










在“設(shè)置導航欄樣式”的彈窗，選擇心儀的風格樣式，“子級欄目”一處選擇自由排版。







目前凡科建站有3種樣式的素材模塊，第一種是左側(cè)一個帶圖的子級欄目標題，右側(cè)豎排純文字子級欄目標題；第二種是平鋪式的帶圖子級欄目標題；第三種是全豎排純文字子級欄目標題，選擇保存后即可進入編輯。







把鼠標移至需要添加子級欄目的一級欄目，在下拉頁面點擊“編輯模塊”，可以直接在初始模板上替換編輯圖片和標題文字，圖片與文字均可添加鏈接跳轉(zhuǎn)至相應的內(nèi)容頁。










如果是想自行設(shè)計排版，也可以把初始模板里的元素刪除，在左側(cè)“添加模塊”的彈窗按需添加文本、圖片、按鈕等，這些部件均可隨意移動，和平時做PPT是一樣的道理。







三、設(shè)計原則




導航欄的設(shè)計千變?nèi)f化，然而不管你是選擇哪種形式的導航欄，不管它的設(shè)計是如何的另辟蹊徑，以下三個基本原則萬萬不可忽視。




1、科學性




這點對于信息量大的網(wǎng)站來說尤為重要，因為涉及到多個一級欄目和子級欄目，這就需要站長梳理好導航的層級組織，做到簡化而合理，這樣才能讓用戶易于搜索和獲取信息。




2、易懂性




導航欄既然是用來引導用戶的，一定要有明確的指向性，而且是不需用戶花費思考時間，僅憑本能就能正確迅速地操作。所以，導航文案盡可能地簡潔明了，沒有歧義，圖標的使用也要直觀好辨識的。




3、一致性




指錯路的導航欄是非常失敗的。試想一下，假如你要在一個綜合型的商城網(wǎng)站買一件T恤，但當你點開了導航欄的“服飾”按鈕，卻跳轉(zhuǎn)到一個零食的產(chǎn)品頁面，你覺得還有在這里購物的欲望么？所以在最后的最后，務(wù)必每個導航欄按鈕都要點擊出來進行檢驗，不要張冠李戴了。




掌握以上導航欄設(shè)計要點，別讓用戶在你的網(wǎng)站迷路了！