《Design System》章節知識概念梳理（1-3）

閱讀譯文版本：mp.weixin.qq.com/s/zF_V7iHam… 十分感謝 C270 大大翻譯前端

原書購買地址：www.smashingmagazine.com/printed-boo…設計模式

由於本身在實習時參與的項目以及畢業設計都是組件庫的驅動、設計與實現，須要設計、Android和iOS共同配合完成，但本身對於設計的不少相關概念並不瞭解，所以在今年四月的時候找到這本《Design System》來閱讀，想由此瞭解國外的設計界大廠對於設計體系的探索認知，從而更好地處理工做中遇到的問題。markdown

閱讀後收穫良多，作一個知識概念的學習記錄，這一篇是第一章到第三章，以後會更新後續的學習記錄。架構

爲了更便於理解，也更適用於我所應用的場景，書中名詞一致修改：框架

設計模式 -> 設計元素
- 功能性模式 -> 功能性元素
- 感知性模式 -> 感知性元素
設計模式庫 -> UI 組件庫（一個廣義的「UI組件庫」不只僅包括「組件」這種功能性設計元素，也包括「風格」這種感知性設計元素）
模塊化 -> 組件化
工程師 -> 開發者

1、設計體系

1. 設計體系

「設計體系」：服務於數字化產品設計的一系列具備內在關聯性的、組織有序的設計元素與實踐方法。模塊化

「設計元素」：任何可複用的界面組成要素，包括按鈕、文本框、圖標、配色、字體，以及可複用的功能流程與交互行爲等等
「實踐」：在團隊當中建立、提煉、使用和共享這些元素的過程。設計體系的目標：經過一系列具備內在關聯性的設計元素與實踐方法來提高設計流程的成本效益，最終推進產品目標的實現。

2. 設計元素（設計體系的核心與基石）

設計元素的類型工具

「功能性元素」：由產品的核心功能及其所在領域所決定的設計元素「實體化的、可執行的部分」
「感知性元素」：由產品的氣質（或品牌形象）決定，同時又進一步塑造了產品帶給人們的感知的設計元素「描述性的」

（包括風格、文本樣式、配色、圖標風格、空間與佈局、特定的形狀、動效、音效等等。）oop

離開了感知性設計元素，對於那些領域相同且功能類似的產品，人們將難以分辨它們所屬的品牌。組件化

「設計語言」：一系列具備內在關聯性的設計元素共同定義了產品界面的設計語言。佈局

爲了使設計和開發的工做更加有前瞻性，使設計和開發的溝通更高效，須要「可以被清晰定義、描述和複用的設計元素」。它是：

一種能夠執行與複用的標準
一種體系化的設計思惟模式
具備複用能力
- 避免設計師過多地聚焦於設計元素自己，而將更多精力用於對設計需求的思考
- 避免開發者過多地耗費精力於界面元素樣式的調整，而將更多精力用於對業務功能的實現

3. 協做語言

語言是協做的基礎。團隊在進入實際工做流程以前，就應該對你們須要統一使用的工做語言進行討論、評審和確認。

「工做語言」的應用

從高層面的需求概念描述
平常設計決策討論中的表達方式

以此爲基礎，對於設計元素和相關文件的的命名方式才能在團隊範圍中保持統一。不只應該定義命名，還要對設計元素的使用和認知進行詳盡的描述與統一。所以，須要行之有效的提煉與共享協做方式：UI 組件庫。

4. UI 組件庫

「UI 組件庫」：收集、整理並共享設計模式的典型工具，包含對於設計原則及元素使用方法的規範性說明

UI 組件庫的歷史發展

品牌識別文檔的擴展內容 -> 界面設計模式 -> UI 組件庫靜態 PDF -> 動態「代碼庫」

UI 組件庫的侷限性

組件庫 ≠ 設計體系，組件庫僅是構造高效設計體系的工具，沒法爲設計產出的質量擔保，但能夠幫助修正問題，但設計質量的提高不能徹底依賴工具。

組件庫沒法修復「壞」設計：組件自身的設計問題、組件的錯誤使用問題..

協做是組件庫的基石，須要在團隊當中進行詮釋和溝通，以確保全部人都有着一致的認知，正是這些詮釋和溝通決定着組件庫可否具備長久的實用性。

組件庫並不會束縛創意，它只會反射出設計體系自己的特徵。若是設計體系對於創意試驗更具包容性，那麼組件庫一樣能夠表現出這一點，使創意型工做變得更輕鬆。

須要將組件庫和實踐方法進行統一整合的系統化機制，以堅實的設計語言爲基礎，組件庫才能真正成爲高效能的設計協做工具；不然，它將只是一套零零散散的組件展現而已。

5. 如何定義設計體系的有效性

經過觀察其各個組成部分可否有效協同促進產品目標的實現來進行判斷

統一目標

在高效能的系統當中，各個子系統之間都是高度關聯且目標一致的：設計的邏輯會體如今前端實現的架構當中，設計元素聽從於規範標準，設計語言特質在設計方案、代碼及 UI 組件庫中都會有着清晰的體現。這類系統的運做方式當中到處體現着和諧，包括高效的功能流程和一致的用戶體驗。

6. 體系化設計思惟方式

分析產品：目標用戶、產品的核心目標、產品氣質
制定設計原則：以原則爲中心，決定每個設計決策
關鍵行爲 -> 功能性設計元素
視覺樣式 -> 感知性設計元素
統一協做語言

2、設計原則

1. 有效的設計原則具有哪些特質

好的設計原則具備獨特性，會促進設計師尋找角度進行思考。

詳實可考：基於特定的產品情境作細化
切實可行：把形容詞動詞化，把感性認知指標化，並搭配實例進行詮釋「簡約」 -> 「移除沒必要要的內容」
觀點明確：詮釋面對衝突要素時的優先級與平衡性
易懂易記
- 反覆運用與強調
- 控制設計原則的內容數量（3-5 個）

Eg. Airbnb 的四項設計原則：」統一」、」通用」、」圖形化」、」交流性」;

Eg. Spotify 的」TUNE」原則：Tone、Usable、Necessary、Emotive（」悅目」、」易用」、」必要」、」情感」）

2. 如何定義設計原則

以目標爲始：設計原則必須符合產品目標並有助於產品特質的表達

Eg. TED 產品目標」將理念傳達得致遠、致廣。」 -> 設計原則」追求持久適用，而非盲從前沿」

尋求多方意見：團隊共同定義，整合新老員工的認知反饋
聚焦於目標受衆：確認設計原則的目標對象與受衆
測試與迭代

設計原則塑造着設計決策，後者也會反向推進前者的改變，須要不斷測試、驗證與修正。將設計原則適用性評估融入到設計評審當中，持續考量設計原則可否與當前產品發展階段保持契合；若是不能，則對設計原則進行迭代。

3. 從設計原則到設計元素

原則決定着設計元素的選擇與運用
設計元素是「單詞」，設計原則是「語法」
元素的迭代也會反向影響原則的進化

3、功能性設計元素

功能性設計元素能夠是簡單而獨立的，也能夠被組合成爲更加複雜的元素。

1.關鍵行爲與功能性設計元素

設計元素是界面行爲邏輯的具像化體現，所以要保證它們所承載的產品目標及關鍵行爲是相對穩定的，其外觀及交互層面的特徵能夠稍作變化。

2.如何定義功能性設計元素

關鍵：理解功能性元素與設計目標、關鍵行爲之間的重要關聯

建立設計元素地圖：以用戶體驗不一樣階段羅列
開展界面清查：彙總統一組件的不一樣場景（每幾個月就須要一次）
從「行爲」的角度理解設計元素：「它是什麼」 -> 「它用來作什麼」

若是耦合表現形式與內容類型，會致使使用情境受限

Eg.「課程 banner」 -> 「推廣內容」

梳理信息架構：單個組件含有的要素，判斷層級關係和是不是可選展現要素 -> 開發者搭建框架更清晰
衡量同類元素的權重排序，描述各自的使用規則
將內容做爲變量：從目標層面入手，聚焦於設計目標的定義與實現，而非對特定的內容進行設計

To Be Continue~

歡迎催更（並無人你醒醒