Material Design比扁平化设计更先进?

2015-10-01 23:23

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

注:本文原载于 Medium ,作者 Meng To 是一名亚裔设计师兼程序员,现居旧金山。

 

当材质设计横空出世时,笔者被谷歌在设计领域花费的心力感动了,这以往是苹果一骑绝尘的领域。现在,一切改变了。我以往一直在抱怨 Android Design 的种种不足,例如朝令夕改,缺乏足够的则例,难看的黑色主题,对侧栏菜单的滥用。材质设计解决了大多数的问题。谷歌终于提供了一种更轻,更明亮,更丰富多彩并且有详细指导细则的设计语言。

 

漂亮的配色,卡片式设计带来十足的层次感与触感,我时常问我自己,材质设计真的比 iOS 的扁平化设计更好,更先进吗?我认为不是的。

 

与 iOS 的相似之处

 

让我们回顾一下 iOS 设计的三大原则:明确性,一致性,层次感。

 

明确性指的是文本的易读性。内容与控件之间应该有清晰的间隔及足够的差异。当我们谈论明确性的时候,应该考虑到具体平台的差异。一个控件可能对 iOS 用户而言是易于辨认的,但对安卓用户并非如此,反之亦然。

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

层次感是所有平台共同的设计原则,但达成的手段不一。iOS 系统通过毛玻璃特效及色彩的渐变突出层次感,而安卓则采用阴影及纸张的质感体现层次差异。

 

拟物化设计 2.0

 

一般来说,所有的设计都是从生活中取材。设计中的阴影,毛玻璃,过渡动画都遵循一定的物理特性及真实性。拟物化设计让普通用户也能轻松上手,但过度地描绘细节及立体感会起反效果。毕竟作为用户,我们对科技产品已经不再感到陌生,我们对皮制日历及黑胶唱片的熟悉程度甚至比不上数字版本。

 

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

对旧范式的模拟常常使人困惑,这种古老的皮制日历早已无人问津

 

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

所谓完美的设计语言是不存在的。以此图为例,看起来每一层都像最顶层。而对高饱和度色彩的滥用也影响了整体观感。

 

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

这些 Android Wear 表盘看起来非常精美,与圆形表盘浑然天成。

 

在材质设计中,内容不为王

 

在全平台上的一致表现,是材质设计的最大特色。iOS 遵循「形式跟随内容」的设计原则,力求使内容更高效地呈现于屏幕中,而安卓则用卡片式设计使内容更具触感,鲜艳的配色使界面更轻盈灵动,但损失了信息的呈现密度。

 

悬浮动作按钮隐藏了部分交互动作。

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

悬浮动作按钮使用强烈的对比色,具有导航和交互的双重作用。

 

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

左图为 Google Music ,右图为 Apple Music 。很明显 Google Music 使用了大量的高饱和色彩,而 Apple Music 仅仅在 “ Try Now”一处采用了明亮的配色。

 

底部导航栏 VS 汉堡包侧栏

 

关于汉堡包侧栏应该怎么用,什么时候应该用,在设计界众说纷纭,尚无定论。而苹果甚至几乎不使用这种设计。

 

但有一点是确定的,在安卓系统中,汉堡包侧栏将越来越常见,因为材质设计鼓励这种做法。

 

iOS 更偏向于采用底部导航栏的设计。有趣的是,设计师 LukeW 指出,往往胜利的是浅显直观的设计。Facebook 自从在 iOS 上采用底部导航栏之后,声称他们的用户活跃度有了大幅提升。

 

但有一种情况,采用汉堡包侧栏就是件再合适不过的事,就是当你的首页占据你内容展示的绝大部分的时候。这时侧栏可以展示十分次要的东西,像设置和退出。

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

 Google Inbox 采用了汉堡包侧栏

 

对色彩的运用

 

对于材质设计而言,色彩是其精髓。无疑,它们非常好看,夺目,其推荐配色与 Flat UI (一个免费的 Web组件库)极为相似。我们都同意,在大多数情况下,柔和的 Flat UI 及 材质设计配色都非常漂亮,而 Xcode 默认的配色则过于鲜艳,华而不实。

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

但材质设计喜欢在顶栏,有时甚至是内容的底色中采用多彩的颜色。当你采用很多种对比色时,就要考虑到整体的协调性。

 

每一种颜色都会给人以不同的感觉,但作用相当有限(如红色代表警觉,而黄色也有相似含义)。色彩可的以带来强烈的品牌特色,但这不应该是 UI 设计关注的重点。事实上,如果真的想突出品牌特色,在应用图标上下功夫就行了。

 

重申,灵动活泼的色彩应用在安卓上挺合理,但在 iOS 上绝非如此。

 

定制化VS 全平台统一

 

首先得承认,我以前常常认为,在所有平台上采用同一种设计语言也许是最好的选择。不幸的事,这导致了我在安卓的 App 上采用的 iOS 的那套设计语言。在我当时看来,这很合理,但消费者并不买账。安卓与 iOS 之间还是有相当大的差异。

 

材质设计旨在将所有平台的设计语言统一起来,它干的也确实非常不错。但一个设计真的是个好主意吗?

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

卡片式设计真的适合 Android Wear ,尤其是圆形表盘的吗?这似乎与现代主义设计一直以来倡导的「形式跟随内容」相悖,像是事后才想起来的补救措施。

 

看看 Apple Watch ,它的设计就明显是根据手表这一媒介重新思考过的。这意味着,UI 与交互必须与硬件上的 Froce Touch ,黑色边框,Digital Crown ,腕部监测等紧密结合。

 

材质设计限制了设计师的想象力

 

在谷歌关于材质设计的则例网站上,详细地讲解了材质设计的配色,布局,控件的摆放,甚至阴影的使用。

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

对色彩的搭配也有详尽的指导规范

 

详尽的规范与则例带来的好处是,使得设计师可以轻而易举地设计出不那么糟糕的界面,它提供了一系列的工具及参考。但坏处就是,限制了优秀设计师的发挥,且可能导致设计的同质化。

 

材质设计的闪光之处

 

请别误会,材质设计绝非一无是处,它干对了绝大多数的事情。我只是不希望设计师们在称赞材质设计的时候忘记了其局限性。设计是一阵又一阵的风潮,这迫使我们不断学习新事物以跟上时代。世界处于不断变革之中,设计也是。

 

首先,世界级的则例及说明,对于很多处于学习阶段的交互设计师大有裨益,不仅仅用于材质设计。

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

材质设计拥有十分夺目的配色及动画效果

 

将内容的载体卡片化对于平面设计来说十分合适。它富有弹性且模块化。在网页上,它也是极为优秀的,卡片式设计同时也是响应式设计,这意味着网站可以对手机等竖直屏幕有良好的支持。但我相信,再小的屏幕便不适合卡片式的设计了。

 

就像我之前提到的,大量运用高饱和的色彩可不是个新事物,但扁平化风潮和材质设计带动其走向流行。但回到设计的基础,和谐的配色及漂亮的排版才是设计的最终追求。对设计的理解越深刻,才能越得心应手地运用大胆跳脱的色彩。

 

材质设计的动画令人赏心悦目,尽管这不是谷歌创造出来的新东西。可以说,iOS 7 真正将过渡动画的概念发扬光大。我很高兴地看到,他们都采用了足够平滑的过渡动画效果,旨在有效引导用户,这是最好的。而不求逻辑只追求炫酷的过渡动画,则脱离了设计的本意。

 

Material Design比扁平化设计更先进? | 设计 思维 互联网  | zatime.com

(此图为 GIF)

 

无趣的总结:没有最好的设计语言

 

永远没有最好的设计语言或模板。即,我们不应该对设计语言厚此薄彼,而应该对每一种设计语言的长处及短处有清醒的认识。设计是取舍的艺术。只有不断尝试,才能找到最适合的那个点。不要忘记的是,你为谁而设计。

 

文章来源:雷锋网

原文链接:via.Medium