火星网校
学会设计优质导航栏，畅享APP使用乐趣
发布时间：2024-06-25 19:16:25 浏览量：215次
APP的顶部导航栏对我们来说再熟悉不过了，它是UI设计中必不可少的组成部分，几乎每一个页面都会使用到。虽然看起来很简单，感觉不需要花费多少精力，但设计一个与产品需求、用户目标匹配度较高的导航栏并非那么容易，这里面有很多需要注意的设计细节。
导航栏集合了用户常用或必用一些功能，复用率极高，当用户在进行部分路径操作时，导航栏就像黑暗中的一盏“明灯”，指引着用户进入下一步或回到上一步操作，所以做好用户体验是非常重要的。
我们每天都在跟导航栏打交道，不同应用的顶部导航栏都或多或少的存在一些差异，为了让大家对导航栏有一个更清晰、全面的认识，本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结，希望能帮到大家，一起来看看吧。
一、导航栏基本介绍
1. 导航栏在哪里？
导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面位置、层级等，并且连接着父/子级结构页面，权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候，就说明导航栏一定存在问题。
2. 导航栏能起到什么作用？
首先，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，以顶部Tab的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，给用户提供全局操作；最后，还能增加品牌曝光，例如容器品牌色、图标品牌色等。
3. 为什么有的页面没有导航栏？
当系统想要给用户提供更多信息或用户需要沉浸式的使用体验，这时系统需要弱化、隐藏导航栏来释放更多的页面空间，以备增加单屏页面信息量的空间资源预留。
二、导航栏的结构组成
常见的导航栏分为左、中、右结构，主要由返回按钮（左）、标题（中）、辅助操作按钮（右）三部分元素组成，这也是基于大家最常用、常见的布局方式。
1. 容器
即导航栏的范围约束容器，所有元素都应该在容器里面。在iOS系统应用中，常规导航栏的固定高度为88px，即便在大标题导航样式下，不管当前的高度是多少，随着界面的滚动，随后也会转换为88px的常规高度。
2. 标题
标题用于描述用户当前所在位置或页面的具体所在场景，在iPhone全面屏出现之前，因设备屏幕空间有限，大部分使用常规标题，即34px~40px（栅格所需、常用36px）加粗且居中标题文字。
3. 图标
主页面导航栏中的图标比较多元化，例如左侧常见的定位、品牌logo、抽屉菜单入口等，右侧例如搜索、消息、扫一扫、更多…
4. 按钮
导航栏的左侧已被「返回」图标占领，按钮基本只能放在右侧，且以文字按钮样式居多，主要用于承载页面的辅助操作、功能入口。
5. 搜索框
当搜索功能权重较高，用图标、按钮作为入口已不能满足用户频繁的搜索需求时，就会以输入框的方式占据导航栏大部分区域。
6. 用户头像
很多社交类产品，会在导航栏的左、右侧放置用户的头像信息，方便随时调用与用户相关的功能。
7. 标签/分类
导航栏的分类菜单包括分段控件和标签导航，分段控件通常包含2~4个标签，直接点击进行内容切换。
8. 更多菜单
当页面的某些功能操作频率较高或与当前页面信息相关联但不方便直接展示入口时，将功能放置在更多菜单中。
9. 分割线
分隔线用于分隔导航栏与内容区域的一个边界线，通过视觉阻断的方式让用户感知内容区域。
三、导航栏样式分类
1. 常规样式
最常见的样式，95%以上的2级及后续界面使用的都是常规导航栏，部分较为简单的主页也会使用这种类型。
2. 大标题
在iOS11系统发布之后，大标题导航栏逐渐流行。大标题一般只出现在主页面，至于基础规范上述有详细说明。
3. 搜索框类型
根据搜索功能的权重，在常规导航栏中添加一个搜索框并替代标题展示。如无特别需要，尽量将搜索框整体居中。
4. Tab导航
Tab栏有分段控件和多标签导航两种，需明确突出已选中的标签即可。
5. 通栏导航栏
通栏导航可以是上述类型中的任何一种，区别在于在视觉层没有容器的存在。
6. 小程序
不管是哪个平台的小程序，其导航栏右上角一部分区域为“父级”APP原生功能，是无法作出任何修改的，这是硬性规则。
四、内容区域的交互关联
1. 导航栏中的按钮点击交互
当用户与导航栏中的文字/图标按钮产生交互时，能帮助用户快速完成任务。
2. 界面上滑，导航栏内容减少
随着界面的向上滑动，大标题、或带搜索功能且占据两行的大尺寸导航栏将恢复至常规尺寸。
3. 界面上滑，导航栏内容增加
界面产生上滑交互后，原本常规样式的导航栏会自动增加信息内容。
4. 导航栏与内容区域的信息分割
大多数用分隔线直接分割，但部分产品为了保持界面的干净整洁，在无任何交互产生的情况下，导航栏与内容区域的元素间隔来进行视觉分割。
五、导航栏的相同点/不同点
1. 同一应用中的相同点
导航栏在同一个应用中的高度、位置及其部分属性需具备统一性，这也是格式塔心理学中的「一致性」对UI设计的硬性要求。
2. 不同平台中的差异
Android和iOS系统的导航栏在同等比例、同宽度前提下，显示风格会有一些差异，例如标题对齐及容器底部投影。
结语
导航栏是每个界面必定存在的控件，设计优质的导航栏能提升用户体验，让用户使用APP更加便捷舒适。要赋予导航栏更大的产品价值，需要在设计规范、用户需求的基础上进行设计，或许能带来意想不到的好处。
以上内容介绍了导航栏的设计要点及注意事项，希望对大家有所帮助。如果还有其他想了解的内容，可以点击我们的官网了解更多，欢迎交流讨论。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
6. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
