你不可不知的谷歌设计理念:Material Design
2016-09-23 16:52:35   审核人:   (阅读)

昨晚我们的独家图文《高颜值超酷炫的网上办事大厅,复旦竟然已经实现了!》一经推送,在圈内即刻引爆:一场关于校园信息化建设“看脸”的热议,聚焦复旦Ehall基于谷歌Material Design“高颜值的界面设计”。

其实,谷歌的Material Design并不是一种系统界面设计风格,而是单纯一种设计语言,它包含了系统界面风格、交互、UI等。Material Design还有着非常伟大的使命,那就是打造一个横跨所有设备的统一的设计语言,像是手机、桌面端、可穿戴设备等。那么Google Material Design这套设计思想的内涵如何,有什么精髓,今天大家不妨follow我们院长 Dr.Wise的脚步,来深入了解。在开始介绍Material Design之前,我们先来看一段有关Material Design的介绍视频。

2014年的谷歌I/O开发者大会上,谷歌设计部门副总裁马提亚斯·杜亚特向世界各地的开发者们展示了其全新的设计语言MaterialDesign

1、系统界面风格

鲜明、形象、深思熟虑MaterialDesign此次的界面风格设计用这几个词语来形容是再合适不过了。Material Design提供了新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计、字体版式、网格系统、空间、比例、配色、图像使用。在这些设计基础上下功夫,从而能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,使得新的系统界面是如此的漂亮。

http://yjy.wisedu.com/__local/E/EB/B2/E56BF899FDB061036F9A6E303A1_DDC89161_13F3F.png

而在色彩的选择上Material Design的原则是大胆、图形化、有意义。在Material Design中,UI配色提倡一种主色,一种互补色。在区域较大部分的色彩采用主色的500色调,区域较小的部分例如状态栏采用深一点的色调。如此巧妙的色彩搭配使得应用看起来非常的大胆、充满色彩感,凸显内容。

http://yjy.wisedu.com/__local/D/27/25/8BB1D653D64E833029E1B444F4E_A0FF3C4C_127B1.png

http://yjy.wisedu.com/__local/E/2B/A4/72145828B8CD2AF516258DF6F0E_CDD4E09E_65E3D.png

Material Design对于界面的排版非常的重视。众所周知,好的排版会让界面看起来非常的清爽,不会有杂乱无章的感觉,而要将排版做好,基线绝对是必不可少的一样东西。谷歌官方文档《Material Design排版边距》中就有提到基线的摆放位置,由下图中我们可以看出,MaterialDesign将第一基线放在距离边界16dp的地方,与文本项对齐的第二基线被摆放到距离左边界72dp的地方,这种对齐规则让界面看起来清爽、具有印刷 设计的阅读节奏感。让用户得以快速阅读信息,比较符合格式塔原则。

http://yjy.wisedu.com/__local/8/CA/0B/5C98D87A0722FDFDC3D3CD0CD55_F8129432_84F15.png

整体来说,Material Design为安卓带来一次改革,系统的界面风格和布局都有了很大的改变,安卓系统自身的风格也渐渐显露雏形。终于不会在有人说安卓原生系统难看了。

2、令人愉悦的交互设计

Material Design的交互设计上采用的是响应式交互,这样的交互设计能把一个应用从简单展现用户所请求的信息,提升至能与用户产生更强烈、更具体化交互的工具。接下来我们选择几个简单的动态图,来看下Material Design独特的交互设计。

http://yjy.wisedu.com/__local/0/D8/4D/04034ED8D6D4800FDA804C5EA5F_3552855A_6081.png

http://yjy.wisedu.com/__local/7/B5/A7/66121AF0CD0AF40168C679B2C8C_E565813C_12EEB.png

以上两张图展现的是响应式交互中的表层响应,当用户点击屏幕时系统会立即在交互的触点上绘制出一个可视化的图形让用户感知到,比如在上图中,当用户点击屏幕时、使用麦克风时,或者键盘输入时,会出现类似于墨水扩散那样的视觉效果形状。上图展现的响应式交互中的点击浮动交互,可以看到当卡片元素或可分离元素被激活时,应该浮起以表明正处于激活状态。

3、实践说明

从上面的介绍来看Material Design看起来非常的美好,接下来我们就来看看一款基于Material Design设计的APP-Inbox。它完全展示出了Material的设计。充满各种图层、大胆的色彩和直观的动画。

http://yjy.wisedu.com/__local/B/FC/D4/D762099AF3ECBBD60B82F78FA3B_5C2393E8_1F11D.png

从图中看出Inbox的整体界面设计的十分漂亮,动画感很强,层级与层级之间设计的非常巧妙,并且大胆的配色也使的该APP看起来很有活力,标准的Material Design式排版也使得APP中的内容得以凸显。而卡片式的主界面风格也使得我们能一眼看出,这是一款基于MaterialDesign设计出的软件。

总结:

对于安卓来说Material Design的出现具有划时代的意义,同时它也向那些各种各样不同设计的应用程序和毫无美感可言的Launcher发出了一条信号:我们的设计不比苹果差多少,采用Material设计的APP将更具有美感。当然要使得Material设计完全渗透到谷歌的生态系统中可能还需要很长的时间,不过既然谷歌敢跨出这一步,这就意味着谷歌开始对安卓这个开放系统进行约束,安卓碎片化现象将得以缓解,未来的安卓将是Material design的世界。

关闭窗口
版权所有:© 武汉体育学院 地址:湖北省武汉市洪山区珞喻路461号 邮政编码(P.C):430079
E-mail:Webmaster@whsu.edu.cn 鄂ICP备05003338