本文為我們盤點(diǎn)了設(shè)計(jì)語言系統(tǒng)的價(jià)值與意義，并進(jìn)一步梳理了初次構(gòu)建設(shè)計(jì)語言系統(tǒng)的注意事項(xiàng)。

從工業(yè)設(shè)計(jì)到平面設(shè)計(jì)，再到近些年的數(shù)字產(chǎn)品設(shè)計(jì)，設(shè)計(jì)語言一直是一個(gè)熱點(diǎn)話題，已經(jīng)有很多資料對(duì)設(shè)計(jì)語言做過介紹說明，這篇文章是我在工作中對(duì)「設(shè)計(jì)語言系統(tǒng)」落地應(yīng)用時(shí)的一些思考總結(jié)。

簡(jiǎn)單來說，設(shè)計(jì)語言系統(tǒng)（design language system）可以理解為由品牌基因+設(shè)計(jì)規(guī)范+多場(chǎng)景應(yīng)用三大要素組成的一套設(shè)計(jì)應(yīng)用規(guī)范系統(tǒng)。如同開一家餐廳，從店面裝修到價(jià)格定位再到就餐環(huán)節(jié)的各個(gè)流程，都應(yīng)該保持統(tǒng)一的服務(wù)目標(biāo)，從而打造具有特色服務(wù)體驗(yàn)，不斷提升顧客的滿意度。

「西貝莜面村」的品牌視覺符號(hào)植入場(chǎng)景-紅格桌布

設(shè)計(jì)語言系統(tǒng)的應(yīng)用

設(shè)計(jì)語言是一種規(guī)則，保證了產(chǎn)品在不同場(chǎng)景/終端下的一致性，是產(chǎn)品設(shè)計(jì)的公共 設(shè)施，這套系統(tǒng)對(duì)參與產(chǎn)品業(yè)務(wù)的不同角色都有約束力。

對(duì)設(shè)計(jì)師來說，鮮明的品牌定義和統(tǒng)一完善的色彩及組件樣式庫的應(yīng)用，可以讓產(chǎn)品在多種應(yīng)用場(chǎng)景下依然保持相同的風(fēng)格，傳統(tǒng)出同一種調(diào)性。

同時(shí)，產(chǎn)品設(shè)計(jì)語言傳達(dá)的風(fēng)格意識(shí)也無時(shí)不刻的影響著產(chǎn)品經(jīng)理對(duì)于功能場(chǎng)景的判斷，甚至可以在設(shè)計(jì)師不在場(chǎng)的情況下，快速轉(zhuǎn)化尚未成型的產(chǎn)品功能設(shè)計(jì)進(jìn)行嘗試，從而提高創(chuàng)新的可能性。

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

初創(chuàng)產(chǎn)品有必要構(gòu)建設(shè)計(jì)語言系統(tǒng)嗎？

當(dāng)我們?nèi)ゲ檎以O(shè)計(jì)語言相關(guān)資料的時(shí)候，通常會(huì)找到一些專業(yè)性極高、功能龐大又完備的示例，很容易認(rèn)為制定設(shè)計(jì)語言系統(tǒng)耗時(shí)耗力，又無法直接體現(xiàn)收益，從而產(chǎn)生疑問，對(duì)于初創(chuàng)產(chǎn)品來說，功能迭代頻繁快速，有必要拿出時(shí)間來制定專業(yè)的設(shè)計(jì)語言嗎？

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

初次構(gòu)建設(shè)計(jì)語言系統(tǒng)的注意事項(xiàng)

毫無疑問這是一項(xiàng)由設(shè)計(jì)師主導(dǎo)的工作，需要和pmrd的參與和支持，發(fā)布后也需要不斷的完善和迭代。具體的制作過程中有幾點(diǎn)需要注意：

1. 確?；静牧系慕y(tǒng)一

找到一個(gè)合適的時(shí)機(jī)，通常是在完成一個(gè)大的功能迭代之后，投入專注的時(shí)間來整理文件。整理產(chǎn)品的主功能，以及部分優(yōu)先級(jí)較高、復(fù)用頻率高的頁面設(shè)計(jì)文件，排布在一起，確保不要遺漏關(guān)鍵流程步驟。

整理完成之后，就會(huì)很容易看到部分元素設(shè)計(jì)不一致的情況，在這個(gè)階段只需要設(shè)計(jì)文件進(jìn)行視覺統(tǒng)一，而最終的產(chǎn)品呈現(xiàn)層面，后續(xù)在相關(guān)功能迭代時(shí)加入優(yōu)化需求逐步完成即可。

統(tǒng)一視覺樣式的過程記得整理出待修改清單，讓后續(xù)的優(yōu)化工作有跡可循。

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

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

lego 機(jī)器人零件手冊(cè)

Airbnb dls -規(guī)范提煉

邏輯分明的結(jié)構(gòu)和組件庫，在交互設(shè)計(jì)階段可以快速呈現(xiàn)高保真原型，提升方案溝通效率，也是方案決策背后的邏輯支撐，讓設(shè)計(jì)更加有理有據(jù)。

3. 充分溝通，多方合作

設(shè)計(jì)師通常喜歡專注工作，更愿意單獨(dú)工作，但是制作整理設(shè)計(jì)語言系統(tǒng)的過程需要與團(tuán)隊(duì)中的各個(gè)角色及時(shí)溝通，保持信息同步，同時(shí)在籌備階段的參與感會(huì)使得系統(tǒng)后期推廣應(yīng)用更加順暢。

設(shè)計(jì)語言的構(gòu)建不是從0到1，通常情況是面對(duì)已有的信息進(jìn)行整理提煉，站在更高層級(jí)更抽象的理解曾經(jīng)的設(shè)計(jì)決策，修正和優(yōu)化出一套更加穩(wěn)固和適合產(chǎn)品的規(guī)范系統(tǒng)，和不同角色的合作有助于設(shè)計(jì)師更全面和準(zhǔn)確的理解產(chǎn)品狀態(tài)。

4. 制作多種的表達(dá)形式

設(shè)計(jì)語言系統(tǒng)不僅應(yīng)用在具體的工作流中，也是產(chǎn)品品牌信號(hào)傳達(dá)的一部分，可以讓不同的角色對(duì)產(chǎn)品定位保持更多的共識(shí)。針對(duì)設(shè)計(jì)師、開發(fā)、運(yùn)營推廣三類使用角色，我建議整理三種格式的文件：設(shè)計(jì)組件庫、 線上協(xié)同版、 pdf版本。

這三種格式文件不是同一份文件導(dǎo)出不同格式，而是針對(duì)不同應(yīng)用人群進(jìn)行內(nèi)容定制的版本。

設(shè)計(jì)組件庫 用于具體的工作中，解決實(shí)際需求。

線上協(xié)同版 主要應(yīng)對(duì)與開發(fā)/產(chǎn)品之間的對(duì)接溝通。

pdf 版本可以側(cè)重匯總運(yùn)營推廣常用的元素信息應(yīng)用標(biāo)準(zhǔn)，方便運(yùn)營在不同場(chǎng)景下自行選擇合適的品牌信息。

最后，設(shè)計(jì)語言系統(tǒng)的制定和運(yùn)用都需要持續(xù)優(yōu)化升級(jí)，伴隨品牌特性和產(chǎn)品功能傾向而不斷調(diào)整，而構(gòu)建基礎(chǔ)系統(tǒng)更是修復(fù)過往問題的過程，從開始整理文件的初期就已經(jīng)發(fā)揮作用，有效的設(shè)計(jì)語言系統(tǒng)提升產(chǎn)品設(shè)計(jì)工作效率，更可以推動(dòng)設(shè)計(jì)師發(fā)揮更多的創(chuàng)造力。

如果你是設(shè)計(jì)師、個(gè)人創(chuàng)作者、或者產(chǎn)品設(shè)計(jì)參與者，如果你的產(chǎn)品還沒有一套專屬的規(guī)范系統(tǒng)，不妨現(xiàn)在就嘗試一下，從最基礎(chǔ)的整理工作動(dòng)手吧。

參考資料

1. 2016年 Airbnb第一版設(shè)計(jì)語言系統(tǒng)構(gòu)建過程

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

2. Airbnb’s 設(shè)計(jì)總監(jiān)如何定義產(chǎn)品設(shè)計(jì)

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

3. 聊聊數(shù)字化產(chǎn)品的「設(shè)計(jì)語言」

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

作者：bubblegun；公眾號(hào)：@泡槍指北

本文由 @bubblegun 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議