AI 一致性检查：一键一致

一致性原则

一致性或许是最为人熟知同时也最为脆弱的设计原则。我们通常将一致性分成两类：

• 视觉一致性 Visual consistency 与功能一致性 Functional consistency 即在产品内部，达成视觉效果和功能体验的一致性。视觉一致性强调产品内相似元素使用相同的视觉元素，例如对产品使用的字体、字号、颜色、按钮样式等进行规范；功能一致性强调产品中可交互的相似控件应该具有相同的交互逻辑，增加产品的可预测性。例如触发弹窗或返回的操作应当保持一致。
• 内部一致性 Interal consistency 与外部一致性 External consistency 相对于强调单个产品内部各模块的一致性，外部一致性关注产品在不同平台下或不同产品之间的一致性。例如，在移动端和桌面端提供相似的产品视觉和体验。又如，在 Adobe 的不同产品之间提供相似的交互逻辑。

如何保持产品的一致性？使用设计系统应该是最佳答案。

设计系统创建的目的不是为了总结一个文档来“赏心悦目”。它的主要作用之一是用于指导团队后续的设计工作，来达成更好的一致性。可复用的组件与样式，及其交互规范将使得产品内部的视觉和功能一致性得到保证，同时跨产品或跨系统的外部一致性问题也得以在设计系统层面被统一解决。

看起来，解决一致性问题只需要引入设计系统就好了，但事情似乎没有这么简单。

在使用 AI 设计系统维护功能扫描设计稿提取新增样式与组件时，我们会发现值得添加到设计系统的新样式与组件，但也会发现不少一致性问题。更令我们惊讶的是，即便在已经经过了设计评审、技术评审并最终上线为用户使用的产品设计文件内，一致性问题依然广泛存在。

问题出在哪里？进一步分析一致性问题可以发现，出现一致性问题的图层中，大部分都没有引用设计系统中的样式或组件。

举个例子，你能发现下面的一组界面中的设计一致性问题么？

界面中共同 3 处一致性问题。分别是：

1. 1.两个按钮内文本的字重不同；
2. 2.两个按钮的颜色填充不同；
3. 3.两个按钮的长度不同。

发现了么？这些没有引用设计系统的“独立”图层，一旦出现细小的属性差异，往往难以被肉眼观察到。这就是为什么在经过重重检查后，这些设计文件仍然存在一致性问题的主要原因。

看起来，只要设计中没有独立图层就可以避免一致性问题了。很遗憾，这是不可能的，设计系统本无法完全满足设计文件的需求：

• 设计系统为了保证使用效率，只会覆盖高复用性的设计元素；
• 设计系统往往会落后设计的最新需要，贯彻设计系统先行的理念有很高的成本；
• 通常只有业务发展到一定规模时，才会引入设计系统实践，基于历史设计文件进行的修改也会面临旧有设计一致性的挑战；
• ……

那么，是否可以更高效地发现这些独立图层呢？

这就是 AI 一致性检查的设计初衷。

一致性检查功能设计

包括 Style Organizer、Design Lint 在内的很多工具，都可以对设计文件中的文本、颜色等样式进行检查。Motiff 妙多希望在原有工具的基础上，利用 AI 能力探索更多可能。

判断设计文件内不需要检查的内容

设计文件内许多内容并不需要进行一致性检查，例如：

• 尝试性质的草稿或标注并不属于交付内容；
• 设计文件中的插画、营销内容，通常并不受到设计系统限制；
• ……

不能跳过这些内容意味着检查结果内混入干扰因素，使得发现真正的一致性问题变得困难。

通常，解决这个问题的方法是跳过“已锁定”的图层，并“期待”用户愿意在检查前逐个找到并锁定。这当然可以解决问题，但额外的操作使得检查过程变得繁琐。

Motiff 妙多尝试使用 AI 来解决这个问题，不同于根据规则的机械对比，AI 一致性检查可以扫描页面，智能识别出不需要进行检查的内容：

• 位于 UI 界面外的设计内容；
• 位于蒙层下的设计内容；
• 插画或营销图；
• ……

当然，AI 一致性检查仍然支持跳过用户锁定及隐藏的图层，最大限度满足设计师的需要。

支持组件一致性检查

不同于已有的一致性检查工具仅支持对样式的检查，AI 一致性检查还支持对于组件的检查。这使得设计中常见的组件大小、元素间距差异；文本、颜色、圆角样式误用等一致性问题也能得到提示。

在进行AI 一致性检查时，设计文件内符合常见组件特征的图层将被自动识别并提取出来，并与设计系统内的组件母版进行对比，其中未引用且属性与已有组件不完全相同的图层将被标记出来，供设计师再次确认。

当前我们支持 8 类组件的一致性检查，这 8 类组件通常也是最先被纳入设计系统规范的组件类别：

更多细节

即使在 AI 的帮助下，想要完成对成千上万个图层的一致性检查仍然不是一个十分轻松的任务，AI 一致性检查也提供了一些细节优化，尽可能提升检查效率。他们包括：

• 支持平移缩放画布逐个查看异常图层，这在设计文件相对复杂时将非常有用；
• 支持一键替换相同属性的文本、颜色样式，不存在相同属性样式时，还可推荐相似样式用于替换；
• 可配置在检查时忽略文本行高差异。

AI 一致性检查的未来

对于组件一致性检查，我们希望通过扫描并理解用户设计系统文件内组件的排版、命名方式，尝试整理设计系统对于组件相似性的偏好。借助这一能力，组件一致性检查将支持推荐相似组件，并且可以更智能地排除设计系统尚未进行规范的组件。