梳理了产品交互设计中常用到的导航栏控件，有系统级别的导航、页面级别的导航，具体如下：
1、导航菜单 - 系统级别
1.1 导航菜单简介
用于网站的信息架构，快速导航，辅助用户快速触达目的页面；
1.2 使用场景
网站不同业务频道入口，如网站最顶部的导航菜单，作为各个业务频道的入口；
网站不同功能入口，如工具型网站在左侧的一二三级菜单；
1.3 思考与理解
导航菜单个人理解可划分为业务频道导航和功能菜单导航：
1.3.1 业务频道导航
应用举例，京东首页最顶部的导航栏栏，是京东各个业务频道的快速入口，如下图示：
侧重突出业务频道，会随业务变化而做调整，根据业务需求决定是否需要做后台管理配置，如果更换频繁，甚至需要根据不同用户类型做个性化配置，则可做后台配置，否则直接固定写死即可，后台配置时，可配置导航名称、跳转地址、热门／NEW图标、页面打开方式、导航排序等；
业务频道导航菜单个数，一般为7个以内，最多不超过9个；人的眼睛一次性可处理的信息数量是7个，最多不超过9个，所以导航栏菜单一般不超过7个。
1.3.2 功能菜单导航：
应用举例，京东个人中心左侧的菜单栏，是个人中心各个功能入口，如下图示：
一般用于个人中心或者工具型的网站，侧重于信息架构的表现，给用户全面清晰的信息认知框架，且可实现快速导航，一般是固定的菜单栏，如需根据不同用户展示不同菜单栏时，一般通过用户权限进行控制；
一般是多级的树状菜单，一般为两级菜单，最多不超过三级菜单，如需要超过三级时需要想办法在交互设计上做优化，或者在信息架构上再做归纳调整。
2、面包屑 - 系统级别
1.1 面包屑简介
明确告知用户当下所在的位置，且可快速导航，如下图示：
1.2 应用场景
用于信息层次比较深的页面，页面深度大于三层以上；
用于需要快速导航回到某个中间位置页面；
需要明确告知用户所在位置时。
1.3 理解与思考
是对导航菜单的补充，在导航菜单已经框定好整体信息框架的基础上，当用户进入到某个具体页面时，告知用户当下所在的位置，避免用户的迷茫，也辅助用户快速回到自己所想要的去的位置。
3、步骤条 - 页面级别
3.1、步骤条简介
引导用户按照流程完成任务的导航条，可表示任务进度或步骤。
3.2、使用场景
两种使用场景：表示任务进度或者步骤，并起到导航的作用。
3.2.1、进度条：表示某事务的进度，侧重于表现当前进度，如订单进度；
3.2.2、步骤条：将某个任务分解成由若干步骤组成的流程，表示该任务所处的步骤，侧重于表明操作步骤，通常带有“上一步”、“下一步”操作按钮，如资质认证等复杂任务；
3.3、理解与思考
步骤条可表现当前任务的整体步骤，以及进度情况的组件，常用于比较复杂繁琐的任务，把任务分步进行，简化任务，也降低用户的畏难心理，反映任务进度，给足用户更多的心理预期。
一个清晰完整的步骤条，应该可以使用不同的视觉元素，使得更清晰地表示过去、现在、将来，过去是指已经完成的动作，通常使用“对勾”表示；现在是指当前进行中的动作，通常高亮即可；未来是指即将要执行的动作，通常置灰即可，一个清晰完整的步骤条，如第2小节的图示。
不清晰不完整的步骤条举例如下：不能清晰地体现当前处于什么状态。
3.4、小结
任务导航：清晰地体现任务的所有步骤，并清晰描述每个步骤，需要描述的内容如：动作描述、状态描述、时间描述、人物描述等；
视觉元素：需清晰地表示过去、现在、将来；
信息结构化：任务分步骤完成时，合理设计每个步骤的内容及界限。
4、固钉 - 页面级别
4.1 简介
页面滚动时，将页面元素固定在可视范围内的特定位置上，以便随时快速操作，如京东首页固定的楼层导航条，如下图示：
4.2 使用场景
需要滚动的长页面，常用场景：
侧边菜单栏
长页面导航条
页面关键操作悬浮固定，如“提交采购”按钮；
4.3 使用需求说明
从以下两个位置来说明页面固定元素的实现需求：
展示位置：该元素正常展示在页面某个位置（如“提交采购”按钮显示在商品列表底部）；
固定位置：该元素滚动到某个位置（如浏览器底部）时，固定显示在浏览器底部，当该元素滚动离开指定位置后，跟随网页滚动。
5、锚点 - 页面级别
5.1 简介
页面跳转到的位置，经常运用在长页面的导航，通过在指定位置设置锚点，固定跳转到页面指定的位置；
5.2 使用场景
应用在比较长的页面，或者需要引导用户快速快速切换位置的页面，如采购商城首页不同楼层的切换，如企业官网首页不同内容模块的内容导航；
网友评论