編輯導(dǎo)讀：一套優(yōu)秀的設(shè)計系統(tǒng)有利于幫助產(chǎn)品在各個平臺保持一致的設(shè)計語言和風(fēng)格，給用戶一致的產(chǎn)品體驗。本文將從十個方面，對設(shè)計系統(tǒng)進行深度分析，希望對你有幫助。

—、前言

本文講什么？

讀完本文你能很清晰的了解設(shè)計系統(tǒng)相關(guān)的基礎(chǔ)知識、原子理論如何指導(dǎo)設(shè)計系統(tǒng)構(gòu)建、以及如何用Sketch自帶的功能建立一個簡單的設(shè)計系統(tǒng)，并將其共享給他人。

二、什么是設(shè)計系統(tǒng)？

設(shè)計系統(tǒng)是一套為共同的目標(biāo)而服務(wù)的內(nèi)在相互聯(lián)系的 Design pattern 和多人協(xié)同執(zhí)行的方法。

Pattern（模式）：指創(chuàng)建界面時可復(fù)用的部分（用戶流程、交互方式、按鈕、圖標(biāo)、顏色、字體等），借助它可以用于解決特定的設(shè)計問題。

通俗講設(shè)計系統(tǒng)就是將多個可復(fù)用的元素（圖標(biāo)、顏色、字體)或控件（搜索框、開關(guān)、彈窗）整理并組織起來服務(wù)于界面的一套產(chǎn)物，大多數(shù)時候被稱做組件庫。

三、為什么要建立設(shè)計系統(tǒng)？

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

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

在實際工作中隨著產(chǎn)品不斷迭代更新，設(shè)計人員會面臨一個重要問題，那就是設(shè)計組件很多。原因在于APP頁面是由不同時期的不同設(shè)計師完成的，當(dāng)中并沒有一套統(tǒng)一的設(shè)計原則做規(guī)范。

2. 提高團隊協(xié)作效率

由于設(shè)計系統(tǒng)包含了界面中重復(fù)使用的元素和控件，所以在遇到相同設(shè)計需求時可直接調(diào)用相關(guān)組件，減少很多重復(fù)性設(shè)計工作和規(guī)范溝通成本。

借助設(shè)計系統(tǒng)可以降低設(shè)計風(fēng)險，例如設(shè)計人員變動（離職、調(diào)動、新增）也可以保證新接手的同事能夠參照設(shè)計系統(tǒng)快速開展工作。

由于構(gòu)建設(shè)計系統(tǒng)時采用原子設(shè)計并借助sketch的symbols特性（后面詳細講解），在后期如果需要統(tǒng)一修改頁面中某一重復(fù)元素時，只需要在組件庫中修改一次即可全局調(diào)整，極大的提高了設(shè)計效率。

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

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

四、設(shè)計系統(tǒng)到底長什么樣?

個人推薦3個設(shè)計系統(tǒng)：Apple UI Design、Google Material Design、Ant Design。

以下是我在Dribbble找的一些優(yōu)秀設(shè)計師產(chǎn)出的部分設(shè)計系統(tǒng)，可以看到其中包含了界面中經(jīng)常復(fù)用的元素和控件，而且我們還可以發(fā)現(xiàn)不同的產(chǎn)品其設(shè)計系統(tǒng)也會有所不同。

五、如何建立設(shè)計系統(tǒng)？

1. 窮舉法（不推薦）

將產(chǎn)品中使用到的組件全部列舉出來。

優(yōu)點：沒有復(fù)雜的邏輯，方便交接。缺點：難以管理、拓展性小、文件冗余、牽一發(fā)動全身。

2. 顆?；芾恚ɑ谠永碚摚?/h3>

將組件進行模塊拆分成最小單元，充分提高組件復(fù)用率。通常拆分到圖標(biāo)、文字等最小單一元素，如果需要調(diào)整全局中某一元素，只需在組件庫內(nèi)針對性調(diào)整即可全局響應(yīng)。

優(yōu)點：高效、方便、更改簡單。缺點：搭建過程較為復(fù)雜，理解需要花費一定精力。

六、什么是原子理論?

在化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成了宇宙萬物。

2013年前端工程師Brad Forst將此理論運用在界面設(shè)計中，形成一套設(shè)計系統(tǒng)，包含5個層面：原子、分子、組織、模板、頁面。

七、原子理論指導(dǎo)設(shè)計有什么優(yōu)勢？

1. 一致

原子設(shè)計理論以上述5個層面為基礎(chǔ)，在原子到頁面的構(gòu)建過程中，充分發(fā)揮設(shè)計元素的可復(fù)用性，避免重復(fù)設(shè)計，體現(xiàn)了一致性的設(shè)計原則。

2. 清晰

原子設(shè)計理論從抽象到具象、由局部到整體，層級分明，為設(shè)計師構(gòu)建組件庫提供了清晰的方法論指導(dǎo)，同時幫助團隊成員更好地理解設(shè)計系統(tǒng)的價值。

3. 高效

隨著產(chǎn)品不斷迭代更新，以原子設(shè)計理論指導(dǎo)完成的設(shè)計體系，將會更加高效便捷地適應(yīng)新的變化，你只需改變某些原子、分子的屬性或組合方式，便會迎來整個系統(tǒng)的同步更新，易于擴展和維護。

4. 溝通順暢

原子設(shè)計理論不僅方便設(shè)計師思考頁面的整體性和統(tǒng)一性，也能讓開發(fā)和產(chǎn)品經(jīng)理，清楚地了解產(chǎn)品框架層和表現(xiàn)層的邏輯結(jié)構(gòu)，降低不必要的溝通和修改成本。

八、關(guān)于原子理論的爭議

九、如何運用原子理論建立設(shè)計系統(tǒng)？

1. 創(chuàng)建組件

目前sketch創(chuàng)建組件有2種方式。

1. 通過菜單欄「圖層」中「創(chuàng)建控件」進行創(chuàng)建。
2. 通過頂部工具欄中「創(chuàng)建控件」創(chuàng)建。（沒有可右鍵自定義工具欄）。

2. 發(fā)送控件至“控件”頁面

在創(chuàng)建組件時會有一個打斷過程，詢問是否將改組件發(fā)送至組件頁面，默認(rèn)勾選。

1）勾選后創(chuàng)建

你選中的元素會在「圖層頁面」變成組件，并額外生成一個母版發(fā)送到「組件頁面」。

母版：組件可復(fù)制多次使用，但控制其的母版是唯一的。修改母版復(fù)制的組件也將統(tǒng)一修改。

2）取消勾選后創(chuàng)建

新生成的組件與母版都將展示在「圖層頁面」。

3. 置入組件

在sketch中調(diào)用已經(jīng)做好的組件有3種方法。

1. 工具欄面板「置入」，選擇組件列表拖拽。
2. 左側(cè)圖層列表中「組件」下選中列表后拖拽。
3. 通過輸入組件名稱精準(zhǔn)搜索后拖拽出來（需保證輸入準(zhǔn)確）。

4. 編輯組件

分兩種情況，組件編輯(單個組件修改）和母版編輯（多個組件統(tǒng)一修改）。

1）組件編輯（文本內(nèi)容可雙擊組件直接更改）

我們可以在右側(cè)屬性面板中「覆蓋層」下對單個組件編輯?？商鎿Q顏色、文本、圖標(biāo)等內(nèi)容。

2）母版編輯

修改母版內(nèi)容后，受該母版控制的組件都將統(tǒng)一被修改。

5. 替換組件

可將某一組件切換成另一組件，目前有2種方式。

1. 選中組件，右鍵點擊「替換」進行切換。
2. 在右側(cè)屬性面板中「覆蓋層」下對組件進行切換。

6. 管理組件

需要注意的是，sketch會默認(rèn)將畫板尺寸大小一致的組件歸為一個集合，無法再自動細分，但是我們可以通過命名干預(yù)去手動細分。

1）組件命名

在確定組件畫板大小一致的情況下，給帶有同一特征的多個組件命名時可以按照如下格式：特征 + /。例如，Tab/Home、Tab/Me。

特征：這類組件身上相同點，可以是同一模塊下、運用場景相同等，只要能描述清楚就行，比如都是品類區(qū)圖標(biāo)。/ : 劃分子集使用，指“/”后的內(nèi)容是“/”前的子集。“/”可一直劃分下去，從而實現(xiàn)管理組件的功能。

7. 組件嵌套

sketch核心功能，為原子設(shè)計理論提供基礎(chǔ)。接下來我會以一個簡單的組件嵌套操作流程，盡可能通俗易懂告訴大家，希望大家可以舉一反三。

8. 智能布局

提前給頁面內(nèi)元素之間制定某種相互影響的排列布局規(guī)則，當(dāng)頁面內(nèi)元素發(fā)生改動時可自動按排列規(guī)則布局。

在創(chuàng)建組件時可設(shè)置智能布局方向。

方向更改：

設(shè)置好布局方向后，可在「控件」頁面選中畫板，找到右側(cè)屬性面板「布局」進行再次修改。

9. 多組件智能布局

建立多個組件之間的智能布局，提高組件靈活性。

規(guī)則制定：

將信息卡片劃分多個區(qū)域，給不同區(qū)域設(shè)置不同方向的布局規(guī)則。以達到內(nèi)容相互影響，減少對齊、排版、間距調(diào)整等重復(fù)性操作，大大提升設(shè)計效率。

10. 彈性布局

通過預(yù)先制定的規(guī)則，使元素隨父級編組或畫板的尺寸變化而及時響應(yīng)式調(diào)整，在做部分控件適配時候可使用。

調(diào)整尺寸：

當(dāng)選中編組內(nèi)元素后，在右側(cè)屬性面板可以找到「調(diào)整尺寸」給編組內(nèi)元素添加規(guī)則，可以使元素保持某種規(guī)律的位移、縮放、或大小及位置固定。而不再被粗暴的拉伸導(dǎo)致元素形變錯亂。

對元素設(shè)定規(guī)則后，元素響應(yīng)時會按編組的父子集包含關(guān)系（S-M-L……）逐級計算。

十、什么叫組件庫？

sketch組件庫本質(zhì)就是一個包含各類組件的sketch文檔。設(shè)計師之間可以跨文檔共享組件，并保持同步更新。在團隊中使用組件庫，可確保每個人的文檔同步使用最新設(shè)計樣式，并且通過組件分離功能也可單獨對樣式進行調(diào)整，非常利于團隊協(xié)作。

1. 顏色庫構(gòu)建

顏色及其他圖層樣式（投影、描邊、不透明度等）可在右側(cè)屬性面板「外觀」下的樣式中進行創(chuàng)建。

1）顏色命名

顏色命名與前面組件命名類似，都需要借助“/”進行層級區(qū)分。常用的格式有：Color/色相/強弱。

命名后自動分組情況

2. 全局統(tǒng)一顏色更改

目前能實現(xiàn)全局頁面顏色統(tǒng)一更新的方法有2種。

1）覆蓋蒙版

即利用上方嵌套顏色組件的圖層通過蒙版的形式疊加，從而影響下層圖層顏色。

2）外觀樣式

同上面顏色庫搭建中用到的方法一樣，利用「外觀」下的樣式進行全局修改。

3. 圖標(biāo)庫構(gòu)建

根據(jù)使用常場景不同，構(gòu)建方式有所不同。

圖標(biāo)命名：

在實際工作中需要根據(jù)具體情況具體分析再確定命名格式，也可參考部分大廠相對成熟的文檔。

4. 添加組件庫

在工具欄「Sketch」下「首選項」（快捷鍵control+，）可進入添加組件頁面。

5. 共享組件庫

可以和同事，團隊成員共享設(shè)計組件庫，需要將組件庫文件上傳至本地服務(wù)器、云服務(wù)端等。

1）使用云服務(wù)

例如Dropbox或Google云端硬盤，共享你的組件庫就像上傳Sketch文檔并與需要它的人共享一樣簡單。每當(dāng)你更新時，他們都會在Sketch中收到通知。

2）Sketch Cloud

只需將文檔上傳到Sketch Cloud，打開其設(shè)置-輸入你想要分享的人的郵箱-勾選用作庫-然后單擊保存更改。

由于平臺上傳不了視頻演示，部分內(nèi)容可能說的不夠清晰易懂，如感興趣可移步站酷查看。

文章鏈接：https://www.zcool.com.cn/article/ZMTExMTAxMg==.html

站酷ID：幺零三

個人主頁：https://www.zcool.com.cn/u/17449317

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

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