看不見的設計

如果說到設計師的工具，你會想到什麼？紙筆或者 Sketch 、Framer 這一類設計軟體 ？有沒有想過，其實編程也是一種強大的設計工具。

Airbnb 的設計經理 Amber Cartwright 曾在博客中寫道：產品設計師利用人工智慧或者類似於機器學習的技術進行工作的過程是一種看不見的設計。

從 Airbnb 在 2017 這一年的摸索實踐中，我們也能發現他們正在逐漸地使用這個看不見的工具。這一年他們陸續發布了 Lottie 、react-sketchapp 等工具，同時也構築了一個強大的設計系統。

我一直對 Airbnb 的設計流程很感興趣，也看過其設計團隊一些文章和視頻，今天我試圖從一個旁觀者的角度去窺探他們是如何在設計流程中使用編程這個強大的工具的。

協作模式的改變

隨著這些年互聯網的快速發展，我們要設計的產品也日趨龐大和複雜，比如 Airbnb 的產品就面臨國際化和多平台等問題，這給我們設計師和工程師都提出了很大的挑戰。

以往的單向協作模式到今天就不再適用了，現在設計師和工程師的協作流程將會是一種循環演進的模式，我們之間的交流也比以往更多。

但是，在這兩者之間卻存在著一些很難跨越的鴻溝，降低了我們的協作效率。

為了消除這兩個角色之間的障礙，讓設計師和工程師有更多時間去做各自領域更具價值的事情，我們必須消除這兩者之間的鴻溝。

因此，我們需要構建一個由設計師和工程師共同維護的設計系統，並且它是隨著時間不斷進化的。

當然，為了保證這個設計系統的穩定可持續性，我們必須保證它是在每個參與者都充分理解了團隊的基本設計原則之後才開始搭建的。

在傳統印象中，設計師和工程師是兩種完全不同的角色，甚至有時候他們的性格是截然相反的——一個感性浪漫，而另一個理性冷靜。

以此來看，讓設計師和工程師共同維護一套設計系統可能看起來不太靠譜，但是就某些方面來說我們卻有著極其相似的一面。

比如設計師在進行在設計之前會歸納拆解，抽象出不同的組件來支撐需求，而工程師也會將代碼模塊化，形成一個可維護可擴展的庫。

我們不過是用自己擅長的語言講述同一個故事而已，而這個設計系統就是我們要講的故事。

設計系統的資源管理

在以往的設計工作流中，我們依靠設計師人工管理自己的設計資源，這沒什麼問題。可是當面對一個設計系統時，還依賴人工就會有些混亂和疲累。

一個複雜的設計系統包含的設計資源是極其龐大的，這些資源可能包括設計規範、組件庫、媒體資源等等，而且還將面臨版本管理和批量處理等問題。

對於這些，結構化的數據卻有著天然的優勢。所以我們只需要將所有的設計資源數據化，生成一份唯一的數據源，此後只維護這個唯一的數據源就可以了。

基於此，Airbnb 的設計師們做了一個設計資源生成和管理的工具—— react sketchapp ，通過這個工具，我們可以通過代碼去生成設計資源，而這份代碼就是唯一的數據來源。

如果我們要對設計資源進行版本控制，就直接對這套代碼進行版本控制，整個設計資源庫就有了版本的管理。

此外，我們將某些公共屬性（比如顏色）提取出來作為變數，當我們想要批量修改這些屬性時只需要修改這個變數就可以達到一處改動多處變化的效果。

使用代碼生成或維護設計資源的好處還有很多，比如我們還可以使用真實的數據去渲染等。

與此同時，他們還在探索另一個實驗項目——Lona ，Lona 可以更進一步地幫助我們構建一個完整的設計系統，無論是組件還是色彩、樣式等等都可以通過 Lona 來構建。

我們還可以通過 Lona 來快速組合組件製作原型，產生多設備尺寸下的自適應的界面，還能夠結合 Lottie 添加一些動畫。

進一步縮小鴻溝，快速原型

也許到了這一步，你會認為機器已經幫助我們完成了很多繁雜的任務，但 Airbnb 的設計師卻認為這還不夠。

他們認為，當我有一個新的產品想法時我能夠立即去驗證它 ，也就是說我能夠立即生成一個產品原型去進行測試。

得益於 Airbnb 完整可靠的設計系統，我們可以藉助機器學習來幫助生成原型。在 Airbnb 的設計系統中每一個組件都有自己獨一無二的名字，所以我們可以訓練機器將草圖與之一一對應，並能夠識別出一個簡單的組合草圖，快速生成原型。

目前這套工具已經展現了極大的潛力，隨著設計系統的不斷進化，在以後人工智慧一定會極大地幫助設計師和工程師去完成一部分工作。

這種協作模式，其實是一種人類-機器共同演進的模式。在設計師和工程師之間，機器搭起了一座橋樑。

編程能幫助設計師做什麼？這個問題我們大概聽到了幾百遍，所能想到的回答也不過是：它能幫助我做一些複雜的動效，能讓我更好地與開發溝通等等。

但是從 Airbnb 的設計實踐中我們會發現自己的認知已經被顛覆，編程在設計領域的運用已經遠超想像。我想，這大概就是設計師未來的工作方式吧。

參考鏈接：

https://airbnb.design/invisible-design

https://airbnb.design/painting-with-code

https://airbnb.design/sketching-interfaces

https://airbnb.design/the-way-we-build

https://github.com/airbnb/Lona

推薦閱讀：