聊聊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就先聊到这儿吧,只是稍微作了一些总结,小白经验还是有限,以后有收获就继续补充,欢迎指正。