【譯文】設計進化論

01-28

「技術公司一直以非常驚人的速度發展，構建軟體也異常複雜」

Alex Schleifer（Airbnb的VP）,在他的文章《The Way We Build》中這樣寫道。這是一篇了解到 Airbnb 如何重新思考他們的設計方法的非常好的文章。

在 Etsy (註：Etsy是一個網路商店平台，以手工藝成品買賣為主要特色，曾被紐約時報拿來和eBay，Amazon和「祖母的地下室收藏」比較) ，我們有類似的啟示。要理解如何以一種預期著必將充滿變化的未來的方式進行設計，需要我們在設計方法上的範式轉換。

和債務打交道

隨著科技公司的發展，你也逐漸成熟，慢慢你會發覺自己的「債務」，不是經濟債，而是技術、設計債。債務都是短期內累積的。相應利息的產生則是管理、修復、重構和建立在不良的書寫和代碼上的。

設計債是由設計團隊產生的，為了孤立的問題創造了不能重複使用的解決方案。設計債是由過度豐富的、不能重複使用的和不一致連貫的風格、處理方式和反饋組成的。這個利息是通過管理和修補不可能完成的任務。

我們看到了設計債已經影響到了網站的可用性和性能。界面交互的不一致性影響了用戶體驗，這些特殊界面的 CSS 代碼增加了頁面的負載，而且衝突的代碼使得惡夢隨時發生。

這也是極大地拖我們的後腿。

下面是 Jessica Harllee 在升級 http://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 周的時間重新設計、構建這個項目。

債務一直壓在你身上，它的存在消磨你的時間、資源，加劇了及時構建產品的質量風險。但通過訴諸系統，我們有能力快速開發更好的產品。

翻譯：Tiger, Run! 原文作者：MarcoSuarez
原文鏈接：https://medium.com/etsy-design/designed-for-growth-cdc2a01a8a8a
本文由非科班設計翻譯小組翻譯