网页导航栏设计6 第1篇
水平式滚动就是导航栏的交互呈左右水平方向滚动的，当用户第一次遇到这样类型网站的时候，体验感会比较差，因为它物理和视觉运动方向与常规的纵向滚动不同。
▲ 水平式滚动
网页导航栏设计6 第2篇
▲ app的底部导航栏设计
▲ app的导航栏
▲ 社区发tab
网页导航栏设计6 第3篇
如果要统一一二级菜单的选中样式，那么设计过程中，就要保证一二级菜单实际占用空间区域是一致的，间距也进行统一，才能合理添加悬浮和选中效果。
如果不统一一二级菜单悬浮和选中样式，那么高度就不需要统一，但是设计起来会更难。如果不统一交互效果，那么就尽量保证对比差异，其中一级悬浮和选中采取背景填充，另一级仅仅是文字样式变更。
把要使用哪种方案确定下来，然后再去优化细节，添加对应的图标内容和优化字体、分割线等等。
我们在上面用的案例，逻辑层级是 3 级，但是有的项目中，包含的可能有 4 级、5 级，那么必然会呈现出更复杂的交互体系。
常见的做法，就是将侧边栏做成两列，一列是顶级菜单，一列是其它次级菜单，类似有赞的这种做法。层级越多带来的挑战也就越大。
导航的设计，对细节调节并不仅仅是为了好看，而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的，具体使用上还可能会碰到什么问题我们要尽可能多进行思考。
比如：
原设计中展开 1 级分类只能展开一个，开启第二个就会关闭第一个，如果我们改成展开不关闭会有什么区别呢？
高度超出一屏高以后怎么显示，如果滚动的话跳转后显示在哪里？
这样的问题，就留给大家自己思考了。
导航栏的设计细节是很次要的因素（虽然对整体样式很重要），重点是给出合理的信息展示和交互方法。
如果导航不能帮助用户快速、简洁的进行页面的选择和跳转，即使做的再好看也是一个失败的导航。
本次分享到这里结束，我们下篇再贱～
新一期B端产品设计全能班即将十一放假结束就开课了，有提升需要的同学记得联系我～