网页导航栏设计样式 第1篇
从APP转换到小程序时，要注意调整APP的顶部导航栏的位置以及搜索框的大小，避免被Titlebar遮挡，如下图：
上图中，豌豆公主的顶部导航栏整体下移，并且减小了搜索框的高度，提高屏幕的利用率。
网页导航栏设计样式 第2篇
如果要统一一二级菜单的选中样式，那么设计过程中，就要保证一二级菜单实际占用空间区域是一致的，间距也进行统一，才能合理添加悬浮和选中效果。
如果不统一一二级菜单悬浮和选中样式，那么高度就不需要统一，但是设计起来会更难。如果不统一交互效果，那么就尽量保证对比差异，其中一级悬浮和选中采取背景填充，另一级仅仅是文字样式变更。
把要使用哪种方案确定下来，然后再去优化细节，添加对应的图标内容和优化字体、分割线等等。
我们在上面用的案例，逻辑层级是 3 级，但是有的项目中，包含的可能有 4 级、5 级，那么必然会呈现出更复杂的交互体系。
常见的做法，就是将侧边栏做成两列，一列是顶级菜单，一列是其它次级菜单，类似有赞的这种做法。层级越多带来的挑战也就越大。
导航的设计，对细节调节并不仅仅是为了好看，而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的，具体使用上还可能会碰到什么问题我们要尽可能多进行思考。
比如：
原设计中展开 1 级分类只能展开一个，开启第二个就会关闭第一个，如果我们改成展开不关闭会有什么区别呢？
高度超出一屏高以后怎么显示，如果滚动的话跳转后显示在哪里？
这样的问题，就留给大家自己思考了。
导航栏的设计细节是很次要的因素（虽然对整体样式很重要），重点是给出合理的信息展示和交互方法。
如果导航不能帮助用户快速、简洁的进行页面的选择和跳转，即使做的再好看也是一个失败的导航。
本次分享到这里结束，我们下篇再贱～
新一期B端产品设计全能班即将十一放假结束就开课了，有提升需要的同学记得联系我～
网页导航栏设计样式 第3篇
更多的被应用于信息流产品设计中，这类产品注重核心内容的展示，用户的任务路径较为单一，几乎都是用于浏览产品的核心内容；至于其他比较低频的模块入口则会隐藏在当前界面后方，避免冗余的模块抢夺用户的眼球；比如QQ，酷狗音乐。
“2/8”法则告诉我们，80%的用户只用那些20%功能，这20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用着最重要的位置，那么用户就会被打扰，产生臃肿感，甚至会放弃使用产品。
优点：可以把大量的不太常用但是有很重要功能展示在其中，减少用户的交互流程，并且不会占用主要界面，用户也就不会被打扰。
缺点：对于不了解产品的用户来说这类导航用户一般不容易被发现，会导致用户的流失。
7. 下拉导航/菜单导航
通常用来筛选同一信息模块下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转 ；
Android中对应的控件为spinner控件，但该控件用于同一类别下不同视图之间的切换，而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件，可以实现不同类别之间的切换；
下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多，比如微博，美团等。
网页导航栏设计样式 第4篇
通栏导航的背景层一般与下方的模块打通了，在视觉上看起来更为统一，还能一定程度上节约界面空间。如下图：
通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中（多伴随着背景处理），有些也会放在顶部通栏Banner上，节省空间的同时减少割裂感。
通栏导航栏的背景处理方式一般有三种:
1.特殊背景处理：与下方模块整体风格保持一致，多采用与下方一致的图片背景；
2.颜色、渐变背景：采用纯色或是渐变背景，常见于卡片风格的界面；
3.黑色透明渐变蒙层：采用一层渐变蒙层，常见于图片Banner上，保证导航栏文字的可识别性。