火星网校
如何做好UI底部导航栏图标设计
发布时间：2024-03-07 11:19:16 浏览量：159次
如何做好UI底部导航栏图标设计?图标在产品中的应用非常重要，不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。UI设计创新技能层出不穷，UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,那么如何做好UI底部导航栏图标设计呐？今天就进行简单的说明。
一、底部导航栏图标重要性及维度
1.重要性
底部导航栏的图标是路牌，承担着指路的作用，给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能，经过多年的交互设计迭代后，附加了「信息展示」和「引导操作」的作用，这点会在下文中详细阐述。
2.三个重要评估维度
品牌调性
品牌调性决定了图标的体量感、差异化和创意延展。怎样评估图标设计能够体现出品牌调性呢?最简单直接的方法：截屏首页，不看顶部栏，仅从底部导航栏能看出来这是什么产品，就算成功体现了品牌调性。
识别度
识别度决定了用户辨识其它页面功能的速度。高识别度的图标能协助用户辨识，低识别度的图标会阻碍用户辨识。在选择做这部分图标的时候，一定要考虑识别度的问题，进行创新要建立在高识别度的基础上。
美观
导航栏图标美观的要义是：统一、精致。统一不代表绝对统一，精致不代表过于精细。要做到美观，可以遵循以下几点：大小统一和谐、线条粗细一致、圆角视觉统一、内容繁简平衡。
将三个维度按重要程度来排序，是品牌调性>识别度>美观。有的设计师会选择以美观度作为优先标准。但站在产品的角度来说，应该以体现品牌调性和识别度为重要标准，在这基础上再进行美观设计。下图中，新华书店APP的底部导航栏图标略显年代感，图标细节表现不一显得不够统一和精致，然而用户还是能够根据图标一眼区分各个导航入口的功能。它们可能不是设计师眼中好看的图标，但它们是用户眼中好用的图标。
二、底部导航入口的数量
底部导航入口一般在3-5个，最常见的是4-5个。这个数量由什么决定呢?
1. 最高数值由认知心理学决定
在使用APP的时候，底部导航栏使用到的是人记忆系统中的感觉寄存器和短时记忆。考虑到APP面对的人群非常广，短时记忆容量不一，选择了7-2(也就是5)作为底部导航入口的最高数值。
2. 具体数值由产品的框架决定
产品经理会通过项目背景和用户调研，决定产品的功能结构。而功能结构图划分的类别决定了底部导航入口数量。有的产品功能非常单一，结构也单一，三个导航入口已经能够满足需求;有的产品功能复杂，则需要更多的导航入口，用以划分APP功能，帮助用户快速识别。
三、底部导航栏模式
底部导航栏有权重平分、强调信息、引导操作这三种模式。本次深度分析采用了30个产品作为对象进行研究，如何做好UI底部导航栏图标设计https://www.aaa-cg.com.cn/ui/2490.html?gpf其中大部分为知名社交电商类产品。因为这类型的产品比较多，迭代完善，可参考性强。
1. 权重平分
当产品的功能结构权重比较平均，不希望突出其中某个结构时，一般采用权重平分的模式，即每个底部入口的分量都是平均的。常规产品会采用这样的形式。
2. 强调信息
当产品需要强调某些信息引起用户注意或同一个按钮承担两个功能时，设计便可以选择在某个入口添加明显的信息指示或功能。增加功能的底部导航入口不一定是首页，也可以是其它入口。
3. 引导操作
当产品希望用户能够进行某个操作，需要进行强操作提醒时，可以选择引导操作的导航栏模式，在中心突出操作按钮。大众点评、百果园、转转、星巴克、闲鱼等都是采用这种模式。
四、底部导航栏图标表现形式
1. 线性图标的优势
从大多数APP设计来看，未选中状态下，线性图标占有优势。相对面性图标来说，线性图标有更多可能性，且选中与未选中的区分落差较大，对比明显。
2. 其它图标趋势
未选中状态的图标常用线性方式，目前的主要趋势还是在图标表意上下功夫;选中状态的图标常用面性、微质感、立体、插画等方式。
总结
图标对我而言最有趣的地方在于，它是不同组合出来的结果，每一次的设计都会有惊喜。不同的品牌、不同的产品背景、不同的产品框架…这些千变万化，让图标有了生命，也让每一次的设计都有意义。
UI设计中节日闪屏设计指南
UI设计中下拉刷新设计使用技巧
ui设计数据可视化设计攻略
UI界面下拉菜单的设计，你真的会吗？
UI设计中的“关于我们”页面，你真的会了吗？
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
