翻译：Tiger, Run!
原文作者：MarcoSuarez
原文链接：https://medium.com/etsy-design/designed-for-growth-cdc2a01a8a8a
本文由非科班设计翻译小组翻译
“技术公司一直以非常惊人的速度发展，构建软件也异常复杂”
Alex Schleifer（Airbnb的VP）,在他的文章《The Way We Build》中这样写道。这是一篇了解到 Airbnb 如何重新思考他们的设计方法的非常好的文章。
在 Etsy (注：Etsy是一个网络商店平台，以手工艺成品买卖为主要特色，曾被纽约时报拿来和eBay，Amazon和“祖母的地下室收藏”比较) ，我们有类似的启示。要理解如何以一种预期着必将充满变化的未来的方式进行设计，需要我们在设计方法上的范式转换。
和债务打交道
随着科技公司的发展，你也逐渐成熟，慢慢你会发觉自己的“债务”，不是经济债，而是技术、设计债。债务都是短期内累积的。相应利息的产生则是管理、修复、重构和建立在不良的书写和代码上的。
设计债是由设计团队产生的，为了孤立的问题创造了不能重复使用的解决方案。设计债是由过度丰富的、不能重复使用的和不一致连贯的风格、处理方式和反馈组成的。这个利息是通过管理和修补不可能完成的任务。
我们看到了设计债已经影响到了网站的可用性和性能。界面交互的不一致性影响了用户体验，这些特殊界面的 CSS 代码增加了页面的负载，而且冲突的代码使得恶梦随时发生。
这也是极大地拖我们的后腿 。
下面是 Jessica Harllee 在升级 etsy.com 网站的按钮样式代码。红色是删除掉的，绿色是重写的。为了做一个简单的视觉变化，里面大部分代码都被改动了。
创造，并不是堆债。创建不可复用的代码和设计才是堆债。但是当你建立可以重复使用的东西时，你可以有效地创建一个系统，这是我们发现管理设计债的最好方式。
设计系统
就像很多公司一样，我们创建了一个设计系统团队。这个团队的任务就是建立一个系统，通过创意和易用的方式来传达 Etsy网站的体验。但是在组建这个不到一年的团队之前，我们的系统是由我们的销售体验团队的几个设计师带领的一群热心的志愿者建立和维护。这个工作是志愿者偿的额外工作项目，事项推进的很慢。一段时间后，我们决定组建全职团队。然后设计系统团队应孕而生。我们现在拥有了针对iOS, Android, web 和邮件的通用工具包。
我们叫做工具包的，其它人叫做设计指南或模式库的东西，它是一种可重复使用的 UI 设计组件，前端工程师用来创建任意数量的设计方案的资源。很多团队已经建立了设计系统并且将它们广泛开源用来启发灵感和学习教育。Etsy 的工具包还没有开源，但我们相信在不久的将来会和大家见面。
这里有几个正在使用的小技巧保证我们网站的灵活性而不会损失常规的一致性和美观度。
原子设计（Atomic Design），作者是 Brad Frost。这个概念挑战了你以最基本的形式，“原子”来思考你的用户界面。这些原子可以以任意数量的方式进行组装，创建任何东西。在任意情况下允许灵活性的同时保证了一致性。
面向对象 CSS（Object Oriented CSS, OOCSS）改变了你如何书写 CSS代码。在概念里和原子设计相近。它是在写最小对象并且可重复使用的 CSS 代码的灵活解决方案。它有两个大的原则：主题、框架的分离，和根据内容使用选择器。
Sass变量（Sass variables）是一种非常棒的 CSS 代码管理方式。你可以在 1000 个类中添加一个变量，而在一个地方写入一个十六进制，而不是在 1000 个不同的类中重复十六进制的颜色。这使得代码修改变得异常简单。
设计令牌（Design Token）添加另一抽象层，使变量易于被修改。我们可以用一设计令牌如$primary-button-background，而非使用变量$orange来给按钮添加颜色。然后在另一独立的令牌文件中，设计令牌$primary-button-background引用变量$orange，变量$orange引用十六进制颜色。
所有设计都是系统设计
惯例优先原则（Convention overconfiguration）是一个也适用于设计的工程术语。通过结合系统的惯例，决策侧重于信息架构和用户流。我们不希望设计团队一遍又一遍的重复解决相同的设计问题。这非常浪费时间。我们希望他们专注于项目里面独有的问题挑战。系统应提供必要的约定来解决来解决周期性的设计问题。
但是当发现系统缺少配置时会发生什么？这是范式的转变。
不是造成更多的定制解决方案，这会增加我们的债务，而要创造出可以反馈到系统的解决方案。如果我们创建的所有内容都使用系统或反馈系统，那么所有的设计都会是系统设计。
系统设计团队是工具包的维护者，而非封闭的花园。所有设计师都会并且有能力为我们的工具包做出贡献，让它更易用和有生命力。我们设计系统团队做出的最恰当工作就是倡导使用工具包，引导团队发挥它的优势，并最终在整个公司培养设计系统的心理模型。
无债一身轻
虽然我们远离设计债，但我们已经感受到了完工的轻松了。在夏天，我们重新设计了允许买家和卖家直接聊天的对话工具。这是一个有些年头的工具，它有多个采用不同代码和处理方式的桌面和移动端模版。重新设计它完全使用了我们的网络工具包。并且从中继承了如快速响应、交互性，一致性等诸多优点。它搭建起来也非常迅速。从启动到推出，只花费了 8 周的时间重新设计、构建这个项目。
债务一直压在你身上，它的存在消磨你的时间、资源，加剧了及时构建产品的质量风险。但通过诉诸系统，我们有能力快速开发更好的产品。
·End·
微交互 ∣细节设计成就卓越产品
长按，识别二维码，加关注
