2020-10-9 周周
“我們不設(shè)計頁面，我們設(shè)計構(gòu)成元素的系統(tǒng)?！薄猄tephen Hay
原子設(shè)計理論并不是什么高大上的規(guī)則。
隨著網(wǎng)頁設(shè)計的持續(xù)發(fā)展，我們認識到開發(fā)設(shè)計系統(tǒng)（design system）的重要性，它最早就是為了讓網(wǎng)頁設(shè)計師更容易理解網(wǎng)頁的構(gòu)成，后來才延伸到UI設(shè)計當中。
簡單來說，當公司的業(yè)務(wù)產(chǎn)品逐漸擴大時，我們需要制定一套完整的設(shè)計系統(tǒng)，提升設(shè)計和開發(fā)的協(xié)作效率，統(tǒng)一所有設(shè)計師的輸出物。 開始設(shè)計系統(tǒng)的制定時，大部分設(shè)計師可能都會先去網(wǎng)上找到大廠現(xiàn)成的設(shè)計系統(tǒng)，當拿到他們的成品的時候，會把自己的產(chǎn)品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規(guī)則和邏輯，只是借鑒他們現(xiàn)成的設(shè)計系統(tǒng)，只能了解個大概，知其然而不知其所以然。因此，原子設(shè)計理論的出現(xiàn)就是為了幫助我們?nèi)ゴ罱ㄔO(shè)計系統(tǒng)，這套理論已經(jīng)逐漸被國外一些大廠應(yīng)用于創(chuàng)建統(tǒng)一和富有層次的設(shè)計系統(tǒng)。
原子是所有事物的基本構(gòu)成物質(zhì)。每一個化學(xué)元素都具有不同的性質(zhì)，并且它們一旦被分解就會失去其意義。
分子是由兩個或兩個以上的原子通過化學(xué)鍵結(jié)合在一起的。這些原子的組合具有自己獨特的性質(zhì)，并且相較于原子來說，更具實際意義和可操作性。
有機體是由分子有機地組合在一起的。這些相對復(fù)雜的結(jié)構(gòu)可以從單細胞生物一直到像人類這樣難以置信的復(fù)雜生物體。
宇宙中的物質(zhì)都可以被分解成為原子元素。
碰巧的是，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網(wǎng)站、APP、企業(yè)內(nèi)部網(wǎng)、hoobadyboops等等是如何由相同的HTML元素組成的。
△Josh Duck的“HTML元素周期表”
接下來和大家細聊一下什么是原子設(shè)計；原子設(shè)計到底好在哪里；為什么要有設(shè)計系統(tǒng)；以及該如何利用原子理論創(chuàng)建自己的項目組件庫。
原子設(shè)計（Atomic Design）理念最早是由國外網(wǎng)頁設(shè)計師Brad Frost提出的，他從化學(xué)元素周期表中得到啟發(fā)，發(fā)現(xiàn)原子結(jié)合在一起，可以形成分子，進一步形成組織，從科學(xué)的角度來講，在宇宙中的所有事物都是由一組有序的原子組成。
Brad將這個概念應(yīng)用到界面設(shè)計中，仔細觀察后我們不難發(fā)現(xiàn)，界面其實就是由一些基本的元素組成，文字，顏色和圖標等都是一個個原子。
通過原子設(shè)計，我們可以把界面看作是一個連貫的整體，同時也是一些元素的集合，每個元素都不盡相同，互相結(jié)合產(chǎn)生更多層次和結(jié)構(gòu)，模塊之間相互統(tǒng)一。說到底，原子設(shè)計其實是一種設(shè)計方法論，它由原子、分子、組織、模塊和頁面共同協(xié)作，由此創(chuàng)作出統(tǒng)一和富有層次的設(shè)計系統(tǒng)。
簡單來說：原子結(jié)合在一起，形成分子，進一步結(jié)合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。
原子設(shè)計是一種方法，由五個不同的階段一起工作，以更慎重和更具層次的方式創(chuàng)建界面設(shè)計系統(tǒng)。從而創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計方法。
它的五個不同階段是：
原子(Atoms)：為頁面構(gòu)成的基本元素，例如標簽、輸入框、文字、顏色等；
分子(Molecules)：由原子構(gòu)成的簡單UI元素，例如按鈕；
組織(Organisms)：相對分子而言，較為復(fù)雜的構(gòu)成物，由原子及分子所組成；
模板(Templates)：以頁面為基礎(chǔ)的架構(gòu)，將以上元素進行排版；
頁面(Pages)：將實際內(nèi)容（圖片、文章等）放置在特定模板內(nèi)；
原子設(shè)計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設(shè)計系統(tǒng)層級中扮演重要角色。下面，讓我們更深入的了解每一個階段哦～
原子
如果原子是物質(zhì)的基礎(chǔ)組成部分，那么我們用戶界面的“原子”就是那些構(gòu)成我們用戶界面的基本構(gòu)件了 。在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線等。
在團隊開始新項目時，為了保證各個頁面具有統(tǒng)一的設(shè)計風(fēng)格，我們會制定一套簡易的視覺規(guī)范，在關(guān)鍵的設(shè)計元素上，各個設(shè)計師達成一致，這樣就能很大程度保證不同頁面的風(fēng)格統(tǒng)一，并在這個基礎(chǔ)上去探索更有創(chuàng)新意義的設(shè)計方案。
在模式庫中，原子一目了然地展示了所有的基本樣式，當你回來繼續(xù)開發(fā)和維護你的設(shè)計系統(tǒng)時，這是一份很有用的設(shè)計參考指南。
分子
分子是原子組合建立的元素，兩個原子即可組成一個分子。
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。例如，搜索框里的文字和圖標共同打造一了個搜索表單分子。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和柵格。合并后，這些抽象的原子從毫無關(guān)聯(lián)到又一個共同的目的，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，柵格為按鈕定義了一個尺寸和規(guī)范。
將單個元素組裝為簡單的功能組是我們一直以來構(gòu)建用戶界面的方式，可幫助UI設(shè)計人員和開發(fā)人員堅持單一職責(zé)原則，這種方式簡單且復(fù)用性高，可以保證界面具有良好的可用性。
以界面設(shè)計中的表單為例，表單是一個非常常見的設(shè)計元素，一個表單分子是由文字、圖標和線條原子組成。這些原子合并后，得到的是一個可以應(yīng)用在任何信息展示或者功能入口的組合。
組織
組織是由分子或原子或其它有機體組成的相對復(fù)雜的UI部分 。這些組織組成了界面的不同部分。
通過結(jié)合分子和原子，我們可以構(gòu)建更復(fù)雜和可擴展性的模塊，這個稱之為組織，其實也可以稱之為組件，這些組件組成了界面的不同部分。同樣以表單為例，一個表單我們可以通過數(shù)量的組合，以及間距的調(diào)整，元素的增減，在界面中表達不同的場景和含義。從建立分子到建立更精細的組件，這為設(shè)計師和開發(fā)人員提供了重要的內(nèi)容構(gòu)建思路。
組件在解放設(shè)計師生產(chǎn)力方面有著重要的作用，我們可以把界面中常見的組件進行分類整理，如搜索、表單、圖片和卡片等，這些常用組件基本能滿足日常的設(shè)計需求。以Aribnb為例，他們主要分為3類：卡片、表單和內(nèi)容。每個標簽內(nèi)容的設(shè)計形式盡量都保持統(tǒng)一，因此負責(zé)不同內(nèi)容模塊的設(shè)計師只要選擇同一個組件就能完成頁面的設(shè)計。在短時間內(nèi)就可以完成頁面超多的復(fù)雜項目，極大的提升了團隊的設(shè)計效率。
在網(wǎng)頁端最典型的例子就是網(wǎng)站導(dǎo)航，搜索表單，我們幾乎訪問的每個網(wǎng)站都會看到這些類型的組件。
模板
原子，分子和組織的這種語言有助于我們有意識地構(gòu)造設(shè)計系統(tǒng)的組件。但是，最終我們必須采用一個更適合描述我們最終產(chǎn)出的語言，這樣才好匯報給老板、客戶和同事，簡單來說就是說人話。
模版的本質(zhì)就是線框圖，在這一步我們基本可以看到一個產(chǎn)品的形態(tài)。我們可以不斷調(diào)整組件和分子組合在一起的效果來嘗試不同的方案，找到一個相對合適的方案。模版的意義就在于可以專注于頁面的內(nèi)容結(jié)構(gòu)布局，而不是頁面的最終內(nèi)容，此時模版內(nèi)容是隨時可以調(diào)整的，嘗試不同的方案，在多個模版中進行對比，在這個階段改動和溝通保證了成本。因此，模版在設(shè)計系統(tǒng)承載的作用就是保證設(shè)計方案在原型階段的多樣性。
模板是頁面級別的對象，它將組件放置在布局中，并顯示設(shè)計的底層內(nèi)容結(jié)構(gòu)。在設(shè)計一個有效的設(shè)計系統(tǒng)時，必須在布局的環(huán)境中展示組件的外觀和功能，以證明這些部件組成了一個功能良好的整體。
模板的另一個重要特征是它們專注于頁面的底層內(nèi)容結(jié)構(gòu)，而不是頁面的最終內(nèi)容。設(shè)計系統(tǒng)必須考慮內(nèi)容的動態(tài)性質(zhì)，因此，把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。
頁面
頁面是模板的具體實例，填充了真實的內(nèi)容（圖片、文字等）后形成頁面，也就是常說的「視覺稿」，將占位符替換為有代表性的真是內(nèi)容，使設(shè)計系統(tǒng)有了生命。在模版的基礎(chǔ)上進行優(yōu)化和完善就形成了頁面最終的視覺方案。
頁面階段是原子設(shè)計中最具體的階段，由于一些眾所周知的原因這個階段非常重要。別忘了，這可是用戶在訪問你的界面時會實際看到和交互的內(nèi)容。
除了演示用戶所看到的最終界面之外， 頁面對于測試底層設(shè)計系統(tǒng)的有效性是必不可少的 。在頁面階段，我們可以看到當將真實內(nèi)容應(yīng)用于設(shè)計系統(tǒng)時，所有這些模式如何運作。所有的一切看起來都很棒嗎？如果答案是否定的，那么我們可以回過頭去修改我們的分子、生物體和模板，以更好地滿足我們內(nèi)容的需求。
頁面還提供了一個表達模板變量的地方，這對建立強大而可靠的設(shè)計系統(tǒng)至關(guān)重要。以下是模板變量的幾個例子：
用戶在其購物車中有一個商品，另一個用戶在其購物車中有十個商品。
網(wǎng)頁APP的儀表板通常顯示最近的活動，但是該部分對于首次使用的用戶是禁用的。
一篇文章標題可能是40個字符長，而另一篇文章標題可能是100個字符長
在所有這些例子中，底層的模板是相同的，但用戶界面將會隨著內(nèi)容的動態(tài)性質(zhì)而改變。這些變化直接影響了底層分子，有機體和模板的構(gòu)建方式。因此，創(chuàng)建解釋這些變量的頁面有助于我們建立更具彈性的設(shè)計系統(tǒng)。
這就是原子設(shè)計！這五個不同的階段同時協(xié)同工作，以產(chǎn)生有效的用戶界面設(shè)計系統(tǒng)。
原子是最基礎(chǔ)的UI元素，并且是可以用作界面的元素構(gòu)建塊；
分子是用于形成相對簡單的UI組件的原子集合；
組織是形成界面各個部分的相對復(fù)雜的部件；
模板將組件放置在布局中，并演示設(shè)計的底層內(nèi)容結(jié)構(gòu)；
頁面將真實內(nèi)容應(yīng)用于模板，設(shè)計出視覺稿，并最終成為開發(fā)落地的依據(jù)；
原子設(shè)計為制作設(shè)計系統(tǒng)提供了清晰的方法?？蛻艉蛨F隊成員通過實際的設(shè)計流程與步驟，能更好的去理解設(shè)計系統(tǒng)的概念。原子設(shè)計使我們能夠從抽象的設(shè)計中過渡到具體的設(shè)計中來，因此我們可以對一個設(shè)計系統(tǒng)進行一致性和可伸縮性等類似特性的控制。
通過模塊化的設(shè)計系統(tǒng)調(diào)動組件，可以使我們開發(fā)新的產(chǎn)品時，從開始就可以對產(chǎn)品進行嚴格的把控與一定程度上的控制，進而規(guī)避了事后風(fēng)險。開發(fā)之前不確定好系統(tǒng)模塊化，毫無邏輯的去開發(fā)，開發(fā)到一半發(fā)現(xiàn)功能與需求對不上等問題逐漸產(chǎn)生，會導(dǎo)致產(chǎn)品的延期、人員成本的浪費、資金成本的增加，產(chǎn)品的迭代率的下降、進而影響市場先機與市場占有率。
原子化設(shè)計與原來的樣式庫設(shè)計思路不一樣，原子化設(shè)計從抽象到具象，從元素到組件，讓設(shè)計師從底層開始思考，對整個設(shè)計會有更清晰的理解。同時也能讓設(shè)計更加統(tǒng)一，在新增組件的時候更謹慎。
原子設(shè)計的原理可以保證任何一個設(shè)計組件的構(gòu)成與開發(fā)構(gòu)建組件一一對應(yīng)。同時應(yīng)用原子設(shè)計的設(shè)計軟件（e.g., Sketch, Figma)可以給新設(shè)計師足夠的自由滿足需求變通，并且可以保證同一個設(shè)計組件的更新會覆蓋到任何一個使用這個組件的設(shè)計中。
原子設(shè)計為我們提供了一些關(guān)鍵的見解，幫助我們創(chuàng)建更有效、更深思熟慮的UI設(shè)計系統(tǒng)。
那么、
如果產(chǎn)品規(guī)模小只需要1，2個設(shè)計師，大概率是前期不需要大費周章搞一個需要開發(fā)配合的設(shè)計系統(tǒng)?？梢灾焕肧ketch或者Figma做一個像貼紙一樣的設(shè)計組件庫。但是功能多了怎么辦，公司來新人了，當新設(shè)計師產(chǎn)出后就會發(fā)現(xiàn)與原設(shè)計師設(shè)計的風(fēng)格不一樣，慢慢發(fā)現(xiàn)整體設(shè)計風(fēng)格不統(tǒng)一了，只靠一個簡單的組件庫很難能滿足新功能需求，新功能貼紙上沒有設(shè)計或者設(shè)計需要變通，又或者是新設(shè)計師忙著交工忘記檢查自己新組件和已有組件的異同。
這時候就會需要一個設(shè)計師領(lǐng)頭去重新整理設(shè)計系統(tǒng)，走查發(fā)現(xiàn)同一個正文所用的十幾個不同字號，又或者是十幾個透明度不同的灰黑色字體，所有組件跟現(xiàn)有上線產(chǎn)品對比整理好后一并交給開發(fā)，開發(fā)再一一整理代碼庫。
設(shè)計系統(tǒng)（Design Systems）對于很多年輕設(shè)計師可能十個新名詞，但是設(shè)計規(guī)范和組件等我們應(yīng)該還是有一定認知的。在設(shè)計的過程中，我們會被其影響。在我們?nèi)粘Ｋ褂玫腁pp產(chǎn)品中，如Apple、Google、Airbnb、Uber、滴滴等，他們的產(chǎn)品體驗非常流暢，用戶使用產(chǎn)品時能夠地滿足需求，在其良好的體驗背后都有著一套強大的設(shè)計系統(tǒng)做支撐。
為什么需要設(shè)計系統(tǒng)
1、團隊協(xié)作，體驗一致。以滴滴為例，雖然只是一個簡單的打車應(yīng)用，但是其旗下的業(yè)務(wù)卻很多，快出、出租車、順風(fēng)車等，每個業(yè)務(wù)都由不同的團隊和設(shè)計師負責(zé)?？梢韵胂笕绻麤]有設(shè)計系統(tǒng)，任由各模塊設(shè)計師自由發(fā)揮，風(fēng)格各異，出來的結(jié)果可想而知。而有了設(shè)計系統(tǒng)的幫助，就會感覺界面風(fēng)格非常統(tǒng)一，感覺是出自同一個設(shè)計師之手，可見其設(shè)計系統(tǒng)的功勞不小。
2、系統(tǒng)的管理多樣性。在設(shè)計過程中，我們會發(fā)現(xiàn)過程中，我們會發(fā)現(xiàn)每個業(yè)務(wù)的形態(tài)都是基于不同的場景，因為場景的多樣性，在表現(xiàn)上就會催生出不同的樣式。如果每個業(yè)務(wù)都用一種樣式表達，久而久之當業(yè)務(wù)增長過快時，我們現(xiàn)有的設(shè)計模式就會難以滿足。Airbnb的設(shè)計方式就是非常值得參考的一個案例，從最開始是提供民宿，到后來新增的餐館服務(wù)，你會發(fā)現(xiàn)房源和餐館都用了同一套圖文信息結(jié)構(gòu)，只是在內(nèi)容的細節(jié)上有一些不同。這樣可以降低設(shè)計的難度。設(shè)計師不用為每個場景思考一個設(shè)計模式而煩惱。同時，用戶在瀏覽不同場景的內(nèi)同時，在相互切換中也不會產(chǎn)生為違和感，一切都是很自然的操作。
3、幫助產(chǎn)品成長，避免一次性設(shè)計。互聯(lián)網(wǎng)產(chǎn)品的成長模式是一種漸進式迭代，在產(chǎn)品初期的主要訴求是快速上線，等到產(chǎn)品上線獲取一定的用戶，證明它可以活下去時再逐步完善，增加更多的功能。每一次的迭代都是站在我們之前的思考之上，每一次的優(yōu)化都會讓我們的設(shè)計更進一步，這是我們期望達到的結(jié)果。
以Uber為例，新版本繼承了黑色按鈕的設(shè)計，并和地圖進行了結(jié)合，地圖的配色和舊版本相比也變得生動了，這種改變并不是一蹴而就，而是建立在原有版本之上。
一致性（Consistency）：由于分解界面成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同，在視覺上更為和諧。
效率（Efficiency）：由于建立了組件庫，一旦要更改某一個元素，可以馬上施行、應(yīng)用。
跨部門的共通語言（Collaboration）：不僅方便設(shè)計師思考頁面的和諧性，也可以讓工程師、測試檢驗清楚頁面的邏輯架構(gòu)及變化，減少不必要的來回溝通
在此，順便淺談下設(shè)計系統(tǒng)。
通常，設(shè)計系統(tǒng)包含的內(nèi)容由設(shè)計原則、設(shè)計語言和組件庫，這是一個整體的概念。
設(shè)計原則
設(shè)計原則是一個產(chǎn)品的核心設(shè)計理念，設(shè)計的本質(zhì)就是解決問題，在制定設(shè)計原則時要建立在這個中心思想之上。這些問題也許是一個業(yè)務(wù)形態(tài)，例如打車的場景，也許是一個設(shè)計形式，如表單。設(shè)計形式又很多，我們應(yīng)該如何選擇呢？相對合理的方法就是建立一個規(guī)則，所有的問題和形式都想這個規(guī)則靠攏，減少不確定性，這就是設(shè)計原則的出發(fā)點。因此我們可以理解為，設(shè)計原則就是一系列的規(guī)則，是我們設(shè)計過程中要遵循的中心思想。
例如：蘋果把審美作為第一要素存在于設(shè)計原則中，它的產(chǎn)品往往也是品味的代名詞，看看它的設(shè)計原則就知道了：
審美的完整性
一致性
直接操作
即使的反饋
隱喻
用戶可控
△ 官網(wǎng)：https://developer.apple.com/design/
再來看看Material Design，Google對其定義是一個完整統(tǒng)一的系統(tǒng)，結(jié)合了理論、資源和工具的數(shù)字體驗產(chǎn)品，相比而言它的設(shè)計原則就是更加獨特，這是它的設(shè)計原則：
材料是一種隱喻
大膽/圖形/強調(diào)/
運動賦予意義
靈活的基礎(chǔ)
跨平臺
△ 官網(wǎng)：https://material.io/design
由此可以看出，和iOS相比，Material Design的設(shè)計原則更加的抽象，因為他擁有一個獨特的設(shè)計世界觀，用還原的方法和物理方法呈現(xiàn)出它的本質(zhì)，通過抽象的視覺卡片傳遞出設(shè)計的目的和原則。
設(shè)計語言
在建立設(shè)計原則后，下一步就是制定一套設(shè)計語言規(guī)范，設(shè)計規(guī)范是設(shè)計系統(tǒng)的表現(xiàn)層，面向的對象是團隊設(shè)計師和開發(fā)者，他能幫助設(shè)計師的設(shè)計輸出保持風(fēng)格統(tǒng)一。同樣也能幫助開發(fā)者高度還原設(shè)計。非常有利于設(shè)計師和開發(fā)者的協(xié)作。這套規(guī)范包含的有：字體、顏色、圖標和柵格。
組件化設(shè)計
組件化設(shè)計主要作用有兩點，一是保證多人協(xié)作效率，組件化設(shè)計可以快速完成一個簡單頁面的設(shè)計，提升設(shè)計效率；二是保持產(chǎn)品體驗的統(tǒng)一性。同時，組件化設(shè)計環(huán)節(jié)在設(shè)計系統(tǒng)中是一個相對重要的工作，需要有一個全局觀，要有較強的設(shè)計水平和溝通協(xié)作能力，這樣，組件化的落地才會得到很好的推進。
在多屏?xí)r代，我們時時刻刻都在設(shè)計產(chǎn)品界面，需適配多系統(tǒng)，其中很重要的一點是如何在多系統(tǒng)之間保持體驗一致性，很多人想到的就是規(guī)范，要想做一套嚴謹邏輯好，靈活的設(shè)計規(guī)范，那么原子設(shè)計可以幫助我們來很好的實現(xiàn)它，它在構(gòu)建設(shè)計系統(tǒng)中算是比較科學(xué)的一種方法，國外很多設(shè)計團隊都在使用這樣的設(shè)計方法。比如以下這幾個團隊：
1、Airbnb
Airbnb設(shè)計副總裁Alex Schleifer在IXDC2017國際體驗設(shè)計大會上分享了這一創(chuàng)新React Sketch app 管理設(shè)計系統(tǒng)， 這是為Airbnb的設(shè)計系統(tǒng)而設(shè)計的，其實就是個實時更新的代碼數(shù)據(jù)庫，可以實時查詢sketch數(shù)據(jù)、代碼，也可以下載圖標、設(shè)計模塊，所有工程師、設(shè)計師都可以免費下載。
△ 官網(wǎng)：https://airbnb.design/events/when-we-use-systems/
2、Frames
Frames 使用了精致的組件和先進技術(shù)，并結(jié)合 Sketch 構(gòu)建了強大的 Web 設(shè)計系統(tǒng)，同樣能滿足修改原子，全局同步更新的功能，支持響應(yīng)式布局。提供了近百個網(wǎng)頁模板，可以非常迅速地完成效果圖制作。
△ 官網(wǎng)：http://framesforsketch.com
3、Nested Symbols
這是一套免費的設(shè)計系統(tǒng)，它將按鈕、輸入框、下拉菜單、通知等控件，都制作成了嵌套符號，方便自定義和編輯。
△ 官網(wǎng)：https://www.janlosert.com/
原子設(shè)計理論最大的價值，就是為設(shè)計體系/組件庫的構(gòu)建提供思路和方法，如果你不滿足于市場上現(xiàn)有的設(shè)計系統(tǒng)，我們還可以自己創(chuàng)建。因此我們首先要為產(chǎn)品設(shè)計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展，必須能在所有地方奏效！
接下來就以 Sketch Library 功能來實現(xiàn)組件庫的創(chuàng)建。
第一步：定義顏色（color）
將顏色添加 Main、Text、Status 等一級分類，例如：Color/Status；再添加二級分類，例如：Color/Status/Success 等，命名需使用「 / 」 符號區(qū)分層級結(jié)構(gòu)。定義好顏色和命名后，將每個顏色轉(zhuǎn)換成 Symbol，便可統(tǒng)一調(diào)用。
第二步：定義字體（font）
根據(jù)設(shè)計規(guī)范，將不同字號的文字樣式羅列出來，例如：Title 1、Body、Body2 等，按照「樣式名稱/顏色/對齊方式」的層級結(jié)構(gòu)，將文字賦予 Text Style，整理出所有的字體樣式。
第三步：定義圖標（icon）
將圖標放置在 24*24px 大小畫板內(nèi)，從定義好的顏色系統(tǒng)中選擇合適的 Symbol，這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸（size）大小，并把調(diào)整尺寸（Resizing） 設(shè)為上下左右同時吸附，以確保圖標在使用時可以等比縮放。
第四步：加入其他元素（Elements）
根據(jù)以上對原子的定義和命名方式，依次完成對其他原子、分子和組織的定義，例如：按鈕、表單、空狀態(tài)等，整個過程都是通過 Symbol 的不斷嵌套，最終實現(xiàn)組件庫的創(chuàng)建。
第五步：加入組件庫
使用快捷鍵「cmd+, 」打開 Preferences 面板，選擇「Libraries」（組件庫）標簽，點擊「Add Library」（添加組件庫）按鈕添加剛才的 Sketch 文件，完成后就可以從其他的 Sketch 文件中，對此庫里的元素進行調(diào)用了。
寫在最后，原子設(shè)計是一套具有科學(xué)嚴謹?shù)膭?chuàng)建設(shè)計系統(tǒng)的方法論，是一個構(gòu)建UI系統(tǒng)的心理模型。
原子設(shè)計使我們可以將我們的界面UI細分為原子元素，并通過這些元素組合在一起形成最終的界面。
原子作為整個理論最基礎(chǔ)的元素，當我們改變其中的原子時，整個體系都會發(fā)生變化。原子的設(shè)計概念和sketch中的“符號”有異曲同工之妙，當我們改變其中一個元素時，其他所有包含這個元素的頁面都會發(fā)生變化，可以保證整個系統(tǒng)的一致性和層次感。原子設(shè)計為界面元素提供了應(yīng)用規(guī)則和組織原理，這套方法論對于設(shè)計系統(tǒng)建立、團隊協(xié)作、產(chǎn)品迭代都具有非常重要的指導(dǎo)意義。
經(jīng)常有同學(xué)問ios設(shè)計規(guī)范，安卓設(shè)計規(guī)范在哪看這類問題，最后，來推薦一些大平臺的設(shè)計網(wǎng)站，上文出現(xiàn)過的下面就不重復(fù)了。我們耳熟能詳?shù)膬?yōu)秀設(shè)計都是來自于這些世界互聯(lián)網(wǎng)公司，說真的，審美這東西還真是人家說了算～
反正看看又不要錢，都去康康唄～
Google Design
谷歌設(shè)計中心，它非常全面的展示了谷歌的設(shè)計工作和概念。包括Material Design在內(nèi)的所有關(guān)于設(shè)計、體驗、產(chǎn)品等互聯(lián)網(wǎng)領(lǐng)域的探索。
△ 網(wǎng)址：https://design.google/
Fluent Design
微軟基于Windows10的設(shè)計語言，包括人機界面布局、控件、樣式及資源下載。
△ 網(wǎng)址：https://www.microsoft.com/design/fluent/#/
IBM Design Language
IBM設(shè)計語言是偉大設(shè)計的代名詞，他將人們的需求轉(zhuǎn)化成精心打造的產(chǎn)品。在這里可以學(xué)習(xí)IBM設(shè)計團隊一用戶為中心設(shè)計的新思維方式。
△ 網(wǎng)址：https://www.ibm.com/design/
Facebook Design
臉書設(shè)計官網(wǎng)，在國內(nèi)，我們常?？吹侥槙脑O(shè)計文章被翻成中文為中國設(shè)計師所學(xué)習(xí)
△ 網(wǎng)址：https://facebook.design/
Uber Design
作為全球第一家即時打車應(yīng)用，優(yōu)步其超前的設(shè)計理念和優(yōu)秀的用戶體驗成為同類產(chǎn)品競相模仿的對象。
△ 網(wǎng)址：https://www.uber.deign.com/
Ant Design
螞蟻金服設(shè)計平臺是阿里旗下子公司，基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計與開發(fā)的體驗解決方案。
△ 網(wǎng)址：https://design.alipay.com/
參考資料
《原子設(shè)計》官網(wǎng)
Airbnb 設(shè)計規(guī)范
Apple 設(shè)計規(guī)范
Material Design設(shè)計規(guī)范
Google及其他
文章來源：tob.design
藍藍設(shè)計( m.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.miumiuwan.com