書引

《設計體系：数字產品設計的系統化方法》作者研究過各類公司建立設計體系的經驗，向我們展示了如何通過構建設計體系以支撐数字產品的設計，在符合團隊文化的基礎上，確保設計體系能夠幫助實現產品目標。

本書面向的讀者：嘗試將設計體系融入組織中的中小型團隊

△ [英] 阿拉 • 霍爾馬托娃，2019

本書簡介

「 應當先做設計再出規範，還是先出規範再做設計？」

「如果老闆的意見與設計師自己的想法相左，設計師應該堅持己見嗎？」

這些都是工作中常常會遇到的問題，它們很難被徹底解決，為了改善它們，一些優秀的設計團隊開始以更為系統的方式展開設計工作——構建一套設計體系。談到設計體系，最容易想到的是各種控件組成的 library，但這些僅僅是設計模式或者說是樣式指導，我們需要將其納入更大的體系之中，讓這些模式之間緊密相連，形成一個整體，以確保設計體系能夠有效幫助實現產品目標。

閱讀文章 >>

建立設計體系的優勢：

• 通過清晰的設計語言，明確產品調性
• 提高設計決策、設計與開發溝通的效率
• 讓團隊更加穩固

如果你對設計體系的理解還不是很清晰，可以先看看下面這些成熟案例：

1. 平台級設計體系

APPLE 的 Human Interface Guidelines：
https://developer.apple.com/design/human-interface-guidelines/

Google 的 Material Design：https://material.io/

Microsoft 的 Fluent Design System：https://www.microsoft.com/design/fluent/

2. 公司級的設計體系

Atlassian 的設計體系：https://atlassian.design/

IBM 的 Carbon 設計體系：https://www.carbondesignsystem.com/

螞蟻金服的 Ant Design：https://ant.design/

設計體系

何謂設計體系，從設計實踐的角度來說，它包含三個層級：

第一層級：組件庫

界面中所有被複用的組件。比如按鈕、文本框、標籤頁等，指導設計師及前端工程師高效開展工作。

第二層級：設計語言

設計語言是將產品塑造得獨特且風格統一的一套法則。組件庫僅僅提供了對同一類元素的約束，缺少不同類元素之間的聯繫。而通過設計語言，你可以明確元素之間的結構關係。

優秀的產品都會打造屬於自己的設計語言，統一自身的風格且區別於其它產品。比如很多優秀的產品，剝離開它的 Logo，你依然能看出這是它的產品。

△ 反例——前一秒多麼炙手可熱，后一秒就多麼樸實（圖例來自知乎小螳螂品牌服務機構）

△ 認出是哪款車了嘛

△ 特色白

第三層級：設計體系

組件庫和設計語言定義了產品該是怎樣的（what&how），卻沒有說明為什麼是這樣構建和定義的(why)？設計體系則包含以下內容：設計目的、設計原則、組件庫、樣式指南，以及設計與開發的工作流程的實用工具。它是構建設計語言和設計模式的底層基礎。

書籍概述

全書共分為兩個部分。

第一部分討論設計體系的基礎——模式與實踐。

模式指的是可復用的元素，它們之間相互關聯，構成了界面的設計語言。

實踐則是指創建、使用和共享這些模式的方法，比如確立一個使用原則和構建一個模式庫。

第二部分側重於闡釋建立和維護設計體系的實際步驟和實用技術。

規劃任務，編寫界面清單，建立模式庫，以及創建、記錄、發展和維護設計模式等。

設計體系不是一夜之間就構建出來的，而是通過日常的實踐逐漸形成的。為了讓這個體系在團隊中運行更有成效，我們需要理解它是如何運行的，它包含什麼，出現問題的原因是什麼，而團隊的組織架構、企業文化、設計方式等都會影響設計體系。

第一部分要點概述

第一部分的要點：設計目標、設計原則、共享設計語言、建構設計模式。

1. 目標

建立設計體系的目的是為了實現產品的目標。

無論是團隊的運作方式或是設計模式，都應該針對這個產品目標進行設計與優化。

高效的設計體系中，不同的子體系會因為同樣的目標而相互連接，協調一致，如果設計體系發生割裂，會導致用戶體驗的割裂。

2. 原則

堅實的原則是任何設計體系得以良好運轉的基礎。

不同公司有着不同的原則，有的側重於品牌，有的側重於團隊文化，有的側重於設計流程。設計原則很可能只適用於某一段時期或特定項目。

如何制定有效的設計原則：

• 從目的開始。設計原則必須遵循產品的目的，傳遞產品的精神。
• 尋找共識。如果是在定義階段，讓團隊成員各自回答關於設計原則的問題，從中尋找共識，確立優先級。
• 設計原則的描述要真實且貼切，實用且可操作

模糊的設計原則：明確

實用的設計原則：「第一優先級只有一個，什麼是你希望用戶最先看到的或最先用到的」

模糊的設計原則：簡單

實用的設計原則：「把界面做到牢不可破，就像兒童玩具一樣，確保用戶可以隨意探索，不會因為錯誤操作而崩潰。」

模糊的設計原則：有用

實用的設計原則：「從需求開始，去做調研、去分析數據，去與用戶交流，而不是做假設。」

3. 共享設計語言

設計模式需要通過設計語言連接起來，語言是協作的基礎；

設計語言是整個團隊為了打造有效而統一的用戶體驗而建立的，團隊成員對於實現目標會有着相似的心智模型，才能更有效地進行設計創造。團隊成員不僅要對語言形成共識，還要對語言的用法形成共識，包含如何創建模式以及使用設計模式的方法和原則。

建立設計語言的好處在於，它可以讓我們較少地關注模式，而更多地關注用戶，通過有效的設計語言彌合系統模型與用戶模型之間的差距。

在確定設計語言的時候需要注意，要確保你的設計語言，可操作，可重現，見下圖。

△ Tom Osborne的「視覺音量指南」

具體實踐：

• 讓團隊成員清晰理解品牌願景，將設計體系作為入職培訓的一部分
• 共享（在團隊內宣貫及培訓）設計方法、前端架構
• 細化工作細節：比如設計與開發統一命名；打造典型的界面庫；定期進行模式庫的更迭與維護

4. 設計模式

設計師常遇到的問題是，如何將高層次的概念，比如設計原則、品牌價值等，物化為具體的用戶界面元素。其實關鍵在於建立一種「優先級」的意識，比如對於 TED 來說，信息的清晰比美觀更重要，因此在界面設計上，我們可以看到它們選擇了更容易容納長標題的布局方案，而沒有妥協於美觀度選擇文字截斷的方式。

△ TED網頁設計

我們設計界面的目的有兩個，實現某種目標以及創造某種感受，因此會產生兩類模式，功能性模式和感知性模式。

功能性模式

功能性模式是界面中有形的組件，幫助用戶或者激勵用戶完成某種行為。它的執行、內容、交互方式和显示效果可能會變，但是它所鼓勵的核心行為保持相對穩定。團隊需要充分理解模式的目的，才能確保它和用戶的預期一致。

感知性模式

感知性模式則更像樣式，它用來描述組件是什麼類型的，給人的感受如何。比如兩套結構相同的房子，傳遞出來的感受可以千差萬別——一個溫柔居家一個冰冷工業風。感知性模式可以讓系統更為連貫，好的設計體系能夠在品牌的一致性、創造性表達以及業務需求之間取得平衡，設計師無需過於拘泥於一致性。

由於数字設計已發展多年，大多數的設計模式都已打造成型併為人所熟知，設計師無需在此花費太多時間。如今，設計師和開發人員都希望建立動態的模式庫，包含設計模式及其對應代碼，見下圖為 ant motion 的動態組件庫。

△ ant motion動效組件庫

具體的實踐方式將在第二部分進行詳述。

歡迎關注作者微信公眾號：「二樓自習室」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五平台首頁_想學會系統化設計？為你整理了這份《設計體系》的讀書筆記