超實用!網站導航欄設計形式總結
一、頂部導航
頂部導航被(bèi)廣泛應用在各個領域的網站當中,這(zhè)類導航可以一目了然的讓用戶迅速尋找到所需。頂部導航這(zhè)樣(yàng)的設計形式保守但目的性強,可以确保組織結構的可靠和降低用戶尋找的時(shí)間成(chéng)本。但這(zhè)類導航有個缺點,首頁内容過(guò)多需要滾屏的時(shí)候,用戶需要滾動到頂部再去切換導航内容。所以現在很多頂部設計的導航會(huì)做一個效果,將(jiāng)導航固定在頂部導航,這(zhè)樣(yàng)減少了用戶的使用成(chéng)本。
二、側邊導航
側邊欄導航的設計形式比較多樣(yàng),也可以有多表現形式,可動可靜,可大可小,比較個性化。固定的側邊欄導航設計不是很建議,特别是對(duì)于寬度大的側邊欄導航,這(zhè)樣(yàng)的設計會(huì)影響整個網頁界面(miàn)的寬度。設計師可以考慮做成(chéng)側邊欄以滑動方式展現,在節約網站空間的同時(shí)也顯得更加簡約。側邊欄導航的設計需要注意的是導航欄目的寬度問題,若導航欄中字體過(guò)長(cháng),在展示上會(huì)存在一定的問題,哪怕做成(chéng)滑動展示的形式也不能(néng)很好(hǎo)的得以解決問題。結構複制的網站不适用這(zhè)類導航,且側邊欄的二級導航欄目不也宜多,所以這(zhè)類導航大部分适用于一些設計師或個人官網。當然,也有一些結構簡單的網站會(huì)采用這(zhè)類導航。
三、底部導航
底部導航應用性不是很廣,比較長(cháng)出現在一些活動或個性化的網站當中。其實底部導航被(bèi)廣泛使用的并不是在pc端中,而是在移動端。在pc端中采用底部導航的形式,一般都(dōu)是采用固定的方式,這(zhè)類導航可以減少用戶的使用成(chéng)本,但對(duì)于結構複雜的網站,有二級或三級導航的網站就(jiù)不是很合适。其次,將(jiāng)導航放置底部,對(duì)于用戶的使用習慣來說(shuō)不是特别的好(hǎo),用戶的眼睛都(dōu)是從上到下從做往右浏覽的,這(zhè)樣(yàng)的設計比較挑戰用戶的使用習慣。
四、漢堡包式導航
漢堡式導航其實跟底部導航一樣(yàng),比較常出現于移動端。但現在不少的pc端也越來越喜歡用漢堡包式的導航設計。這(zhè)樣(yàng)的設計比較節約空間,相當于將(jiāng)導航做成(chéng)一個隐藏式的設計或是彈出式的設計,具有設計感。雖然漢堡包式導航的設計方式可以很多樣(yàng),也可以很個性。但對(duì)于一部分用戶而言,漢堡包式導航其實并不是那麼(me)直觀,特别是用戶對(duì)導航結構不清晰的情況下。設計師在設計這(zhè)類導航的時(shí)候還(hái)是要斟酌下。
五、滾動式導航
滾動式導航分水平滾動和垂直式滾動。
1.水平式滾動
水平式滾動就(jiù)是内容呈左右水平方向(xiàng)滾動的,當用戶第一次遇到這(zhè)樣(yàng)類型網站的時(shí)候,體驗感會(huì)比較差,因爲它物理和視覺運動方向(xiàng)與常規的縱向(xiàng)滾動不同,而且當你使用鼠标滾輪滾動的時(shí)候,它的左右水平滾動會(huì)讓用戶産生交互上的錯位感,這(zhè)樣(yàng)的感受其實并不是特别友好(hǎo)。所以這(zhè)樣(yàng)的網站其實比較少見,但也有及其少部分做得好(hǎo)的。
2.垂直式滾動
垂直式的滾動在html5網頁中運用廣泛,很多設計師很喜歡用這(zhè)樣(yàng)的設計,將(jiāng)一些動畫特效和垂直式滾動導航相結合,可以達到一種(zhǒng)新的視覺效果。
以上介紹的這(zhè)麼(me)多種(zhǒng)導航方式,各有利弊,但無論哪一種(zhǒng),導航既然是導航,就(jiù)應該起(qǐ)到爲用戶快速便捷找到所需的作用,提高網站的易用性和易操作性,并不是花哨的導航就(jiù)是好(hǎo)的,用戶往往喜歡簡單醒目的。這(zhè)才是導航的設計原則!