在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
导航栏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行业如何突破UI设计师的未来出路在哪里?
UI行业未来发展如何?对于相关从业者如何突破,UI设计师的未来处理在哪里?一系列的问题都是作为新入行的小白或者刚刚走入工作岗位的初级设计师经常考虑的问题。从传统企业的平面设计师到互联网时代的网站设计师,再到移动互联网时代的UI设计师,设计一直都是非常重要的岗位,未来不管人工智能时代还是区块链时代,设计师的岗位必然是无法被替代的。
6618
2019-06-21 17:45:17
作为新手应该怎么学习UI?
互联网的快速发展,为社会创造了大量的高薪岗位,其中UI设计作为互联网产品重要的环节成为大量优秀毕业生向往的岗位。那作为一个新手应该怎么学习UI呢?
5333
2019-10-15 18:36:21
参加UI设计培训需要花费多少钱?
参加UI设计培训需要花费多少钱,因为影响因素很多,价格不尽相同,大家在选择培训机构的时候一定要仔细甄别认真选择。随着UI设计行业的兴起,很多人都想转行投身去学习UI设计。这时就会有很多人关心UI设计培训费用的问题。要选择什么样的培训机构去学习呢?
4490
2020-06-10 14:33:23
产品设计三大变化趋势浅析
随着近几年,移动交互和硬件技术的发展,产品设计也在发生着悄然的改变。可能不知不觉,我们手机里的许多app界面就已经被改的面目全非了。了解并掌握当下的设计趋势,无疑对我们的设计工作有着极大的帮助。本文将浅析一下产品设计的三大变化趋势,分别是界面漂白、线条消失以及对底部空间的利用。
5369
2020-07-07 14:41:45
在设计中如何做好竞品分析?
经常在项目工作中我们会遇见和产品的争执,为什么这个功能需要这么设计?这个功能有没有其他的方式去设计?或者产品经理觉得你的设计不好看,颜色不好看等等问题,都是因为设计之前你没有做好竞品分析,那么在中如何做好竞品分析呢?下面我们来一步步分析。
3972
2020-07-20 12:16:17