亚马逊AWS官方博客

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

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

这些是 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 构建系统,比如 GruntGulpWebpack。通过 ReactReact 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

Deirdré Straughan

Deirdré Straughan

Deirdré 致力于推广技术和帮助他人开展这方面的工作已有 30 年的时间。截至目前,她撰写了一本书并参与了两本以上书籍的编辑;她还开展和进行技术培训、制作了数百个视频并进行技术讲座直播;此外,她还负责多个技术博客的编写、编辑和管理以及负责活动的管理。自 2010 年起,她便利用自己的一技之长投身云计算,投身开源的时间还要长一些。她于 2017 年 6 月加入 AWS,担任 AWS 开源团队的内容负责人。她的 Twitter 账号是 @deirdres。