對導航條的一些認識

定義

  導航條是指通過一定的技術手段,為網站的訪問者提供一定的途徑,使其可以方便地訪問到所需的內容,是人們瀏覽網站時可以快速從一個頁面轉到另一個頁面的快速通道。

  導航條的目的是讓網站的層次結構以一種有條理的方式清晰展示,并引導用戶毫不費力地找到并管理信息,讓用戶在瀏覽網站過程中不至于迷失位置。

  為了讓網站信息可以有效地傳遞給用戶,導航一定要簡潔、直觀、明確。

類型

1.Tab導航

  Tab 導航分上下兩種。是最常用的導航形式。也有人稱之為標簽導航。

  優勢:所有的入口一目了然,方便查找。適用于多個內容體系,且重要程度相似(平級關系),能頻繁在不同頁面間切換,切換成本底,只需一次點擊。

  劣勢:總會占據屏幕的高度空間,阻擋內容。且標簽數量有量,最多5個。當然在PC端這一劣勢就不是那么明顯,所在在Web界面這一導航方式是用的很普遍的。

  適用的場景:導航條目不多,使用頻率相差不大的。

移動端
PC端

2.抽屜導航

  分支類目過多;某一類的層級較深時就適用這種導航。

  優勢:可以容納多個分支類目,隱藏多余的類目,保持當前頁面簡潔。抽屜導航的另一些優點是,側邊導航收納的導航標簽可以是5個以上,節省屏幕空間。

  劣勢:有部分類目,當前頁面不可見,不容易尋找,增加了認知成本;無法快速完成導航切換,操作成本高。

抽屜導航

3.宮格導航

  宮格式導航,是一種類似于手機桌面各個應用入口的導航方式。每個入口往往是比較獨立的信息內容,用戶進入一個入口后,只處理與此入口相關的內容,如果要跳轉至其他入口,必須要先回到入口總界面。這種導航適用于幾個功能沒有交叉的應用。功能較多,較分散。

  優勢:類目清晰,容納很多類目無壓力。

  劣勢:首屏沒有內容,只有入口。

宮格導航

4.列表導航

  首頁是一條條的item,item有單文字的,也有圖文結合的,比如一般的設置頁面。純粹的列表導航很少見,一般都是搭配著別的導航模式一起使用,大多作為二級導航。

  優勢:內容突出

  劣勢: 不適合層級較深的應用

列表導航1
列表導航2

6.復合導航

  現在,應用大多有復雜的多項功能,導航也適應這種情況,復合使用,現在這種也是當下適應性最強用的導航。

底部Tab和抽屜導航共用,抽屜部分放置不常用的個人各項信息,主體的應用采用底部Tab導航模式。

導航分析

1、Web端導航分析

我把Web端的導航主要分為三種,一種就是置頂的標簽導航,這里放置著用戶個人信息,再加上老用戶用的比較頻繁的,一般用下拉列表式表現;然后是左側類別分類導航,一般都是抽屜式的;還有一種就是中間的頻道導航,在這里是網站的不同頻道。當然我舉的多是電商多。產品不多的網一般一個導航就夠了,甚至搜索框都不需要。

淘寶網導航
京東網導航

2.移動端導航

移動端界面小,因此導航也相對簡單很多。一般都是中間的頻道導航,我表現為宮格式導航;還有置低的用戶用的最頻繁的導航。

淘寶APP
攜程APP
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,558評論 25 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1 92
  • 高不成,低不就,本來最痛苦。但我們成人以后慢慢習慣,不再為此而哭。 奔波坊。 主人不在。 宋變和完顏達戈作為鄰居,...
    小神Near閱讀 324評論 0 0
  • 喬任梁事件之后,抑郁癥又成為了大家關注的焦點。知道他的死因之后,我特別的同情。因為我的偶像,哥哥張國榮也是因為抑郁...
    拾壹少閱讀 6,428評論 16 23
  • 中午沒事上網翻看了關于藍鯨死亡游戲的資料,沒看之前我就在想,什么樣的游戲這么大的吸引力,能夠讓孩子們根據他們的誘導...
    李宇航媽媽閱讀 277評論 0 2