天下网吧 >> 网吧系统 >> 系统动态 >> 正文

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

2016-11-27不详佚名

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

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

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

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

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

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

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

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

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

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

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

2、字体:字重区分细致

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文来源:不详 作者:佚名

相关文章
没有相关文章
声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。若文章侵犯了您的相关权益,请及时与我们联系,我们会及时处理,感谢您对本站的支持!联系Email:support@txwb.com,系统开号,技术支持,服务联系QQ:1175525021本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧·网吧天下