MaterialDesign引领的设计趋势

作者: 时间:2020-06-07M生活邦640人已围观

MaterialDesign引领的设计趋势

两个月前,Google I/O 大会发表了 Android L,并推出 Material Design,重新统一了 Google 的设计语言,确立了未来 Google 的设计方向。那幺,什幺是 Material Design?我简单地将它翻译成「本质设计」。顾名思义,这是一种考虑事物本质的设计,将电子萤幕里的 UI 元素看成是一种不存在于现实世界的新的材质,并赋予它物理特性。因此 Material Design 并不是去拟物化的设计。许多设计师把扁平化与拟物化对立起来,其实两者并不是对立关係。但我更愿意称 Google 新的设计语言为抽象化。

无论是苹果的设计语言,还是 Google 的设计语言,乃至于 Windows 的 Modern UI 和 Facebook 的 Paper 设计语言,大方向都是一致的,而在细节上却分道扬镳。苹果与 Google 几乎垄断了移动装置的作业系统,因此我们谈谈从新发布的 Material Design 中看看有哪些无线装置的设计趋势。

1. 纸的形态模拟

前言已提到 Material Design 并不是一种去拟物的设计,也不是一种强调拟物的设计。我们知道电子萤幕是完全平面化的,不像现实当中的物体是 3D 的 。一本书里每一页纸之间的空间关係是很清楚的,但电子萤幕的所以物体都在一个平面上。虽然电子萤幕没有空间感,但资讯内容是有空间层级的关係。而 Material Design 的解决方式就是把现实世界中纸张的特性挪到电子萤幕里,把资讯内容呈现在这个虚拟的纸上,纸跟纸之间有上下层级关係,用投影模拟纸张的空间感。Material Design 的投影并不是过去我们常用的使用图片或者样式程式实现的投影,而是系统根据纸张层级所在位置实时渲染的,投影会随着纸张的空间关係而改变大小。

Google 几年前推行的 Card 设计就是模拟纸张物理形态的一种设计方式,但 Material Design 把它提升到了系统资讯架构层面的高度。

另外,iOS 的模糊效果从本质上来说与 Material Design 的纸张设计要解决的问题是同样的。通过模拟景深的效果来表达内容资讯的层级关係。

MaterialDesign引领的设计趋势
MaterialDesign引领的设计趋势
2. 转场动画

过去我们的页面只有 X 与 Y 轴,打开一个新的页面则是生硬地直接跳转到新的页面,并没有点出页面的空间层级关係。而 iOS7 与 Material 则强调 Z 轴,即页面之间的空间层级关係。iOS 里打开一个 app,页面将从你点击的 app 图标为中心点扩散出来,同样的设计在 Android L 上也随处可见。通过转场动画告诉我们,这个页面从哪里来,到哪里去,在整个 APP 或者係统里的空间位置是什幺。

另外,不仅仅是页面层级的动画过渡,对像作业也伴随着动画过渡,从动画里能感受到作业的过程变化。例如删除时,垃圾桶图标会有一个倾倒的动画,或者通过指示条的旋转告诉你删除的过程。另一方面,过渡动画赋予了介面控件一种物理特性,在空间被拉伸、回弹时模仿了橡皮筋的物理特性。值得一提的是,在转场动画的设计上,Facebooke Paper 的非常突出。

MaterialDesign引领的设计趋势
MaterialDesign引领的设计趋势
3. ICON 动画

互动动画在一些 app 里已经大行其道,特别是 Facebook Paper 的动画让人印象深刻。在以后,互动动画将成为标配,随之而来,更多设计师把目标转移到 icon 上来。Icon 主要分为入口功能和作业功能,作业功能的 icon 在完成点击作业之后,通常会转为对应的另外一种形态。如「返回」与「菜单,」「选择」与「未选择」,「收藏」与「已收藏」「点赞」与「取消点赞」的状态之间切换。现在的设计里,icon 在两种状态之间的切换通常显得生硬,icon 动画将使得点击之后的回馈更佳强烈,并且让介面活起来,性感起来。

目前 HTML5 已经可以实现 icon 动画的绘製,原理是设计师提供 svg 格式的图标,有前端通过 html+css+js 绘製转场效果。svg 格式的图标,可以透过程式码控制图标的每一个节点,从而进行形状变形。

阿里巴巴 MUX 团队对外提供了 svg 格式图标的免费下载

MaterialDesign引领的设计趋势
4. 大面积色块 action bar

Material Design 设计语言让人眼前一亮的除了丰富的互动动画外,还有大面积使用了鲜豔的色块。过去的 Andr

oid 让人觉得冰冷科技感,让人有一种距离感。而新的设计採用了与过去相反的做法,在系统里大面积使用色块,用色块来突出主要内容和标题,让介面的主次感更佳突出,也让原本灰黑色为主的介面拥有了时尚和活力。色块的颜色选择多使用饱和度高、明度适中的颜色,整体拥有比较强烈的视觉冲击,但并不会太刺眼。Action bar 也同样从过去的灰黑颜色改为彩色,并且让状态栏与之融为一体,这点与 iOS7 的设计非常相似。

MaterialDesign引领的设计趋势
5.FAB 按钮

在 Google 的宣传片里,最引人注目的新玩意,就是这个淘气的圆形小按钮了。从宣传片里来看,这个按钮的功能并不局限于「新建」「播放」「收藏」「更多」等功能。它于整体介面的配色形成比较大的反差,因此会让这个按钮在介面里显得非常耀眼,从这样的设计来看,这个按钮所背负的任务将会是整个介面的主要作业。虽然有点类似与 Path 里的「+」按钮,但由于 iOS 系统本身并没有这样的设计,这将会成为最区别于 iOS 的一种互动设计,对互动设计师和产品经理来说都可能会成为一种挑战。

MaterialDesign引领的设计趋势
6. 无边框按钮

在 iOS7 的设计里,我们已经看到了这样的影子。最典型的便是「返回」按钮只有箭头和文案,去掉了原本的按钮质感。Material Design 的 action bar 也同样採用了这样的设计,直接用 icon 来表达按钮功能。尤其是 Material 的键盘设计风格,最早对键盘风格进行极简设计的是微软的 Windows Phone,Android 和 iOS 相继跟进。而这次 Material 走得更极端,把键盘的按钮边框全部去掉,只保留了英文字母的按钮。我们不能说这样的设计一定是好的,这样的设计可能让使用者对点击的精準度无法更快地判断,缺乏安全感。好处是在萤幕不大的手机上,去掉边框的拥挤感会给字母更大的空间。

另外,无边框按钮的设计也体现在提示框的按钮上。

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

MaterialDesign引领的设计趋势
7. 聚焦大图

一张与萤幕等宽,竖方向佔据半个萤幕左右的大图,去掉 action bar,只保留返回按钮的设计,在一两年前十分流行的 summly app 上就已经非常红了。后续也有一些 app 跟进这样的设计,但并没有大範围流行起来。Material Design 很大胆地使用了这样的设计。在 Google 的引导下,这样的设计风格将很有可能风靡起来。

MaterialDesign引领的设计趋势

相关文章