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设计规范及注意事项有哪些?上⾯已经为⼤家做了详细的介绍，没想到⼀个⼩⼩的导航栏就有这么多要注意的地⽅，可想⽽知掌握好导航栏的设计技巧对⼀名设计师来说尤为重要!
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论