OpenSource | 通过设计一致性来构建客户信任的开源工具

“领导者会从客户着手，并以反推的方式开展工作。他们积极致力于赢得客户信任并建立持久的信任关系。”

这些是 Amazon 领导原则的开篇之语，而领导原则正是我们全公司赖以生存发展的根基。我们所做的一切都是从预期的客户利益出发，不断努力，保证在每个接触点赢得客户的信任。

用户体验设计如何让客户受益？如何帮我们赢得客户的信任？Amazon 高级用户体验设计师 Danny Banks 引述了 Jakob Nielsen 的这样一段话：“始终如一的体验可帮助组织赢得客户信任。每次互动都是公司整体用户体验的一部分。如果不同渠道的用户体验不一致，用户就会质疑组织的可信度。”

“在我多年的设计生涯中，我发现许多组织在实现跨应用程序和平台一致性方面存在问题，” Danny 说。“细节真的十分重要。客户并不知道为什么有些设计看起来好，但他们能够分辨出好与坏。不完全相同的颜色、一两个像素的差别 – 这类细微的瑕疵和不一致之处看起来或许没什么大不了，但积累起来就会造成不协调的设计：让人产生一种有些地方不对劲的感觉。作为用户体验设计师，我们的职责就是要关注这些细节，解决细微之处的瑕疵，保证客户不会发现这些不完美之处。”

Danny 专门从事需要在桌面浏览器、iOS 和 Android 设备上保持一致外观的应用程序设计。典型的工作流程是这样：首先是产品经理提出一项功能或应用程序改进。用户体验设计师将与他们配合工作，确定如何在应用程序中设计和构建功能。然后，设计师将在 Sketch 中创建一个设计，并与产品经理一同敲定最终设计。最终的 Sketch 文件将连同功能的业务需求文档一起交给开发人员。

在代码编写过程中，开发人员必须联系设计团队，询问字体大小、背景颜色等细节。在 Amazon 快速发展的 DIY 文化背景下，一些开发人员会走捷径，例如使用取色器工具来查找颜色的十六进制值，但这可能会导致颜色略有不同。这些值以及 UI 组件的其他属性需要手动复制到各项功能的几十处代码之中 – 而这又是一个可能在不经意间造成不一致的环节。

一项明显的改进就是在 Sass 中工作。Sass 允许为设计属性使用变量，然后将其编译成标准 CSS。但 Sass 只能解决网页的问题。在创建样式变量以及为这些变量指定样式值方面，iOS 和 Android 开发工具各有自己的方法 (例如，iOS 使用 RGB 十进制颜色，而 Android 则需要十六进制)。因此有大量的细节需要管理，正如 Danny 团队的愿景中所陈述的那样：“我们有责任让这些细节正确无误。”

Jeff Bezos 曾经有句名言：“仅仅有好的意愿还不够，必须借助良好的机制才能实现目标。”Danny 在前端开发和设计方面拥有丰富的经验，他找到了一种能解决更大的设计一致性问题的方法，并获得了实践机会：“我的经理很有眼光，他鼓励我们参与这种原本不一定会纳入团队路线图的优秀项目。”

他成功研发了 Style Dictionary – 一个创建跨平台样式的构建系统。

Style Dictionary 让您仅需定义样式一次，即可在任何平台或语言中使用。它提供统一的平台来创建和编辑样式，并且支持使用一个命令将这些规则导出到所有目标位置：iOS、Android、CSS、JS、HTML、Sketch 文件、样式文档等。该系统使用 node.js 编写，通过 npm 以 CLI 的形式提供，但如果您希望扩展其功能，也可以采用与其他任何节点模块同样的方式使用它。

Danny 选择在 node.js 中开发 Style Dictionary 的主要原因是：他熟悉这种语言，而且这种语言还能够简化开发。node.js 可以很好地适应各种 Web 构建系统，比如 Grunt、Gulp 和 Webpack。通过 React 和 React Native，node.js 顺利迈进了移动开发领域。但您也可以将 Style Dictionary 作为 CLI 工具使用，而且不必编写任何代码。”

该项目包括一个易于扩展的模板和格式化系统，可用于将 Style Dictionary 引入桌面、iOS 和 Android 之外的系统：“我们不知道每个人在项目中使用样式词典的具体方式，因此，我们支持轻松创建自定义转换、模板和格式。”

Charles Dorner 是 Amazon 另一个部门的设计技术专家。在一次内部峰会上观看了 Danny 所做的 Style Dictionary 演示后，他问：“您能不能公开这款工具的源代码？以我的个人经验来看，外部开发领域需要这么一款工具。”Charles 希望每个人都能访问这一简单的工具，确保在各种平台间准确体现样式。

最终，以开源形式发布 Style Dictionary 的过程一帆风顺，因为我们有开源团队管理的内部流程。代码中并没有太多与 Amazon 关联的内容，因此我们轻松清理了代码、添加备注并将所有文件整合在一起，让整个项目为开源做好准备。随后，GitHub 代码库公开发布，并通过 npm 提供了程序包。

Style Dictionary 改变了 Danny 团队的设计工作流程。开发人员不需要精确到像素的模型、Sketch 文件或设计文档 – 只需要线框图和组件以及这些组件的 Style Dictionary 值就够了。新字体大小或图标可以随时添加到词典中。现在，在处理大多数项目时，Danny 甚至都不需要打开 Sketch 或 Photoshop。利用 Style Dictionary，可以轻松生成实际应用程序来执行测试，而无需借助模型。Style Dictionary 还可用于实现样式文档构建和更新自动化。

Style Dictionary 于 2017 年夏季在 GitHub 上发布。Danny 和 Charles 仍在进行该工具的开发和维护工作，希望您提供宝贵意见并贡献一份力量。

Charles 表示：“接下来最重要的工作包括为设计师添加导入现有样式 (例如 CSS 或 Android 样式) 的功能，以及导入 Sketch 和从中导出的功能。我们希望大家积极提交新功能需求，让我们了解哪些功能可以帮助他们更得心应手地处理现有工作流程。或许我们还应构建一个编辑器。总而言之，我们希望能有更多用户响应我们、贡献力量、提供反馈并提出更多功能想法。”

您是否有亟待解决的设计一致性问题？在这里下载 Style Dictionary！