导航设计在产品设计中占有重要的位置，一个好的导航设计，就像你置身于人员嘈杂、纷乱的火车站，能够快速的找到你要乘车的候车点一样，令人心情愉悦。快速的到达目的地和其中过程的心情愉悦就是我们做导航设计所要追求的。
首先，如何快速的到达目的地？结合自身产品业务，做好导航层级，重要的流量入口，显示在主页面，次要辅助的内容可以隐藏或放到二级导航。
其次，如何让用户感到心情愉悦？那就是在用户到达目的地前的这个过程，增加良好的交互效果或动画效果，入口还是那个入口，却变的生动有趣，让你乐于点击。
常见的导航设计，我给它们分成了两类：单层级互斥型导航、多层级包含式导航。
单层级互斥型导航如下：
1. 列表式导航：列表式导航可分为标题式列表、内容式列表、卡片式列表。是现在大多数APP都有的一种导航方式。
列表式导航
标题式列表：一般只显示一个标题或和图片相结合，进入后，可能还存在二级列表式导航。
内容式列表：除了标题以外，还有部分内容展示，进入后，即为内容详情，无其他导航。
卡片式列表：采用卡片式设计，包括图片、标题、内容简介，进入后，即为内容详情。
列表式导航方便、快捷，但要注意分类，可采用格式塔就近原则进行分类，也可以通过增加标题进行分类。使导航更清晰。
2. 宫格式导航：一打开APP主页面导航采用宫格式的APP越来越少见了，市面上我知道的就美图秀秀还采用这种方式，在我自己开发的APP中也采用过，一方面这种大入口，一目了然，用户的可操作性好，另一方面，也不得不承认，采用这种导航方式，也是由于功能少，这种方式自然是最合适的。
宫格式导航
越来越多的宫格式导航，作为二级图形化的形式展示。值得注意的是，由于各个宫格间内容的互斥性，需要完成一个宫格，退出后，再操作其他宫格，所以在产品设计时，尽量做到各个宫格间，关联性不大。拿我做过的APP为例，当时两个宫格都跟客户有关系，但是最初设计的时候，只想着一个是跟进客户，另一个是完善客户资料，放在两个宫格里，分类清楚，却不知道，用户需要在两个宫格里跑来跑去，关联度还是很高的，也就造成了用户反馈体验不好，果断在后续迭代过程中，改进了这点。
3. 抽屉式导航：基本都在APP的左侧滑出，像抽屉一样可推拉。一般辅助性、需求频次不是很高的功能会选择采用抽屉式导航设计。符合了设计原则里的隐藏原则，在展示上也更加凸显主页面功能。
抽屉式导航
由于抽屉式导航入口一般都放在左上角，用户手指不易触达，所以抽屉内的内容应是不需要用户参与度过高的功能。
4. 顶部标签式导航：对于内容型的产品，标签式导航用的比较多，主要是关于内容的分类过多，选用顶部标签导航配上左右滑动切换，用户可以很方便的查看到内容，对于标签过多的情况，现在大多APP也都提供了标签管理、排序的功能，用户可根据自己的偏好，设置显示顺序。
顶部标签式导航
顶部标签导航作为第一层级的导航，常见于音乐类APP，顶部为了方便用户播放歌曲。大多数都是底部导航和顶部导航配合，顶部标签式导航作为第二层级，对第一层级导航，做更精确的内容分类，在产品设计时，也要注意内容分类的互斥性。
5. 底部全站式导航：底部导航是最常见的导航，一般不超过5个，再多，用户视觉会有负担。对于产品特别希望用户使用（特别是对于那种需要用户产生内容的产品）或用户自身需要高频词操作的导航，为了便于查找，底部导航的个数会设计成3个或5个，然后突出中间导航的设计，也称为舵式导航。
底部全站式导航
多层级包含式导航如下（以下完全属于个人总结）：
6. 下拉式导航: 展现形式其实就是两个或两个以上的下拉筛选，但是，不是没什么关系的下拉框，后面的下拉框跟之前的下拉框存在包含关系，在技术上也叫二/三/...级联动。
下拉式导航
下拉式导航可以包含多个层级，不过最多也不要超过4个，对于包含关系层级多的导航，采用这种方式是比较好的。
7. 列表折叠式导航：一般两个层级可以考虑这种导航，简单方便。
列表折叠式导航
8. 目录式导航：适用于二级包含关系的导航，左图是现在大多数电商采用的导航方式，右图是我在自己产品中的应用，于下拉筛选结合，实现三层级的展示。
目录式导航
9. 悬浮icon导航：这种导航比较特殊，在每个主页面都存在，目的是为了方便用户无论在哪个页面随时都能去到其他页面。这种导航的弊端是会遮挡部分页面内容，如果应用这种导航，要考虑到对底层页面内容的展示影响大不大，权衡利弊。
最后要说说让用户感到舒服愉悦这个事，现在越来越多的导航入口通过UI独特创意或简单小动画，让人感到好玩且乐于点击。比如QQ底部导航小人儿的左右张望、淘宝底部导航的UI设计、36Kr在顶部导航切换时，良好的交互体验。
趣味性导航
在一个APP中也不能所有的导航都做的太吸引用户注意力，过度设计也会造成用户注意力分散，从而形成视觉负担。
以上就是我个人的一些总结，如有不妥之处，不吝赐教。
- E N D -
网友评论