谷歌设计师的MaterialDesign实践心得.pdfVIP

谷歌设计师的 Material Design 实践心得 上周，我们 宣布 了Google I/O 2014 APP 源代码 已经发布，诸位感兴趣的话，可以去 Github 看看我 们是怎样在这个 App 中实现 Material Design 的功能和设计细节。在这篇文章中，我将分享一些我们 对于 Material Design 的一些设计性思考。 每年 Google I/O 完了后，我们都会更新 Google I/O 相关的 APP ，我们做这个 APP 有2 个目的。第一 ，让那些在家看直播、甚至没有机会到现场的人更身临其境的了解 Google I/O 大会。第二，我们 用 Material Design 的设计语言来诠释这款应用，并且提供了源码，可以作为 demo ，供开发人员参考 。 这款应用采用了 Material Design （官方文档中译版 ）的设计方法，功能实现上参考了 Android L Developer Preview （Android L 开发者预览），最后以合理、一致、可容性强的方式来展现内容。 我们来看看这款应用的设计思路。 表面和阴影 在 Material Design 中，表面和阴影起到了重要的作用，能够展示出应用的层级架构。 Material Design 官方文档勾勒出了一系列的 布局原则 ，这给予了我们很多设计上的参考，让我们知晓阴影何 时应该出现。下面就是我们在设计这款应用中的 “日程表 ”时所经历的一些迭代历程： 初次迭代、二次迭代，三次迭代 第一次迭代版本问题良多。首先 APP 栏下面的那层阴影让人感觉，界面中只有 2张纸：一张承载 了App 栏，另外一张承载了标签栏和屏幕内容。而 APP 栏下面的那张纸承载的内容太多，太复杂： 本来泼墨效果务求简约的，但是在现实生活中，纸张越大，墨匀开的速度就越慢，因此可能会造成 一定程度的混淆。除了 2 张纸的设计思路，还有一种思路是将标签也独立成一张纸，介于 APP 栏和 内容层之间，但是层级太多，容易让人感到分心。 第二版和第三版迭代好了不少，构建了功能界面和内容之间更为清晰的辨识感，同时让匀墨效果集 中在文本、图标上。 另外一个就是 表面层“ ”的设计概念，这个在我们的细节页面中占了很大比重，我们最开始动效是这么 做的：当你在细节页面进行滚动的时候。顶部 Banner 会渐隐，同时会从图像转化为纯色。而图像滚 动的速度是标题滚动速度的一半，造成了视差滚动效果。但是我们发觉这种效果和现实中的物理规 律不服，让人感觉图像上的文字和图像不是一体的，感觉像是文字漂浮在一张纸上，两者都做运动 。 第一版，升级版 在六月 25 号的应用升级中，我们提供了更好地方法，我们引入了一种更新颖、更简短的表面层设计 概念，标题文本给人的感觉不再是悬浮的，而是实实在在的印刷在纸张上的质感。这个表面层有着 一致的色彩和透明度。动效是：在下滚动时，表面层（以及上面粘附的按钮）会紧紧的卡在内容的 上方，在向上滚动时，由于空间冲突，内容会插入到表面层的底部。 更符合物理规律的滚动效果 这种方法更符合 Material Design 设计语言的规律，而且结果更符合视觉连贯性，更有交互性，动效 也更有意义。 (代码见 : Fragment , Layout XML ) 色彩 Material Design 的关键性原则之一是界面应该 大胆、图形化、有意义“ ”，利用印刷设计的一些基本 元素，达成优异的视觉指引。我们来看看这两个元素：色彩和版式对齐。 在 Material Design 中， UI配色提倡一种主色，一种互补色。区域较大部分的色彩采用主色的 500 色调 ，区域较小的部分例如状态栏采用深一点的色调，例如， 700 。 互补色需要巧妙运用，用来吸引用户对关键性元素的注意。温和的主色，搭配以稍微明亮的互补色 ，让应用看起来大胆、充满色彩感，凸显内容。 在 I/O 应用中，我们选择了两种互补色，以便在不同情况下使用。