
導航對于一個網站來說,起到重要的引導作用。一個優秀的導航設計可以讓使用者快速的找到所需 ,讓使用者清晰明了的了解到網站的結構架構,起到重要的指引作用。下面跟大家分享下常用的幾種網頁導航形式:
1、頂部導航
頂部導航被廣泛應用在各個領域的網站當中,這類導航可以一目了然的讓使用者迅速尋找到所需。頂部導航這樣的設計形式保守但目的性強,可以確定組織結構的可靠和降低使用者尋找的時間成本。但這類導航有個缺點,首頁内容過多需要滾屏的時候,使用者需要滾動到頂部再去切換導航内容。是以現在很多頂部設計的導航會做一個效果,将導航固定在頂部導航,這樣減少了使用者的使用成本。
頂部導航設計的樣式也比較多,主要是跟logo、登陸注冊、搜尋框搭配組合成多種效果,具體可見下圖:
頂部導航的設計成熟穩重,比較中規中矩,但不容易出現太大的問題,是以使用率也是比較廣的。熟悉我的人都知道我用 蟬知在做網站,下圖就是蟬知系統背景界面中頭部導航的定義,可做多種組合在前台顯示效果。
2、側邊導航
側邊欄導航的設計形式比較多樣,也可以有多表現形式,可動可靜,可大可小,比較個性化。固定的側邊欄導航設計不是很建議,特别是對于寬度大的側邊欄導航,這樣的設計會影響整個網頁界面的寬度。設計師可以考慮做成側邊欄以滑動方式展現,在節約網站空間的同時也顯得更加簡約。
側邊欄導航的設計需要注意的是導航欄目的寬度問題,若導航欄中字型過長,在展示上會存在一定的問題,哪怕做成滑動展示的形式也不能很好的得以解決問題。結構複制的網站不适用這類導航,且側邊欄的二級導航欄目不也宜多,是以這類導航大部分适用于一些設計師或個人官網。當然,也有一些結構簡單的網站會采用這類導航。
以下這個 the HOUSE時尚服飾官網将側邊欄的内容精簡做成一個元素放在側邊,這樣看起來是不突兀的,不會占用空間,相反還起到一定的裝飾作用。
3、底部導航
底部導航應用性不是很廣,比較長出現在一些活動或個性化的網站當中。其實底部導航被廣泛使用的并不是在pc端中,而是在移動端。
在pc端中采用底部導航的形式,一般都是采用固定的方式,這類導航可以減少使用者的使用成本,但對于結構複雜的網站,有二級或三級導航的網站就不是很合适。其次,将導航放置底部,對于使用者的使用習慣來說不是特别的好,使用者的眼睛都是從上到下從做往右浏覽的,這樣的設計比較挑戰使用者的使用習慣。
故而有很多網站在設計的時候首屏導航會放在底部,到第二屏之後導航就會固定到頂部,舉個例子: forh健身房體育運動網站 。
4、漢堡包式導航
漢堡式導航其實跟底部導航一樣,比較常出現于移動端。但現在不少的pc端也越來越喜歡用漢堡包式的導航設計。這樣的設計比較節約空間,相當于将導航做成一個隐藏式的設計或是彈出式的設計,具有設計感。
STUDIO JT南韓設計工作室網站的漢堡包式導航就具有一定的設計感。
雖然漢堡包式導航的設計方式可以很多樣,也可以很個性。但對于一部分使用者而言,漢堡包式導航其實并不是那麼直覺,特别是使用者對導航結構不清晰的情況下。設計師在設計這類導航的時候還是要斟酌下。
5、滾動式導航
滾動式導航分水準滾動和垂直式滾動。
水準式滾動水準式滾動就是内容呈左右水準方向滾動的,當使用者第一次遇到這樣類型網站的時候,體驗感會比較差,因為它實體和視覺運動方向與正常的縱向滾動不同,而且當你使用滑鼠滾輪滾動的時候,它的左右水準滾動會讓使用者産生互動上的錯位感,這樣的感受其實并不是特别友好。是以這樣的網站其實比較少見,但也有及其少部分做得好的。
來看看 Costume National Scents官網的界面效果。
其實為了不讓使用者在水準滾動的體驗上太差,在界面設計的時候可以加入一個向左或向右的箭頭訓示,讓使用者有個心理暗示,可以減少突兀感。
垂直式滾動垂直式的滾動在html5網頁中運用廣泛,很多設計師很喜歡用這樣的設計,将一些動畫特效和垂直式滾動導航相結合,可以達到一種新的視覺效果。一起看看 DENSO Brand site的官網,裡面結合了很多特效。
以上介紹的這麼多種導航方式,各有利弊,但無論哪一種,導航既然是導航,就應該起到為使用者快速便捷找到所需的作用,提高網站的易用性和易操作性,并不是花哨的導航就是好的,使用者往往喜歡簡單醒目的。這才是導航的設計原則!
上面介紹了導航常見的幾種設計樣式,我們再來說說在設計導航前應該做好什麼工作:
網站頭部常常包括的内容是:标志、導航、搜尋框、語言、登陸注冊、口号、400電話這些内容。這麼多内容不可能全部放置在網站當中,是以我們在設計網站前需要規劃好這些内容,适當的做一些取舍。
2、分析網站風格,确定導航的具體風格在确定網站導航的構成内容之後,我們可以将這些資訊列出,分析網站的整體風格和最佳的使用者體驗,确定好導航的表現形式。
3、設計方案在确定好導航的表現形式是做頂部固定導航還是底部固定導航之後,我們需要将确認好的導航内容進行組合排列設計。選出最優的一款設計方案。
在設計的過程中,我們需要遵從使用者體驗為上的設計原則,在保證内容可讀的情況下,再去保證界面設計的最優。
相信一個好的導航是整個網站成功的重要一步,設計師根據不同網站的需要設計不同的導航,而要做到這一步也并非易事,學海無涯,設計師們一起加油吧。