福建11选5

HI,下午好,欢迎来到微信公众号转让!
公众号转让,微信公众号交易平台,公众号出售购买卖价格 24小时服务热线: 4000-163-301

福建11选5动态

NEWS CENTER

如何让导航栏成为加分项?

2020-01-07

福建11选5 讲一个老东家的故事。

福建11选5 一次产品迭代会上,老板在台上讲到打算重构C端产品框架,想重整标签栏的标签设定。可在讲到这一部分的时候卡壳了,迟迟说不出“标签栏”这个控件名,气氛有那么一丁点尴尬。

福建11选5 这时,在座的一名产品经理慷慨解囊地说:底部导航栏!

福建11选5 嗯,不全错,这么说也算能理解。控件在界面底部,能引导用户切换页面。

福建11选5 但如果标签栏把导航栏的名字占了……那原本的导航栏应该叫什么呢?顶部标题栏?

那导航栏里的内容控件又应该叫什么?左上角或者右上角的按钮?

接地气的名称让我们一听就懂,直到有一天你打算跳槽,你拿着自己的作品到下家面试,设计总监几个术语啪啪把你问得不知所云。

福建11选5 这些“死控件”、“死栏目”在页面上不可或缺,在设计每一个页面时,你以为你对它们早已了如指掌,偏偏在关键时刻,它们却六亲不认了(说多了都是泪,我曾经面试也吃过专业名词的亏,以后有机会再聊)。

福建11选5 “我又不走形式主义,为什么一定要说专用名词装x呢?接地气的名称不是挺好吗,沟通高效。”

福建11选5 很简单的道理,如果名词和概念都混淆不清,有没有花功夫在UI设计领域进行深度专研也就一目了然了,还何以谈论如何将它们运用自如呢?

“你连迪丽热妈和古力娜扎都没分清,你敢说你知道什么是真皮沙发?”

福建11选5 我的经历,让我产生了一个想法,是时候做一些知识内容沉淀与分享了,不能让更多的人走我踩过的坑,我们便来讲一讲导航栏。

一、导航栏究竟在哪里

导航栏 Navigation Bar,也简称为Navbar。一定会有不少刚入门的UI新人,在诸多的Bar控件中,难以区分它所指代的区域。

在iOS上,导航栏是指显示在应用程序顶部,位于状态栏下方的容器区域,层级应高于当前页面内容。

在安卓上,Google福建11选5在Material Design中也赋予了它同样的定义,但是却给了它另一个名称,顶部应用栏(Top App Bar)。


请务必要记住:

导航栏是用于构架当前屏幕的内容,阐述当前屏幕的状态,并且起到连接父子级页面层次结构的作用。

所以,回到开头的小故事,为什么标签栏不能叫做底部导航。因为标签栏是构架了多个屏幕之间平级页面的内容切换,和“导航”的定义没有半毛钱关系。

二、规范里告诉我们该怎么做 VS 实际项目我们该怎么做

一个基本的导航栏容器一般承载的信息可能会有:标题;导航按钮;内容控件按钮;其他控件(比如搜索栏、分页标签或分页控件等);分割线(比如微信导航栏)。

2.1 导航栏标题

时间退回2017年以前,这时候的移动端规范下的导航栏还是循规蹈矩的,样式单一。但随着iPhone X等一系列全面屏手机相继问世后,移动设备在屏幕高度上有了进一步的扩展,界面设计在一屏内的发挥空间也随之增加。iOS11福建11选5后,大标题导航栏设计风格兴起,随后被引入平台规范。

于是,现在iOS与Material Design在导航栏上也都定义了两种导航栏标题规范:常规标题与大标题。

福建11选5 常规标题是指在高度为88px(iOS@2x下)的导航容器中,居中放置一个当前页面的标题。标题字号一般为34px-38px(34px为iOS标准规范,但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定)。


大标题是将导航栏栏高增加到192px(iOS@2x),保留高度为88px的导航容器来承载内容控件按钮,将标题下坠居左。

iOS的标准规范定义大标题的字号为68px,但由于英文有大小写区分,在视觉上有一定的层次表现。而中文因为缺少一定的层次结构,并且相同字号的中文视觉大小大于英文;所以,大多数时候我们在进行大标题设计时,会适当缩小,一般为56px-64px居多。


大标题导航栏的优点毋庸置疑,页面留白更多,呼吸感更强,大气现代、逼格更高。因为页面标题巨大,能够帮助用户快速确认当前所处位置。采用统一的大标题,让页面布局风格快速统一。

但缺点也显而易见,因为增加了导航栏的高度,导致屏幕利用率降低。一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点,进行了风格改进。


那我们如何在常规标题和大标题之间抉择呢?

福建11选5 这可不单单是设计风格的问题,还受产品定位与功能的影响。

苹果的设计师在Apple Music中实验并验证了一条结论——在内容非常丰富、层级结构较深的产品当中,大标题能够帮用户快速确认自己的位置。

福建11选5 所以,我认为适合使用大标题风格的产品一定是突出内容呈现而不是功能繁琐,产品定位更偏向于现代或文艺艺术,需要快速统一界面风格。至于层级结构需不需要很深,这并不一定;我反而觉得功能越单一、产品体量级越轻的应用,越适合大标题。