火星网校
如何设计更好体验的UI导航？
当用户使用PC端导航时，效率是最重要的衡量标准之一，让用户更快的找到想要的东西，他们就能在任务流中节省更多的时长。
效率对于多个级别的导航菜单是至关重要的，菜单的层级越多消耗的时间越长，最常见的是三级导航，优化三级导航的高效性最简单的方式是优化布局。
常见的三级导航布局包括：上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。级别标注按优先级和层级排序，研究方向包括导航时间、用户犹豫、光标移动、选择错误和用户偏好。
导航时间
研究表明，左侧导航比顶部导航效率更高，当一级导航和二级导航分开时，识别速度更快，总之：左-上-上、上-左-左排版时效率最高。
用户犹豫
犹豫是指用户在将光标从一个导航移动到另一个导航时犹豫不决思考的时长。在所有布局中，左-上-上结构的犹豫值最小，上-左-上犹豫值最大。其中当二级和三级导航在同一平面时犹豫值最小。
光标移动
当一级导航在左侧时，光标移动较少。一级和二级导航分开时，光标移动也较少。当二级和三级导航不在同一方向时，会发生许多光标移动，反之则光标移动较少。
左-左-左和上-上-上的光标移动量最少，上-上-左和上-左-上的光标移动量最大。这种效果是有意义的，因为当所有导航都在同一方向时，用户就更难将光标移到错误的平面上。
选择错误
单击次数过多表示选择错误。当一级导航在左侧时，选择错误率最低（左侧与顶部相比错误率减少了80%）。
当一级和二级导航都在顶部时，会出现大量的选择错误。上-上-上和上-上-左效率最差，当二级和三级导航与一级导航不在同一方向时，选择错误率会大幅度降低。
用户偏好
大多数用户更喜欢一级导航在左侧，最优布局是左-左-左和左-上-上。人们强烈倾向于二级和三级导航在同一方向。
最佳布局
根据所有类别的表现，对每个布局进行总体评分。性能最好的导航布局是左-上-上，其次是左-左-左。表现最差的两个是上-上-左和上-左-上。在两个最好之中，左-上-上比左-左-左快17秒左右。
左-左-左慢于左-上-上，因为当所有菜单都在左侧时，它要求用户滚动浏览项目列表。随着级别的扩展和深入，用户必须滚动查看更多内容，并且无法再在一个屏幕上查看所有主要项目类别。但是，左-左-左的好处是用户可以在每个屏幕视图中消费更多内容。用户花费在导航内容屏幕上的时间少。
总结：
1：一级导航应该在左侧而不是顶部。（节省约17秒）
因为以列表式组织菜单项使它们更容易扫描。
2：一级导航与二级、三级导航应在不同方向。（节省约23秒）
因为主菜单是父类别，它比子类别具有更高的优先级。当二级和三级与一级分离时，它可以清楚地区分层次结构并防止在同一方向上出现视觉混乱。
3：二级和三级导航应该在同一方向上。（节省约9秒）
因为二级和三级都是父类的子类，这使得它们更为相关。将它们放在同一个平面上，可以使从一个孩子到另一个孩子的导航更加直观和容易理解。
（本文系转载，转自微信公众号@UX Talk，作者：haselina）
下一篇 UI中的地图标签设计总结
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
探讨并理解游戏开发中的UE5网络课程，提升游戏开发者的技能和专业知识，是教育游戏开发的重要途径。
-
此文章将详细介绍UE5智慧城市课程的内容，学习路径以及如何通过该课程提升个人技能。浓厚的实践性质让学生在学习中得到真实成果。
-
对于热衷游戏开发和设计的从业者和学习者，火星时代教育提供了高质量的UE5就业培训课程和教育资源，使学员能够在实际工作中更好地应......
-
探讨UE5模拟仿真如何在培训基地进行技术学习的实际应用，以及这如何改变教育培训的方式。
-
本文章详细探讨UE5设计师的学习费用,帮助读者理解在掌握UE5的设计和开发技能上需要的投资。
-
本篇文章将详细讲解UE5数字展厅培训班价格以及课程内容。其中还将包含具体的课程特色介绍，以及火星时代教育平台在相关培训方案的设......
