UI培训分享：导航栏UI设计规范及注意事项有哪些?
UI设计学习起来要注意的东西还是有很多的，例如导航栏，导航栏UI设计规范及注意事项有哪些呢?今天小编为大家详细的介绍一下关于导航栏的设计注意事项，希望能够帮助到今后工作的你。
UI培训分享：导航栏UI设计规范及注意事项有哪些?设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。
一、导航栏位置
导航栏 Navigation Bar，也简称为Navbar。有不少刚入门的UI新人在诸多的Bar控件中，难以区分它所指代的区域。
在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。在安卓上，Google公司在Material Design中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏( Top App Bar)。
导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。很多人疑惑，为什么标签栏不能叫做底部导航?因为标签栏是构架了多个屏幕之间平级页面的内容切换，和导航的定义没有任何关联。
二、导航栏UI设计规范与实际项目的应用
基本的导航栏容器一般承载的信息可能会有：标题;导航按钮;内容控件按钮;其他控件(比如搜索栏、分页标签或分页控件等);千万别忘了还有分割线。
1、导航栏标题设计规范
2017年以前的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着iPhone X等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范。
于是现在iOS与Material Design在导航栏上也都定义了两种导航栏标题规范：常规标题与大标题。
常规标题是指在高度为88px(iOS@2x下)的导航容器中，居中放置一个当前页面的标题。标题字号一般为34px-38px(34px为iOS标准规范，但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定)。
大标题是将导航栏栏高增加到192px(iOS@2x)，保留高度为88px的导航容器来承载内容控件按钮，将标题下坠居左。iOS的标准规范定义大标题的字号为68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为56px-64px居多。
大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、逼格更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置;采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。
2、导航按钮及内容控件按钮设计规范
iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级;Material Design中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉 或者 关闭图标-关闭工具栏。
与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏(Toolbars)彻底地分离开，典型案例就是Safari。在内容控件上iOS与Material Design也大相径庭，Material Design不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。
而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。真实的项目中我们经常为了快速落地，会存在一稿适配双平台的情况。这时候我们应该遵从哪一个平台的规范呢?答案是：许多大厂的做法已经向我们验证，规范不分家。
在iOS诸多的应用中溢出菜单早已普及，尽管这是Material Design提出的设计理念。虽然国内遵从Material Design进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。
3、分割线设计规范
分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。Matetial Design提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而iOS则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。
4、其他控件
关于其他控件，iOS只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。
国内的应用程序早已将导航栏容器的作用发挥到极致，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。
导航栏用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用，在一个页面发挥着重要作用，设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。
导航栏UI设计规范及注意事项有哪些?上面已经为大家做了详细的介绍，没想到一个小小的导航栏就有这么多要注意的地方，可想而知掌握好导航栏的设计技巧对一名设计师来说尤为重要!
相关文章：
【青少年编程】【四级】绘图程序优化
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 微信后台回复“资料下载”可获取以往学习的材料（视频、代码、文档&…
分布式文件系统（FastDFS）安装 配置
[TOC] 百度百科： FastDFS是一个开源的轻量级分布式文件系统，它对文件进行管理，功能包括：文件存储、文件同步、文件访问（文件上传、文件下载）等，解决了大容量存储和负载均衡的问题。特别适合以文…
javaWeb -- HTTP协议
笔记摘要： 作为web开发的前奏，这里介绍了什么是HTTP协议，HTTP请求与HTTP响应信息的介绍 一、什么是HTTP协议 客户端连上web服务器后，若想获得web服务器中的某个web资源，需遵守一定的通讯格式，HTTP协议用于定…
Python培训：Python有哪些函数?你了解几种?
本期小编要为大家带来的Python教程就是关于Python函数这方面的，我们都知道Python函数，一般是指组织好的、可重复使用的、用来实现单一或相关联功能的代码段，Python函数包含系统中自带的一些函数、第三方函数以及用户自定义的函数。那么Python…
BZOJ2331：[SCOI2011]地板——题解
http://www.lydsy.com/JudgeOnline/problem.php?id2331 题面复制于洛谷 题目描述 lxhgww的小名叫”小L“，这是因为他总是很喜欢L型的东西。小L家的客厅是一个R*C的矩形，现在他想用L型的地板来铺满整个客厅，客厅里有些位置有柱子，…
快速部署RDA Remote Diagnostic Agent
RDA Remote Diagnostic Agent远程诊断代理是Oracle Support售后服务使用的标准工具之一，当用户在Metalink上提交SR(TAR)时可能Oracle GCS(Global Customer Service)支持会需要让用户从MOS上下载RDA工具，通过RDA收集丰富的数据库环境信息(如包含OS、DB、C…
【青少年编程】【三级】计算成绩总和
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 微信后台回复“资料下载”可获取以往学习的材料（视频、代码、文档&…
哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题，因为互联网对于很多人来说是非常具有诱惑力的，前端便是其中的一种互联网技术，那么针对这个问题，我们来看看下面的详细介绍吧。 哪些人适合学web前端培训呢?首先什么是前端呢?…
ASM丢失disk header导致ORA-15032、ORA-15040、ORA-15042 Diskgroup无法mount
ASM丢失disk header导致ORA-15032、ORA-15040、ORA-15042 Diskgroup无法mount的案例不少，这里我们介绍下如何解决。 SQL> select * from v$version; BANNER -------------------------------------------------------------------------------- Oracle Databas…
jQuery学习(第一天)
js的回顾 遇到的问题1.window.onload只能使用一个(事件覆盖问题) 2.代码的容错性不强 3.浏览器兼容性问题 4.代码量较多,书写很繁琐 5.代码很乱到处都是 6.动画效果我们很难实现 jQuery的基本使用 image.pngmin：它是压缩过的版本 区别：我们开发过程中&am…
【组队学习】曹志宾：基于Python的会员数据化运营
分享人：曹志宾，Datawhale成员，香港科技大学硕士在读 分享内容： 案例描述与分析前期准备与数据预处理RFM模型使用与操作Excel中的RFM分析 组队学习： 红星：基于Python的会员数据化运营孙健坤：…
为什么要参加java培训?有哪些优势?
很多人都想要通过学习java技术进入到互联网行业，有一部分人是自学，有一部分是报Java培训班学习，报培训班的人比较多，那么为什么要参加java培训?有哪些优势?来看看下面的详细介绍。 为什么要参加java培训?有哪些优势?俗话说&am…
一、javaSE （二十三）多线程
1:多线程(理 (1)多线程:一个应用程序有多条执行路径 进程: 正在执行的应用程序 线程: 进程的执行单元,执行路径 单线程: 一个应用程序只有一条执行路径 多线程: 一个应用程序有多条执行路径 多进程的意义? 提高CpU的使用率 多线程的意义? 提高应用程序的使用案 (2)Java程序的…
【青少年编程】【二级】绘制图形
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 微信后台回复“资料下载”可获取以往学习的材料（视频、代码、文档&…
web前端培训分享：面向对象中类和对象的定义是什么?
在学习web前端技术的时候，我们接触的最多的便是面向对象这一块，其实很多编程技术都有用到这个现象，下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享：面向对象中类和对象的定义是什么?面向对象让…
无法嵌入互操作类型...请改用适用的接口 解决办法
http://blog.163.com/quan2006126/blog/static/1702286352010101810324232/背景：visual studio 2010、“添加引用”时出错： “无法嵌入互操作类型...请改用适用的接口” 解决方案： 选中项目中引入的dll， 鼠标右键， 选择…
宁彦吉：如何进行作业的评审？
如何进行作业的评审 由于 我们的组队学习是开放的，大家都可以一起学习，一起来做航海士，宁彦吉 把作业评选的教程总结出来，这样方便后面的航海士熟悉 任成森 开发的系统。 一、登录 1、登录流程 打开浏览器输入作业评审中心地址…
算法 - 时间复杂度
O(1) 常数阶 #include <stdio.h> #include <string.h>int main( ) {int i,sum 0,n 100000000000;sum (1 n) * (n /2);printf("%d",sum);return 0; }执行次数不随n的变化而变化。 O(n) 线性阶 #include <stdio.h> #include <string.h>int …
access百度翻译 get_百度AI攻略：智能上色
1.功能描述：想必大家家里都有很多黑白的老照片，里面有着满满的回忆。百度智能识别黑白图像内容并填充色彩，使黑白图像变得鲜活，让老照片重新焕发活力。说干就干，攻略和代码奉上。2.平台接入黑白图像上色接入网址&#…
sql语句中left join和inner join中的on与where的区别分析
原文:sql语句中left join和inner join中的on与where的区别分析关于SQL SERVER的表联接查询INNER JOIN 、LEFT JOIN和RIGHT JOIN，经常会用到ON和WHERE的条件查询，以前用的时候有时是凭感觉的，总是没有搞清楚，今日亲自测试了下&…
linux 笔记 一
查看apache是否开启pidof httpdps -aux | grep httpdps -ef| grep httpdpgrep httpd开启[停止|重启]/usr/sbin/apachectl start[stop|restart]/etc/init.d/httpd start[stop|restart]service httpd start[stop|restart]开机启动在/etc/rc.d/rc.local中增加启动apache的命令&…
【青少年编程】【三级】躲避恐龙
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100，小马老…
小数加分数怎样计算讲解_2020人教版三年级下册数学知识点汇总带视频讲解，让孩子在学习！...
小学生延期开学，孩子功课不能落下啊！帝源教育网课推出1-6年级语文数学英语教材同步讲解视频，让孩子在假期也能提早预习课文知识！手机用户访问：m.46344.com 即可观看学习哦！随着疫情的蔓延，学校…
JUnit基础及第一个单元测试实例（JUnit3.8）
JUnit基础及第一个单元测试实例（JUnit3.8） 单元测试 单元测试（unit testing） ，是指对软件中的最小可测试单元进行检查和验证。 单元测试不是为了证明您是对的，而是为了证明您没有错误。 单元测试主要是用来…
Scratch青少年编程能力等级测试模拟题（三级）
青少年编程竞赛交流群已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 微信后台回复“资料下载”可获取以往学习的材料（视频、代码、文档&…
Qt 程序在 Windows 下的发布
「博客搬家」 原地址: CSDN 原发表时间: 2016-06-04本文讨论在 Windows 平台下编译成功的 Qt 程序，如何在未配置 Qt 开发环境的 Windows 平台下独立运行的方法。 经过验证发现，在 Ubuntu 平台下编译成功的程序可在未安装 Qt 开发环境下的 Ubuntu16.04 中…
楷书书法规则_硬笔书法入门学习“三步法”，让练字不再难
生活中，常常有人肯于吃苦,坚持经常练习硬笔书法，但却进步不大，收获甚微。因此，凡有志学好硬笔书法的人，必须掌握一些学习硬笔书法的方法。硬笔书法学习的方法可以采用“三步法”。一、规范入门硬笔一般比较短小灵硬&am…
系统异常设计规范与原则
为什么80%的码农都做不了架构师？>>> 1.系统异常设计的出发点： 良好的异常信息展示，开发运维人员能快速定位问题。响应外部调用异常时，应能明确指明是内部异常还是调用条件不满足导至。响应用户操作异常时，…
陈长沙：学习者参考手册
学习者参考手册 组队学习的核心是“和一群有意思的人在一起学感兴趣的知识的过程，这个过程充满了人与人之间的交流互动，是融入社交属性和学习属性的过程”。作为参与组队学习活动的学习者，一定想了解有关该项活动的各种环节。于是࿰…
TC配置文件WCMD.INI详解，只能在ini重修改的配置
有*的项目扩展了功能，有★的项目是只能在INI中修改的配置。 ★Allowed 允许访问哪些驱动器（\代表网络邻居）。例如写为Allowedcde\，代表仅允许访问C、D、E和网络邻居，其余驱动器无法访问，也不会出现在驱动…