如何为网站设计一个有效的多级导航系统
时间：2023-07-27 22:45:01 | 来源：网站运营
时间：2023-07-27 22:45:01 来源：网站运营
如何为网站设计一个有效的多级导航系统：
在从0到1设计一个网站的过程中，最先需要设计的就是网站的导航系统。如果把网站看成一个生命，那么导航系统就是它的骨骼。对于结构简单的网站，导航系统也比较简单，而对于复杂的网站例如B端或中后台网站，导航系统也会复杂的多，此时一个优秀的导航能够帮助用户更高效的完成工作。在本文中，笔者总结了自己在多级导航设计中的一些思路和经验，希望可以帮助到正在进行相关工作的设计师和产品经理们。对于复杂的网站，常常需要4级甚至5级的导航，本文中的案例为以5级导航为设计目标进行的。在设计时，笔者发现这个过程比较需要逻辑思维，因此在设计导航的过程中整体思路是：先设计出尽可能多的导航系统，然后再在其中挑选出符合网站信息架构的导航。本文也按照这两个步骤进行阐述。
一、设计出尽可能多的5级导航系统
如何设计出尽可能多的5级导航系统？理论上讲，通过每个级别排列组合的方式可以得到所有5级导航的排布方式。那么根据什么方式进行排列组合呢？导航的形式大体上可以分为横向排布和纵向排布，纵向导航又有顶部的纵向收起导航和侧边导航。接下来只要进行排列组合就可以啦。
导航简单的分类在排列组合的过程中，有些方式并不合理（比如一到五级全部横向排布），因此在过程中根据一些约束条件对排列结果进行了筛选。约束条件如下（这些约束条件也是笔者边尝试边发现的）：
- 第一级导航层级较高，采用顶部纵向排列（收起）的方式
- 避免横纵交错太多，容易逻辑不清，且操作复杂
- 某两级导航采用组合展示的方式，可减少层级
……
经过排列组合并根据约束条件筛选后，最终得到了以下9种网站导航的框架：
9种导航框架汇总以下是9种导航框架：
1号导航2号导航3号导航4号导航5号导航6号导航7号导航8号导航9号导航以上就是9种五级导航的设计，需要说明的是，这9种导航并非代表了五级导航所有的情况，还可能出现其他的组合与变形，比如二级组合起来的方式变成三级组合起来，就又多了若干种变形方式。以上9种只是常规导航的一些举例。
二、挑选合适的导航系统
设计出足够多的导航，接下来是挑选合适的导航。挑选导航时需要综合考量网站的具体情况，比如用户的使用习惯、导航各层级的关联度、体量等等。以下进行具体讲解。
1 网站的主要导航有几个层级 选择时需要先了解清楚网站的主要导航有几个层级。举个例子，6号导航和9号导航最低一级的横向导航，经常用在页面内的tab切换，如果只是偶尔几个页面有这样的tab，那么可以采用这样的形式，如果大量的页面都需要这样的tab，那么可以尝试把它放到导航目录中，而不是分在页面的tab里。
2 用户是否经常需要跨某些层级操作 设计导航时，一定要充分考虑到使用者的使用习惯，对于后台网站尤其如此。若用户需要经常在某几个层级之间切换，那么就应该让这几个层级尽量放在一起，减少操作时间，提升操作效率。比如3号导航的四五级是在侧边展开的方式，那么如果用户经常在四五级之间切换就会非常方便。
3 各级导航的关联度和体量 除去考虑用户本身的使用，各级导航本身的关联度和体量对于选择导航也非常重要。
一般情况下，关联度高的不同级别导航会放在尽可能关联的位置，比如6号方案的二三四级导航都在侧边，能够有更好的关联度。
导航体量也很影响导航的设计。如果某级导航有特别多的内容，那么它就不适合做横向导航，而只能选择纵向导航，比如阿里云体量如此庞大的导航。
阿里云网站最后的小建议：在设计出网站后，一定要去做用户验证／专家用户验证，毕竟他们是真实使用网站的人。
如果你正在设计复杂的网站导航，希望这篇文章的思路能够帮助到你（如果能够达到授之以渔的目的我会很开心），如果你有别的建议，也非常欢迎随时和我交流。
未经允许，请勿转载
在线咨询
