导航栏UI设计说明和注意事项有哪些
新闻来源：优漫教育
日期：2021-09-29
导航条UI设计说明和注意事项有哪些？该设计不仅突出产品主题，而且引导用户行为，例如标题，在内容非常丰富的深层层次结构中，大标题可以帮助用户快速确定他们的位置。导航条是每个界面中必然存在的控件，不能轻易删去就必须使用它，否则很容易沦为网页的减分项目。
设计一个导航条不只是视觉上的工作，表现方式.携带按钮和组件.滚动屏幕时的组合操作也可以为用户带来巨大的体验提升。下面小编带您一起学习导航条UI设计说明和注意事项：
一、导航条的位置。
导航条NavigationBar，也缩写为Navbar。还有很多刚刚入门的UI新成员，在众多Bar控件中，很难分辨出其指向的区域。
在iOS中，导航条指的是出现在应用程序顶部、状态栏下面、且级别应该高于当前页面内容的容器区域。对于Android,google在MaterialDesign中也给出了相同的定义，但给了它另外一个名字：“TopAppBar”。
导航条是构架当前屏幕上所用的内容，描述当前屏幕的状态，同时作为父子级别的页面层次结构。许多人想知道，为什么标签栏不能称为底标导航？由于Tabbar是在多个屏幕间平面页面上进行的内容切换，与导航的定义无关。
二、导航栏UI设计规格说明及工程应用。
基础导航栏容器通常可以包含以下信息：标题；导航按钮；内容控制按钮；其他控件(如搜索栏.页面标签或页面控制等)；千万不要忘记还有分割线。
1.导航栏标题设计说明。
在2017年之前的移动端规范下，导航条仍然是单一的，风格单一。但是，当iPhoneX等一系列全面屏手机相继推出之后，屏幕高度的移动设备得到了进一步的扩展，界面设计在一屏中的发挥空间也随之增大。在iOS11发布之后，出现了大标题导航条设计风格，随后介绍了平台规范。
所以，现在iOS和MaterialDesign在导航条上都定义了两个导航条的标题规范：普通标题和大标题。
一般的标题是指在高度88px(iOS 2x下)的导航容器中，将当前页面的标题放在中间。字体大小通常是34px-38px(34px是iOS标准规范)，但是在实际项目中，可根据设计需要，尽可能在不小于34px的条件下确定。
较大的标题是将导航栏高增加到192px(iOS 2x)，保持高度为88px的导航容器来承载内容控制按钮，将标题下方置于左边。iOS的标准规范将大标题定义为68px。但是，由于英文具有大小写差异，在视觉上有一定的层次性，而中文因缺乏一定的层次性，同字号的中文视觉尺寸要比英文大，因此多数情况下我们在大标题设计时，会适当缩小，通常是56px-64px。
大头导航条的优势无可争议，页面留白较多，唿吸感较强，大气现代.由于页头庞大，能帮助用户快速确定当前所在位置；采用统一的大标题，使页面布局风格快速统一。但是缺点也很明显，由于增加导航条的高度，导致屏幕利用率下降，有些通过广告变现或更注重一屏内内容显示的应用则消除了常规导航与大标题导航的优缺点，进行了风格改进。
2.导航按钮和内容控制按钮的设计说明。
iOS规定导航按钮的位置只能用来放置返回按钮，这样就可以增加层次的面包屑来帮助用户有效地确定当前的页面层次；这样的回车按钮不仅可以放置，还有其他功能，菜单图标-用来打开抽屉或关闭图标-关闭工具栏。
iOS对工具条的定义有很大的不同，它给工具条下了定义，把导航条和工具条(Toolbars)完全分开，典型的例子是Safari。iOS与MaterialDesign在内容控件上也有很大不同，MaterialDesign并没有限制您的内容控制，因为它提供了一个溢出菜单，并且可以根据屏幕宽度的变化自适应释放和接收溢出菜单中的控件。
而且iOS要求我们给予内容控制按钮足够的空间，如果需要的话，最好还是在需要时隐藏导航条标题。在实际项目中，我们常常为了快速落地，会出现一稿多配双平台的情况。在这个时候，我们应该遵循哪个平台的规范？回答是：很多大工厂的做法都得到了证实，规范没有分离。
“溢出菜单”在iOS上很早就流行起来了，虽然它是MaterialDesign提出的设计概念。尽管国内开发MaterialDesign的Android应用程序设计还比较少见，但是它所提供的设计理念和方案却不仅仅限于Android平台。
3.分割线设计规范。
分界线只是一种表现形式，我想说的是，不要忘了区分导航条和内容界面之间的视觉层次。MatetialDesign提醒我们，顶部的应用栏和内容可能会处于相同的高度，但是如果滚动，你可以增加导航条的视觉高度，让内容在它后面滚动。iOS在默认情况下使用背景模煳来区分导航条和内容区域之间的层次关系。
4.其它管制。
对于其它控件，iOS仅在说明中提到了页面控制。Apple设计师认为，目前网页的部分场景也有信息层次的划分，推荐的时候可以在导航条中使用分段控制。
由于导航栏级别总是比内容栏级别高，所以国内的应用很久都是这样，所以我们通常会在导航条上放置分段控制，分页标签.搜索栏等工具，用户可以随时使用。
导航条是用来构架当前屏幕上的内容，阐述当前屏幕的状态，并作为父子级别的页面层次结构，在页面中扮演重要角色，设计一个导航条不只是视觉上的工作，表现方式.携带按钮和组件.滚动屏幕时的组合操作，也可以为用户带来极大的体验提升。所以把握好导航条的设计技巧对于一个设计师来说尤其重要！
