總結(jié)規(guī)范一款設(shè)計(jì)語(yǔ)言的意義很明確，那就是解決團(tuán)隊(duì)內(nèi)部的統(tǒng)一性與效率問題，并通過統(tǒng)一的設(shè)計(jì)語(yǔ)言打造統(tǒng)一的品牌符號(hào)形象，捕捉用戶認(rèn)知與記憶點(diǎn)。那么我們又該如何總結(jié)出自己的設(shè)計(jì)語(yǔ)言呢？筆者將為大家做詳細(xì)的分享。

大家是如何定義一套設(shè)計(jì)語(yǔ)言的呢？

設(shè)計(jì)語(yǔ)言，貌似很火的一個(gè)詞，設(shè)計(jì)團(tuán)隊(duì)都在做設(shè)計(jì)規(guī)范，好像沒有就是不夠?qū)I(yè)，UED的價(jià)值就不夠高。

關(guān)于設(shè)計(jì)語(yǔ)言的參考很多，最出名的莫過于蘋果和谷歌材料設(shè)計(jì)，也是設(shè)計(jì)語(yǔ)言的鼻祖。后面我將分享設(shè)計(jì)語(yǔ)言的價(jià)值、如何去創(chuàng)一個(gè)設(shè)計(jì)語(yǔ)言、設(shè)計(jì)語(yǔ)言包含什么。希望通過幾期分享，幫助大家能很好的掌握這項(xiàng)技能。

一、為什么需要設(shè)計(jì)語(yǔ)言？

1. 對(duì)內(nèi)

這應(yīng)該是很多設(shè)計(jì)團(tuán)隊(duì)會(huì)遇到這樣的情況——一個(gè)按鈕很多尺寸，顏色，大小，有時(shí)候我們已經(jīng)有了規(guī)范，但是各種業(yè)務(wù)方要求個(gè)性化，要不一樣，導(dǎo)致整個(gè)APP設(shè)計(jì)變的很混亂，這是我們?cè)O(shè)計(jì)中經(jīng)常遇見的。

很多APP因?yàn)槿鄙倩A(chǔ)原則，導(dǎo)致APP界面每個(gè)頁(yè)面都不一樣，風(fēng)格層次不齊，缺乏統(tǒng)一性，所以對(duì)內(nèi)，很多時(shí)候設(shè)計(jì)語(yǔ)言是為了解決統(tǒng)一性和效率為前提下，避免開發(fā)工程師重復(fù)開發(fā)一些組件。

2. 對(duì)外

對(duì)外，統(tǒng)一的品牌符號(hào)，品牌特征，有助于加深產(chǎn)品在用戶心中的印象，統(tǒng)一的顏色和交互形式能幫助用戶加深對(duì)產(chǎn)品的熟悉感和信任感，一個(gè)好的設(shè)計(jì)語(yǔ)言本身可以在體驗(yàn)上為產(chǎn)品加分，也能夠更好創(chuàng)造一致性的體驗(yàn)。

二、設(shè)計(jì)語(yǔ)言解決什么問題？

1. 一致性

在整個(gè)平臺(tái)中創(chuàng)造一致性，顏色，按鈕，字體，品牌一致性，給用戶安全感，熟悉感，同時(shí)解決設(shè)計(jì)師因?yàn)閭€(gè)人特征導(dǎo)致界面不統(tǒng)一問題。

2. 明確設(shè)計(jì)原則

讓每一個(gè)設(shè)計(jì)很清楚知道，產(chǎn)品需要傳遞給用戶的設(shè)計(jì)特征和原則是什么，以及整個(gè)平臺(tái)的約束是什么，比如我們平臺(tái)特征是安全感、方正、有對(duì)應(yīng)的設(shè)計(jì)規(guī)范，比如小圓角、方正圖形。

那么設(shè)計(jì)師就得在這個(gè)約束在去進(jìn)行設(shè)計(jì)，就不能設(shè)計(jì)成圓形、可愛的圖形，因?yàn)楹驼麄€(gè)設(shè)計(jì)原則是違背的。

3. 效率

提升效率，對(duì)于一些經(jīng)常用到的組件、顏色、分割線、按鈕、圖標(biāo)、字體、tab、表單等組件，如果提前設(shè)計(jì)統(tǒng)一好，能大大減少重復(fù)性設(shè)計(jì)，能讓設(shè)計(jì)師更加專注在設(shè)計(jì)品質(zhì)上加強(qiáng)，也可提升研發(fā)效率，對(duì)于基礎(chǔ)的顏色、字體、間距可以提前開發(fā)好，減少重復(fù)性開發(fā)。

4. 多平臺(tái)統(tǒng)一

我們現(xiàn)在處于一個(gè)各種設(shè)備的社會(huì)，各種屏幕尺寸、平板電腦、筆記本、各種安卓機(jī)器、各種廠商自定義的系統(tǒng)等等，我們的設(shè)計(jì)需要在這些平臺(tái)上運(yùn)行，就必須保證設(shè)計(jì)的統(tǒng)一性。

三、設(shè)計(jì)語(yǔ)言包含哪些內(nèi)容？

前面我們已經(jīng)說了，設(shè)計(jì)語(yǔ)言的重要性，以及設(shè)計(jì)語(yǔ)言解決了什么問題，那么到底設(shè)計(jì)語(yǔ)言里面應(yīng)該包含哪些內(nèi)容，應(yīng)該如何去定義這些內(nèi)容呢？

1.設(shè)計(jì)原則

（1）Airibnb在建立設(shè)計(jì)語(yǔ)言之前，先根據(jù)整個(gè)產(chǎn)品定位，價(jià)值觀，得出設(shè)計(jì)語(yǔ)言的關(guān)鍵詞：

• 統(tǒng)一：每個(gè)設(shè)計(jì)應(yīng)該是統(tǒng)一的，不能有太多個(gè)性差異化的特征。
• 關(guān)于內(nèi)容：用戶應(yīng)該更多關(guān)注的是內(nèi)容，而非設(shè)計(jì)本身。
• 確定的：在設(shè)計(jì)中減少不確定的因素和預(yù)期。

（2）在facebook的設(shè)計(jì)原則語(yǔ)言里面，也首先強(qiáng)調(diào)了它們的設(shè)計(jì)價(jià)值觀：通用，人性，干凈，統(tǒng)一，有用，快速，透明，在facebook所有設(shè)計(jì)中，都圍繞這幾個(gè)點(diǎn)作為設(shè)計(jì)指導(dǎo)準(zhǔn)則。

（3）蘋果的設(shè)計(jì)規(guī)范包括：完整性，一致性，直接操作，反饋，隱喻，用戶控制等幾個(gè)設(shè)計(jì)原則。

所以在建立一個(gè)設(shè)計(jì)語(yǔ)言的第一步，應(yīng)該建立一個(gè)設(shè)計(jì)準(zhǔn)則。

2. 色彩系統(tǒng)

設(shè)計(jì)中三大元素——色彩、字體、圖形。

那么在建立一個(gè)系統(tǒng)的時(shí)候，色彩是很重要一部分，需要定義好整個(gè)系統(tǒng)的色彩架構(gòu)體系，色彩體系一旦建立好，后面的設(shè)計(jì)都將圍繞這些色彩進(jìn)行設(shè)計(jì)，色彩又包括，品牌色，輔助的，字體顏色黑白灰，不可用，超鏈接，成功或者失敗等等。

▲主色盤

▲輔助色盤

▲色盤延伸

3. 圖形

▲圖形，設(shè)計(jì)中很重要元素之一，插畫風(fēng)格圖形如何定義，圖標(biāo)，背景圖形都屬于圖形一部分。

▲插畫在設(shè)計(jì)運(yùn)用類型有幾種，比如atlassian對(duì)于它們的插畫類型進(jìn)行了規(guī)范，插畫需要有隱秘和故事性在里面，插畫必須有構(gòu)建的感覺，定義了人物特征以及顏色規(guī)范。

▲包括對(duì)于空白頁(yè)圖形定義

▲對(duì)圖標(biāo)風(fēng)格定義，包括色彩關(guān)系

▲對(duì)于頭像，定義了有五官和無五官風(fēng)格定義

▲包括整個(gè)規(guī)范的正確示范和錯(cuò)誤示范

▲圖標(biāo)規(guī)范

4. 柵格系統(tǒng)

柵格系統(tǒng)是為了頁(yè)面中更好的布局，保證布局統(tǒng)一性，柵格系統(tǒng)里面又分最小單位和間距。

▲在airbnb中對(duì)于間距，運(yùn)用了8的倍數(shù)，所有的規(guī)范都是很有彈性的，8，16，24，48，64來建立。

▲網(wǎng)格系統(tǒng)中的列,也有叫欄

▲網(wǎng)格系統(tǒng)中的行

▲網(wǎng)格系統(tǒng)中的水槽

▲網(wǎng)格系統(tǒng)中的邊距

5. 字體

界面中出現(xiàn)最多的內(nèi)容，字體，字體除了傳統(tǒng)意義上大小之外，還有字間距，行間距，字重對(duì)比等，還有字體顏色等等。

▲字重，顧名思義就是字體粗細(xì)，通過字重可以加強(qiáng)層級(jí)。

▲字體大小以及運(yùn)用場(chǎng)景，字體在界面中什么樣場(chǎng)景運(yùn)用多大字號(hào)，以及對(duì)應(yīng)的字間距，行間距等等都是需要去定義的。

▲字體顏色，什么時(shí)候用品牌色，成功，錯(cuò)過，超鏈接出錯(cuò)等等各個(gè)狀態(tài)的顏色如何去定義。

6. 投影

在設(shè)計(jì)系統(tǒng)中我們需要定義好投影關(guān)系，投影需要去定義不同的強(qiáng)度大小，以滿足頁(yè)面中需要，一般通過透明度，以及投影遠(yuǎn)近來定義。

7. 圖文關(guān)系

圖片和文字在界面中如何處理，多色調(diào)如何運(yùn)用，黑色圖片上放文字怎么處理，白色圖片放文字如何處理都是需要去詳細(xì)定義的。

四、總結(jié)

設(shè)計(jì)一個(gè)系統(tǒng)是一個(gè)很復(fù)雜的過程，前期一般需要比較高階的設(shè)計(jì)來完成；設(shè)計(jì)系統(tǒng)完成后，對(duì)于基礎(chǔ)的顏色、色彩、字體不要隨意去改動(dòng)，成本會(huì)比較高，至少需要保證這些字體顏色，一兩年不要大的變化。

今天和大家分享了一個(gè)設(shè)計(jì)系統(tǒng)，一個(gè)設(shè)計(jì)語(yǔ)言的大概框架，后續(xù)我將會(huì)拆解里面每個(gè)模塊，逐步和大家分享如何去設(shè)計(jì)一個(gè)語(yǔ)言！

#專欄作家#

Sky，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys），設(shè)計(jì)交流可加微信：hellosky678，人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓?jiān)O(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

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

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