總結規範一款設計語言的意義很明确，那就是解決團隊内部的統一性與效率問題，并通過統一的設計語言打造統一的品牌符号形象，捕捉用戶認知與記憶點。那麼我們又該如何總結出自己的設計語言呢？筆者将為大家做詳細的分享。

大家是如何定義一套設計語言的呢？

設計語言，貌似很火的一個詞，設計團隊都在做設計規範，好像沒有就是不夠專業，UED的價值就不夠高。

關于設計語言的參考很多，最出名的莫過于蘋果和谷歌材料設計，也是設計語言的鼻祖。後面我将分享設計語言的價值、如何去創一個設計語言、設計語言包含什麼。希望通過幾期分享，幫助大家能很好的掌握這項技能。

一、為什麼需要設計語言？

1. 對内

這應該是很多設計團隊會遇到這樣的情況——一個按鈕很多尺寸，顔色，大小，有時候我們已經有了規範，但是各種業務方要求個性化，要不一樣，導緻整個APP設計變的很混亂，這是我們設計中經常遇見的。

很多APP因為缺少基礎原則，導緻APP界面每個頁面都不一樣，風格層次不齊，缺乏統一性，所以對内，很多時候設計語言是為了解決統一性和效率為前提下，避免開發工程師重複開發一些組件。

2. 對外

對外，統一的品牌符号，品牌特征，有助于加深産品在用戶心中的印象，統一的顔色和交互形式能幫助用戶加深對産品的熟悉感和信任感，一個好的設計語言本身可以在體驗上為産品加分，也能夠更好創造一緻性的體驗。

二、設計語言解決什麼問題？

1. 一緻性

在整個平台中創造一緻性，顔色，按鈕，字體，品牌一緻性，給用戶安全感，熟悉感，同時解決設計師因為個人特征導緻界面不統一問題。

2. 明确設計原則

讓每一個設計很清楚知道，産品需要傳遞給用戶的設計特征和原則是什麼，以及整個平台的約束是什麼，比如我們平台特征是安全感、方正、有對應的設計規範，比如小圓角、方正圖形。

那麼設計師就得在這個約束在去進行設計，就不能設計成圓形、可愛的圖形，因為和整個設計原則是違背的。

3. 效率

提升效率，對于一些經常用到的組件、顔色、分割線、按鈕、圖标、字體、tab、表單等組件，如果提前設計統一好，能大大減少重複性設計，能讓設計師更加專注在設計品質上加強，也可提升研發效率，對于基礎的顔色、字體、間距可以提前開發好，減少重複性開發。

4. 多平台統一

我們現在處于一個各種設備的社會，各種屏幕尺寸、平闆電腦、筆記本、各種安卓機器、各種廠商自定義的系統等等，我們的設計需要在這些平台上運行，就必須保證設計的統一性。

三、設計語言包含哪些内容？

前面我們已經說了，設計語言的重要性，以及設計語言解決了什麼問題，那麼到底設計語言裡面應該包含哪些内容，應該如何去定義這些内容呢？

1.設計原則

（1）Airibnb在建立設計語言之前，先根據整個産品定位，價值觀，得出設計語言的關鍵詞：

• 統一：每個設計應該是統一的，不能有太多個性差異化的特征。
• 關于内容：用戶應該更多關注的是内容，而非設計本身。
• 确定的：在設計中減少不确定的因素和預期。

（2）在facebook的設計原則語言裡面，也首先強調了它們的設計價值觀：通用，人性，幹淨，統一，有用，快速，透明，在facebook所有設計中，都圍繞這幾個點作為設計指導準則。

（3）蘋果的設計規範包括：完整性，一緻性，直接操作，反饋，隐喻，用戶控制等幾個設計原則。

所以在建立一個設計語言的第一步，應該建立一個設計準則。

2. 色彩系統

設計中三大元素——色彩、字體、圖形。

那麼在建立一個系統的時候，色彩是很重要一部分，需要定義好整個系統的色彩架構體系，色彩體系一旦建立好，後面的設計都将圍繞這些色彩進行設計，色彩又包括，品牌色，輔助的，字體顔色黑白灰，不可用，超鍊接，成功或者失敗等等。

主色盤

輔助色盤

色盤延伸

3. 圖形

圖形，設計中很重要元素之一，插畫風格圖形如何定義，圖标，背景圖形都屬于圖形一部分。

插畫在設計運用類型有幾種，比如atlassian對于它們的插畫類型進行了規範，插畫需要有隐秘和故事性在裡面，插畫必須有構建的感覺，定義了人物特征以及顔色規範。

包括對于空白頁圖形定義

對圖标風格定義，包括色彩關系

對于頭像，定義了有五官和無五官風格定義

包括整個規範的正确示範和錯誤示範

圖标規範

4. 栅格系統

栅格系統是為了頁面中更好的布局，保證布局統一性，栅格系統裡面又分最小單位和間距。

在airbnb中對于間距，運用了8的倍數，所有的規範都是很有彈性的，8，16，24，48，64來建立。

網格系統中的列,也有叫欄

網格系統中的行

網格系統中的水槽

網格系統中的邊距

5. 字體

界面中出現最多的内容，字體，字體除了傳統意義上大小之外，還有字間距，行間距，字重對比等，還有字體顔色等等。

字重，顧名思義就是字體粗細，通過字重可以加強層級。

字體大小以及運用場景，字體在界面中什麼樣場景運用多大字号，以及對應的字間距，行間距等等都是需要去定義的。

字體顔色，什麼時候用品牌色，成功，錯過，超鍊接出錯等等各個狀态的顔色如何去定義。

6. 投影

在設計系統中我們需要定義好投影關系，投影需要去定義不同的強度大小，以滿足頁面中需要，一般通過透明度，以及投影遠近來定義。

7. 圖文關系

圖片和文字在界面中如何處理，多色調如何運用，黑色圖片上放文字怎麼處理，白色圖片放文字如何處理都是需要去詳細定義的。

四、總結

設計一個系統是一個很複雜的過程，前期一般需要比較高階的設計來完成；設計系統完成後，對于基礎的顔色、色彩、字體不要随意去改動，成本會比較高，至少需要保證這些字體顔色，一兩年不要大的變化。

今天和大家分享了一個設計系統，一個設計語言的大概框架，後續我将會拆解裡面每個模塊，逐步和大家分享如何去設計一個語言！

#專欄作家#

Sky，我們的設計日記（ID：helloskys），設計交流可加hellosky678，人人都是産品經理專欄作家。支付寶體驗設計專家，阿裡巴巴天貓設計專家；10年知名互聯網公司設計經驗，對于産品從0到1、品牌定位、金融産品、設計規範、運營規範、大促等有豐富實戰經驗。

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

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部