《好设计，有方法：我们在搜狐做产品体验设计》 —3.2　设计风格的差异

3.2　设计风格的差异

1.阴影的定义

一提起Material Design，大家应该都不会陌生。在Material Design的中文指南中，Material一词被翻译为“ 材料 ”。这个名字刚开始可能会让人一头雾水，没有人知道这种“ 材料 ”在真实世界中以哪种状态存在、由哪种物质组成。它是一种为了适合触摸屏而被发现和设计出来的一种新材料，被赋予可以承载信息、交换信息的功能。设计师们发现现实中的纸张更符合Material Design中对于“ 材料 ”的定义。这使Material Design设计风格在最初就遵循了物理世界的原则，在设计中会出现符合现实世界的场景设计，例如界面中的模块会有阴影，像现实世界中所有物品都有影子一样。并且纸张的物理属性也被Material Design转移到了屏幕中，衍生出在虚拟世界的纸张控件：卡片cards和纸片chips。

在Material Design规范中，软件系统中各种功能是分层级展现在手机屏幕上的。这种形式在规范中被定义为：阶层。即两个z-坐标（深度）不同的元素会产生部分重叠，从而形成了阶层。此时两个材料的移动是相互独立的，通过控制界面中元素的Z轴数值（阴影的大小）来反映其海拔高度（层级重要性），Z轴数值越高，元素离界面最底层越远，投影就会越重。如下图1为官方设计指南中给出的界面元素层级关系，图2为Z值的大小样式，Z值越大，层级越高。图3为实例应用中展现给我们的界面，通过阴影来区分元素之间的距离（Z轴值）。

在iOS的设计规范中有三大特点使其风格区别于其他平台：清晰（Clarity）、遵从（Deference）和深度（Depth）。其中遵从原则可以简单解释为遵从内容至上原则，所有的设计都是为了来突出内容。设计师们要减少使用边框、渐变、阴影的频率，让界面尽可能地轻量化、扁平化。正因如此，iOS的设计更适合称为Flat Design，即扁平化设计。所谓扁平化设计，就是在设计的过程中，去除所有具有三维突出效果风格和属性的元素。这种风格可以让设计更具有现代感，同时可以强有力地突出设计中最为重要的部分：内容和信息。

如果把Flat Design的设计用Material Design中的概念来表达，我们可以理解为iOS中界面更趋向于所有元素的Z轴（深度）数值保持统一。必要时设计师可以利用阴影来对某一元素进行突出，但这与Material Design设计中的阴影概念并不完全相同，Flat Design中的阴影更适合被理解为一种设计的表现手法，而非风格。例如受到众多设计师追捧的弥散阴影。

综上所述，我们了解到Android系统中Material Design设计是遵循物理世界原则的，元素是以材料的形式出现在屏幕中，产生真实世界的投影（三维效果）。不同的元素间会产生重叠，形成层级。

iOS扁平化（Flat Design）设计不包含所有具有三维突出效果和属性的元素，一切以内容为主导，阴影只是一种设计表现手法，并不是必要存在的。

2.空间的规则

上述我们说到Material Design是以“ 材料 ”的形式出现的，而材料本身会有一些不可改变的特征和固定的行为。材料在X轴和Y轴上的长短没有固定，但是有一致的厚度。内容会独立呈现在材料的表面且不超过材料的边界。由于材料是固体的，所以材料之间是不可以相互穿透的。多个材料同时出现在相同位置时，必须要利用阴影来区分材料的层级（如下图）。

而在iOS设计中，半透明、毛玻璃风格是它最明显的设计特点。在同一个界面中出现不同的元素时，只需要通过叠加一层半透明遮罩或加入毛玻璃风格来传递给用户“ 层 ”的概念。这与Material Design中给予材料的属性大相径庭。除此之外，在展示内容的区域方面Material Design与iOS的规定也有所不同，在iOS中不会要求内容被限定在“ 材料 ”范围中，相反许多设计师会为了突出内容，刻意让信息超出边界以此来吸引到用户注意（如下图）。

Material Design中的材料遵循物理规律，因此材料之间无法穿透。多个材料同时出现时，必须用阴影来区分材料的层级关系。内容与材料相对独立但内容的范围不能超过材料的边界。

iOS中设计元素之间可以互相穿透，设计师可以运用半透明遮罩层或者毛玻璃效果的叠加来区分元素之间的层级关系。内容的范围没有限制，必要时还可以为了突出信息，将元素摆放到超出边界的位置，以吸引用户的关注。

3.颜色的选择

Material Design有一套自己完整的配色方案。配色灵感来源于大胆色调与柔和环境的对比及阴影与高光的对比，其画板中囊括的基础色的饱和度为500。高饱和度的颜色能使设计显得更有张力，更具有吸引力。Material Design也十分鼓励设计师大胆运用对比色来强调界面中的信息和内容。当你还没有决定自己的品牌色时，可以从Material Design主要色板中最多挑选三种色调，然后从次要色板中选择一个强调色。

iOS在设计规范中并没有对颜色有一个明确的定义（这里具体指制定色板），只是把系统的配色公布给设计师们参考，并鼓励大家根据自己的想法指定相应的配色方案（如下图）。

iOS虽然希望设计师根据自身产品的性质制定色板，但是它也提醒了设计师要选择舒适细腻的配色方案，即在选择一种主色后，确保其他颜色不会与之发生冲突。如iOS系统中自带日历的配色以红色为基准色，每个组件、界面都是红色的，当然界面中就不会出现红色的对比色。

同时在iOS设计规范中关于颜色还提及了一点：要关注到色盲用户，避免仅仅使用红绿或者橙蓝等颜色组合来区分两个状态或者值。

Material Design希望通过颜色来强调组件的重要性，尤其是按钮、开关等关键组件。它提倡设计师们大胆运用鲜明的颜色来凸显视觉张力。为此Material Design还提供了一系列色板，在你还没有决定好配色方案的时候，Material Design色板是个不错的选择。

iOS则没有向大家提供色板，仅仅是提供了系统界面的配色方案，同时鼓励设计师选择符合自身产品风格的配色，为用户展现细致温柔质感的界面。不推荐大量应用对比色来凸显内容。