01底部导航栏图标的重要性和尺寸。

  重要。

  下一条导航条的图标就是路牌，起到指路的作用，告诉用户进入产品后可以分别到达哪个页面。早先的导航条是单导向功能，经过多年交互式设计迭代后，增加了“信息显示”和“引导操作”的作用，这将在下文详细阐述。

  评价的三个重要维度。

  （1）品牌调性。

  品牌调性决定了图标的体验感、差异性和创造性延伸。如何评价图标设计能体现品牌调性呢？简单易行的方法：截屏首页，不用看顶部栏，仅从底部的导航条就可以看出这是什么产品，即使成功体现了品牌调性。

  (2)认识度。

  标识度决定了用户识别其他页面功能的速度。一个高度识别的图标可以帮助用户识别，而一个识别度低的图标会妨碍用户识别。做这部分图标时，必须考虑识别度问题，进行创新要建立在高识别度的基础上。

  （3）美观。

  导航条图标的美观含义是：统一、精巧。一元化不代表绝对统一，精巧不代表太精。要达到美观，可遵循大小协调、线条粗细一致、圆角视觉统一、内容繁简平衡等几个方面。

  三个维度按重要性排序，是品牌调性>识别度>美感。有些设计者会选择将美观作为优先标准。而站在产品的角度上，应以体现品牌调性和认识度为重要标准，在此基础上再进行美观设计。下面的图表中，新华书店APP的底部导航条图标略显年代感，图标的细节表现不尽相同，显得不够统一和精致，不过用户还是可以根据图标一眼辨别每个导航入口的功能。在设计者眼里，它们可能不是漂亮的图标，但在用户眼中却很有用。

  02底部导航入口数量。

  下导航台一般在3-5条，最常见的是4-5条。这数目是由什么决定的？

  最大值是由认知心理学确定的。

  根据认知心理学理论，人类的记忆系统由三个记忆体组成：感觉寄存器、短时记忆和长时记忆。刺激源经过过滤首先进入感觉寄存器，利用选择性直觉，信息临时传入短时记忆(STM)。这是一段过渡的记忆缓冲期，容量有限，仅能记录7+-2个信息块，而且只能保持15-30秒。

  应用APP时，底部导航条使用的是人类记忆系统中的感觉性寄存器和短时记忆。鉴于APP面对的人群非常广泛，短时记忆能力不一样，选择了7-2(即5)作为底部导航入口的最高值。

  根据产品结构确定具体数值。

  通过项目背景和用户调查，产品经理将确定产品的功能结构。并且功能结构图划分的类别决定了底部导航入口数量。有些产品功能十分单一，结构也单一，三个导航入口已经能够满足需求；有些产品功能复杂，则需要更多的导航入口来区分APP功能，帮助用户快速识别。

  03下端导航栏模式。

  下面的导航条有三种模式：权值平分，信息强调，引导操作。这次深入分析选取了30种产品作为研究对象，其中大多数是知名的社交电商产品。由于此类产品较多，迭代完善，可供参考。

  平均加权。

  在功能结构权值比较平均且不想突出某一结构时，一般采用加权平分的方式，即每个底部入口的分量均为平均。传统的产品将采用这种形式。

  重视信息。

  如果产品需要强调某一信息引起了用户的注意，或者相同的按钮具有两种功能，设计就可以在某一入口增加明显的信息提示或功能。底部导航入口增加的功能不一定是首页，或者是其他入口。

  严格选择的首页按钮承担着“返回顶部/快速定位推荐模块/品牌展示”的功能；淘宝上的首页按钮，飞猪的首页按钮起着“返回顶部/品牌展示”的作用；微博的视频按钮有“视频/关注的人更新内容提示”的功能。

  启动操作。

  如果产品想要用户执行某项操作，需要强操作提示，则可以选择引导操作的导航条模式，中间高亮操作按钮。流行音乐，百果园，转播，星巴克，休闲鱼等都是采用这种模式。

  04下端导航条图标显示。

  直线图标的优点。

  在多数APP设计中，未选状态的图标，线性图标占有优势。对于相对平面图示，线性图示具有更多的可能性，并且选择与未选图示的区分落差较大，对比明显。

  其他图标趋势。

  不选状态常用的是线性图标，目前主流的趋势还是图标表意；选取状态图标常用面性、纹理、立体、插图等方式。

  05图标设计思想和创意。

  为直观地展示图标设计思想，本文对权重平分模式、强调信息模式、引导操作模式分别设置不同的产品背景，将图标设计的过程写下来供大家参考。

  加权平均模式示例。

  重点介绍信息模式示例。

  启动操作模式示例。

  06总结。

  对于我来说，图标最有趣的地方在于，它是由不同的变数组合而成的，每一个设计阶段都令人惊讶。不一样的品牌，不同的产品背景，不同的产品框架…这些变化，让图标有了生命，也让每一次设计都有意义。你也可以用这种方法，组合变量，做更具突破性的设计。