发布时间：2022-7-5 分类： 电商动态
Material Design提供了设计应用程序所需的工具和指南，以帮助您在用户体验设计过程中遇到困难时做出明智的决策。但是，如果您的应用程序不适合特定用例怎么办？当Google的产品不适合本指南时会发生什么？
材料设计指南应根据具体情况量身定制。通过本文，我们将仔细研究两个Google应用程序Keep和Inbox，以了解它们在设计过程中如何更改某些规则，并了解实际应用中“材料设计指南”的整体精神。
Inbox：探索印刷网格
在Google上设计新的电子邮件Web应用程序可能是一项非常雄心勃勃的任务，尤其是在Gmail已经存在的情况下。通过新的Materail设计规则，Inbox团队正在尝试创建更密集的UI，更具体的用户体验和品牌标识。正如Inbox设计团队整合了原始设计一样，Material Design仍在开发中。这为他们提供了构建Material Design网页标准的绝佳机会，以解决密集UI的设计问题。
密集的UI设计
Inbox的原始设计不够灵活，因为13英寸屏幕上只有7个电子邮件空间。与Gmail显示16-20封电子邮件的能力相比，这个数字太少了。 Inm的视觉设计主管Tim Smith解释道：
“如果单独打开Gmail和收件箱，则视觉密度会有很大差异。在内容和空白之间找到理想的平衡是我们面临的最大挑战之一。 ”的
通过调整网格，行高和文本表达，Inbox成功建立了密集型Web UI的设计标准，可以显示12-17封电子邮件，每封电子邮件都存在于Material Design卡中。字体大小和外观也可根据具体设备进行更改。例如，电子邮件的主题行随着屏幕大小的增加而改变字体大小。
INBOX旨在以小屏幕尺寸容纳尽可能多的信息，为密集网页外观设置MATERIAL DESIGN标准。
使用颜色，图像和图标来获得成功...
与Gmail相比，Inbox的视觉差异反映在标题图片的使用中，标题图片与捆绑的电子邮件内容相关。例如，如果某人使用Inbox计划前往纽约的旅行，他们将看到曼哈顿天际线的照片。收件箱还在左侧导航栏中使用了大量图标，这些图标根据应用程序中的功能提供不同的颜色。例如，当用户点击或点击绿色“完成”时按钮，标题栏的背景颜色也将变为绿色，允许用户继续了解更改和上下文。
这种图像使用也是Inbox不同品牌体验的另一个显着特征。
INBOX会将图像添加到绑定的消息中，以赋予它们意义。例如，到纽约的机票和酒店预订电子邮件将附有城市天际线照片。
为网页设计标题栏
Inbox团队面临的另一个挑战是应用标题栏的设计。最初的提议是设计一个可调节的标题栏，它不会拉伸以填充整个浏览器窗口，而是匹配内容的宽度。
“我们已经研究了这个程序的十几个变种，并且知道它已经最终确定为你今天看到的全宽标题栏。我们还通过探索几个原型来探索最佳搜索区域样式。 ”的——首席设计视觉总监Tim Smith
由于可以缩放收件箱卡，这意味着每次用户与邮件交互时，必须调整头部。该应用程序的标题栏还包括一个搜索区域和一个显示其他Google应用程序的菜单。这种方法允许Inbox保持良好的响应，而不会使其外观复杂化。
Keep：改变导航模式
Keep是一个跨平台的笔记记录应用程序，它将材料卡扩展到折叠屏幕上，以便用户专注于添加笔记。改进的底部导航栏还允许人们通过点击快速创建新笔记。
通过空状态和动态效果鼓励用户行为
当没有向用户呈现任何内容时，主要发生空状态。通过这种设计模式，Keep为用户提供了一个空白的画布来起草他们的想法。糟糕的用户界面鼓励用户更多地浏览应用的搜索栏元素，并扩展为显示图标过滤器;分类菜单允许用户在列表显示和网格显示之间切换;左侧导航抽屉用于调整应用程序的主要设置。该卡通过放大和缩小来提示用户输入其上下文。
KEEP使用空状态来鼓励用户创建新笔记。
“我们在动态方面花了很多精力，从音符流动的动态到打开和关闭它们的方式。 ”的
—— Google KEEP软件工程师GENEVIEVE CUEVAS
为您的应用使用正确的材料模式：底部导航栏VS.浮动操作按钮
当您重新设计应用程序时，Keep团队的设计人员和开发人员仔细研究了Material Design模式，并最终应用了一些组件，例如将笔记与笔记分开的卡片，以及使应用程序设置更易于使用的左侧。抽屉导航和菜单根据笔记的内容而有所不同，例如在列表中添加复选框以便于检查每个项目。总而言之，这些不同的设计模式最终创建了一种新的功能体验，该体验建立在用户的使用场景和需求的基础上，是Keep应用程序易用性的关键。
在重新设计过程中，Keep团队在Material Core Navigation上做了一些实验，测试了一个可扩展的浮动按钮来替换现有的底部导航栏。应该注意的是，底部导航提供了一个简单的单击操作来创建新笔记。新的浮动按钮需要两个步骤，第一步是展开选项，第二步是创建一个注释。
“当我们发布悬停按钮时，一些用户抱怨缺少一键创建笔记的能力。 ”的
—— Google KEEP软件工程师GENEVIEVE CUEVAS
对于应用程序的旧用户和习惯于单触式导航的用户而言，此更改似乎是倒退。测试结束后，Keep终于放弃了核心Material组件，如浮动按钮。这是一个很好的例子，告诉人们在使用“材料指南”时，您应该强烈拒绝强制应用不适合该产品的指南的行为。
指南不是法则
Inbox和Keep团队都利用Material Design指南来帮助设计和开发应用程序。但是当他们遇到对产品无用的情况时，他们会相应地调整设计。 Material Design提供了很多指导，这些指导建立在Google多年的用户体验经验之上，但它并不是无所不包。我希望这些例子可以告诉您，根据设计的整体精神，您应该根据实际需要更改您的应用程序。
原文：Google DESIGNERS如何适应材料，MUSTAFA KURTULDU
来源：HTTPS: //MEDIUM.COM/GOOGLE-DESIGN/HOW-GOOGLE-DESIGNERS-ADAPT-MATERIAL-E2818AD09D7D
翻译：https://ddc.dianrong.com/?p=3701
