北京网站建设：分析材料设计组件的经验教训

2019.08.16 mf_web

106

如果您阅读Google的材料设计文档，您就会知道它的详细信息和广泛性。查看文档时，您可以学到很多东西。其中一个最好的教训是，它证明了创建复杂的视觉风格指南是可能的。绝不是容易的，但它是可能的，特别是对于Google所拥有的复杂产品系列。

如果您想学习一些关于视觉设计的知识，您应该仔细研究材料设计处理单个元素或组件的方式。该文档指定了18种不同的设计元素，从按钮到菜单再到标签。那么，从分析它们可以学到什么呢？北京网站建设

接受变化

按钮有很多规则。材料设计中有三种不同的按钮类型：浮动，凸起和平面。很难让单个按钮类型在各种界面上工作，可以使用材料设计来制作。

所有各种接口都要牢记一致性。然而，材料设计包含三种不同类型的按钮，以便充分利用其设计。另一种方法是将设计归类为有时可能无法正常工作的东西。

“为主按钮选择按钮类型取决于按钮的首要位置，屏幕上的容器数量以及屏幕的整体布局。” - 按钮用法

按钮的某些指导原则是特定的，而某些指南则更为模糊。总而言之，该指南经过深思熟虑。该指南提供了有关如何使用按钮和不使用按钮的具体细节，因此设计人员可以轻松工作。这就是整个指南的美妙之处; 设计决定由设计师自行决定。

注意经常被遗忘的元素

在设计界面时，多长时间考虑弹出或警报模块？材料设计文档有一个专门用于对话框的部分。这些盒子不是设计师经常使用的东西。但是当它们被使用时，它们仍然是设计的一部分，需要加以解决。

有关对话的指导原则是具体的。它们概述了您应该使用的按钮类型以及原因。对话框的解剖结构也是拼写出来的; 它内容翔实而且彻底。

“当每个标签的文本不超过最大按钮宽度时，建议使用并排按钮，例如常用的”确定/取消“按钮。” - 对话框

“当文本标签超出最大按钮宽度时，您可以使用堆叠按钮来容纳文本。“ - 对话

对话框

它们指南指定了应包含在对话框中的内容类型和操作。这延伸到的细节类型是迷人和有趣的，因为它是一个经常被忽视的设计元素。它表明，为了创建强大的风格指南和强大的设计语言，没有任何元素太小或不重要。

这是关于可靠性的全部

文档中非常重视可用性。创建新的统一设计语言的唯一目的是提供跨浏览器/设备的可用性。质量风格指南将为设计语言提供支持，以创建高质量的设计指南。

“选项卡提供显示相关内容分组的可供性。标签标签简洁地描述了标签的相关内容分组。“ - 标签

材料设计文档中描述标签的方式非常棒。材质设计不使用制表符作为导航形式，它使用它们作为浏览内容的其他方式。令人耳目一新的是，特定元素（如标签栏）具有局限性。很高兴知道制作材料设计的设计师除了风格之外还考虑了元素的功能，因此不会被误用。

如果明确定义了不同元素的功能，那么元素将仅以某种方式使用。反过来，这有助于建立可供性。如果元素以各种方式重用，则会使用户感到困惑; 这对用户来说不明确且不公平。

“选项卡可以轻松浏览和切换应用程序的不同视图或功能方面，或浏览分类数据集。“ - 标签

创建自己的元素

“Snackbars在移动设备和桌面左下方的屏幕底部的小弹出窗口中提供有关操作的轻量级反馈。它们首先是屏幕上的元素，包括浮动动作按钮。“ - Snackbars和Toasts

“Toast与snackbars类似，但不包含任何动作，不能在屏幕上滑动。” - Snackbars and Toasts

材料设计文档对于称为“Snackbars and Toasts”的组件有一个有趣的部分。这是一个你每天都听不到的设计术语; 小吃店和烤面包是我们已经知道的设计元素。如果您阅读上面的引用并查看下面的图片，您会发现小吃和烤面包的概念是一个简单的弹出通知。

但这里的教训更为重要。材料设计划分了各种弹出类型。设计语言需要它，所以它完成了。Snackbars和toast类似于对话但不同; 因此，它们是分开的。材料设计简单地将它们分开，因为它需要它们来执行各种功能。可以创建新元素。就像材料设计的其他组成部分一样，小吃店和烤面包也有特定的指导 - 用例，尺寸和颜色。

小吃店