为设计师着想！Material Design设计文档的4条训示

编者按：Material Design 是Google新发布的设计文档，尽管很多童鞋还不了解，但从今天分享的这4个细节上，你可以看到Google的设计师为其付出了多少努力。它对于设计师的价值更是无可估量，绝对是帮你进行设计的优质资源！

Material Design是Google打造的一套新的视觉语言，用来统一它的多种产品。Google发布material design的概念时，同时发布了一些文档，满足人们对于他们视觉指南的好奇心。

Material Design文档是一套关于如何进行设计的优质资源。

Google的文档，尤其适合那些想要向行业引领者学习创建视觉美学的设计新手。同时也让经验丰富的设计师了解Google的思想。这是一份编排精良、经过深思熟虑的文档，为我们带来了Google的设计师们的领悟。这份文档包含了大量的训示。我已经通读一遍，在此想向你分享一些其中的干货。

通过动效来建立有意义的关联

Material Design大量强调设计中的动效和动画。重要原因之一，是它可以让用户清楚看到自己的操作如何对界面产生影响。Google举了个向相册添加图片的例子。如果你看看下面的这个例子就会注意到，上方覆盖的层有淡入淡出效果。出于两个目的：清晰与愉悦。首先，它建立了一种视觉层级，用户认为它在界面的上方。尽管这是技术上实现，并非真实的，因为界面并不分层；但它使用户以一种更简单的方法理解界面。这就是清晰。

将它与第二个无过渡、界面突然出现的效果相比。它显得很突兀——这就是建议使用淡入淡出的第二个原因——它也没有建立任何视觉上的认知。新的界面突然出现，用户的操作和界面的视觉变化有何关联，它没有给出任何解释。错失了一个愉悦用户的机会。

例子：

With transition（有动效）

Without transition（没动效）

“避免生硬的切换。生硬的切换很突兀，让用户花大量精力理解其中的过渡。”视觉的连贯性（谷歌链接，自备梯子。同下）

密切关注字体

Material Design指南有大篇幅的字体章节。很明显，其中精髓是要我们注意字体运用，尽可能提供最佳的阅读体验。这可以提升整体的体验。如此众多的设计关注按钮这样的UI细节，但是有多少真正兼顾了字体的？这可是我们很少提及的东西。这字体的这个章节中，你可以看到Google的设计师为其付出了多少努力。

“与背景颜色相同的文字难以阅读，这点很好很理解。不太明显的一点是，反差太大的字体使人眼花缭乱，不易阅读。这点在深色背景上尤为显著。”标准样式

字体有时甚至是网站的关键，这篇的作者测试后就惊呆了：《网站字体有多重要？它帮网站提高了38%的流量！》

像行高和颜色这类是需要特别定义的，为了尽可能给用户带来最佳体验。Roboto字体甚至也被重新定义了，来跨平台提升它的易读性。而且，一段文字呈现的方式至关重大，因为缺口和隔断使得阅读更困难。注意去除这些隔断文字，这大有帮助。

运用色彩

多数人对Material Design的第一印象，是它大胆明亮的配色方案。看看色彩章节，你会发现有这么多种颜色。这一点非常棒，有以下几点原因。首先，大胆的用色可以给Google的界面赋予个性化。创建一套非常妙的配色方案没什么不妥。这是一次很好的改变，因为iOS7问世时，它的主色是浅灰色系。而且，Google建立这套色彩指南的方式非常清晰，是使用颜色的极佳参考。

面对现实，当有太多色调可供选择时，颜色的确可以很吓人。虽然Google提供了广阔的颜色选择范围，它也提供了如何使用的指南。Google开篇显而易见地陈述了：限制你的颜色选择，有需要时使用多种深浅变化，并且明智地使用辅助色。

“我们非常鼓励在界面中大面积、大胆地运用色彩。界面中不同元素承担配色的不同部分。工具栏和更大的色块会使用主色。这是APP的主要颜色。状态栏使用更深色调的主色。” UI配色应用

全部都归结为易用性

Material Design文档的最后章节似乎有着至高的重要性。易用性与可用性章节提及了大量问题，设计师在设计APP或界面时需要全面考虑。这章的作用在于，提醒你设计无论如何都要易用。

“当所有人——不论残疾与否——都能够浏览、理解和使用一个产品来完成他们的目标时，这个产品就是可用的。真正成功的产品，对于尽可能广的用户群体都是可用的。”可用性

这份文档向你提出了几个严肃的问题，你的产品没有声音、色彩或者屏幕时，如何做到可用。一个残疾用户能轻松使用你的产品吗？

文档的这一章探讨了导航、易读性、用户和反馈的一些细节，让你清楚了解你的产品的关注点应该在哪里。如果你通读一遍，你会发现刚才指出的那些问题显而易见，例如确保最小屏幕元素点击区域是48×48像素，不至于太小，使一般的人类手指可以对它进行操作。有一些则更具体，比如确保链接都有恰当且有意义的标题。

“让链接有意义。每个链接的指向是否清晰？类似“点击这里”这样的常见链接文字，并不能解释链接指向何处。把目的地放入链接自身当中。对于“点击这里”有个更好的解决办法，是使用具体的链接，比如“设备选项”。有些无障碍模式让用户只看到链接，忽略其他内容，为了使导航更加有效。”

随着科技产品用户人数的激增，关注易用性至关重要。看到material design文档贡献了一整章来探讨易用性和可用性，真是大快人心，它提醒我们，产品——不论是什么——对所有类型的用户都要是可用的。

结论

我支持你深入研究Material Design文档，这是免费的在线文档。其中有非常棒的建议和干货。对于设计新手和有兴趣学习界面设计的人来说，它是一件学习工具。对于经验丰富的、想要先睹为快行业引领者设计思维的设计师而言，它也在刷新着他们的理解。

帮你彻底了解Material Design的好文合集！

全面有深度的总结！摸清设计趋势！
《超全面总结！深聊MATERIAL DESIGN引领的设计趋势》

看看谷歌设计师的实践心得！
《超赞！谷歌设计师的Material Design实践心得》

Material Design新鲜资源一大波！
《新鲜热辣！一组实用的MATERIAL DESIGN风格素材！》

原文地址：designmodo
译文地址：colachan
译者：@十萬個為什麼
uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量77万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：