WEB端主导航的思考（专题/持续更新）

交互设计-WEB端主导航的思考（专题/持续更新）

背景

新东方ERP统一体验，优化主导航框架，需要针对新东方ERP现有6个系统情况进行梳理，同时需要了解行业的解决办法，但随着移动时代的来临人们越来越忽视桌面端的设计，目前还没有找到一篇比较全面分析现有WEB主导航的文章或者参考。

近年随着移动端的大屏化，材料设计和苹果人机交互指南的显现的跨平台统一体验的趋势信号，并且在AR、VR技术还没有形成一定规模生态的情况下，大屏时代将成为一个体验过渡时期，WEB端/大屏导航也将会是区别一个产品好坏的重要因素，基于以上，我将对WEB/大屏导航做一次个人的思考总结，不喜勿喷，希望可以抛砖引玉。

定义

导航菜单（NavMenu）：将网站的信息架构分组归类并以导航的形式展示给用户，方便用户查找所要获取的信息。

主导航菜单的意义

一、主导航应该展示清楚系统的信息架构

那什么是信息架构呢？就像来到一家超市，它应该有收银台、货架、存包处，这些基本的元素构成了人们所认识的80%的超市，让用户不超过3秒就知道我们是超市而不是小卖部（小卖部只有货架和收银台，说不定还有快递代收区...）。

二、让用户可以快速做出选择，而不是犹豫不前

好的导航应该对他的用户有清醒的认知，了解它本应有的初、中、高级用户，然后让他们距离他的选择只有一步之遥，经典的理论中不允许互联网产品中的过多等待。

三、让用户有掌控感

时刻让用户知道他在哪里，进了哪间屋子，这间屋子可以通往何方。

分类

顶部导航：在页面顶部，也是目前网站最常见的主导航模式，顶部导航一般会含有个人中心、消息提示。

侧边导航：信息级别一般低于顶部导航，当需要直接展示的信息项较多时使用。

其他导航组件：包括面包屑、标签页、步骤条、楼层导航、分页器等。

近年的主导航形式

变化

需求的变化：需要进行组织分类的信息越来越多

设计的变化：横向转为竖向又转为宫格

本质

屏效：本文讨论的导航是限制在屏幕内的，就好像销售领域里关于线下店铺营收效率的的一个非常关键的指标“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)，那么店铺这个固定空间映射到屏幕上，其实就是如何让屏幕每一秒展示的内容是此刻转化率最高的元素

那么对于导航，除了要说明我是谁、我在哪、我从哪来、我能到哪去之外，如何提高它的“屏效”呢？

聚焦场景

当前任务：做选择、做什么选择、做多少选择

最短路径：如何在第一感官上让用户觉得它很容易，同时让用户以最低的成本进行寻找，操作

当前任务

*做选择的优化：能不做选择最好

能不能不做选择？《Don't make me think》提出得经典观点，人都是懒惰的，如同物理学一样万物都有惯性，突然停下思考来这样的变化对用户就来说是行动成本，那么我们能不能用现在的人工智能算法，用户历史访问路径，常用菜单等处理方式，让用户不做选择呢？

*做什么选择的优化：越简单越好

选择分类的文字是否言简意赅？是否结构化？是否有趣？

其实追根揭底还是让用户不要再去思考面前选择到底是什么意思？会给我带来什么？即言简意赅

就算需要一点点思考，那么我能不能就像思考出1+1=2这样的方式去理解并掌握所有层级的导航信息？即结构化

那如果再好一点点，他能不能像一个“玩笑”一样，看到这样的导航让我心生喜悦？即有趣

*做多少选择的优化：越少越好

有几种理论：7+-2，或者4+-2，我推荐第二种，毕竟如果能躺着，为什么要坐着，那么每一级导航最好进行4+-2的分组归类

最短路径

*感官压力的优化

每一级/组选择项多少的控制、颜色多少、对齐规则多少

*易寻找性的优化

物理位置的优先级（F型浏览）、每级文字的描述准确性、是否需要加入标志性（解释性）图标、尺寸的大小、对比度的高低

*易操作性的优化

交互形式是点击、移入还是滚动？点击/移入/滚动几次？操作区域的位置、面积否易触达？交互的反馈是否合适且及时？

期待

最近ANTD4.0更新了，蚂蚁金服里面的观点是“让功能来找用户”，其实“导航”也将会是这样，不拘泥于框架，不固守与形式，应该在用户想要看到他的时候，随时出现。