导航栏图标风格（帮你全方位掌握导航栏设计知识点）

导航栏图标风格（帮你全方位掌握导航栏设计知识点）大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。本篇文章希望能帮大家看到在设计导航栏的时可能忽略的一些问题。每次的总结梳理，都是一次知识、能量的升华，个人拙见及表达方式固然不能尽善尽美，欢迎一起交流、进行思维碰撞。另外，Android一般会在容器底部增加投影，以区分导航栏与内容区域的分割；iOS除上述（2-9）提到的分割元素外，还可以使用高斯模糊且带不透明度的方式来区分，毛玻璃效果的味道。导航栏几乎是每个界面必定存在的控件，虽然常用，但并不是每个设计师都能将其设计的优秀，需要在基础设计规范、作用之上，赋予其更大的产品价值。“如果逃不掉，那就静下心来享受”，导航栏既然不能轻易删减，那么就把它设计好，或许还能带来意想不到的好处。以上内容集合了笔者使用众多APP后以及根据工作中的经验总结，让我们从更

顾名思义，导航栏还需要具备导航的作用，不管什么时候，用户只要一抬头（扫视导航栏）就能清楚知道当前正处于什么位置或流程，这主要从标题（后续会有标题设计的单独文章）信息中快速获取，如果当前页面不设标题，那么用户需要在页面头部某些层级较为突出的关键信息中获取，一旦页面滑动覆盖至关键信息位置，就需要呈现标题给用户指路，避免用户产生疑惑而付出更多的时间、增加理解难度。

2. 不同平台中的差异

这里主要指的是iOS、Android两大系统，在同等比例、同宽度前提下，Android（MD设计规范）系统的标题为左对齐，且容器高度比iOS要高；iOS系统一般只会在大标题样式下让标题左对齐。

另外，Android一般会在容器底部增加投影，以区分导航栏与内容区域的分割；iOS除上述（2-9）提到的分割元素外，还可以使用高斯模糊且带不透明度的方式来区分，毛玻璃效果的味道。

六、结语

导航栏几乎是每个界面必定存在的控件，虽然常用，但并不是每个设计师都能将其设计的优秀，需要在基础设计规范、作用之上，赋予其更大的产品价值。“如果逃不掉，那就静下心来享受”，导航栏既然不能轻易删减，那么就把它设计好，或许还能带来意想不到的好处。

以上内容集合了笔者使用众多APP后以及根据工作中的经验总结，让我们从更全面的角度来看待导航栏在不同页面、不同应用中的使用方式和设计细节，以及不同场景下的交互变化，让信息变得更高效，用户使用起来更便捷。

本篇文章希望能帮大家看到在设计导航栏的时可能忽略的一些问题。每次的总结梳理，都是一次知识、能量的升华，个人拙见及表达方式固然不能尽善尽美，欢迎一起交流、进行思维碰撞。

#专栏作家#

大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。

本文原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。