对导航条的一些认识

定义

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

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

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

类型

1.Tab导航

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

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

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

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

移动端
PC端

2.抽屉导航

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

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

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

抽屉导航

3.宫格导航

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

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

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

宫格导航

4.列表导航

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

  优势:内容突出

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

列表导航1
列表导航2

6.复合导航

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

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

导航分析

1、Web端导航分析

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

淘宝网导航
京东网导航

2.移动端导航

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

淘宝APP
携程APP
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容