导航栏 导航栏怎么写html

编辑导语:APP的顶部导航栏是UI设计中不可或缺的一部分，它集成了用户常用或必需的一些功能来引导用户操作，所以做好导航栏的用户体验非常重要。本文作者总结了导航栏的设计风格、结构、风格和交互。让我们来看看。

APP的顶部导航栏(以下简称“导航栏”)是我们所熟悉的。它是UI设计中不可或缺的一部分，几乎在每个页面中都要用到。虽然看起来很简单，不需要花太多力气，但是设计一个与产品需求和用户目标匹配度很高的导航条，并不是那么容易的事情。有很多设计细节需要注意。

导航栏集成了一些用户经常使用或必须使用的功能，复用率极高。当用户进行一些路径操作时，导航栏就像黑暗中的一盏“明灯”，指引用户进入下一步或返回上一步，所以做好用户体验非常重要。

我们每天都在和导航栏打交道。如果我们仔细观察，会发现不同应用的顶部导航栏存在一些差异。为了让你对导航条有一个更清晰、更全面的认识，本文将对导航条的设计风格、构图结构、风格、交互等方面进行总结，希望对你有所帮助。让我们来看看。

一、导航栏基本介绍1. 导航栏在哪里？

在UI设计组件中，如标签栏、菜单栏、标签栏、应用栏、标题栏、导航栏等。，很多新设计师很难区分这些重复的名字和它们对应的区域。

导航栏位于应用程序的顶部，即状态栏的下方。主要用于明确页面位置、层次等。，并连接父/子结构页面，其权重应高于当前页面的所有内容。如果用户不知道当前位置，也不知道如何回到上一步，那一定是导航栏有问题。虽然在iOS系统中称为“导航栏”，在Android系统中称为“顶部应用栏”，名称不同，但位置和功能几乎相同。

2.导航栏能起到什么作用？首先，导航条可以告知用户当前位置，并提供返回上一步或下一步部分的入口，不会让用户迷路；其次，以top Tab的形式对当前页面的内容进行排序分类，在导航栏中聚合各类条目，为用户提供全局操作；最后，还可以增加品牌曝光度，比如容器品牌颜色、图标品牌颜色等。，必要时甚至放置品牌标志。

3.为什么有些页面没有导航栏？当系统想要为用户提供更多的信息或者用户需要沉浸式的体验时，系统需要弱化隐藏导航条以释放更多的页面空，从而在空之间预留资源用于增加单屏页面的信息。

比如在线阅读和地图导航的过程中，系统会隐藏导航栏，因为用户的注意力只会长时间停留在内容本身，并没有频繁的操作需求。隐藏导航栏既可以保留空之间的空间，又可以减少无关元素对用户的干扰；

在选择服务模式时，滴滴出行会暂时隐藏导航栏的后台容器，只保留相关图标操作入口。虽然不是完全隐藏，但是对于已经很充裕的地图空还是能起到一定的缓解作用的。相比以上导航流程，场景的操作要求和频率显然要高很多。

二、导航栏的结构常见的导航栏分为左、中、右三种结构，主要由后退按钮(左)、标题(中)、辅助操作按钮(右)三个元素组成，这也是基于最常用、最常见的布局方式。

在实际应用中，为了满足多样化的产品需求和用户目标，根据不同的场景，导航栏的布局方式有很多种。再复杂的风格，也只是从设计的角度出发，其目的是让用户操作更加简单方便。我们以iOS的2倍图为例，把导航栏一个一个拆开，看看我们在导航栏里看到过哪些元素和组件。

1.容器是导航栏的范围约束容器，所有元素都应该在容器中。在iOS系统的应用中，常规导航栏的固定高度是88px。即使在头条导航风格下，无论当前的高度是多少，都会随着界面的滚动转换成88px的正常高度，比如iPhone界面和产品管理器应用。

另外，有些应用为了释放更多的接口空，表面上看不到容器的存在，实际上却把容器的不透明度调整为0。逻辑上，容器依然存在，所有元素依然受容器约束，比如滴滴打车接口。

2.标题title用来描述用户的当前位置或者页面的具体场景。在iPhone全面屏出现之前，由于设备屏幕之间的空间有限空，大多使用常规标题，即34px~40px(网格要求，作者通常使用36px)粗体居中的标题文字。

随着全面屏设备的逐渐普及，屏幕的高度进一步扩大，导航栏的可玩性也不可避免的增加空，头条风格也开始兴起，随后被引入设计平台规范。头条导航条主要看产品定位和功能，而不仅仅是设计风格。毋庸置疑，headline可以让页首有更多的空格空，更透气。非常适合产品结构浅、功能单一、重量轻的应用，也就是我们常说的“小而美”。人人都是产品经理平台，在这方面做得不错。

标题导航栏的容器高度为192px，字体大小通常设置在56px~64px范围内(网格要求，作者常用)。页面向上滑动后，会恢复到88px的正常高度，标题字号也会减小。

3.主页面导航栏中的图标是多样化的，左边是常用定位、品牌logo、抽屉菜单入口，右边是搜索、消息、扫一扫等等。

二级及以后页面的导航图标相对固定，左侧必须有一个“返回”图标才能返回上一级页面，可以是左剪贴、下剪贴、关闭按钮等。需要注意的是，无论设计什么风格，都需要满足“回退”风格的预期，以保证用户不会感到困惑。功能图标，如二级功能扩展、信息提交、删除等。，一般都放在右侧，最多不超过两个操作入口，避免功能层次混淆。

4.按钮导航栏的左侧已经被“返回”图标占据，按钮只能放在右侧，而且大部分是文字按钮，主要用来承载页面的辅助操作和功能入口。

当有足够的垂直空用于导航时，还可以使用圆形、方形、圆角矩形等容器按钮。你需要通过按钮的形状、大小、填充、笔画等样式来确定页面中的视觉权重，灵活区分主次层次关系。好的导航按钮总能吸引用户的注意力。

5.搜索框当搜索功能的权重较高，图标和按钮已经不能满足用户的频繁搜索需求时，就会以输入框的形式占据导航条的大部分区域，这样既能突出搜索功能，向用户推荐搜索内容标签，又能提高产品的可操作性。随着搜索框区域的扩大，用户无需精准点击，触手可及。

对于内容较多的主页，导航栏需要承载很多信息，如标题、分类、头像、按钮等。，可以适时增加导航栏的高度，搜索框显示在第二行，可以避免过度弱化搜索框对用户的操作影响，比如JD.COM、淘宝等电商应用。如果想节省页面整体的垂直空空间，有条件的话可以在页面滑动后降低导航栏的高度，只显示搜索框，比如美团外卖。

6.用户头像很多社交产品都会把用户的头像信息放在导航栏的左右两侧，方便随时调用用户相关的功能。比如点击进入个人设置、个人信息展示、会员中心、个人主页等。

7.标签/分类导航栏的分类菜单包括分段控件和标签导航。分段控件通常包含2~4个标签，可以直接点击切换内容，不支持左右滑动。标签导航相对灵活，非常适合分类多的内容。左右滑动即可查看所有分类，实现更便捷的导航。

8.更多菜单上述标签是产品内容的分类，但这里更多的是指产品和系统的辅助功能。

当页面的某些功能操作比较频繁或者与当前页面信息有关联，但是不方便直接显示入口，或者导航条不够携带空时，将功能放在更多的菜单中，既可以适当的为用户提供操作入口，又可以满足产品多方面的隐藏需求。

9.分割线分割线不仅仅是一条线，它可以是一条线，一个平面，也可以是一个投影，用来将导航栏与内容区域的一条边界线分隔开来，让用户通过视觉上的遮挡来感知内容区域，避免页面上下滑动后重复扫描顶部位置。

分割线是为了体现导航栏和内容界面的层次关系。视觉划分的缺失，可能会让用户觉得是一个层次，会增加感知的难度。当然，并不是所有的应用或界面都需要视觉分割，比如界面内容很少，界面背景颜色与导航栏容器明显不同，图片/卡片很多…

三、导航栏风格分类1。通用样式最常见的样式，95%以上的二级及后续界面使用通用导航栏，一些相对简单的主页也会使用这种类型。以iOS的2折镜像为例。容器的高度固定在88px，基本由按钮和标题组成，背景色多为白色或主色。

2.头条在iOS11系统发布后，头条导航栏逐渐流行起来。标题一般只出现在主页面(底部标签功能分类)，基本规格在上面有详细描述。

头条导航条会给人空的感觉，整体风格倾向于简单朴素，不适合电子商务应用。由于其大空，适合新闻资讯、社交、工具、功能单一等应用。

3.搜索框类型根据搜索功能的权重，在常规导航条上增加一个搜索框来代替标题显示。由于空的限制，搜索框的高度一般设置在56px~64px，宽度取决于其他功能图标的数量。如果图标很多，搜索框可以放在第二行。

如无特殊需要，尽量将搜索框整体居中，使两边距离相等或两边图标数量相同，以提高视觉美感。

4.选项卡导航有两种选项卡栏:分段控制和多选项卡导航。您需要清楚地突出显示选定的选项卡。以上有详细的规格说明，暂时不赘述。

5.横幅导航条横幅导航可以是以上任何一种类型，唯一的区别就是视觉层没有容器(或者0%不透明度)。在初始状态下，可以与背景/图片融为一体，对节省页眉空和渲染气氛有很大的作用，也可以减少导航栏与内容区的分离感，这在电商应用中很常见。

在页面上滑动直到背景消失后，会逐渐恢复正常风格。要特别注意背景颜色和导航栏中元素的对比(比如图标是深色的，背景必须是浅色的)。如果背景不可控，建议在导航栏下加一个黑色透明渐变蒙版，保证证件信息的可识别性。

6.无论是哪个平台的小程序，我们都可以理解为一个嵌入式的“子”app，它的导航栏右上角有一部分是“父”APP原生功能，不可修改。这是一个硬性规定。另外，至于放什么元素，用什么类型，可以随意发挥。

四、内容区域的交互众所周知，导航栏的主要作用是方便用户随时进行某些功能的上一步或下一步操作，帮助用户不至于迷路。但有时候，导航条也能帮助用户快速完成任务，以及交互后的内容管理和信息层级重新划分。

1. 导航栏中的按钮点击交互

当用户与导航栏中的文本/图标按钮进行交互时，无需离开该页面即可管理内容并给出即时反馈，如添加、删除和共享操作，帮助用户快速完成任务。

2.界面向上滑动，导航栏内容减少。随着界面的向上滑动，标题或具有搜索功能、占据两行的大导航条会恢复正常大小，信息的数量和层次会重新划分，通过削弱导航条的吸引力来减少对用户的干扰。

3.界面向上滑动，导航栏内容增加。界面向上滑动后，原来常规样式的导航条会自动增加信息内容。比如美团外卖，第一屏滑动到一半的时候，特色标签和筛选条目就被悬浮到导航栏上，目的是帮助用户快速决策。

4.导航栏和内容区的信息划分，大多是直接用分隔线来划分的。但是，为了保持界面的整洁，减少无关信息的干扰，在一些产品中，导航栏和内容区的元素相隔很远，没有任何交互，利用空之间的空白自动形成视觉上的划分。滚动交互后空格不可控时，会在导航栏下方添加投影、分隔线或毛玻璃效果，进行视觉分割。

动词 （verb的缩写）导航栏的相似/不同之处1。同一个应用中的相似性同一个应用中导航条的高度、位置和一些属性需要统一，这也是格式塔心理学中对UI设计的“一致性”的刚性要求。即使是标题样式，底部标签栏对应的页面导航栏(主要结构和功能)也会遵循一致性要求。当然，也排除了一些只在首页设置标题样式的应用。

顾名思义，导航栏也需要有导航的功能。每当用户抬头(扫一眼导航栏)，就能清楚地知道自己目前所处的位置，这主要是从标题中获得的(后面会有带标题设计的单独文章)信息。如果当前页面没有标题，用户需要从页面顶部一些突出的关键信息中获取。一旦页面滑动到覆盖关键信息位置，就需要呈现标题来引导用户，避免用户产生疑虑。

2.这里不同平台的差异主要是指iOS和Android两大系统。在比例和宽度相同的前提下，Android(MD设计规范)系统标题左对齐，容器高度高于iOSiOS系统一般只在标题样式上把标题靠左对齐。

此外，Android一般会在容器底部增加一个投影，以区分导航栏和内容区的划分；除了上面(2-9)中提到的分割元素，iOS还可以使用高斯模糊和不透明度来区分毛玻璃效果的味道。

六、结语

导航栏几乎是每个界面都必须存在的控件。虽然常用，但并不是每个设计师都能设计好，需要在基本设计规范和功能的基础上，赋予其更大的产品价值。“如果逃不掉，那就静下心来享受吧。”既然导航栏不能轻易删除，那么设计好它可能会带来意想不到的好处。

以上内容是笔者使用多个app后的经验总结。让我们从更全面的角度来看导航栏在不同页面和应用中的使用和设计细节，以及不同场景下的交互变化，让信息更高效，用户使用更方便。

本文希望能帮助你看到设计导航栏时可能被忽略的一些问题。每一次总结和梳理，都是知识和能量的升华。我的拙见和表达当然不是完美的。欢迎大家交流思想，互相碰撞。

#专栏作家#

沙漠之鹰；微信官方账号:能量眼，人人都是产品经理专栏作家。致力于产品需求驱动，产品体验挖掘，用设计手段给受众带来更好的体验，即好看又好用。

本文由人人作为产品经理原创发布，未经允许禁止转载。

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