移动端标签导航

设计师都明白，设计不只是为了让更完美的视觉效果。设计也必将融入产品，辅助用户更加高效的使用产品。产品中信息是交流的元素，按钮是交流的方式，而导航则是交流的浓缩。人们一般通过导航来获取产品能提供什么服务或信息，通过导航来有目的性的寻找自己想要的内容。

故而，导航的两点设计要素至关重要，第一是导航的位置的明确性，好的导航应该是不需要人寻找的，不言自明；第二是信息的明确性，好的导航应该清楚的展示我现在在什么位置，这个产品除了能提供当前服务还能提供什么。

有没有想过这是为什么？Steven Hoober在他的关于移动设备使用状况的研究中发现，49%的人依靠一根手指完成手机上的操作。在下图中，手机屏幕上的画面表示大致的触摸范围，不同颜色表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及；黄色表示需要伸长手指；红色表示需要用户改变持握方式。

在导航的设计中常规的在三到五个导航个数之间，点击后有相应的图标切换选中和未选中状态。默认样式一般为线、面、面+线、线性、面型、线性+面型、微交互效果，选中高亮状态一般有面型状态。在图标切换过程中会有微交互的小动效效果，用于增强用户体验。在使用微动效时候需要注意动效的节奏感和整体效果，一般会辅助缓动效果或是其他效果，但此类设计一般实现起来难度较大，且兼容性存在部分问题，所以设计稿还原程度受到影响。(现阶段我已找到解决办法，还没有整理输出文档，想要一睹为快的朋友可以找到我交流)

而在两类产品中导航也有特例，第一类是带有用户UGC内容性质的导航，在中间按钮处会增加创作新内容按钮，此类图标大而显眼，用户极有冲动和欲望去点击，这类产品目的在于增强用户内容的发布上。代表产品有：小红书、新浪微博、今日头条、百度贴吧等产品上。

第二类是产品使用场景或属性有特性的产品，如滴滴打车、摩拜单车、哈罗单车等产品是属于使用场景很特殊，用户打开产品的目的性也很特殊，就是想扫车，想叫车等服务，所以界面呈现单一、操作简单、有极强的目的性，甚至都不需要导航栏，信息全部隐藏在了抽屉导航中。或像音乐类软件，因为软件使用的特性需要有播放控制器在底部，所以在导航设计中有的将导航放在顶部。

导航在部分体量较大的产品上，也不仅仅只有底部导航。还有在底部导航的基础页面上承载的顶部导航以支配不同页面的跳转，如今日头条、视频类软件等体量稍大的产品中。

总的来说，移动端的导航大体就是这样。当然，不同产品更需要切合实际的和自己产品特性做出导航调整，比如舵式导航就是由此演变。如果您有更好的见解欢迎通过后台留言沟通。

在微信公众号回复“导航”，获取文本pdf版。

本文由Haywardwang原创，并首发于我的微信公众号易知坊，有兴趣的朋友可以移步原文链接。