深聊Material Design引领的设计趋势(转载)

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

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

一、纸的形态模拟

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

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

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

二、转场动画

过去我们的页面只有X与Y轴,打开一个新的页面则是生硬地直接跳转到新的页面,并没有点出页面的空间层级关系。而iOS7与Material则强调Z轴,即页面之间的空间层级关系。iOS里打开一个app,页面将从你点击的app图标为中心点扩散出来,同样的设计在Android上也随处可见。通过转场动画告诉我们,这个页面从哪里来,到哪里去,在整个APP或者系统里的空间位置是什么。另外,不仅仅是页面层级的动画过渡,对象操作也伴随着动画过渡,从动画里能感受到操作的过程变化。例如删除时,垃圾桶图标会有一个倾倒的动画,或者通过指示条的旋转告诉你删除的过程。另一方面,过渡动画赋予了界面控件一种物理特性,在空间被拉伸、回弹时模仿了橡皮筋的物理特性。值得一提的是,在转场动画的设计上,Facebooke Paper的非常突出。

Facebooke Paper 在动画方面细节特棒,右戳学习:《最近这个超火!23个FACEBOOK PAPER中的设计细节》

三、icon动画

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

四、大面积色块Action bar

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

五、FAB 按钮(Fixed Action Button)

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

六、无边框按钮

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

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

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

七、聚焦大图

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 随着虚拟仿真技术不断进步,应用虚拟仿真技术开展实验教学成为实验教学领域的热点话题。大量科技公司纷纷布局虚拟仿真教育...
    吴小丢阅读 3,978评论 0 5
  • A公司讨论一宣传广告,大家各抒己见,大多数人发言关注的是广告设计的有没有创意,画面是不是清晰有美感,文字是不是优...
    将心独韵阅读 619评论 0 0
  • 最近一段本应该闲散惬意的时光,却被扰的不堪烦扰。 清晨总是被那阳台传来哗啦啦的水声,清脆的摔盆声,低声细语的讨论所...
    雪千重阅读 531评论 0 0
  • 早加餐:棉花糖午加餐:棒子,三文鱼饭团 参考目标: 1份肉2份豆制品3份“新鲜”水果4份谷物/薯5份蔬菜,深绿色叶...
    静趣_儿童心理师阅读 518评论 0 0