本文為我們盤點了設計語言系統的價值與意義，并進一步梳理了初次構建設計語言系統的注意事項。

本文為我們盤點了設計語言系統的價值與意義，并進一步梳理了初次構建設計語言系統的注意事項。

從工業設計到平面設計，再到近些年的數字產品設計，設計語言一直是一個熱點話題，已經有很多資料對設計語言做過介紹說明，這篇文章是我在工作中對「設計語言系統」落地應用時的一些思考總結。

簡單來說，設計語言系統（design language system）可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。如同開一家餐廳，從店面裝修到價格定位再到就餐環節的各個流程，都應該保持統一的服務目標，從而打造具有特色服務體驗，不斷提升顧客的滿意度。

「西貝莜面村」的品牌視覺符號植入場景-紅格桌布

設計語言系統的應用

設計語言是一種規則，保證了產品在不同場景/終端下的一致性，是產品設計的公共 設施，這套系統對參與產品業務的不同角色都有約束力。

對設計師來說，鮮明的品牌定義和統一完善的色彩及組件樣式庫的應用，可以讓產品在多種應用場景下依然保持相同的風格，傳統出同一種調性。

同時，產品設計語言傳達的風格意識也無時不刻的影響著產品經理對于功能場景的判斷，甚至可以在設計師不在場的情況下，快速轉化尚未成型的產品功能設計進行嘗試，從而提高創新的可能性。

對于開發來說，設計語言系統提供的組件庫樣式可以幫助開發更好的規劃代碼，理解當前功能樣式的來源依據，是否具有可復用性等等，同時在處理一些緊急情況，比如臨時增加彈窗提示等流程時也有所參考。

初創產品有必要構建設計語言系統嗎？

當我們去查找設計語言相關資料的時候，通常會找到一些專業性極高、功能龐大又完備的示例，很容易認為制定設計語言系統耗時耗力，又無法直接體現收益，從而產生疑問，對于初創產品來說，功能迭代頻繁快速，有必要拿出時間來制定專業的設計語言嗎？

任何一個產品的應用形式，主要是由用戶和使用場景決定的，設計語言也不例外。相對早期的產品自然可以制作初級的設計語言系統，讓它和產品一起成長迭代，當你享受到了設計語言系統在產品開發階段帶來的效率提升后，自然會越來越注意維護它，沒有一個產品在0.1版本階段就非常偉大。有一個相對明確的指標作為參考，在產品用戶量達到10萬左右時就可以開始著手整理了。

初次構建設計語言系統的注意事項

毫無疑問這是一項由設計師主導的工作，需要和pmrd的參與和支持，發布后也需要不斷的完善和迭代。具體的制作過程中有幾點需要注意：

1. 確保基本材料的統一

找到一個合適的時機，通常是在完成一個大的功能迭代之后，投入專注的時間來整理文件。整理產品的主功能，以及部分優先級較高、復用頻率高的頁面設計文件，排布在一起，確保不要遺漏關鍵流程步驟。

整理完成之后，就會很容易看到部分元素設計不一致的情況，在這個階段只需要設計文件進行視覺統一，而最終的產品呈現層面，后續在相關功能迭代時加入優化需求逐步完成即可。

統一視覺樣式的過程記得整理出待修改清單，讓后續的優化工作有跡可循。

2. 保證元素和組件邏輯清晰

像搭積木一樣，把同一層級的元素歸納羅列，以顆粒度從高到低的邏輯依次整理，可以搜索「原子設計」概念輔助理解，這一步操作瑣碎又重要，一定要有足夠的耐心。

lego 機器人零件手冊

Airbnb dls -規范提煉

邏輯分明的結構和組件庫，在交互設計階段可以快速呈現高保真原型，提升方案溝通效率，也是方案決策背后的邏輯支撐，讓設計更加有理有據。

3. 充分溝通，多方合作

設計語言的構建不是從0到1，通常情況是面對已有的信息進行整理提煉，站在更高層級更抽象的理解曾經的設計決策，修正和優化出一套更加穩固和適合產品的規范系統，和不同角色的合作有助于設計師更全面和準確的理解產品狀態。

4. 制作多種的表達形式

這三種格式文件不是同一份文件導出不同格式，而是針對不同應用人群進行內容定制的版本。

設計組件庫用于具體的工作中，解決實際需求。

線上協同版主要應對與開發/產品之間的對接溝通。

最后，設計語言系統的制定和運用都需要持續優化升級，伴隨品牌特性和產品功能傾向而不斷調整，而構建基礎系統更是修復過往問題的過程，從開始整理文件的初期就已經發揮作用，有效的設計語言系統提升產品設計工作效率，更可以推動設計師發揮更多的創造力。

如果你是設計師、個人創作者、或者產品設計參與者，如果你的產品還沒有一套專屬的規范系統，不妨現在就嘗試一下，從最基礎的整理工作動手吧。

參考資料

1. 2016年 Airbnb第一版設計語言系統構建過程

https://airbnb.design/building-a-visual-language/

2. Airbnb’s 設計總監如何定義產品設計

https://firstround/review/defining-product-design-a-dispatch-from-airbnbs-design-chief/

3. 聊聊數字化產品的「設計語言」

https://mp.weixin.qq/s/JxIpKfvs5F9Pyjv_7UOuPQ

作者：bubblegun；公眾號：@泡槍指北

本文由 @bubblegun 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議