對(duì)比多個(gè)大廠設(shè)計(jì)系統(tǒng)后，總結(jié)了這份入門基礎(chǔ)（上）

最近在整理設(shè)計(jì)規(guī)范，查找了一些資料后，學(xué)習(xí)了大廠的設(shè)計(jì)規(guī)范，有了更深刻的認(rèn)識(shí)，現(xiàn)在整理了一些內(nèi)容和大家一起學(xué)習(xí)～

設(shè)計(jì)系統(tǒng)是什么？

百度百科上面是這么介紹的：系統(tǒng)設(shè)計(jì)是根據(jù)系統(tǒng)分析的結(jié)果，運(yùn)用系統(tǒng)科學(xué)的思想和方法，設(shè)計(jì)出能最大限度滿足所要求的目標(biāo) (或目的) 的新系統(tǒng)的過程。系統(tǒng)設(shè)計(jì)內(nèi)容，包括確定系統(tǒng)功能、設(shè)計(jì)方針和方法，產(chǎn)生理想系統(tǒng)并作出草案，通過收集信息對(duì)草案作出修正產(chǎn)生可選設(shè)計(jì)方案，將系統(tǒng)分解為若干子系統(tǒng)，進(jìn)行子系統(tǒng)和總系統(tǒng)的詳細(xì)設(shè)計(jì)并進(jìn)行評(píng)價(jià)，對(duì)系統(tǒng)方案進(jìn)行論證并作出性能效果預(yù)測。

為什么我們需要設(shè)計(jì)系統(tǒng)？

設(shè)計(jì)系統(tǒng)后，總結(jié)了這份入門基礎(chǔ)（上）" class="alignnone size-full wp-image-435597" src="https://image.uisdc.com/wp-content/uploads/2021/10/uisdc-db-20211014-1.jpg" width="1080" height="608" />

1. 統(tǒng)一產(chǎn)品體驗(yàn)

一套優(yōu)秀的設(shè)計(jì)系統(tǒng)有利于幫助產(chǎn)品在各個(gè)平臺(tái)（iOS、Android、Pc&Web）保持一致的設(shè)計(jì)語言「設(shè)計(jì)語言：指產(chǎn)品調(diào)性（體現(xiàn)出來的產(chǎn)品的感知形象，可以用高端、廉潔、安全、年輕、穩(wěn)重等來形容）、設(shè)計(jì)風(fēng)格（表現(xiàn)形式有大標(biāo)題、圓角、卡片、投影等）」，給產(chǎn)品使用者帶來的一致的產(chǎn)品體驗(yàn)。

2. 提高生產(chǎn)效率和協(xié)作能力

• 由于設(shè)計(jì)系統(tǒng)包含了界面中重復(fù)使用的元素和控件，所以在遇到相同設(shè)計(jì)需求時(shí)可直接調(diào)用相關(guān)組件，減少很多重復(fù)性設(shè)計(jì)工作和規(guī)范溝通成本。
• 借助設(shè)計(jì)系統(tǒng)可以降低設(shè)計(jì)風(fēng)險(xiǎn)，例如設(shè)計(jì)人員變動(dòng)（離職、調(diào)動(dòng)、新增）也可以保證新接手的同事能夠參照設(shè)計(jì)系統(tǒng)快速開展工作。
• 基于設(shè)計(jì)系統(tǒng)，可以快速地構(gòu)建界面、交互和流程，就像搭樂高積木一樣。可以快速構(gòu)建一些產(chǎn)品原型或?qū)嶒?yàn)性的功能，來進(jìn)行測試以快速驗(yàn)證想法。

3. 降低開發(fā)成本

在實(shí)際工作中，如果每次制作一個(gè)新頁面都設(shè)計(jì)不同的組件，那么就意味著開發(fā)每次都需要寫新的代碼，這無疑大大增加了開發(fā)還原時(shí)間。所以當(dāng)我們將常用的元素做成組件并對(duì)接到開發(fā)的組件庫，開發(fā)在遇到相同組件時(shí)便可直接調(diào)用組件，復(fù)用相關(guān)代碼，從而降低開發(fā)成本和減少代碼冗余。

設(shè)計(jì)系統(tǒng)包含哪些內(nèi)容？

引用《design system》書里面的解釋，一套成熟的設(shè)計(jì)系統(tǒng)包括設(shè)計(jì)語言中的 principle（原則）、guideline（規(guī)范）、components（組件）、pattrens（模式）和 library（庫）等等，同時(shí)還有 tools（設(shè)計(jì)工具）/motion（動(dòng)態(tài)設(shè)計(jì)）等。

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

設(shè)計(jì)原則可以理解為設(shè)計(jì)語言中的語法，是構(gòu)建設(shè)計(jì)語言系統(tǒng)的起點(diǎn)，用于傳達(dá)品牌主張或設(shè)計(jì)理念，它將指引業(yè)務(wù)設(shè)計(jì)執(zhí)行的方向。

每一個(gè)公司（團(tuán)隊(duì)），由于其業(yè)務(wù)的特性將可能產(chǎn)出不同的設(shè)計(jì)原則。以 QQ 的 Q 語言為例，他們的設(shè)計(jì)原則是：

• 活力靈動(dòng)
• 親和自然
• 自我有范

2. 設(shè)計(jì)模式 Design Pattern

基于語言的背景下，我們需要盡可能的抽離一些標(biāo)準(zhǔn)化的規(guī)則形成語法，我們稱之為設(shè)計(jì)模式。設(shè)計(jì)模式是一種經(jīng)常性，可重復(fù)使用的解決方案，可用于解決設(shè)計(jì)問題，我們經(jīng)常會(huì)說解決整個(gè)方案我們要運(yùn)用什么樣的設(shè)計(jì)模式。

3. 設(shè)計(jì)組件 Design Component

組件和模式是設(shè)計(jì)系統(tǒng)最直觀、最實(shí)用的關(guān)鍵組成，設(shè)計(jì)價(jià)值觀、原則與視覺語言在組件中得以落地，通過組件和模式庫形成一致的產(chǎn)品體驗(yàn)。

組件就像是積木，通過拼搭形成稍復(fù)雜的模式庫，而模式庫則是一組有邏輯的使用組件的方式。

4. 設(shè)計(jì)規(guī)范（設(shè)計(jì)語言） Design Guideline

近年來，“設(shè)計(jì)規(guī)范”逐漸被“設(shè)計(jì)體系”或“設(shè)計(jì)語言”(Design Language)的概念重塑，與之俱來的新設(shè)計(jì)方法可以幫助產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)更好地站在整體層面構(gòu)建方案。視覺語言需要依賴品牌，因此定義視覺語言時(shí)，應(yīng)該和品牌保持一致。基于品牌，設(shè)計(jì)語言包括：顏色、字體、空間、布局、投影、圖標(biāo)、插畫、動(dòng)效、文案規(guī)范等。

5. 設(shè)計(jì)資源 Design Tools & Assets

設(shè)計(jì)組件庫

一般為設(shè)計(jì)組件庫的源文件或者交互組件庫，不局限于 sketch、photoshop、adobe xd 等源文件，可供設(shè)計(jì)師下載使用。

工具

設(shè)計(jì)工具可以是設(shè)計(jì)軟件的插件，也可以是設(shè)計(jì)平臺(tái)，這里展示可供設(shè)計(jì)師選擇最合適的工具。

6. 設(shè)計(jì)令牌 Design tokens

“Token”原本的意思是“令牌”，在工程邏輯中用于用戶身份與服務(wù)器端進(jìn)行驗(yàn)證，而在 Design System（即設(shè)計(jì)系統(tǒng)） 的領(lǐng)域中，Design Token 的定義更像是設(shè)計(jì)變量。對(duì)設(shè)計(jì)變量名稱的合理定義可以讓屬性參數(shù)更容易理解，也更便于對(duì)產(chǎn)品風(fēng)格的控制。

優(yōu)秀設(shè)計(jì)系統(tǒng)構(gòu)成

1. 國外

IOS Human Interface Guideline

Google Material Design

2. 國內(nèi)

阿里巴巴體驗(yàn)設(shè)計(jì)指南

騰訊 QQ 語言

缺點(diǎn)：設(shè)計(jì)系統(tǒng)不是特別完善，組件部分缺失，可能是由于剛建立的緣故。

貝殼 Ke.Design 設(shè)計(jì)語言

缺點(diǎn)：對(duì)于 B 端的介紹比較清晰，C 端部分介紹相對(duì)比較簡單，另外運(yùn)營部分規(guī)范也比較簡單。

Zan Design 有贊設(shè)計(jì)系統(tǒng)

優(yōu)點(diǎn)：一級(jí)分類比較明確且符合設(shè)計(jì)系統(tǒng)的分類

缺點(diǎn)：部分組件重復(fù)且分類有歧義

當(dāng)然還有很多優(yōu)秀的設(shè)計(jì)系統(tǒng)，這里面可以分享給大家，一起學(xué)習(xí)

• 「lightningdesignsystem」 https://www.lightningdesignsystem.com/design-tokens/
• 「ADOBE」 https://spectrum.adobe.com/
• 「shopify」 https://polaris.shopify.com/

感謝大家的閱讀，下一篇將會(huì)講講設(shè)計(jì)系統(tǒng)

歡迎關(guān)注作者微信公眾號(hào)：「飛哥的嘮叨」