高效的 XD 原型制作 – Adobe XD 组件教程
已发表: 2022-03-11Adobe XD 的组件系统为设计师提供强大的功能来制作数字产品原型。 然而，它并非没有怪癖，需要特别小心。 利用智能快捷方式和遵循最佳实践将使设计人员能够简化其 XD 原型制作工作流程。
自 2017 年底正式公开推出以来，Adobe XD 在成为 UX 设计师的极具竞争力的线框图和原型制作工具方面取得了长足的进步。 特别是，它的新组件系统扩展了设计师可以试验的交互类型。 尽管如此，组件并非没有怪癖和缺点。 使用 XD 组件时，采用一组工作流实践有助于避免繁重的工作并充分利用系统的潜力。
什么是 Adobe XD 组件？
XD 组件是可重复使用的元素分组，例如文本、形状或线条。 一个组件有一个作为父组件的“主组件”和放置在画板上的“实例”或子组件。 更改主组件时，更改会传播到其所有实例。
取代 XD 以前的“符号”系统，它具有类似的目的，组件提供了一个关键的区别。 它们可以具有多个状态，以响应 XD 原型模式中定义的不同输入。 例如，按钮可以具有默认状态，但在悬停或单击状态时会更改其外观。 它可以在单击时播放声音，甚至可以根据语音识别的输入改变其外观。
组件系统可以节省时间，但需要特别小心。 要充分利用系统的强大功能，必须采用深思熟虑的方法和精心准备的工作流程。
建议熟悉 Adobe XD
对 Adobe XD 相当熟悉的设计师将从以下提示和建议中获得最大收益。 要抢占先机，请从 Google 的 Material Design 主页下载 Adobe XD 设计工具包。 该工具包将提供一个 Adobe XD 组件集以进行实验和解构。
提示 #1 – 在创建组件之前考虑所有状态
第一次创建具有状态的组件时，设计人员应该了解组件的潜在更改可能如何影响其他实例。 为了说明，让我们考虑一个具有多种状态的下拉菜单：
- 默认状态：菜单折叠
- 悬停状态：当光标在它上面时，轮廓颜色可能会改变
- 展开的单击状态：显示下拉菜单选项
编辑下拉菜单子实例的默认状态时，这些更改不会传播到悬停或单击状态。 必须更改主组件中的默认状态以更新所有实例的悬停或单击状态。
虽然跳入并开始迭代Main Components可能很诱人，但由于父组件和子组件的行为方式不同，有时会发生意想不到的问题。
一个好的做法是在添加其他状态或实例化组件之前考虑并预测主组件默认状态中所需的一切——甚至可以并排布置不同的状态。
设计人员还应该记住，他们可以在主组件或子实例的非默认状态下添加和更改元素，而不会影响默认状态，但反之则不然。
对 Adobe 的建议：为组件状态提供锁定功能，以便设计人员可以保持非默认状态完好无损，并防止对主组件默认状态的更改传播。
提示 #2 – 在创建时命名组件
创建组件（右键单击元素，然后在菜单中选择“制作组件”，或在 Mac 上按 Cmd-K/在 PC 上按 Ctrl-K）将组件添加到左侧边栏中的 Assets 面板。 XD 将给组件一个默认名称“组件 XX”（其中“XX”是一个数字）。 它的描述性不是很强，所以最好给它一个唯一的、可搜索的名称。
为什么这样做？ 随着组件列表填满，如果组件都以相同的默认名称和无意义的数字开头，它将变得笨拙。 虽然“平铺视图”选项有所帮助，但它没有文本标签，使视觉识别变得缓慢且具有挑战性。 带有小缩略图的“列表视图”也使得难以识别名称难以辨认的组件之间的差异。 组件可能而且将会丢失。 通过命名它们使它们可搜索将在以后节省时间。
对 Adobe 的建议：创建组件时，自动选择它并让用户将注意力集中在 Assets->Components 面板上以重命名它或弹出一个命名弹出窗口。 在首选项中切换此功能也很有帮助。
提示 #3 – 保持主要组件有条理
创建组件时，很容易将主组件意外放置在画板上。 虽然 XD 提供了查找主组件的工具（通过搜索“资源”面板或右键单击并从子实例中选择“编辑主组件”），但很容易对主组件进行意外更改，同时认为它是一个实例。 这样做可能会导致跨多个画板的许多不希望的更改。
即使画板上只有少数几个组件实例，一旦画板被克隆，事情很快就会失控。 对主组件的无意更改可能会增加本可以避免的清理时间。
最好养成在创建后立即将主要组件从设计画板上移开的习惯。 执行此操作的理想方法是将主要组件放置在 XD 文件中的粘贴板上或明确标记的专用画板上。 这样做会让以后的事情更有效率。
对 Adobe 的建议：在对主组件进行更改时考虑提示，以便警告设计人员更改可能会传播到子实例。
提示 #4 – 使用图层面板保持井井有条
很容易在画板上尝试想法并进入对组件进行分组/取消分组和更改组件状态属性的流程。 将左侧边栏最小化以获得更多工作空间可能会有很大的诱惑力。 但是，组件状态和转换很有可能在迭代过程中不会按预期运行。 这可能是因为子元素（例如形状、矢量或文本）的组织和分组已经偏离了过渡正常工作所需的内容。
层视图为元素的层次结构和命名提供了 100% 的透明度，其密封组织至关重要。 在状态之间使用 XD 强大的自动动画转换需要元素在组件的层层次结构中具有相同的名称和位置。 否则，过渡将默认为淡入淡出，而不是吸引人的自动动画。
有时，可能需要在自动动画转换时抑制插值的属性。 为此，设计人员可以重命名不同组件状态或画板中的元素，以中断基于名称的链接。
在任何一种情况下，层视图都可用于在出现意外问题时进行故障排除。 它应该是调试原型问题时的第一步，无论是组件状态之间的转换还是画板之间的转换。
提示 #5 – 使用 Alpha Fading 插入颜色
自动动画是 XD 的一个很好的补充，但也有一些限制和特性。 当使用自动动画在两个组件状态或画板之间更改元素的颜色时，其中一个怪癖变得明显。 不是两种颜色之间的平滑插值，而是在测试时突然变化。
当前的解决方法有点尴尬，并且对应该如何组织主要组件状态有影响。 它涉及添加两个具有不同颜色而不是一个的对象，然后在两种状态下交叉淡入淡出两个对象的 alpha 以实现平滑过渡。 默认的淡入淡出过渡可能会起作用，但如果使用自动动画插入形状和大小，淡入淡出可能就不够了。
提示 #6 – 在重复网格中利用组件
重复网格是 XD 中另一个出色的省时功能，可以轻松组织和维护类似元素的数组。 与组件一样，重复网格具有层次关系，其中网格左上角的第一个元素是定义“子”元素属性的“父”元素。 （对此有例外：位图对于子元素可以是唯一的，文本字符串也可以是唯一的，但文本属性不是。）
但是，在重复网格中使用组件时，情况会发生变化。
正常使用重复网格时，对父级所做的更改会立即传播到其子级。 但是，如果没有本地属性覆盖，主组件更改只会传播到重复网格中的子代。 换句话说，在网格中更改组件的属性会“锁定”它，使其免受从主组件传播的更改。
要从也是重复网格中的一个组件的父级传播更改，请将网格的大小调整到仅父级。 这会删除它的孩子。 然后，将手柄拖回所需的尺寸以更新子代。
一旦设计师可以解决组件和重复网格的特性，将它们组合起来就会很强大。
提示 #7 – 假设不存在基于时间的组件状态转换（暂时）
当使用基于时间的延迟（不是基于输入）在画板之间应用转换时，很自然地假设组件状态之间也可以使用相同的转换。 不幸的是，这种情况并非如此。 所有基于组件的状态更改都必须基于原型模式下的用户输入或交互，而不是时间。
对 Adobe 的建议：向组件添加基于时间的转换选项，以便它们的状态可以独立于用户输入进行动画处理。
提示 #8 – 克隆主要组件层次结构时要彻底
最后一个技巧更像是 XD 设计人员可能不会经常遇到但应该注意的边缘情况。
让我们假设主组件需要一个变体，该变体仍保留子组件继承属性的“一对多”质量，但不影响任何现有的子组件。 要创建新的父组件层次结构，必须将实例化组件取消分组并从头开始重建。 取消组合组件也将丢失在原型模式中设置的所有状态和转换属性。 这是一个解决方法：
- 为组件中的每个状态克隆一个组件实例。
- 将每个实例的状态设置为不同的状态。
- 浏览并取消组合每个组件实例。
- 开始对每个组件实例进行所需的调整和更改。
- 重新创建新的主组件。
- 进入原型模式并重新创建之前设置的交互和过渡类型。
对 Adobe 的建议：在“资源”面板中右键单击主组件时，提供“复制”菜单选项。
使用 Adobe XD 组件进行原型设计：成功秘诀
Adobe XD 在过去几年中在功能和实用性方面取得了重大改进。 它已经成长为 Sketch 和其他成熟的原型工具的一个有价值的、有竞争力的替代品。 根据该工具自首次亮相以来的发展方式，可能还会有更多改进。
特别是，Adobe XD 组件系统在改进和扩展设计人员可以创建的交互类型方面具有极好的潜力。
以下是一些需要牢记的关键要点：
- 了解更改如何在主组件和子实例之间传播。
- 请注意组件如何与 Adobe XD 的其他功能（例如自动动画和重复网格）交互。
- 努力采用一致的工作流程实践来节省时间，例如命名组件和在 XD 文件中维护一个单独的主组件粘贴板区域。
注意使用 Adobe XD 组件的特性，同时保持规范的工作流程，将最大限度地提高设计效率。 它将避免不必要的清理和维护，并在制作数字产品原型时为 XD 设计师提供效率优势。
让我们知道您的想法！ 请在下方留下您的想法、评论和反馈。
• • •
进一步阅读 Toptal 设计博客：
- Adobe XD 与 Sketch – 对决 2020
- 精准设计——Adobe XD 评论
- 探索多模式设计 - Adobe XD 教程
- UX 神话——原型设计、用户测试和 UX 可交付成果
- 完善你的用户体验设计过程——原型设计指南