超全UI設(shè)計(jì)規(guī)范，帶你了解規(guī)范設(shè)計(jì)全流程

今天稟享給大家的是如何定義一套設(shè)計(jì)語(yǔ)言。設(shè)計(jì)語(yǔ)言，貌似很火的一個(gè)詞，無(wú)論是國(guó)內(nèi)大的團(tuán)隊(duì)照舊小的團(tuán)隊(duì)，都必要做設(shè)計(jì)規(guī)范，彷佛沒(méi)有就不夠?qū)I(yè)，UED 的價(jià)值就不夠高，關(guān)于設(shè)計(jì)語(yǔ)言的參考也分外多，最出名的莫過(guò)于蘋(píng)果和谷歌，也是設(shè)計(jì)語(yǔ)言的鼻祖。

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

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

上圖，應(yīng)該是許多設(shè)計(jì)團(tuán)隊(duì)都遇見(jiàn)的情況，一個(gè)按鈕許多尺寸，顏色，大小，偶然候我們已經(jīng)有了規(guī)范，但是因?yàn)闋I(yíng)業(yè)方各種要求，要個(gè)性化，要不一樣，導(dǎo)致整個(gè) APP設(shè)計(jì)變的很紊亂，這是我們?cè)O(shè)計(jì)中經(jīng)常遇見(jiàn)的，許多 APP 由于缺少基礎(chǔ)規(guī)范，導(dǎo)致 APP 每個(gè)網(wǎng)頁(yè)都不一樣，設(shè)計(jì)師都是按照小我的主觀經(jīng)驗(yàn)做設(shè)計(jì)，導(dǎo)致風(fēng)格條理不齊，缺乏同一性，所以對(duì)內(nèi)，許多時(shí)候設(shè)計(jì)語(yǔ)言是為了解決同一性和服從為前提下，避免開(kāi)發(fā)工程師重復(fù)開(kāi)發(fā)一些組件。

2. 對(duì)外

對(duì)外，同一的品牌符號(hào)，品牌特性，有助于加深產(chǎn)品在用戶(hù)心中的印象，同一的顏色和交互情勢(shì)能幫助用戶(hù)加深對(duì)產(chǎn)品的認(rèn)識(shí)感和信賴(lài)感，一個(gè)好的設(shè)計(jì)語(yǔ)言自己可以在體驗(yàn)上為產(chǎn)品加分，試想一下，當(dāng)你走進(jìn)星巴克的時(shí)候，發(fā)現(xiàn) LOGO 變了，咖啡的包裝換了，是不是會(huì)覺(jué)得是山寨的感覺(jué)，就好比漢堡XX，雖然都是同樣的薯?xiàng)l漢堡，但是總感覺(jué)是山寨，好的品牌規(guī)范，能夠更好創(chuàng)見(jiàn)同等性的體驗(yàn)。

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

1. 同等性

在整個(gè)平臺(tái)中創(chuàng)造同等性，顏色、按鈕、字體、品牌同等性，給用戶(hù)安全感與認(rèn)識(shí)感，同時(shí)解決設(shè)計(jì)師由于小我特性導(dǎo)致界面不同一題目。

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

讓每一個(gè)設(shè)計(jì)師很清楚的知道，我們產(chǎn)品必要傳遞給用戶(hù)的設(shè)計(jì)特性和原則是什么，以及整個(gè)平臺(tái)的束縛是什么，比如我們平臺(tái)特性是年輕，活潑，那么我們有對(duì)應(yīng)的設(shè)計(jì)規(guī)范，比如圓角按鈕，漸變色。設(shè)計(jì)師就得在這個(gè)束縛下去進(jìn)行設(shè)計(jì)，就不能設(shè)計(jì)成直角或方正的圖形，由于和整個(gè)設(shè)計(jì)原則不匹配。

3. 服從

提拔服從，對(duì)于一些我們經(jīng)常用到的組件、顏色、分割線、按鈕、圖標(biāo)、字體、tab、表單等組件，假如提前設(shè)計(jì)同一好，能大大削減重復(fù)性設(shè)計(jì)，能讓設(shè)計(jì)師更加專(zhuān)注在設(shè)計(jì)品質(zhì)上，提拔服從，對(duì)于基礎(chǔ)的顏色、字體、間距可以提前開(kāi)發(fā)好，削減重復(fù)性開(kāi)發(fā)。

4. 多平臺(tái)同一

我們?nèi)缃裉幱谝粋€(gè)各種設(shè)備的時(shí)代，各種屏幕尺寸，平板電腦，筆記本，各種安卓機(jī)器，各種廠商自定義的體系等等，我們的設(shè)計(jì)必要在這些平臺(tái)上運(yùn)行，就必須保證設(shè)計(jì)的同一性。

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

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

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

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

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

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

https://www. facebook. com/notes/facebook-design/facebook-design-principles/118951047792/

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

https://developer. apple. com/ios/human-interface-guidelines/overview/themes/

蘋(píng)果設(shè)計(jì)規(guī)范，建議每一個(gè)接觸 UI 的同窗都應(yīng)該去學(xué)習(xí)，蘋(píng)果的設(shè)計(jì)規(guī)范包括：完備性，同等性，直接操作，反饋，隱喻，用戶(hù)控制等。

所以我們?cè)诮⒁粋€(gè)設(shè)計(jì)語(yǔ)言的第一步，先應(yīng)該建立一個(gè)設(shè)計(jì)準(zhǔn)則，關(guān)于設(shè)計(jì)準(zhǔn)則如何定義，我會(huì)在后面的文章里面和大家細(xì)致講解。

2. 色彩體系

設(shè)計(jì)中三大元素，色彩，字體，圖形，那么第一步我們?cè)诮⒁粋€(gè)體系時(shí)候，色彩是很緊張一部分，我們必要定義好我們整個(gè)體系的色彩架構(gòu)系統(tǒng)，色彩系統(tǒng)一旦建立好，后面我們的設(shè)計(jì)都將圍繞這些色彩進(jìn)行設(shè)計(jì)，色彩包括：品牌色、輔助色、字體詬誶灰顏色、不可用顏色、超鏈接顏色、成功或失敗顏色等等。

△ 主色盤(pán)

△ 輔助色盤(pán)

△ 色盤(pán)延長(zhǎng)

3. 圖形

△ 圖形，設(shè)計(jì)中很緊張?jiān)刂?，我們插?huà)風(fēng)格圖形如何定義，圖標(biāo)，背景圖形都屬于圖形一部分。

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

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

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

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

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

△ 圖標(biāo)規(guī)范等等

4. 柵格體系

柵格是為了保證網(wǎng)頁(yè)中更好的布局，保證布局同一性。

柵格體系里面又分最小單位和間距，在 airbnb 中對(duì)于間距，他們運(yùn)用了8的倍數(shù)，所有的規(guī)范都是很有彈性的，8，16，24，48，64來(lái)建立。

△ 網(wǎng)格體系中的列，也有叫欄

△ 網(wǎng)格體系中的行

△ 網(wǎng)格體系中的水槽

△ 網(wǎng)格體系中的邊距

5. 字體

界面中出現(xiàn)最多的內(nèi)容字體，字體除了傳統(tǒng)意義上大小之外，還有字間距、行間距、字重對(duì)比、字體顏色等等，后面系列文章中，我會(huì)細(xì)致告訴大家如何定義字體。

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

△ 字體大小以及運(yùn)用場(chǎng)景，字體在界面中什么樣場(chǎng)景運(yùn)用多大字號(hào)，以及對(duì)應(yīng)的字間距，行間距等等都是必要我們?nèi)ザx的。

△ 字體顏色，什么時(shí)候用品牌色，成功，錯(cuò)過(guò)，超鏈接出錯(cuò)等等各個(gè)狀況的顏色如何去定義，后面文章我會(huì)細(xì)致說(shuō)明。

6. 投影

在設(shè)計(jì)體系中我們必要定義好投影關(guān)系，投影必要去定義不同的強(qiáng)度大小，以知足網(wǎng)頁(yè)中必要，一樣平常通過(guò)透明度，以及投影遠(yuǎn)邇來(lái)定義。

7. 圖文關(guān)系

圖片和筆墨在界面中如何處理，多色調(diào)如何運(yùn)用，黑色圖片上放筆墨怎么處理，白色圖片放筆墨如何處理都是必要我們?nèi)ゼ?xì)致定義的。

總結(jié)

設(shè)計(jì)一套設(shè)計(jì)語(yǔ)言是一個(gè)很復(fù)雜的過(guò)程，前期一樣平常必要比較資深的的設(shè)計(jì)師來(lái)完成，設(shè)計(jì)完成后，對(duì)于基礎(chǔ)的顏色，字體不要經(jīng)常變動(dòng)，成本會(huì)比較高，至少必要保證這些基礎(chǔ)元素，一年內(nèi)不要頻繁變動(dòng)，今天和大家分享的只是一個(gè)也許框架，后續(xù)我將會(huì)拆解里面每個(gè)模塊，漸漸和大家分享如何去設(shè)計(jì)一個(gè)語(yǔ)言。

迎接關(guān)注作者的微信公眾號(hào)：我們的設(shè)計(jì)日記，每周分享最新設(shè)計(jì)趨勢(shì)和設(shè)計(jì)經(jīng)驗(yàn)，科學(xué)設(shè)計(jì)方法。

圖片素材作者：RedWood Studio