聊聊Material Design

Material Design是Google在2014年发布的Android设计规范,并且仍在不断更新完善。Google希望能创建出一套创新的设计语言,构建跨平台和超越设备尺寸的统一体验。

如今Material Design 已经推出快两年了,但国内市场上却很少有app完完全全遵循Material Design,就连微信的安卓客户端也是直接挪用iOS设计。关于Material Design的是是非非,最近看了很多资料,结合自己的体验,总结一下。

一、FAB-- 好 VS 坏?


 

FAB(Floating Action Button)无疑是很多人首先要讨论的热点。我记得去年实习的时候,正值Material Design之风盛行。很多app的主界面上都出现了一个非常惹眼的圆溜溜的按钮。因为其显眼的颜色和位置,FAB非常显眼。当时我认为,在一些UGC导向的产品上,FAB可以诱导用户主动去编辑、发送,丰富整个产品的内容。但细细研究,发现FAB并不总是那么一回事。比如说,当用户不发送内容而是浏览内容的时候,FAB会挡住用户的视线,不利于营造沉浸式的体验;有些app实际上并不需要FAB,因为用户场景中不存在一个使用率很高的按钮,需要把它单独拿出来。

Google也在文档中规定了FAB的使用场景和禁忌:

(1)不是每个屏幕都需要浮动操作按钮。一个浮动操作按钮能够代表这个 App 中的主要操作;

(2)一个屏幕只推荐使用一个浮动操作按钮来增加其显著性。它应该只代表最常见的操作;

(3)避免用浮动操作按钮进行下面这些轻微破坏性操作:

  • 存档或删除
  • 非特异性操作
  • 警报或错误
  • 限制性任务如剪切文本
  • 控制应放在一个工具栏中,如音量控制或改变字体颜色

(4)避免用浮动操作按钮进行下面这些轻微破坏性操作:

  • 存档或删除
  • 非特异性操作
  • 警报或错误
  • 限制性任务如剪切文本
  • 控制应放在一个工具栏中,如音量控制或改变字体颜色

(5)对于带有标签的屏幕,浮动操作按钮不应朝着屏幕退出时的同一方向退出屏幕。否则会导致视觉噪音。这也将导致在屏幕上出现一个失灵的浮动操作按钮。此外,它错误地暗示了浮动操作(按钮与内容在相同的 Z 水平高度上,而不是在根水平高度中 UI 主元素所在的水平高度上;

(6)浮动操作按钮可在按下时或从滚动工具栏转换为工具栏。工具栏可以包含相关的操作、文本和搜索方面功能,或者任何手边有用的部件。但注意工具栏不能包括不相干或混淆不清的操作。

在知乎也有关于FAB的讨论>>>传送门

关于FAB大家褒贬不一,总的来说,FAB是UI上一个创新的点,是基于“Material”概念的一个特性,FAB好不好,取决于我们怎么运用。至少,我打开手机里的日历时,FAB还是让我方便很多。

二、材料设计 VS 扁平化设计?


 

说到Material Design,就不得不提起扁平化设计。

扁平化设计和Material Design一样追求简洁体验,相对于拟物化设计,扁平化设计去除了阴影、材质效果和渐变,只保留最基础的色彩和形状,使用户注意力更集中。

扁平化设计是专门服务数字媒体领域的系列方式其中之一,这种方式利用互联网独特资源,考虑用户需求,提升用户效率,制造出用色明确,辨识度高,造型简单的图标或其他元素。

有时候我在想,扁平化设计是不是在这个浮躁喧嚣快节奏的社会时代下的产物?快节奏意味着用户没有那么多时间去寻找目标,也没有那么多时间去品味UI细节;扁平化设计中活泼鲜艳的色彩以及简洁的造型让忙碌的人们看着心情愉悦...(不小心离题了

另外,扁平化设计很少动画效果,从而能缩短网页加载时间,减少用户的等待,流畅体验度MAX。

而Material Design的材料设计则在扁平化的设计中引入了Z轴的概念,强调纸片的层次性,并且也引入了很多转场动画,将物理世界中的交互带到虚拟世界中。相对于扁平化设计,Material Design和用户有更多的交互。当然与此同时的代价是加载时间的延长。


 

三、Material Design VS iOS?

最后谈谈Material Design 和 iOS。实际上无法比较这两者孰优孰劣,萝卜青菜各有所爱。

与Material Design 相比,iOS并不强调元素的层次性,没有那么多层次。iOS通过半透明玻璃来解决层叠问题,在Material Design中则是通过Z轴来表现的。iOS更倾向于扁平化。


Material Design 


 iOS

在配色方面,Material Design 推崇醒目、高饱和度的颜色,特别是对比度高的配色组合,就像热带非洲的美女,经常运用在FAB或者经常操作的按钮上;而iOS则旨在让用户看起来舒服温馨,在颜色上并没有明确的要求,但不使用补色的配色方案。
在交互动画上,Material Design运用了包括很多,包括转场动画、水波反馈等等,而iOS只运用少量动画,旨在指导用户完成操作达到目的。

淡化(Fade)、推挤(MoveIn)、揭开(Push)、覆盖(Reveal),结合进出的方向(上下左右),就构成了iOS最常用的过渡动画。

就个人而言,我还是比较喜欢iOS设计的:P


关于Material Design就先聊到这儿吧,只是稍微作了一些总结,小白经验还是有限,以后有收获就继续补充,欢迎指正。

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

推荐阅读更多精彩内容