对导航条的一些认识

定义

  导航条是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。

  导航条的目的是让网站的层次结构以一种有条理的方式清晰展示,并引导用户毫不费力地找到并管理信息,让用户在浏览网站过程中不至于迷失位置。

  为了让网站信息可以有效地传递给用户,导航一定要简洁、直观、明确。

类型

1.Tab导航

  Tab 导航分上下两种。是最常用的导航形式。也有人称之为标签导航。

  优势:所有的入口一目了然,方便查找。适用于多个内容体系,且重要程度相似(平级关系),能频繁在不同页面间切换,切换成本底,只需一次点击。

  劣势:总会占据屏幕的高度空间,阻挡内容。且标签数量有量,最多5个。当然在PC端这一劣势就不是那么明显,所在在Web界面这一导航方式是用的很普遍的。

  适用的场景:导航条目不多,使用频率相差不大的。

移动端
PC端

2.抽屉导航

  分支类目过多;某一类的层级较深时就适用这种导航。

  优势:可以容纳多个分支类目,隐藏多余的类目,保持当前页面简洁。抽屉导航的另一些优点是,侧边导航收纳的导航标签可以是5个以上,节省屏幕空间。

  劣势:有部分类目,当前页面不可见,不容易寻找,增加了认知成本;无法快速完成导航切换,操作成本高。

抽屉导航

3.宫格导航

  宫格式导航,是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果要跳转至其他入口,必须要先回到入口总界面。这种导航适用于几个功能没有交叉的应用。功能较多,较分散。

  优势:类目清晰,容纳很多类目无压力。

  劣势:首屏没有内容,只有入口。

宫格导航

4.列表导航

  首页是一条条的item,item有单文字的,也有图文结合的,比如一般的设置页面。纯粹的列表导航很少见,一般都是搭配着别的导航模式一起使用,大多作为二级导航。

  优势:内容突出

  劣势: 不适合层级较深的应用

列表导航1
列表导航2

6.复合导航

  现在,应用大多有复杂的多项功能,导航也适应这种情况,复合使用,现在这种也是当下适应性最强用的导航。

底部Tab和抽屉导航共用,抽屉部分放置不常用的个人各项信息,主体的应用采用底部Tab导航模式。

导航分析

1、Web端导航分析

我把Web端的导航主要分为三种,一种就是置顶的标签导航,这里放置着用户个人信息,再加上老用户用的比较频繁的,一般用下拉列表式表现;然后是左侧类别分类导航,一般都是抽屉式的;还有一种就是中间的频道导航,在这里是网站的不同频道。当然我举的多是电商多。产品不多的网一般一个导航就够了,甚至搜索框都不需要。

淘宝网导航
京东网导航

2.移动端导航

移动端界面小,因此导航也相对简单很多。一般都是中间的频道导航,我表现为宫格式导航;还有置低的用户用的最频繁的导航。

淘宝APP
携程APP
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,831评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 高不成,低不就,本来最痛苦。但我们成人以后慢慢习惯,不再为此而哭。 奔波坊。 主人不在。 宋变和完颜达戈作为邻居,...
    小神Near阅读 288评论 0 0
  • 乔任梁事件之后,抑郁症又成为了大家关注的焦点。知道他的死因之后,我特别的同情。因为我的偶像,哥哥张国荣也是因为抑郁...
    拾壹少阅读 6,370评论 16 23
  • 中午没事上网翻看了关于蓝鲸死亡游戏的资料,没看之前我就在想,什么样的游戏这么大的吸引力,能够让孩子们根据他们的诱导...
    李宇航妈妈阅读 248评论 0 2