设置
  • 日夜间
    随系统
    浅色
    深色
  • 主题色

设计即功能:浅析谷歌Material Design特性

2016/11/27 17:31:35 来源:IT之家 作者:克里 责编:仲平

在2014年的Google I/O大会上,谷歌发布了Android L即Android 5.0,并推出Material Design,重新统一了谷歌的设计语言,确立了谷歌设计的未来发展方向。

Material Design字面之意为“材料设计”,但是IT之家更愿意将之翻译为“本质设计”,顾名思义,这是一种考虑事物本质的设计,将显示屏里的各种UI元素看成是一种不存在于现实世界的新的物质,并赋予它物理特性,因此Material Design并不是去拟物化的设计,可以称之为抽象化设计。

时至今日,Android系统已更迭到7.1版本,再提起Material Design似乎有些过时了,但是我们不妨重新温习一下这种设计语言,再回看谷歌利用这种设计理念所创造出的后代系统,似乎会品尝到不一样的滋味。

Material Design的特点主要体现在以下几个方面。

1、模拟纸的形态:交互更有空间感、层次感

我们都知道一本书里每一页纸之间在空间上是相互独立的,但显示屏上的所有内容都在一个平面上,虽然没有立体空间,但信息内容却是有空间层级的关系。

Material Design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系,将之具体化就是把纸张的特性挪到显示屏里,把信息内容呈现在虚拟的纸上,“纸”与“纸”之间有上下层级关系,用阴影模拟纸张的空间感,阴影会随着纸张的空间关系而改变大小

另外,iOS的UI模糊效果从本质上来说与Material Design的纸张设计是相类似的,通过模拟景深的效果来表达内容信息的层级关系。

2、字体:字重区分细致

Material Design所采用的字体有详细的笔画的粗细(字重)区分,英文字体名为Roboto,中文及日韩文名为Noto。

Roboto有6种字重:Thin、Light、Regular、Medium、Bold和Black。

Noto有7种字重:Thin, Light、DemiLight、Regular、Medium、Bold和Black。

3、大面积色块,大插图:视觉感和谐,冲击力强

过去的Android多采用灰色、黑色等深色系,让人有冰冷科技感,同时也容易产生一种距离感。而Material Design采用了与过去相反的做法,在系统里大面积地使用鲜艳的色块,用色块来突出主要内容和标题,让界面的主次感更佳突出,也让原本的界面拥有了时尚和活力。

色块的颜色选择多使用饱和度高、明度适中的颜色,整体拥有比较强烈的视觉冲击,但并不会太刺眼,Action Bar状态栏也同样从过去的灰黑颜色改为彩色,并且让状态栏与之融为一体,这点与iOS的设计非常相似。

Material Design常采用一张与屏幕等宽,纵向占据半个屏幕左右的大图,状态栏悬浮于图片之上,后续也有一些应用(例如淘宝)跟进这样的设计,但并没有大面积流行起来。

4、图标,FAB和无边框按钮:简洁直观

Material Design图标多采用简约的折纸效果,通过扁平色彩表现空间和光影。

小图标也仅通过单色点线或文字来表现。

在Material Design里,最引人注目的可能就是就是那个淘气的圆形小按钮——FAB(Fixed Action Button)按钮。

这个按钮的功能并不局限于“新建”“播放”“收藏”“更多”等功能,对于整体界面的配色形成比较大的反差,因此会让这个按钮在界面里显得非常耀眼。

从这样的设计来看,这个按钮所背负的任务将会是整个界面的主要操作,这是与iOS相比,区别最大的一种交互设计。

在iOS的设计里,我们已经看到了无边框按钮的影子,例如“返回”按钮只有箭头和文案,去掉了原本的按钮质感。尤其是Material Design的键盘的极端设计风格,直接把键盘的按钮边框全部去掉,只保留了英文字母的按钮。这样的设计可能让用户对点击的精准度无法更快地判断,但是在屏幕较小的手机上,去掉边框会给字母更大的空间,方便了操作。

无边框按钮的设计也体现在提示框的按钮上。如何让无边框的按钮区别于内容文字,这需要设计师除了考虑配色外,还需要考虑按钮出现的场景,对设计师的在应用场景的解读上也是一个挑战。

5、转场和图标动画:动作丰富,动感十足

过去我们的页面只有X与Y轴,打开一个新的页面则是生硬地直接跳转到新的页面,并没有点出页面的空间层级关系。

而Material Design则强调Z轴,即页面之间的空间层级关系,通过转场动画告诉我们,这个页面从哪里来,到哪里去,在整个APP或者系统里的空间位置是什么。

另外,不仅仅是页面层级的动画过渡,对象操作也伴随着动画过渡,从动画里能感受到操作的过程变化。过渡动画赋予了界面控件一种物理特性,在空间被拉伸、回弹时模仿了橡皮筋的物理特性。

在完成点击操作之后,图标通常会转为对应的另外一种形态,如“返回”与“菜单,”“选择”与“未选择”,“收藏”与“已收藏”“点赞”与“取消点赞”的状态之间切换。

图标动画将使得点击之后的反馈更佳强烈,并且让界面活起来,动感起来。

从Android 5.0 Lollipop“棒棒糖”到Android 7.0 Nougat“牛轧糖”,Material Design设计语言已迭代三年。由于其开源的特性,Android系统升级率与升级速度已被iOS远远的甩在后面,Material Design也因此遭受连累,采用了这种设计语言的应用少之又少。

国外应用在经历了多个版本的更新升级之后才完成了Material Design化,而国内厂商永远将“交互体验”和“好看”排在商业利益之后,再加上各种服务都需要科学上网,国内很难找到完全符合Material Design的应用。

谷歌在Android 7.0强化了AOSP项目的系统升级服务后,可以绕过厂商直接对设备进行系统版本升级,这一举措可以间接推动应用的Material Design化。在未来,Android的系统UI或许真正能迎来大一统的那一天。

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,IT之家所有文章均包含本声明。

相关文章

软媒旗下网站: IT之家 辣品 - 超值导购,优惠券 最会买 - 返利返现优惠券 iPhone之家 Win7之家 Win10之家 Win11之家

软媒旗下软件: 魔方 酷点桌面 Win7优化大师 Win10优化大师 软媒手机APP应用