Material Design：扁而不平－－让你彻底搞懂什么是Material Design

   <h3><strong>前言</strong></h3>    <p>这篇文章本来只是篇写给同学看的短文——因为他一直认为“Android 从 4.0 开始就是扁平化设计了”....结果没想到这么想的人还不少，所以就写了这么一篇科普文，全篇偏小白，无干货，敬请放心阅读。</p>    <p><strong>从 Android Design 说起</strong></p>    <p>仔细观察这个按钮，你发现了什么？</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5e209db13a1bf8d13f7ee726e26df619.png"></p>    <p>这个按钮看上去是“扁平的”，对吗？但仔细观察这个按钮， <strong>你会发现一点——按钮的周围有一个像素的高光存在。</strong></p>    <p>这就是 Android Design 强调的“拟真”风格了。“拟真”的本意是， <strong>保留控件本身的“立体”属性和光影效果，而去掉了对材质和样式的模仿</strong> 。</p>    <p>说白了就是，以上图的按钮为例，它有厚度，有光影效果，但它看上去不像任何一个存在于现实世界里的按钮。</p>    <p>Google 在 Android Design 时代无数次地强调了“拟真”的重要性，“厚度”和“光影”这两个属性在大量的控件中都有体现。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d435c18415b88fef605ee7dc944f4f46.png"></p>    <p><strong>控件示例</strong></p>    <p>“拟真”也成为了 Android Design 与 Windows Phone 代表的“扁平”和 iOS 6（及以下） 代表的“拟物”的最大差别，从下图中可以看出，相同的控件，三种设计语言之间的区别有多大。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/400ebf16dad7762036bcd6235c41be02.png"></p>    <p>综上所述， <strong>在 Android Design 时期，Google 强调的是“拟真”设计风格，这种风格代表的是对“厚度”和“光影”的模拟。</strong></p>    <p><strong>Material Design 时代到来</strong></p>    <p>从 iOS 7 开始，曾经由 Windows Phone 为代表的扁平化设计语言开始大行其道，曾经“拟物/扁平/拟真”的“三分天下”局面被彻底打破了。对于“Android 是否要使用扁平化设计语言”的讨论也从那时开始出现。然而 Google 选择了另辟蹊径，在 I/O 2014 大会上随 Android L 推出了代表 Google 全新设计语言的 Material Design。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/431f54ff3cdec20ee9e74ac7b08319f8.png"></p>    <p>对于 Material Design 的误解也从这时开始出现了，有人先入为主地认为 Material Design 是扁平化的设计语言，是这样的吗？</p>    <p>要回答这个问题，我想先用之前看到的一个比喻来说明一下：</p>    <p>假设 iOS 6- 及现在的 Smartisan OS 代表的拟物化风格，代表着设计语言的一个极端：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3ad94aa6a7b2780a491b3166cb0be47f.jpg"></p>    <p>而 iOS 7+ 和 Windows Phone 等代表的扁平风格，代表着设计语言的另一个极端：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ee4d89c6ab615dec34521370cbf811a3.png"></p>    <p>那么 Material Design 就是从一个极端走到了另一个极端，之后往后退了一大步，到了一个“中间偏右”的位置。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/732164498f68372566190a3b4561b78b.jpg"></p>    <p>所以，Material Design 同样即不扁平，也不拟物——但是，它和上文里提到的“拟真”又是不一样的。简单来说，正如标题所述，扁而不平。</p>    <p>首先谈谈“扁”，Material Design 里的“Material”实际上是一种虚构出来的材料（这也是为什么它叫 Material Design 吧），这种材料的设定简单来说就是是： <strong>厚度无限薄，面积无限大，能变换造型，也能按照规律移动。那么既然无限薄了（Google 官方给出的数字是 1dp）</strong> ，那么厚度问题就自然而然地被淡化了。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4f9d16e7f072671a8053933b0f984a4f.png"></p>    <p><strong>三维环境下的 Material</strong></p>    <p>不仅薄得不存在厚度问题，同时对于光影的诠释也有所变化，虽然 Material Design 中还存在一个主要光源和另外的环境光，但像上文里如此明显的对光源的体现你是没法看出来了：现在他们的作用，主要是为阴影创造条件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/84c40c675620cb7bbb70dbb4e3d9558a.png"></p>    <p><strong>由不同的光源所体现的不同阴影</strong></p>    <p>所以，Material Design 扁吗？当然扁了，没了厚度，还能不扁吗？</p>    <p>但平不平，又是另外一回事了。</p>    <p><strong>三维的 Material 世界</strong></p>    <p>虽然每一块 Material 都是扁的，但他们所处的环境，其实是一个 3D 空间。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/47d55756fb926fb7f24be4f9f8e51cd3.jpg"></p>    <p><strong>拥有XYZ轴的三维空间</strong></p>    <p>这意味着什么？ <strong>所有处于 Material Design 设置的这个三维环境里的控件，都拥有 XYZ 三个维度。</strong></p>    <p>Z轴维度代表着什么？对了，是高度。那么 Material Design 里，控件的高度代表着什么？</p>    <p>是层级关系。</p>    <p>相信有人一定见过这个动画，一块 Material 被抬起之后，其阴影显得比其他的 Material 都要深：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3e75d9b6d265d999110e6861260fef20.gif"></p>    <p><strong>Demo</strong></p>    <p>为什么会出现这种情况？</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e5f8be43877b4740d5bfb238d02854e3.jpg"></p>    <p>如上图所示，在屏幕里看上去平整的一个 App 界面，事实上不同控件之间都拥有着层级关系。在 Material Design 里，层级关系是很重要的，不同控件之间的层级关系会使用阴影作为表示，Google 提供了 5 种深度的阴影用于表示层级高低。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1f6987b1bd40cd1ba46f9d52875b680f.png"></p>    <p><strong>1-5</strong></p>    <p>而阴影的深浅，代表的正是这个控件在 Z 轴的高度。</p>    <p>以下图为例， <strong>当上面那块 Material 的层级比另一块 Material 更高时，他的高度也从 2dp 提升至了 6dp</strong> ，相应地其阴影也会比另一块更深。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7d12225410aa8ff916f60d540a424c1b.png"></p>    <p>这种逻辑恰恰符合了现实世界中的情况——假设你将两块木块并行排列在同一区域上，在光源不变的情况下，他们的阴影自然是相同的，当你抬起其中一块木块的时候，其所处的高度会比另一块高，阴影也会比另一块更深。</p>    <p>Google 将这种源于现实的逻辑大量应用于 Material Design 中，例如一个按钮，当你按下去的时候其会向上浮起，而后回落，阴影也会随之而变化，这时候你就像“抬起”了这个控件，短暂提高了其高度，而后你松开了手指，控件又会随着惯性下落。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7299030c1bacd0a2e95800cd15a9fbe4.jpg"></p>    <p><strong>抬起-浮上-落下</strong></p>    <p>综上所述，Material Design 非但不“平”，反而还创造出了一个强调物理定律的三维世界。这和“扁平”是有很大区别的。</p>    <p><strong>总结</strong></p>    <p>综上所述，Material Design 并不是单纯的扁平化，它在保留了“扁”的控件的同时，采用了立体的虚拟空间。</p>    <p>这篇文章仅仅只是试图用简单的语言来讨论 Material Design 的层级关系等，很多内容并未加入，如果想了解更多内容，建议参考 Google 官方的 Material Design Guideline 。</p>    <p> </p>    <p> </p>    <p>来自：http://www.jianshu.com/p/addef93191c6</p>    <p> </p>