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

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