GE Digital 用戶體驗總監與你探討: 設計系統中的「一致性」與「靈活性」

這篇文章的內容來自 UXPin 組織的 Design Systems Virtual Summit 系列視頻分享。本文並非對視頻內容的詳細字幕記錄，而是對主講人的口語化表達和偏個人化內容做出主觀編輯、梳理重點內容之後匯總而成。有機會的同學前往 YouTube 觀看原視頻能夠獲得更豐富的體驗～

視頻地址：Consistency vs. Flexibility in Design Systems by Ken Skistimas

你將會了解

• 怎樣定義設計系統中的「一致性」與「靈活性」
• 企業產品中不同的業務場景會影響哪些特性
• 怎樣從品牌設計中獲取靈感，對「一致性」與「靈活性」做好平衡控制
• 怎樣維護設計系統的「一致性」

主講人

本期主題

我們的設計系統團隊：

• 由 5 位設計師，7 位設計技術專家（同時具備編程與設計技能的成員）， 1 位產品經理，1 位 QA 組成
• 我們與其他分布在全世界各地區的團隊協作
• 支撐了上百個應用，服務於大約 10000 多名開發者
• 位於 San Ramon，CA
• 以季度為周期做計劃，每天都有更新，能及時地處理反饋
• 代碼都在 GitHub 上開源

那麼進入今天的主題，「設計系統中的一致性與靈活性」。這兩點是我們自己經常在設計過程中有所糾結的，我們也因此總結出了一些經驗與大家分享討論。圖中的 Slider 其實就是我們系統中的一個組件，接下來它會頻繁出場（笑）

大家普遍會認為「一致性」與「靈活性」是互相對立的。但其實一個成功的設計系統需要對這兩點做到很好的平衡控制。

我相信大家和我們一樣，在開始進行設計系統構建的時候往往對「一致性」投入很大的關注，畢竟這是我們作為產品設計師的天性，也是設計系統的一個重要特性。

我在 2016 年 10 月加入了 GE Digital，開始在 Predix 這個 IoT 服務平台工作。

這是一個能源廠里的測量機，圖中圈出來的地方都是感測器，用來測量震動、溫度、旋轉、壓力等數據，這些數據都會被收集上傳到 Predix Cloud 上，再由 Predix UI 渲染成界面呈現給用戶。

這裡是一些我們的設計系統需要服務的行業場景：

• 資產評估
• Predix 平台
• 能源
• 地區管理
• 航空
• 可再生能源
• 交通運輸
• 製造

當我加入的時候，我們已經有了兩個網站，一個是給開發者服務的組件庫（左），另一個是給設計師服務的設計規範（右）

雖然看起來這兩個網站已經構成了一個不錯的設計系統雛形。但事實上我們去收集了不同業務部門的界面（上圖），發現了殘酷的現實：有一部分業務部門發現 Predix 並不能滿足他們的需求，因而開始使用自己設計的組件，各部門之間又疏於溝通，最後的結果就是及其混亂的界面和交互，應該不會有用戶相信這些應用是屬於同一個平台的。這給我的感覺就像…我們還處在 Wild West 時期。

這簡直是「靈活」到極致了，但我們已經不敢把它稱為一個系統了。我們痛定思痛決定再次在企業里進行一次「一致性革命」。我們開始針對不同的組件來組織 Workshop。

不同業務部門的設計師都帶著自己的業務洞察和建議來參加 Workshop，傾聽用戶聲音的感覺很棒！

這項活動進行了一個半月之後，我們發現有一個呼聲總是在不斷的出現：「我們需要更多的「靈活性」！」

好吧…靈活是個人人都愛的優質特性。但我其實是有點困惑的，因為我們系統里已經有了相當多的可配置屬性，自定義程度相當不錯了，你可以修改單個控制項的各種屬性，也可以將它們像樂高積木一樣拼湊成更複雜的組件。

為了真正搞清楚大家所提到的「靈活性」意味著什麼，我們決定深入到每個業務的實際場景中。

我必須得說我們的業務真的是上天入地無所不在。你會在能源廠、消防站、風力發電廠看到我們的系統，這也意味著極度複雜的使用場景。比如消防站里的電腦系統很落後，我們的系統需要在 IE9 中流暢運行才能保證業務順利進行；又比如這位在風力發電廠工作的員工，他在移動設備上使用 Predix，很可能數據信號質量非常差，人身安全也沒有完全的保障，那這個時候用戶對我們系統的需求顯然只是極度的高效和穩定吧，「我要趕緊把活幹完，再待下去我要窒息了！」

這是另一個典型的使用場景，使用者所在的空間充斥著屏幕和界面，而且燈光昏暗。

其實業務場景的不同會造成一些特性的不同，比如：

• 購買者和使用者：購買業務軟體的人不一定就是使用者本人；同一個軟體的用戶也會有各自不同的使用目的。
• 使用環境：如陽光明媚的戶外和陰暗幽靜的地下室，是兩種不同的使用環境。
• 使用案例：如老闆和普通員工的視角和出發點不同，就形成了兩種不同的使用案例。
• 已有的使用習慣：在使用我們產品前，用戶可能用了很久其他的軟體完成同一種工作，這樣就形成了使用習慣。他會習慣性地按舊有的模式操作新的軟體。
• 技術棧：同一平台下，業務場景的不同往往會導致軟體使用不同的技術棧，導致數據難以互通。

這麼一分析，我們就意識到如果我們一味地追求「一致性」，大家根本不會使用這個死板的系統。實在有太多的場景我們無法保證完全覆蓋。

定義「靈活性」：

• 高度可配置可自定義並不意味著高度靈活
• 注意不要過於糾結單個組件的細枝末節，時刻保持系統性的全局視角
• 一定要搞清楚需求背後的原因，再開始進行調整或設計
• 不要在沒有必要的時候追求「一致性」

這裡我想從品牌設計的角度來講解下為什麼「一致性」並不總是對的。

在品牌設計中，我們可以看到三種子品牌模式：

• Branded House（同在一個屋檐下）：如 FedEX 的品牌，所有子品牌都建立在父品牌的基礎上
• Blend（混合式）：如可口可樂，他會有零度、健怡等等支線，同時也擁有雪碧之類完全不是可樂的品牌
• House of Brands（獨立子品牌）：如聯合利華，各種子品牌是完全獨立的

那麼我們其實可以借鑒這些模式來設計我們的系統。對於 Predix 來說，前兩種更適合我們。

例如，航空業是我們所服務的一大行業場景，其中有四種關鍵業務：維護、航班計劃、零件庫存、通知，這些業務各自對應一個 App。而航空業的核心工作模式和流程要求這些 App 之間的數據必須互通，一個員工可能要使用不止一個 App 來完成他的工作，因此不同 App 的使用體驗也要保證一致。那麼在航空業這個場景下，「一致性」的價值就凸顯出來了。

但我們再來看其他行業場景，交通運輸業就有著和航空業完全不同的工作模式和流程。例如，一個交通運輸業的員工只需要使用一個特定的 App 就可以完成所有工作，不需要數據的互通和體驗一致。

而資產性能和能源兩個行業場景的核心工作流程是有重疊的，會產生一定的依賴性。這種情況，就需要將「靈活性」納入考量。

定義「一致性」:

• 在 Branded House 模式下，做到「一致性」很簡單
• Blending 模式需要更多的「靈活性」考量
• 不同行業或業務的核心工作流程會幫助你決定何時需要「靈活性」

這時我們意識到要做好兩者的平衡

我們來看一下英菲尼迪的車族，它們雖然是不同的車型，尺寸和細節也有很多不同，但這張圖裡你會發現它們放在一起還是非常和諧。這是因為它們的骨架和曲線非常相似，融入了設計師對「一致性」的思考。

這裡的兩個界面都是從我們的系統里組裝出來的，乍一看有很大不同：導航、圖表形式、顏色、布局等等，但整體觀感仍然是和諧的。

這是因為其中有很多一致的元素，例如字體。我們的系統只用了一種字體：Inspira Sans，使用 CSS 樣式來增加「靈活性」，建立層次關係。

我們有提供「主題」功能，並且考慮到使用場景複雜多變，並沒有對灰度進行嚴格限制。而且我們的產品有很重的數據可視化需求，因此我們建立了層次豐富的色板來提供支持。

由於我們在顏色上提供了豐富的可能性，各業務團隊就可以靈活的配置出自己的視覺效果。

這三個界面的結構、布局、內容是一樣的，只是使用了不同的灰度組合。左邊的界面就很適合在暗光環境下使用。而中間和右邊的界面可以凸顯不同的區域。整體來看仍然符合 Predix 的氣質。

網格和間距方面。我們更偏好用留白來表達空間關係，這比使用卡片或線條更加簡潔大氣。我們會把正確的間距直接在組件里呈現出來。

表單和輸入組件則是在經過可用性測試後做到了桌面端與移動端樣式和交互的統一。

我們也建立了 SVG 圖標庫

在 GE 我們不可能只用一套技術棧來構建所有產品。於是我們用 Polymer 來寫桌面端組件，同時我們也提供了 CSS Module 來方便地進行樣式套用。

我們為設計和代碼都編寫了詳細的指南文檔，記錄下那些被提及了不止一次的問題。總結出 使用指南和 最佳實踐 可以幫助建立「一致性」。

並不是每個人都習慣在網站上下載一個 Sketch 文件來查看你的系統到底是什麼樣。更友好的方法是讓用戶可以在網站上對他感興趣的組件進行直接的交互。提供可供參考的開發實例和設計案例減少上手難度。

當然我們的 Sketch 文件里也放入了一些最佳實踐的案例，這些頁面里的配色、版式等等都是經過我們驗證並推薦的。這些做法都給用戶提供了極大的方便。

維護「一致性」 :

• 建立一條阻力最小的上手流程，讓系統使用者輕鬆上手
• 沒有被寫到文檔中的都是模糊的，優秀的文檔能夠降低用戶的決策成本
• 給用戶提供能夠即時查看即時操作的參考
• 指南並不是定死的規則，很多事情都是有討論空間的。限制太死就會導致用戶另闢蹊徑

把設計過程公開出來才能夠建立良好的信任關係。在 GE，我們經常會把用戶叫過來與我們的設計師一起進行討論和設計，你能夠很容易地看到我們的 Roadmap。這樣大家才會對你所做的設計判斷產生足夠的信任。

下面是一些可供參考的做法：

• 把正在做的東西拿出來分享
• 鼓勵大家貢獻想法
• 鼓勵更多的協作行為
• 我們通過建立公開的 Slack 頻道，Office hour 等方法來讓大家獲得更多的參與感

總結：

• 單純地提供多種選項或自定義功能並不意味著靈活
• 「一致性」和「靈活性」一定是相輔相成、和諧共存的
• 關注用戶的工作流程，可以很好的幫助判斷何時需要更多的「靈活性」
• 上手阻力越小，就會有更多的用戶採納你的最佳實踐，更有利於「一致性」
• 設計系統參與者之間的信任感是「一致性」的重要保障

感謝大家的閱讀，我是 Teambition 視覺設計師 孫浩，最近在負責 Teambition Clarity Design System 的設計工作，之後會在知乎分享更多和 Design System 相關的譯文與實踐經驗，期待與大家有更多交流～

我的微信 ID：sunhow

我的 Dribbble：Sun