编者按: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的设计师为其付出了多少努力。
“与背景颜色相同的文字难以阅读,这点很好很理解。不太明显的一点是,反差太大的字体使人眼花缭乱,不易阅读。这点在深色背景上尤为显著。”标准样式 像行高和颜色这类是需要特别定义的,为了尽可能给用户带来最佳体验。Roboto字体甚至也被重新定义了,来跨平台提升它的易读性。而且,一段文字呈现的方式至关重大,因为缺口和隔断使得阅读更困难。注意去除这些隔断文字,这大有帮助。