谷歌的全新产品概念

在今年的谷歌I/O开发者大会上,谷歌设计部门副总裁马蒂亚斯·杜阿尔特(Matthias Duarte)向全球开发者展示了其全新的设计语言Material Design。这种设计在Android 5.0中首次亮相。首批搭载Lollipop的设备是Nexus 6智能手机和Nexus 9平板电脑,它们于上月初亮相,这预示着材料时代的正式到来。

“物质”的中文翻译是“物质”,代表物质的组成。如果放在手机系统设计中,这个词很容易让人联想到手机系统的界面风格设计,比如模仿、扁平化风格。但是,这一次,谷歌的材质设计并不是系统界面设计风格。材料设计其实就是一种简单的设计语言,包括系统界面风格、交互、UI等。另外,对于谷歌来说,材料设计有一个非常伟大的使命,就是创造一种跨所有设备的统一设计语言,比如手机、桌面、可穿戴设备等。今天就请跟随这个小编的脚步,来看看Google Material design这个全新的设计理念。

系统界面风格

“有特色、生动、有思想”,这几个字是Material design的界面风格设计最贴切的词。材质设计为Android提供了新的视觉语言。在基本元素的处理上,借鉴了传统的印刷设计、字体布局、网格体系、空间、比例、色彩搭配、图像运用等。在这些设计的基础上,我们可以构建视觉层次、视觉意义和视觉焦点。精心选择颜色、图像、比例字体和空格,努力构建生动形象的用户界面,让新的系统界面如此美丽。

在色彩的选择上,材料设计的原则是“大胆、图形、有意义”。在材质设计上,UI配色提倡一个主色,一个补色。在面积较大的部分,颜色是主色的500个色调,在面积较小的部分,比如状态栏,颜色较深。如此巧妙的配色让应用看起来非常大胆,色彩感十足,突出内容。

材料设计非常重视界面的布局。众所周知,好的排版会让界面看起来非常清爽,不会有杂乱感。要做好排版工作,“基线”绝对必不可少。谷歌的官方文件《材料设计排版边距》提到了基线的放置。从下图中我们可以看到,Material Design将第一条基线放置在距离16dp的位置,第二条基线与距离左边界72dp的文本项对齐。这种对齐规则让界面看起来很清爽,有印刷设计的阅读节奏感。它可以让用户快速阅读信息,更符合格式塔原理。

总体来说,材质设计给Android带来了一场改革,系统的界面风格和布局都有了很大的改变,Android系统本身的风格也逐渐显现出来。最后,有人会说安卓原生系统丑。

愉快的交互设计

材料设计的交互设计采用响应式交互,可以将一个应用从简单的显示用户请求的信息升级为一个可以更强烈、更具体的与用户进行交互的工具。接下来我们选择几个简单的动态图来看看材料设计独特的交互设计。

上面两张图显示的是响应式交互中的表面响应。当用户点击屏幕时,系统会立即在交互的触点上绘制一个可视化图形,供用户感知。比如上图,当用户点击屏幕,使用麦克风,或者用键盘输入时,就会出现类似墨水扩散的视觉效果形状。

上面两张图中显示的响应交互中的点击-浮动交互表明,当卡片元素或可分离元素被激活时,它应该浮动以指示它处于激活状态。

练习笔记

从上面的介绍来看,材质设计看起来非常漂亮。接下来我们来看一个基于材料设计的app——inbox。它完全展示了材料的设计。充满层次,大胆的颜色和直观的动画。