认识达内从这里开始

导航栏无论是在网页设计还是APP软件开发中都是非常重要的一个组成元素，而今天我们就一起来了解一下，底部导航设计都需要关注哪些问题。

一、底部导航栏图标重要性及维度

重要性

底部导航栏的图标是路牌，承担着指路的作用，给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能，经过多年的交互设计迭代后，附加了“信息展示”和“引导操作”的作用。

(1)品牌调性

品牌调性决定了图标的体量感、差异化和创意延展。怎样评估图标设计能够体现出品牌调性呢?简单直接的方法：截屏页，不看顶部栏，仅从底部导航栏能看出来这是什么产品，就算成功体现了品牌调性。

(2)识别度

识别度决定了用户辨识其它页面功能的速度。高识别度的图标能协助用户辨识，低识别度的图标会阻碍用户辨识。在选择做这部分图标的时候，一定要考虑识别度的问题，进行创新要建立在高识别度的基础上。

(3)美观

导航栏图标美观的要义是：统一、精致。统一不代表绝对统一，精致不代表过于精细。要做到美观，可以遵循以下几点：大小统一和谐、线条粗细一致、圆角视觉统一、内容繁简平衡。

二、底部导航入口的数量

底部导航入口一般在3-5个，常见的是4-5个。这个数量由什么决定呢?

数值由认知心理学决定

在认知心理学理论中，人的记忆系统由三个储存器组成：感觉寄存器，短时记忆和长时记忆。来自环境的刺激经过过滤先进入感觉寄存器，通过选择性直觉，信息被临时传入短时记忆(STM)。它是一个过渡性的记忆缓冲期，容量有限，只能记录7+-2个信息组块，且只能保持大约15-30秒。

在使用APP的时候，底部导航栏使用到的是人记忆系统中的感觉寄存器和短时记忆。考虑到APP面对的人群非常广，短时记忆容量不一，选择了7-2(也就是5)作为底部导航入口的高数值。

具体数值由产品的框架决定

产品经理会通过项目背景和用户调研，决定产品的功能结构。而功能结构图划分的类别决定了底部导航入口数量。有的产品功能非常单一，结构也单一，三个导航入口已经能够满足需求;有的产品功能复杂，则需要更多的导航入口，用以划分APP功能，帮助用户快速识别。

三、底部导航栏模式

底部导航栏有权重平分、强调信息、引导操作这三种模式。本次分析采用了多个产品作为对象进行研究，其中大部分为知名社交电商类产品。因为这类型的产品比较多，迭代完善，可参考性强。

权重平分

当产品的功能结构权重比较平均，不希望突出其中某个结构时，一般采用权重平分的模式，即每个底部入口的分量是平均的。常规产品会采用这样的形式。

强调信息

当产品需要强调某些信息引起用户注意或同一个按钮承担两个功能时，设计便可以选择在某个入口添加明显的信息指示或功能。增加功能的底部导航入口不一定是页，也可以是其它入口。

严选的页按钮承担着“回到顶部/快速定位推荐模块/品牌展示”的功能;淘宝、飞猪的页按钮承担着“回到顶部/品牌展示”的功能;微博的视频按钮承担着“视频/关注的人更新内容提示”的功能。

引导操作

当产品希望用户能够进行某个操作，需要进行强操作提醒时，可以选择引导操作的导航栏模式，在中心突出操作按钮。大众点评、百果园、转转、星巴克、闲鱼等是采用这种模式。

四、底部导航栏图标表现形式

线性图标的优势

从大多数APP设计来看，未选中状态下，线性图标占有优势。相对面性图标来说，线性图标有更多可能性，且选中与未选中的区分落差较大，对比明显。

其它图标趋势

未选中状态的图标常用线性方式，目前的主要趋势还是在图标表意上下功夫;选中状态的图标常用面性、微质感、立体、插画等方式。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。