網(wǎng)站的導(dǎo)航欄相當(dāng)于網(wǎng)站的招牌，起著重要的導(dǎo)向作用，也是用戶瀏覽網(wǎng)站時(shí)必須使用的功能。以往的網(wǎng)站設(shè)計(jì)師大多注重頁(yè)面布局和形象美化?，F(xiàn)在他們逐漸意識(shí)到，對(duì)于一個(gè)小小的導(dǎo)航欄來(lái)說(shuō)有很多事情要做，因此越來(lái)越多的獨(dú)到網(wǎng)站設(shè)計(jì)師放棄了傳統(tǒng)的頂部導(dǎo)航，在導(dǎo)航欄的設(shè)計(jì)上玩各種創(chuàng)新的把戲。
一、六大熱門
側(cè)導(dǎo)航非常受網(wǎng)站設(shè)計(jì)者的歡迎。它通常分布在頁(yè)面的左側(cè)，使頁(yè)面的整體布局簡(jiǎn)潔典雅，使欄目?jī)?nèi)容一目了然。在設(shè)計(jì)側(cè)邊導(dǎo)航時(shí)，可以將導(dǎo)航和橫幅結(jié)合起來(lái)，也可以使用與橫幅主色對(duì)比強(qiáng)烈的純色，兩者都能給游客一個(gè)獨(dú)到的視覺(jué)印象。與網(wǎng)站頂部相比，網(wǎng)站側(cè)面具有更廣闊的可擴(kuò)展空間，因此當(dāng)網(wǎng)站需要修改添加欄目?jī)?nèi)容時(shí)，側(cè)面導(dǎo)航會(huì)比頂部導(dǎo)航進(jìn)行更好的調(diào)整。
底部導(dǎo)航是用戶瀏覽網(wǎng)站的一個(gè)挑戰(zhàn)，因?yàn)槲覀兌贾理敳繉?dǎo)航符合用戶的閱讀習(xí)慣。盡管用戶對(duì)底部導(dǎo)航或多或少感到不舒服，但不可否認(rèn)的是，底部導(dǎo)航確實(shí)比頂部導(dǎo)航更有趣，在不考慮導(dǎo)航和橫幅比例的情況下，它在設(shè)計(jì)上可以更加自由。如果網(wǎng)站的定位是喜歡新鮮探索能力的年輕人，選擇底部導(dǎo)航可以給他們更大的驚喜。~
你有沒(méi)有想過(guò)，打開一個(gè)網(wǎng)站是一個(gè)巨大的導(dǎo)航，幾乎占據(jù)了整個(gè)屏幕？那種沖擊力真的不是開玩笑。我們共同網(wǎng)站的主頁(yè)是基于橫幅。全屏導(dǎo)航以導(dǎo)航為主頁(yè)主體，是一次非常大膽前衛(wèi)的嘗試。如果設(shè)計(jì)合理，更方便用戶快速切換到不同的頁(yè)面。
顧名思義，隱藏導(dǎo)航并不是沒(méi)有導(dǎo)航，而是隱藏導(dǎo)航。它與全屏導(dǎo)航相反。它不是一種存在的感覺(jué)，而是低調(diào)的等待著你。當(dāng)然，這個(gè)搜索過(guò)程非常簡(jiǎn)單，只要鼠標(biāo)移動(dòng)到某個(gè)標(biāo)記或點(diǎn)擊使導(dǎo)航出現(xiàn)。我們常說(shuō)，滑動(dòng)菜單實(shí)際上是一種隱藏式的導(dǎo)航，它能***限度地顯示網(wǎng)站的內(nèi)容，給用戶帶來(lái)愉悅的體驗(yàn)。
滾動(dòng)導(dǎo)航在單頁(yè)網(wǎng)站中很常見。因?yàn)樗且粋€(gè)單頁(yè)網(wǎng)站，沒(méi)有頁(yè)面跳轉(zhuǎn)。當(dāng)您向下滾動(dòng)頁(yè)面時(shí)，導(dǎo)航和內(nèi)容將顯示在您面前。顯然，這類網(wǎng)站的顯示能力都集中在同一個(gè)頁(yè)面上。如果你想使一個(gè)簡(jiǎn)短而精致的網(wǎng)站沒(méi)有太多復(fù)雜的功能，這個(gè)簡(jiǎn)單的單頁(yè)網(wǎng)站滾動(dòng)導(dǎo)航是***的。
我們都很容易被涼爽的動(dòng)態(tài)效果所吸引。如果我們?cè)趯?dǎo)航中添加動(dòng)畫效果，我們可以更清楚地引導(dǎo)用戶點(diǎn)擊并使用導(dǎo)航。例如，當(dāng)鼠標(biāo)懸停在導(dǎo)航上時(shí)，導(dǎo)航字體會(huì)更改，背景顏色塊的大小也會(huì)更改，等等。如此小而整齊的區(qū)別就足夠了。與下面屬于圖形導(dǎo)航的情況一樣，前景是文本，背景是圖片。當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)的導(dǎo)航時(shí)，靜態(tài)圖片會(huì)有輕微的動(dòng)態(tài)變化。動(dòng)畫導(dǎo)航不需要太花哨，否則會(huì)干擾視覺(jué)。
二、實(shí)踐操作課程
以上總結(jié)的流行趨勢(shì)其實(shí)只是導(dǎo)航條設(shè)計(jì)創(chuàng)意的冰山一角，還有更多未知數(shù)有待探索。網(wǎng)站設(shè)計(jì)從來(lái)沒(méi)有一個(gè)標(biāo)準(zhǔn)答案，下一個(gè)趨勢(shì)很可能來(lái)自你。因此，我們不僅要從中吸取教訓(xùn)，還要在學(xué)習(xí)上有意識(shí)地創(chuàng)新和突破，形成個(gè)人特色?，F(xiàn)在凡客建站推出的新版導(dǎo)航欄可以支持子欄目的自由布局。其實(shí)，這也鼓勵(lì)站長(zhǎng)嘗試DIY，跳出固有的模板，做出自己的風(fēng)格。讓我們看看。~
將鼠標(biāo)移到導(dǎo)航欄上，單擊快捷欄上的“切換到新版本”，然后選擇“設(shè)置樣式”，在“設(shè)置導(dǎo)航欄樣式”彈出窗口中，選擇所需樣式，然后在“子列”中選擇“自由布局”。
目前，凡客網(wǎng)站有三類素材模塊。個(gè)左邊帶圖表的子列標(biāo)題，右邊帶純文本的垂直列標(biāo)題；第二個(gè)是帶圖表的水平列標(biāo)題；第三個(gè)是帶純文本的垂直列標(biāo)題。選擇“保存”后，可以進(jìn)入編輯狀態(tài)。
將鼠標(biāo)移到需要添加子級(jí)列的級(jí)列。單擊下拉頁(yè)面中的“編輯模塊”，直接替換初始模板上編輯的圖片和標(biāo)題文本。圖片和文本可以鏈接到相應(yīng)的內(nèi)容頁(yè)。
如果要設(shè)計(jì)自己的排版，還可以刪除初始模板中的元素。根據(jù)需要在左側(cè)“添加模塊”的彈出窗口中添加文本、圖片、按鈕等。這些部件可以隨意移動(dòng)。平時(shí)做PPT也是這樣。
三、設(shè)計(jì)原則
導(dǎo)航欄的設(shè)計(jì)日新月異。然而，無(wú)論您選擇何種形式的導(dǎo)航欄，無(wú)論其設(shè)計(jì)有多大的不同，以下三個(gè)基本原則都不容忽視。
對(duì)于信息量大的網(wǎng)站來(lái)說(shuō)，這一點(diǎn)尤為重要，因?yàn)樗婕岸鄠€(gè)優(yōu)等欄目和子級(jí)欄目，這就要求網(wǎng)站管理員對(duì)導(dǎo)航的層次結(jié)構(gòu)進(jìn)行梳理，簡(jiǎn)化和合理化，使用戶能夠方便地搜索和獲取信息。
由于導(dǎo)航條是用來(lái)引導(dǎo)用戶的，所以它必須有一個(gè)明確的方向，而且不需要用戶花時(shí)間思考，它只能憑直覺(jué)才能正確快速地操作。因此，導(dǎo)航文本應(yīng)盡量簡(jiǎn)潔明了，不含糊，圖標(biāo)的使用應(yīng)直觀易識(shí)別。
三、一致性
錯(cuò)誤的導(dǎo)航欄是一個(gè)故障。試想一下，如果你想在綜合網(wǎng)站上購(gòu)買一件T恤衫，但當(dāng)你點(diǎn)擊導(dǎo)航欄上的“服裝”按鈕，跳轉(zhuǎn)到零食產(chǎn)品頁(yè)面時(shí)，你還想在這里購(gòu)物嗎？所以在一天結(jié)束的時(shí)候，確保你點(diǎn)擊導(dǎo)航欄上的每個(gè)按鈕來(lái)檢查它。不要戴帽子和帽子。
掌握以上導(dǎo)航欄設(shè)計(jì)要點(diǎn)，不要讓用戶迷失在你的網(wǎng)站中！