导航栏设计中更常见的元素有哪些建站学堂网站建设新闻网站设计制作常见问题

1.导航的定义导航设计的定义是:元素的组合,允许用户在信息架构中穿行。

简单点理解就是:我们从用户的心智模型出发,结合业务目标,对信息架构的一个梳理,来帮助用户完成目标。

2.导航的作用导航设计更大的作用就是:

3.导航的种类&样式

a.底部导航栏设计底部导航栏设计是我们更常见的导航模式之一,位于页面底部,用于一级页面当中负责各主业务模块的切换,一般会保持3~5个标签,适用于频繁切换业务模块的产品。例如优酷、豆瓣、淘宝、网易云音乐:

优点:切换快速方便,用户不会轻易迷失;iOS原生系统,开发成本低;属于拇指热区范围内,操作方便,用户体验好。

缺点:导航数量有限,更多3~5个,可扩展性不高;占用一定的空间,沉浸式体验不足,且在小机型上极其容易影响显示区域的视觉大小。

b.顶部导航顶部导航栏位于页面顶部,一般位于导航栏或者状态栏下方,用作于二级导航,基本都以纯文字的形式出现(避免干扰用户浏览页面核心内容),常见的顶部导航栏有:固定顶部标签导航&可滑动标签导航。例如UC头条、LOFTER、网易有钱、京东金融:

优点:滑动式顶部标签可无限添加标签,可扩展性强;技术上,适配简单,减少开发成本;占据空间比底部导航栏小,节省空间;划屏切换,简单便捷。

缺点:标签数量多,容易导致产品页面过多,用户需要耗费大量精力不断滑动;越是后面的标签容易被遗忘,导致流量遗失。

c.舵式导航舵式导航一般位于底部标签栏中间,以“+”号的形式出现,是产品中需要重点突出的功能,一般用于UGC内容生产发布。例如闲鱼、微博、LOFTER、转转:

优点:以颜色或大小的区别来展示核心,视觉冲击力强,让人更加有有点击的欲望;展示效果上灵活多变,增添了交互趣味。

缺点:层级较深,需要用户二次点击才能到达目标,增加了用户的交互路径,不适合频繁切换;其次隐藏的功能不能太多,如果过多会给用户造成选择压力,引起用户的反感情绪。

d.侧边栏导航侧边栏导航是除了核心功能意外的主要功能全部隐藏在侧边栏里,一般通过点击左上角的icon弹出,左侧区域现实导航中的内容。例如小红书、优酷、滴墨书摘、滴滴:

优点:隐藏次要功能,聚焦核心内容;隐藏减少非核心功能,沉浸式体验优秀;节省页面空间;标齐选项可扩展性强。

缺点:其他功能使用率低;切换功能操作麻烦,交互路劲长。

优点:扩展性好;展现直观,重要的功能平铺呈现给用户,促使用户可以快速选择。

缺点:平铺功能入口过多,增加了用户选择的压力;切换繁琐,想要切换其他模块必须返回主页面;无法直接展现内容,对用户缺乏直接的吸引力。

f.下拉式导航下拉式导航与抽屉导航类似,将非核心功能隐藏。这列导航多用于二级导航;基本都以半浮层的形式展现,点击浮层意外的区域自动收起;对比侧边栏导航,下拉导航能让用户清楚感知当前所在位置。例如赶集、转转、微博、微店:

优点:节省页面控件;交互方便,点击icon唤醒,点击其他区域收起隐藏;与界面的连贯性强,用户能够清楚的知道自己所在的位置。

缺点:大部分位于顶部,操作不便,不易频繁操作;入口不明显,容易被忽视。

优点:可延展性强,可以不断添加信息;符合人们自左到右、自上而下的阅读习惯;条目清晰,用户可以根据自己的需求快速寻找自己想要的信息。

缺点:切换不方便,必须返回列表页面才能进行切换,交互路径长;信息较多时,需要频繁的滑动界面页面,阅读效率低且容易造成阅读疲劳。

h.分段式导航分段式导航是iOS自带的标准控件,一般应用于二级导航,适合切换频率比较高的页面,导航数量通常在2~4个。例如网易音乐、网易云课堂、appstore:

优点:入口清晰,切换方便且不会迷失。

缺点:可扩展性弱,只能应用于2~4个标签;样式守旧,灵活程度不高,不能通过手势滑动。

i.点聚式导航点聚式导航的特点是悬浮icon一直都会浮在页面的顶层,用户可以随时点击选择自己需要的功能入口。当信息层级复杂,并且模块中有用户频繁使用的核心功能,在这些条件的限制下选择点聚式导航是更佳方案。例如ZAKER新闻、好奇心日报:

优点:节省空间,点击弹出其他功能菜单;通常icon的视觉效果会比较醒目,容易吸引用户点击。

缺点:由于一直浮在页面的顶层,会遮挡页面内容;点聚式导航仅靠icon按钮展示,理解学习成本高。

4.总结

1.导航栏的定义是元素的组合,允许用户在产品的信息架构中穿行。

2.导航栏的更大作用就是引导用户在在产品的信息架构中穿梭,即从哪里来、到哪里去。

3.导航栏的样式汇总,详细的优缺点分析帮助我们在工作如何区分筛选导航栏的设计样式。

THE END
1.设计的风格元素有哪些设计的风格元素有哪些 设计风格的元素有很多种,以下是一些常见的: 1. 颜色:色彩是设计中最基本的元素之一。不同的颜色可以传达出不同的情感和氛围,如红色代表热情、活力;蓝色代表宁静、稳重等。 2. 形状:形状是构成图像的基本元素之一。通过不同形状的组合和排列,可以创造出各种视觉效果。例如圆形代表和谐、统一,...https://m.yiche.com/baike/761563.htm
2.平面设计中美学元素有哪些平面设计中美学元素有哪些?在决定一种对象的美或场面的条件时,离开它原有的意义及内容,单从它的形式去鉴赏或研究,称为“美的形式原理”。一般原理与法则,有“调和”、“对比”、“比例”、“对称”、“均衡”、“律动”、“反复”等,要求设计人员掌握并加以研究。 https://m.edu.iask.sina.com.cn/jy/hGN9c14bll.html
1.展厅设计中主要的元素都有哪些在现实生活当中,不管是什么物体和环境都是由各种不同的元素组合而成的,同样展厅设计也是一样的,在设计中把各种展示元素相互结合与承托,形成不一样的展示风格,形成具有自身特性的主题效果。今天,就来具体了解下展厅设计中主要的元素都有哪些。 在现实生活当中,不管是什么物体和环境都是由各种不同的元素组合而成的,...https://xskup.com/news/3768
2.html5结构元素页面布局设计html5结构元素有哪些html5结构元素页面布局设计 html5结构元素有哪些 HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素。 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容, 标签定义外部的内容。article元素...https://blog.51cto.com/u_12196/7030679
3.铜陵县有哪些特色元素可以融入展厅设计装修铜陵县拥有悠久的历史文化传统,展示这些传统将使展厅更具吸引力和教育性。以下是一些可用于融入设计装修中的历史文化元素: 古建筑风格:铜陵县保存着许多古老建筑,如寺庙、庙宇等。可以借鉴这些建筑风格,在展厅设计中加入仿古建筑元素或者传统雕刻图案。 传统工艺品:铜陵县有着丰富多样的传统工艺品制作技艺,如剪纸、漆器...https://www.dpsjsj.com/zixun/207385.html
4.软装设计搭配技巧有哪些软装设计中主要有哪些元素在进行装修时,硬装重在质量上,以防以后出现质量问题需要返工,软装重在搭配上,合理利用室内空间,将家具都摆放合理,颜色样式搭配起来,是室内装修风格装饰成功的关键一步,今天就让我们一起来了解一下软装设计搭配技巧有哪些以及软装设计中主要有哪些元素吧。 https://www.qizuang.com/gonglue/shejiyusuan/138952.html
5.VI设计模板有哪些常见的元素和结构?VI设计模板是企业对品牌形象进行统一规范的重要工具,它包含了许多常见的元素和结构,下面我将逐一介绍。 首先,VI设计模板中最重要的元素就是企业的Logo标识。Logo标识是企业的核心形象,通过其独特的图形和字体设计,能够让消费者迅速识别出品牌,并产生强烈的视觉联想。在VI设计模板中,Logo标识通常被放置在页面的顶部中央...http://www.chinalhcz.com/news/20240316070205.html
6.2024年流行的元素有哪些2024年时尚趋势→MAIGOO知识摘要:2024年春夏时装周上,看到众多热门品牌呈现出多种风格的走秀造型。每个品牌都将展示自己独特的设计理念和时尚故事,让人感受到时尚界的无限创意和活力。而最重要的是,时尚人士们对2024年的流行趋势期待不已,也纷纷开始预测。2024年流行的元素有哪些?下面为大家从材质、元素、图案、设计等方面介绍2024年时尚趋势。 https://www.maigoo.com/goomai/4zAMOTI5.html
7.手机UI设计尺寸有哪些?超全面的UI元素尺寸设置指南对于刚入行的UI设计师,往往会遇到一个基础问题,就是设计移动APP时,是用什么尺寸或者用哪种屏幕的尺寸是适当的?有的同学花了很长时间也不知道怎么做,困扰着新人的除了不知道应该在界面中放什么以外,最突出的就是不知道元素应该使用的长宽数值,也是学生问得最多的问题,所以着手整理了这篇篇文章做扫盲,一次性搞明白...https://www.jb51.net/pingmian/784945_all.html
8.logo设计要注意什么?LOGO设计时应考虑哪些元素?logo设计要注意什么?LOGO设计时应考虑哪些元素? 提高企业的知名度的方法有很多,其中做好logo设计是非常重要的,大家可千万不要小看logo的作用,logo对企业的发展,企业知名度的提升有重大的影响,在企业logo设计的时候,有很多注意事项,下面古柏广告设计的小编就给大家说说logo设计要注意什么。https://www.goobai.com/logoxw/8065.html
9.2022年流行装修设计,家庭装修新中式装修要有哪些设计元素?2022年流行的装修设计,新中式风格不是纯粹的传统元素,而是通过对传统文化的理解,结合现代元素和传统元素,创造具有现代审美需求的传统魅力,使传统艺术在当今社会得到适当的体现。那么新中式装修要有哪些设计元素?云兰装潢小编带大家一起来了解吧! 1. 新中式注重常规和对称,以阴阳平衡的概念调和室内生态。选用天然装饰材料...http://www.shyunlan.com/Article/2022nlhzxs.html