書引

《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》作者研究過(guò)各類公司建立設(shè)計(jì)體系的經(jīng)驗(yàn)，向我們展示了如何通過(guò)構(gòu)建設(shè)計(jì)體系以支撐數(shù)字產(chǎn)品的設(shè)計(jì)，在符合團(tuán)隊(duì)文化的基礎(chǔ)上，確保設(shè)計(jì)體系能夠幫助實(shí)現(xiàn)產(chǎn)品目標(biāo)。

本書面向的讀者：嘗試將設(shè)計(jì)體系融入組織中的中小型團(tuán)隊(duì)

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

本書簡(jiǎn)介

「 應(yīng)當(dāng)先做設(shè)計(jì)再出規(guī)范，還是先出規(guī)范再做設(shè)計(jì)？」

「如果老板的意見與設(shè)計(jì)師自己的想法相左，設(shè)計(jì)師應(yīng)該堅(jiān)持己見嗎？」

這些都是工作中常常會(huì)遇到的問(wèn)題，它們很難被徹底解決，為了改善它們，一些優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)開始以更為系統(tǒng)的方式展開設(shè)計(jì)工作——構(gòu)建一套設(shè)計(jì)體系。談到設(shè)計(jì)體系，最容易想到的是各種控件組成的 library，但這些僅僅是設(shè)計(jì)模式或者說(shuō)是樣式指導(dǎo)，我們需要將其納入更大的體系之中，讓這些模式之間緊密相連，形成一個(gè)整體，以確保設(shè)計(jì)體系能夠有效幫助實(shí)現(xiàn)產(chǎn)品目標(biāo)。

建立設(shè)計(jì)體系的優(yōu)勢(shì)：

• 通過(guò)清晰的設(shè)計(jì)語(yǔ)言，明確產(chǎn)品調(diào)性
• 提高設(shè)計(jì)決策、設(shè)計(jì)與開發(fā)溝通的效率
• 讓團(tuán)隊(duì)更加穩(wěn)固

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

1. 平臺(tái)級(jí)設(shè)計(jì)體系

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. 公司級(jí)的設(shè)計(jì)體系

Atlassian 的設(shè)計(jì)體系：https://atlassian.design/

IBM 的 Carbon 設(shè)計(jì)體系：https://www.carbondesignsystem.com/

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

設(shè)計(jì)體系

何謂設(shè)計(jì)體系，從設(shè)計(jì)實(shí)踐的角度來(lái)說(shuō)，它包含三個(gè)層級(jí)：

第一層級(jí)：組件庫(kù)

界面中所有被復(fù)用的組件。比如按鈕、文本框、標(biāo)簽頁(yè)等，指導(dǎo)設(shè)計(jì)師及前端工程師高效開展工作。

第二層級(jí)：設(shè)計(jì)語(yǔ)言

設(shè)計(jì)語(yǔ)言是將產(chǎn)品塑造得獨(dú)特且風(fēng)格統(tǒng)一的一套法則。組件庫(kù)僅僅提供了對(duì)同一類元素的約束，缺少不同類元素之間的聯(lián)系。而通過(guò)設(shè)計(jì)語(yǔ)言，你可以明確元素之間的結(jié)構(gòu)關(guān)系。

優(yōu)秀的產(chǎn)品都會(huì)打造屬于自己的設(shè)計(jì)語(yǔ)言，統(tǒng)一自身的風(fēng)格且區(qū)別于其它產(chǎn)品。比如很多優(yōu)秀的產(chǎn)品，剝離開它的 Logo，你依然能看出這是它的產(chǎn)品。

△ 反例——前一秒多么炙手可熱，后一秒就多么樸實(shí)（圖例來(lái)自知乎小螳螂品牌服務(wù)機(jī)構(gòu)）

△ 認(rèn)出是哪款車了嘛

△ 特色白

第三層級(jí)：設(shè)計(jì)體系

組件庫(kù)和設(shè)計(jì)語(yǔ)言定義了產(chǎn)品該是怎樣的（what&how），卻沒(méi)有說(shuō)明為什么是這樣構(gòu)建和定義的(why)？設(shè)計(jì)體系則包含以下內(nèi)容：設(shè)計(jì)目的、設(shè)計(jì)原則、組件庫(kù)、樣式指南，以及設(shè)計(jì)與開發(fā)的工作流程的實(shí)用工具。它是構(gòu)建設(shè)計(jì)語(yǔ)言和設(shè)計(jì)模式的底層基礎(chǔ)。

書籍概述

全書共分為兩個(gè)部分。

第一部分討論設(shè)計(jì)體系的基礎(chǔ)——模式與實(shí)踐。

模式指的是可復(fù)用的元素，它們之間相互關(guān)聯(lián)，構(gòu)成了界面的設(shè)計(jì)語(yǔ)言。

實(shí)踐則是指創(chuàng)建、使用和共享這些模式的方法，比如確立一個(gè)使用原則和構(gòu)建一個(gè)模式庫(kù)。

第二部分側(cè)重于闡釋建立和維護(hù)設(shè)計(jì)體系的實(shí)際步驟和實(shí)用技術(shù)。

規(guī)劃任務(wù)，編寫界面清單，建立模式庫(kù)，以及創(chuàng)建、記錄、發(fā)展和維護(hù)設(shè)計(jì)模式等。

設(shè)計(jì)體系不是一夜之間就構(gòu)建出來(lái)的，而是通過(guò)日常的實(shí)踐逐漸形成的。為了讓這個(gè)體系在團(tuán)隊(duì)中運(yùn)行更有成效，我們需要理解它是如何運(yùn)行的，它包含什么，出現(xiàn)問(wèn)題的原因是什么，而團(tuán)隊(duì)的組織架構(gòu)、企業(yè)文化、設(shè)計(jì)方式等都會(huì)影響設(shè)計(jì)體系。

第一部分要點(diǎn)概述

第一部分的要點(diǎn)：設(shè)計(jì)目標(biāo)、設(shè)計(jì)原則、共享設(shè)計(jì)語(yǔ)言、建構(gòu)設(shè)計(jì)模式。

1. 目標(biāo)

建立設(shè)計(jì)體系的目的是為了實(shí)現(xiàn)產(chǎn)品的目標(biāo)。

無(wú)論是團(tuán)隊(duì)的運(yùn)作方式或是設(shè)計(jì)模式，都應(yīng)該針對(duì)這個(gè)產(chǎn)品目標(biāo)進(jìn)行設(shè)計(jì)與優(yōu)化。

高效的設(shè)計(jì)體系中，不同的子體系會(huì)因?yàn)橥瑯拥哪繕?biāo)而相互連接，協(xié)調(diào)一致，如果設(shè)計(jì)體系發(fā)生割裂，會(huì)導(dǎo)致用戶體驗(yàn)的割裂。

2. 原則

堅(jiān)實(shí)的原則是任何設(shè)計(jì)體系得以良好運(yùn)轉(zhuǎn)的基礎(chǔ)。

不同公司有著不同的原則，有的側(cè)重于品牌，有的側(cè)重于團(tuán)隊(duì)文化，有的側(cè)重于設(shè)計(jì)流程。設(shè)計(jì)原則很可能只適用于某一段時(shí)期或特定項(xiàng)目。

如何制定有效的設(shè)計(jì)原則：

• 從目的開始。設(shè)計(jì)原則必須遵循產(chǎn)品的目的，傳遞產(chǎn)品的精神。
• 尋找共識(shí)。如果是在定義階段，讓團(tuán)隊(duì)成員各自回答關(guān)于設(shè)計(jì)原則的問(wèn)題，從中尋找共識(shí)，確立優(yōu)先級(jí)。
• 設(shè)計(jì)原則的描述要真實(shí)且貼切，實(shí)用且可操作

模糊的設(shè)計(jì)原則：明確

實(shí)用的設(shè)計(jì)原則：「第一優(yōu)先級(jí)只有一個(gè)，什么是你希望用戶最先看到的或最先用到的」

模糊的設(shè)計(jì)原則：簡(jiǎn)單

實(shí)用的設(shè)計(jì)原則：「把界面做到牢不可破，就像兒童玩具一樣，確保用戶可以隨意探索，不會(huì)因?yàn)殄e(cuò)誤操作而崩潰?！?/p>

模糊的設(shè)計(jì)原則：有用

實(shí)用的設(shè)計(jì)原則：「從需求開始，去做調(diào)研、去分析數(shù)據(jù)，去與用戶交流，而不是做假設(shè)。」

3. 共享設(shè)計(jì)語(yǔ)言

設(shè)計(jì)模式需要通過(guò)設(shè)計(jì)語(yǔ)言連接起來(lái)，語(yǔ)言是協(xié)作的基礎(chǔ)；

設(shè)計(jì)語(yǔ)言是整個(gè)團(tuán)隊(duì)為了打造有效而統(tǒng)一的用戶體驗(yàn)而建立的，團(tuán)隊(duì)成員對(duì)于實(shí)現(xiàn)目標(biāo)會(huì)有著相似的心智模型，才能更有效地進(jìn)行設(shè)計(jì)創(chuàng)造。團(tuán)隊(duì)成員不僅要對(duì)語(yǔ)言形成共識(shí)，還要對(duì)語(yǔ)言的用法形成共識(shí)，包含如何創(chuàng)建模式以及使用設(shè)計(jì)模式的方法和原則。

建立設(shè)計(jì)語(yǔ)言的好處在于，它可以讓我們較少地關(guān)注模式，而更多地關(guān)注用戶，通過(guò)有效的設(shè)計(jì)語(yǔ)言彌合系統(tǒng)模型與用戶模型之間的差距。

在確定設(shè)計(jì)語(yǔ)言的時(shí)候需要注意，要確保你的設(shè)計(jì)語(yǔ)言，可操作，可重現(xiàn)，見下圖。

△ Tom Osborne的「視覺(jué)音量指南」

具體實(shí)踐：

• 讓團(tuán)隊(duì)成員清晰理解品牌愿景，將設(shè)計(jì)體系作為入職培訓(xùn)的一部分
• 共享（在團(tuán)隊(duì)內(nèi)宣貫及培訓(xùn)）設(shè)計(jì)方法、前端架構(gòu)
• 細(xì)化工作細(xì)節(jié)：比如設(shè)計(jì)與開發(fā)統(tǒng)一命名；打造典型的界面庫(kù)；定期進(jìn)行模式庫(kù)的更迭與維護(hù)

4. 設(shè)計(jì)模式

設(shè)計(jì)師常遇到的問(wèn)題是，如何將高層次的概念，比如設(shè)計(jì)原則、品牌價(jià)值等，物化為具體的用戶界面元素。其實(shí)關(guān)鍵在于建立一種「優(yōu)先級(jí)」的意識(shí)，比如對(duì)于 TED 來(lái)說(shuō)，信息的清晰比美觀更重要，因此在界面設(shè)計(jì)上，我們可以看到它們選擇了更容易容納長(zhǎng)標(biāo)題的布局方案，而沒(méi)有妥協(xié)于美觀度選擇文字截?cái)嗟姆绞健?/p>

△ TED網(wǎng)頁(yè)設(shè)計(jì)

我們?cè)O(shè)計(jì)界面的目的有兩個(gè)，實(shí)現(xiàn)某種目標(biāo)以及創(chuàng)造某種感受，因此會(huì)產(chǎn)生兩類模式，功能性模式和感知性模式。

功能性模式

功能性模式是界面中有形的組件，幫助用戶或者激勵(lì)用戶完成某種行為。它的執(zhí)行、內(nèi)容、交互方式和顯示效果可能會(huì)變，但是它所鼓勵(lì)的核心行為保持相對(duì)穩(wěn)定。團(tuán)隊(duì)需要充分理解模式的目的，才能確保它和用戶的預(yù)期一致。

感知性模式

感知性模式則更像樣式，它用來(lái)描述組件是什么類型的，給人的感受如何。比如兩套結(jié)構(gòu)相同的房子，傳遞出來(lái)的感受可以千差萬(wàn)別——一個(gè)溫柔居家一個(gè)冰冷工業(yè)風(fēng)。感知性模式可以讓系統(tǒng)更為連貫，好的設(shè)計(jì)體系能夠在品牌的一致性、創(chuàng)造性表達(dá)以及業(yè)務(wù)需求之間取得平衡，設(shè)計(jì)師無(wú)需過(guò)于拘泥于一致性。

由于數(shù)字設(shè)計(jì)已發(fā)展多年，大多數(shù)的設(shè)計(jì)模式都已打造成型并為人所熟知，設(shè)計(jì)師無(wú)需在此花費(fèi)太多時(shí)間。如今，設(shè)計(jì)師和開發(fā)人員都希望建立動(dòng)態(tài)的模式庫(kù)，包含設(shè)計(jì)模式及其對(duì)應(yīng)代碼，見下圖為 ant motion 的動(dòng)態(tài)組件庫(kù)。

△ ant motion動(dòng)效組件庫(kù)

具體的實(shí)踐方式將在第二部分進(jìn)行詳述。

歡迎關(guān)注作者微信公眾號(hào)：「二樓自習(xí)室」