設(shè)計是一種交流形式。圖形用戶界面使用幾十個獨立的元素與用戶交談。顏色、排版、形狀、圖案，所有這些前端樣式都會直接影響用戶對產(chǎn)品的理解。
設(shè)計語言是一種交流工具，可以幫助設(shè)計師創(chuàng)建視覺上和諧一致的設(shè)計，并賦予產(chǎn)品獨特統(tǒng)一的外觀。本文將帶你了解設(shè)計語言的概念、創(chuàng)建設(shè)計語言的理由、以及如何正確創(chuàng)建設(shè)計語言。
定義設(shè)計語言
術(shù)語「設(shè)計語言」描述了數(shù)字產(chǎn)品的整體視覺設(shè)計。它在線框圖和視覺設(shè)計之間建立起了一座橋梁。設(shè)計語言系統(tǒng)的功能作用是不僅幫助用戶感知和理解可識別的標(biāo)志，而且還會直接影響到用戶與產(chǎn)品交互時的整體體驗。
設(shè)計語言與設(shè)計系統(tǒng)
設(shè)計語言和設(shè)計系統(tǒng)是一回事嗎？答案是否定的。定義明確的設(shè)計系統(tǒng)是基于實現(xiàn)細節(jié)（工具和技術(shù)）、設(shè)計語言和文化（價值觀、原則和實踐）的。設(shè)計語言是設(shè)計系統(tǒng)不可或缺的一部分，它不僅能幫助團隊理解如何一起使用組件和樣式來創(chuàng)建一致的用戶界面，而且還能傳達為什么他們首先需要使用這些組件和樣式。
因此，當(dāng)團隊使用視覺設(shè)計語言時，不僅要從全局了解產(chǎn)品或品牌本身，更重要的是要知道你想向用戶傳達的信息，以及你希望這些用戶如何理解品牌。
設(shè)計語言的要素
通常，對設(shè)計語言的定義并不是嚴格的，但仍然有一些共同的元素，包括：
- 一系列UI組件和模式。這些可重復(fù)使用的構(gòu)建塊可用于創(chuàng)建用戶界面。
- 樣式指南。有關(guān)設(shè)計的視覺屬性（例如顏色、字體和空白區(qū)域）的信息，以及如何在設(shè)計中使用它們的說明。
- 語義文檔。這有助于定義設(shè)計元素（例如顏色、形狀和字體）以及各個樣式和組件的命名約定背后的含義和意圖。
為什么要創(chuàng)建設(shè)計語言系統(tǒng)？
一致性
當(dāng)用戶與一致的設(shè)計（而不是零散的設(shè)計）進行交互時，他們將獲得更愉快的體驗。對于小型團隊和項目而言，創(chuàng)建一致的內(nèi)容界面并不是什么大問題，但是隨著項目和團隊的不斷發(fā)展，交付變得越來越困難。產(chǎn)品團隊引入了設(shè)計語言來解決這個問題，并幫助項目整體推進和擴展。
品牌識別和真實性
品牌是客戶如何看待公司或產(chǎn)品。設(shè)計語言是設(shè)計師可以用來進行有效品牌宣傳的最牢固的紐帶之一，因為它有助于使設(shè)計變得真實，而真實性可以使產(chǎn)品在人群中脫穎而出。獨特的視覺設(shè)計決策可以創(chuàng)造個性和讓人過目不忘。考慮一下Google Doodles，這是一個真實可靠的設(shè)計決策，為品牌帶來了即時的可識別性。
效率和成本
有了視覺設(shè)計語言，產(chǎn)品團隊就能在不損失產(chǎn)品質(zhì)量的前提下快速迭代產(chǎn)品設(shè)計。它可以讓設(shè)計師使用定義明確、可重復(fù)使用的組件，以及在將樣式應(yīng)用于其設(shè)計時應(yīng)遵循的明確規(guī)則。
創(chuàng)建和使用設(shè)計語言系統(tǒng)的步驟
就像所有偉大的事物一樣，一種偉大的設(shè)計語言很少是偶然發(fā)生的。它是長時間努力工作的結(jié)果。以下五條規(guī)則將有助于高效創(chuàng)建視覺語言。
1. 進行UI審計
設(shè)計元素重復(fù)會導(dǎo)致碎片化，而碎片化會導(dǎo)致不一致。識別設(shè)計元素的重復(fù)性有助于避免團隊成員從頭開始構(gòu)建元素，并在一段時間后發(fā)現(xiàn)該元素的版本已經(jīng)存在了。這就是為什么視覺設(shè)計語言的創(chuàng)建應(yīng)從UI審計開始的原因。
你應(yīng)該對你的產(chǎn)品進行UI審計，以清楚地了解目前使用的顏色、字體和形狀。這是一個相對簡單的過程。對組成你的產(chǎn)品的每一個組件進行截圖，并將它們分成不同的類別。在UI審計結(jié)束時，你應(yīng)該有一個分類明確的組件集合，以使設(shè)計中的不一致之處顯而易見。
從利益相關(guān)者那里獲得任何品牌指南也是很有必要的。這樣做可以幫助你了解公司品牌的總體觀感。
2. 為設(shè)計語言創(chuàng)建詞匯表
就像口語始于單詞及其含義一樣，設(shè)計語言始于定義視覺單元及其含義的字典。這本字典應(yīng)該清晰地定義可重復(fù)使用的視覺單元。你的視覺設(shè)計語言字典應(yīng)該包括一個模式庫（可以進行分類和分組的可重用構(gòu)建基塊）和一個樣式指南。
用明確的目的和意義來映射設(shè)計元素是很有挑戰(zhàn)性的，但可以通過棱鏡溝通來評估每個元素的意義。設(shè)計師Nate Baldwin建議的以下句子結(jié)構(gòu)將幫助你識別、定義和傳達每個單元的含義：
[模式/庫]中使用的[設(shè)計元素]有助于傳達[目的和意義]。
每當(dāng)你評估一個視覺單元時，請使用此技術(shù)。例如，如果你要為注冊表單中的錯誤信息選擇一種顏色，你可以說：「注冊表單錯誤消息中使用醒目的紅色有助于向用戶傳達該信息的重要性。」
3. 建立指導(dǎo)性設(shè)計原則
如何定義好的設(shè)計？你怎么知道什么時候可以發(fā)布？當(dāng)需要評估一個設(shè)計的質(zhì)量時，設(shè)計師往往會依賴自己的一套標(biāo)準(zhǔn)。但隨著團隊的發(fā)展，遵循這樣的方法會給產(chǎn)品設(shè)計過程帶來很多混亂，因為每個設(shè)計師都會有自己的主觀理解。
這就是設(shè)計原則可以節(jié)省時間的地方。設(shè)計原則定義了各個設(shè)計師在開發(fā)特定產(chǎn)品時必須遵循的基本且強制性的準(zhǔn)則。它們作為參考，簡化了決策過程。Magera Moon的「創(chuàng)建Etsy的設(shè)計原則」這篇文章對此進行了詳細介紹。
設(shè)計原則的制定為思考如何在設(shè)計中傳達個性或目的提供了絕佳時機。例如，流行的博客平臺Medium的設(shè)計原則之一就是「方向大于選擇（Direction Over Choice）」。Medium團隊提供了以下描述：「我們在設(shè)計Medium編輯器的時候，經(jīng)常提到這個原則。我們特意使用交換布局、字體和顏色來提供方向。方向更適合產(chǎn)品，因為我們希望人們專注于寫作，而不是因為選擇而分心。」
4. 制定規(guī)則并堅持執(zhí)行
就像任何一種口頭語言都有允許一個人與另一個人進行交流的規(guī)則一樣，設(shè)計語言也具有使產(chǎn)品開發(fā)人員可以與他們的用戶進行交流的規(guī)則。
這些規(guī)則的目的是為設(shè)計人員創(chuàng)造約束條件。「約束」這個詞通常具有負面含義（聽起來像是對創(chuàng)造力的限制），但是規(guī)則可以讓設(shè)計師更高效地工作。通過建立明確的規(guī)則，產(chǎn)品團隊可以防止團隊成員創(chuàng)造不良的UX。可以定義兩種類型的規(guī)則：
- 嚴格的規(guī)則，即應(yīng)嚴格遵循的精確規(guī)則。例如：「帶有此十六進制代碼的紅色僅應(yīng)用于錯誤消息。強烈禁止在用戶界面的其他部分使用該顏色。」
- 寬松的規(guī)則，即推薦的規(guī)則，設(shè)計人員可以跳過這些規(guī)則以創(chuàng)建更好的品牌感覺或具有實用價值的頁面。例如：「如果可能，請嘗試將品牌顏色用于UI的功能元素。」
一旦產(chǎn)品團隊為設(shè)計語言制定了一套約定俗成的規(guī)則，就必須嚴格遵守這些規(guī)則。在建立視覺設(shè)計語言時，最大的失誤就是不一致性，當(dāng)團隊成員不遵守規(guī)則時，就會出現(xiàn)這種情況。用戶體驗經(jīng)理應(yīng)該引入一個設(shè)計審核的程序，在此程序中，設(shè)計師要根據(jù)規(guī)則來驗證設(shè)計。
5. 將視覺語言視為一種活的有機體
因為文化的影響，口語往往會隨著時間的推移而改變。視覺語言也是一樣的。新的趨勢每天都會出現(xiàn)，像谷歌和蘋果這樣的大公司經(jīng)常更新他們的設(shè)計準(zhǔn)則，以使它們的產(chǎn)品看起來具有新鮮感。
視覺語言不應(yīng)該是一套一成不變的靜態(tài)規(guī)則，而應(yīng)是一個不斷發(fā)展的生態(tài)系統(tǒng)，與產(chǎn)品一起成長。這個生態(tài)系統(tǒng)應(yīng)該很容易適應(yīng)變化。要設(shè)計一個設(shè)計語言系統(tǒng)，就要熟悉當(dāng)前的趨勢，并嘗試在你的語言中引入最有價值的變化。
總結(jié)
創(chuàng)建美觀且易用的設(shè)計語言需要花費時間。你可能不會在第一次迭代時就擁有一個強大的視覺語言，這完全沒有問題。投入時間為該語言打下堅實的基礎(chǔ)，并確保它與你的團隊一起成長和成熟，這一點至關(guān)重要。
英文原文：https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language
原文作者：Nick Babich
編譯作者：微博/公眾號@設(shè)計吐司
以上譯文僅代表原作者觀點。如需轉(zhuǎn)載請遵循CC版權(quán)協(xié)議正確標(biāo)明出處。
