网站底部导航制作 第1篇
前面提到，产品二期会有新功能上线，后面还会有三期、四期…需要考虑导航栏的可拓展性，功能太多该怎么调整？
思考方向：侧栏如何容纳超过一屏的菜单？如何快速找到我想要的功能？
解决方案 1：单一用户或角色所需要使用的功能菜单一般只有几个，管理员可以针对角色或用户进行权限配置，特定角色展示特定菜单；
解决方案 2：可以增加搜索栏，对菜单进行快速查找。
网站底部导航制作 第2篇
当菜单广度过大，我们也能够通过设计的方法来优化导航菜单，
方法一：增加搜索栏，筛选菜单；
方法二：千人千面，据用户角色的不同，展示不同的菜单，大部分 B 端用户并不需要使用到全部功能菜单，管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦。
某云目前拥有大概 100+功能，这些都需要在导航菜单上显示，因此在导航设计上，它的模式是：全部菜单导航+搜索菜单
网站底部导航制作 第3篇
多种导航栏类型，该如何选择？功能型产品适合侧边导航，侧边导航效率高、迟疑和错误更少，用户也普遍比较喜欢，信息型产品适合顶部导航，比如门户网站。
Jennifer Rose Kingsburg 曾经对网页的三级菜单导航进行过一份研究，结论是左侧导航相对顶部导航优点更多些
① 侧边导航栏
将菜单栏放置在左侧，页面布局上基本为左右结构，侧边导航在国内产品中最为常见，国内厂商对于侧边栏导航的尤为偏爱，也就造成了现在 B 端产品的发展也逐渐趋同。
那么为什么国内 B 端为什么大多数是侧边导航栏呢？我把这种现象归纳为以下 3 个原因：
原因一：中文文字宽度较短，侧边导航能最大发挥出他的优势，能最大限度减少空间的使用率；
原因二：国内的业务复杂，以及对于扩展性的要求较高，每个企业都想做一个又大又全的产品，因此侧边导航栏更加适合国内的实际需求；
原因三：一级导航在左侧时，效率高、迟疑和错误更少，用户追求的是使用产品完成目标任务，注重的是功能完整性和操作便捷性。
② 顶部导航栏
将菜单栏放置在顶部，页面布局上基本为上下结构，顶部导航早期出现于各类门户网站，比如企业官网，各种咨询类的网站经常会采取这样的导航形式。顶部导航通常在 B 端产品中也是十分常见的，但还是以国外产品最为集中。
③ 混合导航栏
网站底部导航制作 第4篇
如果要统一一二级菜单的选中样式，那么设计过程中，就要保证一二级菜单实际占用空间区域是一致的，间距也进行统一，才能合理添加悬浮和选中效果。
如果不统一一二级菜单悬浮和选中样式，那么高度就不需要统一，但是设计起来会更难。如果不统一交互效果，那么就尽量保证对比差异，其中一级悬浮和选中采取背景填充，另一级仅仅是文字样式变更。
把要使用哪种方案确定下来，然后再去优化细节，添加对应的图标内容和优化字体、分割线等等。
我们在上面用的案例，逻辑层级是 3 级，但是有的项目中，包含的可能有 4 级、5 级，那么必然会呈现出更复杂的交互体系。
常见的做法，就是将侧边栏做成两列，一列是顶级菜单，一列是其它次级菜单，类似有赞的这种做法。层级越多带来的挑战也就越大。
导航的设计，对细节调节并不仅仅是为了好看，而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的，具体使用上还可能会碰到什么问题我们要尽可能多进行思考。
比如：
原设计中展开 1 级分类只能展开一个，开启第二个就会关闭第一个，如果我们改成展开不关闭会有什么区别呢？
高度超出一屏高以后怎么显示，如果滚动的话跳转后显示在哪里？
这样的问题，就留给大家自己思考了。
导航栏的设计细节是很次要的因素（虽然对整体样式很重要），重点是给出合理的信息展示和交互方法。
如果导航不能帮助用户快速、简洁的进行页面的选择和跳转，即使做的再好看也是一个失败的导航。
本次分享到这里结束，我们下篇再贱～
新一期B端产品设计全能班即将十一放假结束就开课了，有提升需要的同学记得联系我～