起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何科學構建設計語言？
每當你做設計規范時候有沒有很苦惱，如何才能把界面所需樣式覆蓋完，如何在多平臺、多系統之間采用一致的語言，而不會影響體驗，如何保證多系統品牌調性一致，國外一個網頁設計師 Brad Frost ，寫了一本書 Atomic Design ，這本書是關于如何構建套設計系統方法論的著作，今天就和大家詳細了解下。
下圖是《Atomic Design》作者本人：
原子設計是什么
原子設計是創造設計系統的一套方法論，就是由原子、分子、生物、模式、頁面構成，如下圖：
可能大家有些不明白，說更清晰一些就是，我們構建UI界面其實都是由一些小原子組成，如顏色、字體、網格、圖標／圖形、陰影、動效等等，這些都是所有界面的基礎元素，我們叫做原子。
那么再來細一點，假如按鈕，它是分子，它是由圖形或字體或顏色這些小原子組成，明白了嗎？
繼續推，那么構成生物組織就是由這些前期定義好的分子組成，下圖是一個分子：
到這里相信大家應該明白其工作原理了，一套熟悉的模式出來了。
那我們為什么要學習原子設計
在多屏時代，我們時時刻刻都在設計產品界面，需適配多系統，其中很重要的一點是如何在多系統之間保持體驗一致性，很多人想到的就是規范。對，沒錯，可是如何做一套嚴謹邏輯好，靈活的設計規范？
那么原子設計可以幫助我們來很好的實現它，它在構建設計系統中算是比較科學的一種方法，國外很多設計團隊都在使用這樣的設計方法，來規范自己的設計體系，那么今天我們來詳細的探索下它的一些實際運用案例。
實例操作
前面鋪墊了那么多，終于等到這一步了，有木有很激動，好了回歸正題，前面大概介紹其工作原理，那么現在，請開始你的表演吧（奶奶般的微笑）！我會分詳細步驟和大家說。
- 構建原子
- 構建分子
- 構建生物
- 構建模式
- 最終頁面
1. 構建原子
這里建立的原子是頁面中所需要的基礎元素。
（1）字體（整體系統字體層級，這里省略詳細內容）
PingFang SC? ? ? Regular
PingFang SC? ? ? Semibold
（2）圖標（整個系統圖標規范樣式）
（3）顏色（整個系統顏色體系）
（4）網格（系統所需間距系統）
（5）陰影（設計語言所需投影，沒有可以不要）
（6）黃金比例（界面所需尺寸比例）
2. 構建分子
分子是前面構建原子的任意組合，這里你可以構建出系統所需要的所有小分子，既單個小組件，這里你需要窮舉所有可能性，如下面的列表和按鈕分子。
3. 構建生物
生物其實就是由多個分子集合而成如下：黃金比例／頭像列表／字體／按鈕 / 圖標（一個功能組件）。
4. 構建模式
模式其實就是由多個生物集合而成，導航／卡片。
5. 最終頁面
最后就是由前面構建好的一系列生物組織，來構成最終的視覺頁面。
總結
寫在最后，原子設計是一套具有科學嚴謹的創建設計系統的方法論，是一個構件ui系統的心理模型，因此希望以后大家都能從中借鑒一些方式。
那當我們真實設計中所運用時候，如何去做呢？
首先是需要確定視覺語言方向，定好方向后，開始運用原子設計方法論來構建一套科學嚴謹且靈活性高的設計系統。
本次到此結束，如果你有什么疑問歡迎多和我溝通
推薦閱讀
下面推薦三篇文章，和本文都有一些相同體系化知識，感興趣可以深入閱讀。
http://www.aharts.cn/pd/1022391.html
如上集合之前分析谷歌設計語言和本篇文章有著一些體系思路
http://www.aharts.cn/ucd/910698.html
如上（如何科學構建設計網格）
http://www.aharts.cn/it/993771.html
如上（排版設計原則）
#專欄作家#
Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
- 目前還沒評論，等你發揮！
