导航栏图标风格（帮你全方位掌握导航栏设计知识点）
导航栏图标风格（帮你全方位掌握导航栏设计知识点）当导航有足够的纵向空间时，也可使用如圆形、方形、圆角矩形类型的容器按钮，需通过按钮的形状、大小、填充、描边等样式来确定在页面中的视觉权重，灵活区分主次层级关系，好的导航按钮总能抓住用户的注意力。导航栏的左侧已被「返回」图标占领，按钮基本只能放在右侧，且以文字按钮样式居多，主要用于承载页面的辅助操作、功能入口。大标题导航栏的容器高度为192px，字号通常设定在56px~68px（栅格所需、笔者常用64px）的范围，页面上滑后，会恢复到88px的常规高度，标题字号也随之减小。主页面导航栏中的图标比较多元化，例如左侧常见的定位、品牌logo、抽屉菜单入口等，右侧例如搜索、消息、扫一扫、更多……二级及以后的页面导航图标相对固定，左侧必定有一个返回到上级页面的“回退”图标，可以是向左剪头、向下剪头、关闭按钮等。需要注意的是，不管设计什么样式，都需要符合“回退”样式预期，确保用户不会产生疑惑。右侧一般
1. 容器
即导航栏的范围约束容器，所有元素都应该在容器里面。在iOS系统应用中，常规导航栏的固定高度为88px，即便在大标题导航样式下，不管当前的高度是多少，随着界面的滚动，随后也会转换为88px的常规高度，例如iPhone界面、产品经理应用等。
另外，部分应用为了释放更多界面空间，从表面上看不到容器的存在，实际是将容器的不透明度调整为0，逻辑上容器是依然存在的，且各元素依然受到容器的约束，例如滴滴打车界面。
2. 标题
标题用于描述用户当前所在位置或页面的具体所在场景，在iPhone全面屏出现之前，因设备屏幕空间有限，大部分使用常规标题，即34px~40px（栅格所需、笔者常用36px）加粗且居中标题文字。
当全面屏设备逐渐普及后，屏幕的高度得到了进一步扩展，导航栏的可发挥空间必然增加，大标题风格开始兴起，随后也被引入了设计平台规范。大标题导航栏主要取决于产品定位与功能影响，并不单单是设计风格的问题，毫无疑问，大标题能让页面头部有更多的留白空间，呼吸感更强，非常适合产品结构不深、功能单一且体量级别较轻的应用，也就是我们常说的「小而美」，人人都是产品经理平台在这方面做的相当出色。
大标题导航栏的容器高度为192px，字号通常设定在56px~68px（栅格所需、笔者常用64px）的范围，页面上滑后，会恢复到88px的常规高度，标题字号也随之减小。
3. 图标
主页面导航栏中的图标比较多元化，例如左侧常见的定位、品牌logo、抽屉菜单入口等，右侧例如搜索、消息、扫一扫、更多……
二级及以后的页面导航图标相对固定，左侧必定有一个返回到上级页面的“回退”图标，可以是向左剪头、向下剪头、关闭按钮等。需要注意的是，不管设计什么样式，都需要符合“回退”样式预期，确保用户不会产生疑惑。右侧一般放置功能图标，如次级功能延展、信息提交、删除等，最多不超过两个操作入口，避免造成功能层级混乱。
4. 按钮
导航栏的左侧已被「返回」图标占领，按钮基本只能放在右侧，且以文字按钮样式居多，主要用于承载页面的辅助操作、功能入口。
当导航有足够的纵向空间时，也可使用如圆形、方形、圆角矩形类型的容器按钮，需通过按钮的形状、大小、填充、描边等样式来确定在页面中的视觉权重，灵活区分主次层级关系，好的导航按钮总能抓住用户的注意力。
5. 搜索框
当搜索功能权重较高，用图标、按钮作为入口已不能满足用户频繁的搜索需求时，就会以输入框的方式占据导航栏大部分区域，不仅能突出搜索功能、向用户推荐搜索内容标签，还能提升产品的可操作性，随着搜索框区域的扩大，用户无需精准点击，触手可及。
对于内容较多的首页，导航栏需要承载如标题、分类、头像、按钮等诸多信息，这是可适时增加导航栏的高度，搜索框放在第二行展示，可避免过度弱化搜索框给用户带来操作上的影响，例如京东、淘宝等电商类型的应用。如果想节省页面整体纵向空间，若条件允许，可在页面上滑后缩小导航栏高度，只显示搜索框，例如美团外卖。
