辞典精译 | 没时间读Google材料设计指南？掌握这10个要点也可以！

UX Pedia Presents

本文约5120字，阅读需要13分钟

值得遵循的设计原则

Google是科技领域最大、最有影响力的公司之一，这也是其设计系统为什么会对数字产品设计有如此巨大的影响。该公司的材料设计指南讲解了值得每位设计师遵循的原则——无论是为iOS，还是为Android进行设计，都可参照。

在这篇文章中，将分享我在回顾材料设计指南时发现的关键要点，同时说明实践这些规则的方法。文内选取了材料设计指南中一些非常优秀的设计原则，并结合自身经验，帮助大家更好的理解与应用。

01 指示符号和动画引导交互

在没有其他提示的情况下，图标会提供一个清晰明确的指示，表明可以执行。
——Material Gesture Guidelines

在《日常事物的设计》(The Design of Everyday Things)一书中，被称为“以人为本的设计之父”唐·诺曼(Don Norman)将指示符定义成：“指示将要采取的行动，以及如何实施。”在设计数字产品时，我们并不需要明确表达我们的指示，比如“向左滑动就能看到更多”之类的话，其实图标、颜色等简单元素，也可以作为提示不同手势和动作的符号。

用户与元素的交互时加入动画，更方便用户操作。——Material Gesture Gu

要想实现一个极简主义的外观，可以使用动画去表示用户执行的动作。如果使用得当，它可以大大简化界面，甚至可以改善体验。

02 动画图标

by Eddy Gann

动画展示了图标要执行的动作，也增加了一丝趣味性。两个图标间既呈现了切换，也表示了二者的关联性。
——Material Animated Icons Guidelines

举一个常见的例子，播放/暂停按钮动画。当单击播放时，图标变为暂停按钮，反之亦然。这种变化用一种微妙但直观的方式表明了两个动作间的联系。

刚说的例子比较简单，那不妨再想象一下将微妙的动画用于更复杂的体验中，比如添加购物车或此功能被禁用。这种情况下，图标间创建的动画不用太耗时，在Adobe XD中，就通过使用淡入淡出的动画，来达到效果。

动画图标过渡可简单也可复杂，这取决于功能的重要性，不突出的图标使用简单的动画。不管是简单还是复杂，这些动画图标都是应用程序的重要组成部分。
——Material Animated Icons Guidelines

如果元素和图标一直重复演示动画，会导致用户不知所措，且过度使用还会削弱重点，因此设计师们应谨慎使用复杂动画。

03 调色板生成器

Material Color Tool

调色板生成器，输入任何颜色则自动生成调色板。色相、色度和亮度都通过算法来调整，该算法下创建的调色板既实用又美观。
——Material Color System Guidelines

自己创建调色板会很繁琐，且效率也很低（需要自己计算色值）。而生成的颜色通常是满足可访问性标准的，也无需再麻烦对照WCAG指南去检查调色板。若真的需要检查调色板是否准确，推荐Stark这类的插件，能帮助你快速校准。

04 颜色

Material还提供了界面色彩的应用技巧与强大工具，帮助设计师更好地执行。

在适当的时刻展示品牌色彩，以强化品牌风格。
——Material Color System Guidelines

在应用程序里应避免大面积地使用颜色，否则文本，图像和按钮等单个元素，将无法获得更多的关注。Instagram、Twitter之类的应用程序有非常丰富的帖子和翻不完的内容，但它们的应用界面都非常简洁，这种设计手法可以引导用户把注意力从界面移开，从而转向内容。

颜色能表示哪些元素是有交互的、元素之间的关系以及突出程度，这能使重要元素脱颖而出。
——Material Color System Guidelines

当元素的外观与其周围环境形成对比时，用户会意识到它的重要性。可以使用颜色和颜色权重建立层次结构（颜色权重指的是颜色的饱和程度，饱和度高的颜色会显得更鲜艳大胆），从而赋予更强的视觉效果。

更突出、更粗体的信息会先吸引用户的眼球，接着用户会转向辅助信息。如果一个元素比另一个更重要，那么它应该具备更大的视觉权重。这样的话，用户可以快速浏览页面，并在各个重要级别之间进行区分。

05 字符样式生成器

Material Type Scale Generator

由Google Fonts提供支持的样式生成器，可用于查看各式字体类型的比例尺及相应代码。选择的任何字体都会根据材料印刷指南自动调整大小，以提高可读性。
——Materials Type System Guidelines

排版设计不仅仅是选择优秀的字体，如果能有效使用，它可以通过改善界面内的可读性、易访问性和层次结构来增强界面的可用性。幸运的是，Google提供了一个非常方便的工具，帮助设计师在进行排版时节省不少时间——Material type scale generator，可以快速生成段落、标题、按钮等字体大小。

06 使用声音和触觉唤起情感反应

声音代表着重要时刻（也会代表品牌和产品），能唤起用户的情感反应。

它们发生在关键的交互情境中，例如：庆祝用户已完成的重要行为；欢迎用户使用新的应用程序或体验；确认产品用途等时刻。
——Materials Sound Guidelines

声音可以表达成功、成就感或奖励。Google建议“声音不能常出现，因为太突出，应用时更要保证一致性。” 每个成就都使用相同的声音，用户便开始识别并与情感联系。例如，当某人将待办事项列表上的所有项目都标记为完成时，响起的声音让用户更有成就感。

人们会下意识地将声音与感觉联系在一起，无论是收到新消息时手机发出的叮叮声，还是在Mac上清空废纸时发出的揉搓声，所有出现的声音都能帮助用户更加了解界面中发生的事。

触觉可以与其他音频和视频元素搭配使用，也可以单独使用。例如，当设备关闭声音时，触觉可能是唯一的反馈方式。与其他元素搭配使用时，触觉应该是同步进行的。
——Android Haptic Guidelines

除了声音，触觉（振动或触摸感觉）也可以刺激感官，提供更完整、更强的用户体验。随着时间推移，用户通过试验、学习产品熟悉了触感后，会慢慢的把不同的感觉与触觉模式联系起来。比如，某个用户刚刚提交了一笔付款发生错误，出现的震动提示向用户进行了触觉反馈，如果用户认识这种反馈，便会马上知道出了问题。

刚说的两个点是产品设计师常常忽略的领域，有时设计师过于关注视觉，从而忽略了可以让产品更有质感的声音和触觉。

07 用动效表达品牌的个性与风格

Example from Material

Motion可以为常见的交互增添个性，表达品牌风格。
——Materials Motion Guidelines

产品Confetti是我设计的一个习惯跟踪器，适合想要每天提高工作效率的人群。在设计产品时，我重点思考的是习惯被养成后，怎样能让用户获得满足感。通过在产品中加入动效，并使用动效来强调不同养成阶段的体验，最终令这款产品脱颖而出。

动效设计通过突出显示元素、可用性和结果来告知用户将注意力集中在重要内容上，并且不会产生干扰。
——Materials Motion Guidelines

对用户而言，速度和效率至关重要，而使用应用程序就是为了完成特定工作，千万别让太有创造性的设计妨碍到他们。在2020年，可能只需一毫秒就能激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《The Ultimate Guide to Proper Use of Animation in UX》中指出的那样：“大量研究发现，界面动画的最佳速度在200-500毫秒之间，任何短于100毫秒的动画都是瞬时的，根本不会被识别。而超过1秒的动画会给用户传达一种延迟感，也会让用户感到无聊。”

有目的性地使用动画可以改善用户体验，不会给界面元素增加不必要的干扰；如果动画和微交互时间过长，则会带来负面体验，注意辨别使用。

08 使用图像区分产品&搭建视觉

by Elena Petkovska on Dribbble

我们都遇见过特别拥挤的界面，其中包含了太多的文本，没有什么图像。在UX设计中，视觉呈现总比文字堆砌更直接。用户不想阅读理解——相反，向用户展示图像，让他们直观地体验产品。

用图像来表达产品信息和产品风格，无论是用户生成的摄影作品还是不同风格的插图，它们都应该是可以直观反映你的产品调性的。
——Material Imagery Guidelines

应用程序中的图像与其他视觉元素一样重要。视觉呈现不仅使UI更加生动，还可以帮助建立品牌，并为我们的产品界面加分。

图像要有目的地使用，它是作为内容的补充，而不是替代。最好使用图像或插图来说明如何使用应用程序，就像大家常说的那样，一张图片胜过千言万语。如果想要为自己的设计加入图像，请在这些我最喜欢的高质量网站查找：Unsplash、Pexels、Freepik、Adobe Stock和Pixabay。

09 使用密度独立像素

Example from Material

使用密度独立像素（dip）可以适配不同屏幕尺寸。
——Material Pixel Density Guidelines

密度是屏幕每英寸的像素数，也称为PPI。单位“ dp”是“密度独立像素”的缩写，有时也缩写为“ dip”。屏幕密度=屏幕宽度(或高度)(以像素为单位)/屏幕宽度(或高度)(以英寸为单位)。

设计界面时，建议不要根据像素来设计，而是以设备的像素密度设计，这样可以确保我们的元素适当缩放，以适合不同的设备尺寸。如果我们设计一个按钮素材，例如200x50dp，则它在160ppi屏幕上显示为200x50px，在320ppi屏幕上显示为400x100px，即原始尺寸的2倍大小。

因为一些屏幕每英寸的像素要比其他屏幕多，所以在像素密度高的屏幕上元素显示的尺寸不会变小。它们以原始大小的2倍、3倍与4倍进行渲染，确保了所有元素在不同密度、不同设备之间保持准确。

密度如何转换为屏幕尺寸？例如，iPhone XS Max的屏幕尺寸为414x896。但是它的大小以点为单位，而不是像素。按像素计算，是1242x2688像素。考虑到这一点，在为iPhone XS Max进行设计时，我将以414x896点进行设计，然后以3倍的大小交付。

10 应考虑离线状态

From Material

离线状态允许用户在没有Internet访问的情况下继续与应用交互。如果你的应用程序具备离线可用功能，当其他功能不可用时，应指出当前状态是离线还是在线。
——Material Offline Guidelines

在我们的产品中，脱机访问功能对于用户来说是一个经常被忽视但非常有益的体验。尽管没有网络连接，产品无法正常工作，但脱机访问总比彻底没有访问权限要强。

允许用户下载信息和离线访问最好的例子是Spotify这类的音乐应用程序，离线也是允许下载歌曲的。另外，如果你的产品不包含Spotify或Netflix等消费内容，不妨发挥创意，使“无法连接”变成难忘的体验。谷歌浏览器的离线游戏，可能是霸王龙游戏中最受欢迎的吧！通过一些个性或趣味地设计处理，就能将消极的体验扭转成积极的。

以上就是对Material Design中一些要点的回顾，大家还可以看看这些设计系统，例如IBM Carbon、Zendesk Garden、Workday Canvas和Atlassian。从流行的设计系统中学习设计文档，是提升UI/UX知识最简单快速的方法啦！

／End.

相关引用

-翻译自原文

https://uxdesign.cc/10-key-takeaways-from-googles-material-design-guidelines-3b0867f0465a

-Stark颜色校准器

https://www.getstark.co/

-谷歌字体样式支持

https://fonts.google.com/

-封面图来自网络

-未经UX Pedia允许不得转载

往期推荐：