导航系统栏草图解（帮你多方位掌控导航系统栏结构设计习题）不间断蔬果，

发布时间：2025-10-28 01:06:10 来源：明白了当网 作者：时尚

编辑编者按：APP的导航导航顶端导航控制系统栏是UI内部结构设计中不可或缺的重要共同组成部份，它子集了采用者常见或所收的系统系统许多机能，提示采用者展开操作方式，栏草栏结因此搞好导航控制系统栏的图解题采用者新体验是十分重要的责任编辑作者对导航控制系统栏的内部结构设计艺术风格、共同组成内部结构、帮多式样、掌控可视化等方面展开了归纳，构设一起来看一下吧。计习间断

APP的顶端导航控制系统栏（以下简称“导航控制系统栏”）对我们来说再熟悉不过了，它是导航导航UI内部结构设计中不可或缺的重要共同组成部份，基本上每两个网页单厢采用到尽管看起来很简单，系统系统感觉不须要花费多少精力，栏草栏结但内部结构设计两个与产品市场需求、图解题采用者目标匹配度较高的帮多导航控制系统栏并非那么容易，这里面有许多须要注意的掌控内部结构设计细节。

导航控制系统栏子集了采用者常见或所收许多机能，F83E43Se率极高，当采用者在展开部份路径操作方式时，导航控制系统栏就像黑暗中的一盏“暮鼓晨钟”，提示着采用者进入下一步棋或返回上一步棋操作方式，因此搞好采用者新体验是十分重要的我们每天都在跟导航控制系统栏关系密切，如果通过观察就会发现，不同应用领域的顶端导航控制系统栏都多多少少的存有许多差异，为了让我们对导航控制系统栏有两个更清晰、全面的认识，责任编辑将对导航控制系统栏的内部结构设计艺术风格、共同组成内部结构、式样、可视化等多方面做出归纳，希望能试试我们，一起来看看吧。

一、导航控制系统栏基本介绍1. 导航控制系统栏在哪里？在UI内部结构设计模块中，如条码栏、EditGrid、Tab栏、应用领域栏、CSS2、导航控制系统栏……等诸多类别和用法中，有许多后辈内部结构雕塑家难以区分这些重F83E43Se法以及对应的Noyant导航控制系统栏位于应用领域程序的顶端，即输入框下方，主要用于明确网页位置、层次等，并且连接着父/子级内部结构网页，权重应高于现阶段网页的所有文本。

如果采用者不知道现阶段具体位置、如何返回上一步棋的时候，就说明导航控制系统栏一定存有问题尽管在iOS控制系统中叫做「导航控制系统栏」、Android控制系统叫「顶端应用领域栏」，用法不一，但具体位置以及起著的促进作用基本上一致

2. 导航控制系统栏能起著什么促进作用？首先，导航控制系统栏能告知采用者现阶段具体位置，并提供更多返回上一步棋或部份下一步棋操作方式出口处，不至于让采用者感到恐惧；其次，以顶端Tab的方式将现阶段网页文本作出整理分类，并将各类别出口处裂解在导航控制系统栏，给采用者提供更多全局操作方式；最后，还能减少国际品牌曝光，比如罐子国际品牌色、工具栏国际品牌色等，甚至在有必要的情况下放置国际品牌LOGO。

3. 为什么有的是网页没有导航控制系统栏？当控制系统想要给采用者提供更多更多信息或采用者须要沉浸式的采用新体验，此时控制系统须要淡化、暗藏导航控制系统栏来释放更多的网页内部空间，以供减少单屏网页数据量的内部空间资源留出比如在线上读书、地图导航控制系统过程中，控制系统会将导航控制系统栏展开暗藏，因为此时采用者的着眼点只会长时间停留在文本本身，没有频繁的操作方式市场需求，暗藏导航控制系统栏既能留出内部空间，还能减少无关元素对采用者的干扰；。

采用滴滴出行在选择服务车型时，会暂时暗藏导航控制系统栏的背景罐子，只保留了相关工具栏操作方式出口处，尽管没有全部暗藏，但对本就不宽裕的地图内部空间能起著一定的缓解促进作用，相比上述处在导航控制系统过程中，现下场景的操作方式市场需求、频率显然要高出许多。

二、导航控制系统栏的内部结构共同组成常见的导航控制系统栏分为左、中、右内部结构，主要由返回按钮（左）、标题（中）、辅助操作方式按钮（右）三部份元素共同组成，这也是基于我们最常见、常见的布局方式在实际应用领域中，为了满足多元化的产品市场需求及采用者目标，根据不同的场景，导航控制系统栏的布局方式也十分多，不管式样多么复杂，这也仅仅是站在内部结构设计角度，其目的还是为了让采用者操作方式起来更简单、便捷。

下面以iOS的2倍图为例对导航控制系统栏展开一一拆解，看看我们所见过形形色色的导航控制系统栏到底会用到哪些元素、模块

1. 罐子即导航控制系统栏的范围约束罐子，所有元素都应该在罐子里面在iOS控制系统应用领域中，常规导航控制系统栏的固定高度为88px，即便在大标题导航控制系统式样下，不管现阶段的高度是多少，随着界面的滚动，随后也会转换为88px的常规高度，比如iPhone界面、产品经理应用领域等。

另外，部份应用领域为了释放更多界面内部空间，从表面上看不到罐子的存有，实际是将罐子的不透明度调整为0，逻辑上罐子是依然存有的，且各元素依然受到罐子的约束，比如滴滴打车界面。

2. 标题标题用于描述采用者现阶段具体位置或网页的具体所在场景，在iPhone全面屏出现之前，因设备屏幕内部空间有限，大部份采用常规标题，即34px~40px（栅格所需、笔者常见36px）加粗且居中标题文字当全面屏设备逐渐普及后，屏幕的高度得到了进一步棋扩展，导航控制系统栏的可发挥内部空间必然减少，大标题艺术风格开始兴起，随后也被引入了内部结构设计平台规范。

大标题导航控制系统栏主要取决于产品定位与机能影响，并不单单是内部结构设计艺术风格的问题，毫无疑问，大标题能让网页头部有更多的留白内部空间，呼吸感更强，十分适合产品内部结构不深、机能单一且体量级别较轻的应用领域，也就是我们常说的「小而美」，人人都是产品经理平台在这方面做的相当出色。

大标题导航控制系统栏的罐子高度为192px，字号通常设定在56px~68px（栅格所需、笔者常见64px）的范围，网页上滑后，会恢复到88px的常规高度，标题字号也随之减小。

3. 工具栏主网页导航控制系统栏中的工具栏比较多元化，比如左侧常见的定位、国际品牌logo、抽屉菜单出口处等，右侧比如搜索、消息、扫一扫、更多……二级及以后的网页导航控制系统工具栏相对固定，左侧必定有两个返返回上级网页的“回退”工具栏，可以是向左剪头、向下剪头、关闭按钮等。

须要注意的是，不管内部结构设计什么式样，都须要符合“回退”式样预期，确保采用者不会产生疑惑右侧一般放置机能工具栏，如次级机能延展、信息提交、删除等，最多不超过两个操作方式出口处，避免造成机能层次混乱

4. 按钮导航控制系统栏的左侧已被「返回」工具栏占领，按钮基本只能放在右侧，且以文字按钮式样居多，主要用于承载网页的辅助操作方式、机能出口处当导航控制系统有足够的纵向内部空间时，也可采用如圆形、方形、圆角矩形类别的罐子按钮，需通过按钮的形状、大小、填充、描边等式样来确定在网页中的视觉权重，灵活区分主次层次关系，好的导航控制系统按钮总能抓住采用者的注意力。

5. 搜索框当搜索机能权重较高，用工具栏、按钮作为出口处已不能满足采用者频繁的搜索市场需求时，就会以输入框的方式占据导航控制系统栏大部份区域，不仅能突出搜索机能、向采用者推荐搜索文本条码，还能提升产品的可操作方式性，随着搜索框区域的扩大，采用者无需精准点击，触手可及。

对于文本较多的首页，导航控制系统栏须要承载如标题、分类、头像、按钮等诸多信息，这是可适时减少导航控制系统栏的高度，搜索框放在第二行展示，可避免过度淡化搜索框给采用者带来操作方式上的影响，比如京东、淘宝等电商类别的应用领域如果想节省网页整体纵向内部空间，若条件允许，可在网页上滑后缩小导航控制系统栏高度，只显示搜索框，比如美团外卖。

6. 采用者头像许多社交类产品，会在导航控制系统栏的左、右侧放置采用者的头像信息，方便随时调用与采用者相关的机能。比如点击后进入个人设置、个人信息展示、会员中心、个人主页等。

7. 条码/分类导航控制系统栏的分类菜单包括分段控件和条码导航控制系统，分段控件通常包含2~4个条码，直接点击展开文本切换，不支持左右滑动；条码导航控制系统则相对灵活，很适合分类较多的文本，可通过左右滑动来查看所有分类，实现更方便的导航控制系统。

8. 更多菜单上述提到的条码是对产品文本的分类，而这里更多指的是产品、控制系统的辅助机能当网页的某些机能操作方式频率较高或与现阶段网页信息相关联但不方便直接展示出口处、也可能因导航控制系统栏剩余内部空间不足以承载时，将机能放置在更多菜单中，既能适当的给采用者提供更多操作方式出口处，也能满足产品多方面的隐性市场需求。

9. 分割线分隔线并不仅仅是一条线，它可以是线、面或投影，用于分隔导航控制系统栏与文本区域的两个边界线，通过视觉阻断的方式让采用者感知文本区域，避免在网页产生上下滑动可视化后重复扫视顶端位置分割线是为了体现导航控制系统栏与文本界面的层次关系，缺少视觉分割可能会让采用者感觉它们是两个平级，会减少感知难度。

当然，并不是所有的是应用领域或界面都须要视觉分割，比如：界面文本极少、界面背景色与导航控制系统栏罐子背景色值有明显差异、多图/多卡片……

三、导航控制系统栏式样分类1. 常规式样最常见的式样，95%以上的2级及后续界面采用的都是常规导航控制系统栏，部份较为简单的主页也会采用这种类别以iOS的2倍图为例，罐子高度固定在88px，基本只有按钮、标题共同组成，背景色多为白色或主体色。

2. 大标题在iOS11控制系统发布之后，大标题导航控制系统栏逐渐流行大标题一般只出现在主网页（底部条码机能分类），至于基础规范上述有详细说明大标题导航控制系统栏会给人一种高逼格、通透的内部空间感，整体艺术风格偏向简约大气，并不适合电商类别应用领域，因所占内部空间较大，适合用在如新闻资讯、社交、工具型且机能较为单一的应用领域。

3. 搜索框类别根据搜索机能的权重，在常规导航控制系统栏中添加两个搜索框并替代标题展示因内部空间限制，搜索框高度一般设置在56px~64px，宽度随其他机能工具栏的多少而定，若工具栏较多，可将搜索框放在第二行如无特别须要，尽量将搜索框整体居中，让两侧的间距相等或两侧工具栏数量相同，以提升视觉美观度。

4. Tab导航控制系统Tab栏有分段控件和多条码导航控制系统两种，需明确突出已选中的条码即可，上述有详细规范说明，暂不做赘述。

5. 通栏导航控制系统栏通栏导航控制系统可以是上述类别中的任何一种，唯一不同的是在视觉层没有罐子（或不透明度0%）的存有在初始化状态下，它可以与背景/图片融为一体，对节省头部内部空间、渲染氛围起著很大的促进作用，同时也能减少导航控制系统栏与文本区域的割裂感，电商类应用领域中很常见。

在网页上滑至背景消失后，会逐渐恢复至常规式样尤其要注意背景色与导航控制系统栏中元素的色彩明暗对比（比如工具栏深色、背景就必须浅色），如若背景不可控，建议在导航控制系统栏下方减少两个黑色透明渐变蒙层，以确保证信息的可识别性。

6. 小程序不管是哪个平台的小程序，我们都可以理解为内嵌的“子级”APP，其导航控制系统栏右上角一部份区域为“父级”APP原生机能，是无法作出任何修改的，这是硬性规则除此之外，至于放什么元素、用什么类别可随意发挥。

四、文本区域的可视化关联众所周知，导航控制系统栏最主要的促进作用是方便采用者随时展开上一步棋或部份机能的下一步棋操作方式，帮助采用者不迷路，但有时候，导航控制系统栏还能协助采用者快速完成任务，以及可视化后的文本管理、信息层次重新划分等1. 导航控制系统栏中的按钮点击可视化。

当采用者与导航控制系统栏中的文字/工具栏按钮产生可视化时，不用离开此网页就对文本展开管理并能即时反馈，比如减少、删除、分享等操作方式，协助采用者快速完成任务。

2. 界面上滑，导航控制系统栏文本减少随着界面的向上滑动，大标题、或带搜索机能且占据两行的大尺寸导航控制系统栏将恢复至常规尺寸，信息的数量、层次也将重新划分，以淡化导航控制系统栏吸引力的方式，减少对采用者的干扰。

3. 界面上滑，导航控制系统栏文本减少界面产生上滑可视化后，原本常规式样的导航控制系统栏会自动减少信息文本。比如美团外卖，首屏上滑至一半时，将特色条码及筛选出口处悬浮至导航控制系统栏，目的是为了帮助采用者快速做出决策。

4. 导航控制系统栏与文本区域的信息分割大多数用分隔线直接分割，但部份产品为了保持界面的干净整洁、减少无关信息的干扰，在无任何可视化产生的情况下，导航控制系统栏与文本区域的元素间隔较远，利用内部空间留白自动形成视觉分割，当产生滚动可视化后，留白不可控，就会在导航控制系统栏下方减少投影、分隔线或毛玻璃效果，展开视觉分割。

五、导航控制系统栏的相同点/不同点1. 同一应用领域中的相同点导航控制系统栏在同两个应用领域中的高度、位置及其部份属性需具备统一性，这也是格式塔心理学中的「一致性」对UI内部结构设计的硬性要求即便是大标题式样，那么底部条码栏（主内部结构、机能）所对应网页的导航控制系统栏也会遵循一致性要求。

当然，部份只在首页设定大标题式样的应用领域除外

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

2. 不同平台中的差异这里主要指的是iOS、Android两大控制系统，在同等比例、同宽度前提下，Android（MD内部结构设计规范）控制系统的标题为左对齐，且罐子高度比iOS要高；iOS控制系统一般只会在大标题式样下让标题左对齐。

另外，Android一般会在罐子底部减少投影，以区分导航控制系统栏与文本区域的分割；iOS除上述（2-9）提到的分割元素外，还可以采用高斯模糊且带不透明度的方式来区分，毛玻璃效果的味道六、结语导航控制系统栏基本上是每个界面必定存有的控件，尽管常见，但并不是每个内部结构雕塑家都能将其内部结构设计的优秀，须要在基础内部结构设计规范、促进作用之上，赋予其更大的产品价值。

“如果逃不掉，那就静下心来享受”，导航控制系统栏既然不能轻易删减，那么就把它内部结构设计好，或许还能带来意想不到的好处以上文本子集了笔者采用众多APP后以及根据工作中的经验归纳，让我们从更全面的角度来看待导航控制系统栏在不同网页、不同应用领域中的采用方式和内部结构设计细节，以及不同场景下的可视化变化，让信息变得更高效，采用者采用起来更便捷。

本篇文章希望能帮我们看到在内部结构设计导航控制系统栏的时可能忽略的许多问题每次的归纳梳理，都是一次知识、能量的升华，个人拙见及表达方式固然不能尽善尽美，欢迎一起交流、展开思维碰撞#专栏作家#大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。

致力于产品市场需求的驱动、产品新体验的挖掘，利用内部结构设计的手段为受众采用者带来更好的新体验，即好看、好用责任编辑原创发布于人人都是产品经理，未经许可，禁止转载。题图来自 Unsplash，基于 CC0 协议。

相关文章