Google 是如何定制 Material 主题的？
来自 Gmail、Google News、Google Pay 和 Google Home 的产品团队详细介绍了如何使用 Material Theming (Material 主题) 来创建一致的，且有凝聚力的品牌体验，以及用 Material 来指导未来设计的路线图。
使产品拥有独特外观的元素是什么？您应该如何将心中的产品那独特的特性传达给屏幕另一侧的用户？这么多年来，Google 的品牌和 logo 本身就代表着 “数量” 和 “多彩”，我们也在这种品牌感觉下制作了数以百计的数字产品和服务。虽然 Google 品牌多年来一直在发展和变化，但 “设计” 这一要素仍然是将各种各样的应用、服务和技术捆绑在一起的共同线索。随着 Material Theming (我们的端到端设计工具，他可以使团队轻松而系统地表达品牌的独特身份) 的推出，设计的诸多细节元素 (如字体、形状和颜色) 可以统一融入到自定义的 Material 主题里，并可轻松应用于数字体验内部各处。我们创作 Google 专属的 Google Material Theme，用来表达是什么让 Google 的产品显得很 “Google”。诸如使用留白、四种 Google 品牌颜色和我们的自定义字体 Google Sans 之类的细节共同向用户传达一致感和信任感。我们的主题为 Google 应用提供了一个全新的现代化界面，该界面包含所有 Material Design 的最佳实践，并进行了定制和调整，以便 UI 的每个部分都可以相互协作，从而实现该产品的功能。
我们的多个产品团队 (包括 Gmail、Google News、Google Pay 和 Google Home) 均参与定义并率先使用了 Google Material Theme。最近以上四种产品的全新界面都已正式完成了改版，更多更新的 Google 体验也将在未来几个月内推出。任何人，无论是小型创业公司还是拥有各种应用的大型公司，都可以使用 Material Theming 让他们的产品脱颖而出。欢迎借鉴我们开发和应用 Google Material Theme 的经验，更好地了解如何使用主题组件创建出可共享、富有表现力、灵活而独特的品牌体验。
Gmail: 用颜色来聚焦内容
Gmail 首席设计师 Jeroen Jillissen 说：“Gmail 是一个具有挑战性的设计课题，因为有如此多的用户 (14 亿) ，而且人们使用它的方式多种多样。这是一款生产力工具，您绝不可以破坏人们的工作流程。” Gmail 的设计团队目标很明确：将注意力集中在内容上。Google Material Theme 有助于支撑用户的注意力和生产力，因为人们会通过布局密度、标签和收件箱组织形式来定制他们的电子邮件体验。
事实证明，颜色这一关键元素可以引导用户在改版过的界面中关注重要消息和动作。在新设计中，收到新邮件的时候收件箱标签会变为引人注目的红色，而智能功能 (例如小提醒*和智能回复) 则分别以橙色和蓝色来显示。全新设计的主动作按钮 (FAB) 位于导航抽屉的顶部，便于用户将注意力集中在主要的操作：撰写新电子邮件上。使用阴影等界面分层的视觉效果和响应式布局网格也有助于改善用户体验。
*小提醒是 Gmail 的新功能，可以提醒您回复重要邮件，或者在您需要收到他人回复却还没有收到的时候发出提醒。
Gmail 的对话视图包含一个全新的、更有限的 Material 高程范围 (会更加扁平一些) ，并使用阴影来突出显示当前打开的回复框。回复框的发送按钮则使用填充的蓝色突出显示，注意这就是当前页面最主要的操作。不难注意到，高程限制和颜色高亮这两种方法都有助于用户集中关注当前 UI 中重要的操作。
针对响应式布局的全新设计规则让设计师得以在可折叠的左侧导航栏中引入多个内容的同时减少旧功能需要占用的图层，同时还能提供快速访问日历、任务等其他功能，从而最大限度地确保用户能完成心目中设想的操作。
一句话总结 Gmail 的心得：重视颜色
Google News: 打造以人工智能为核心的体验
“机器学习不是设计的替代品，它必须服务于整体体验。” Google News 首席设计师 Tae Wan An 表示，“体验本身必须通过产品告诉用户，人工智能能切实带来益处。” Google News 使用人工智能来统合全球各地的新闻稿件，所以对它的创造者而言，这意味着依靠视觉清晰度和内容层次结构来将这个新的内容组织概念介绍给用户。
字体和排版在应用的信息架构中发挥着重要作用，它可以将用户的目光吸引到重要的头条新闻上。Material 的字号规范允许 12 种不同类型的样式，它们都针对易读性进行了优化，并且能系统地应用于从按钮文案到正文的整个界面。Google Sans 是 Google Material Theme 的标准字体，可用于在所有 Google News 平台内容中显示重要的标题文字。文章的正文文本以平台原生字体显示，以便保持特定设备或操作系统的视觉连续性。这意味着用户将在 Android 和 Web 上阅读 Roboto 字体，在 iOS 上阅读 San Francisco 字体。
在移动设备上，用户一次只看几篇文章，所以对每个标题使用同样的字体是没问题的。但在网页上，用户一次可以看更多的标题，事实证明，在这种情况下再对每个标题使用同样的字体，就会让用户的视线拥挤不堪。 正如上文所说，Material 排版指南支持在整个 UI 内部使用一套由 12 种字体和字号组成的集合。 所以 Google News 的设计师们能够使用这套集合中提供的其他标题样式在网页上创建更多的标题视觉变化，同时仍然完美支持跨平台一致的视觉层次结构。
Google New 的新闻流功能可以让用户通过滑动屏幕，在一系列卡片上显示由 AI 精选的文章、视频和见解。这些卡片具有凸起的高程以突出其重要性，并引起用户的注意。
一句话总结 Google News 的心得：字体变化
Google Pay: 使用形状来拉近和用户的距离
Google Pay 的首席设计师 Seth Hamlin 说：“用户可能对 ‘使用数字支付’ 这件事情感到紧张，所以我们会尽量让使用的体验更加平易近人。” 数字支付的概念还相对较新，因此团队希望使用有趣的图像和较为圆润的外观来传达一种平易近人的氛围。同时， 高度统一的 Google Material Theme 则能够传达出一种熟悉感，并协助在用户心中创建信任感。
Google Pay 应用通过形状和品牌的融合表达了独到的个性。通过圆角卡片和圆形头像与多彩的圆形 Google logo 互相呼应。而且诸多专门绘制的插图以清晰的方式吸引用户关注，并向他们传达应用的核心概念。
主屏幕使用了圆角的 Material 卡片在用户入门的不同阶段向用户显示相关信息，比如展示小贴士，告诉用户如何更好地使用 Google Pay。用户可以点击卡片以阅读更多详细信息，也可以将其滑开。
Google Pay 还有另外一种卡片，它们拥有更高的 “高度” (阴影会更扩散一些)，这种卡片在视觉上和信用卡一致。当用户完成数字交易时，这张界面中的信用卡将通过动效明确告知支付结果。
一句话总结 Google Pay 的心得：活用形状
Google Home: 创建令人愉快的初次设置体验
“我们的挑战是，避免在整个入门流程中过多地使用 ‘真棒，设置都完成了’ 这样的乐观语句，这可能会使人厌烦。” Google Home 的首席设计师 Triona Butler 表示，“以在设备上播放歌曲为例，其实用户在做到这一点之前确实必须经历许多步骤。”
初次设置是任何应用的重要组成部分，但对于 Google Home 而言，这个过程无可避免 —— 用户必须逐步完成每个步骤，包括连接到 Wi-Fi 网络并设置家里的各个设备才能开启正式的体验。Google Home 的设计团队创建了一套令人愉快的、吸人眼球的体验，其配色和动画与 Google Material Theme 保持一致。由于眼睛会自然而然地被运动和鲜明的色彩所吸引，所以每一个步骤里展现出来的动画其实都是一个个精致的 “小甜品”。实践表明，这些动画可以有效地鼓励用户来完成整个设备的设置过程。
注意上图中的各个动画都使用了 Google 的品牌颜色来引导注意力并创建出一个连贯的流程。而图形设计中的许多抽象隐喻有助于以一种用户友好的方式传达复杂的技术信息：平衡的构图意味着操作成功，运动循环意味着操作正在处理，如果画面上的多边形积木 “垮塌” 则表示操作失败。
整套体验里，有不少界面都需要用户在多个项目中进行选择，例如选择喜欢的音乐提供商或 Wi-Fi 网络。设计团队不想让标准的勾选框在屏幕上泛滥成灾，但他们仍然需要提示用户以某种方式进行触控操作。解决方案是使用颜色和图像的视觉语言来作出指示：用来指示的图标会变成选择成功的图案并变成蓝色，表明用户已经完成了选择操作。这并没有改变勾选框的功能，但却带来更加令人愉悦的感受。
一句话总结 Google Home 的心得：引导操作
以上就是来自 Google 的产品团队创造和活用 Material Theming 的第一手心得。正如我们在不久前发布的《Material Design 现在不仅仅是设计指南》，您也可以使用 Material Theme Editor 创建独属于自己的品牌视觉，现在就动手试试吧。
推荐阅读：