前邊對(duì)《Atomic Design》全書(shū)做了翻譯并按照章節(jié)順序梳理了核心要點(diǎn)，進(jìn)行了知識(shí)提煉。本篇文章將對(duì)全書(shū)內(nèi)容進(jìn)行總結(jié)和重新梳理，讓大家可以更清楚的弄懂原子設(shè)計(jì)的所有內(nèi)容。本文將分為三部分：
1.為什么需要原子設(shè)計(jì)理論？
2.原子設(shè)計(jì)理論是什么？
3.原子設(shè)計(jì)理論的實(shí)際應(yīng)用
弄清楚一個(gè)事情的最好方式不是問(wèn)是什么，而是先問(wèn)為什么。那為什么要學(xué)習(xí)原子設(shè)計(jì)理論呢？這需要從網(wǎng)頁(yè)設(shè)計(jì)的現(xiàn)狀說(shuō)起。
現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)遇到了幾個(gè)問(wèn)題。首先，由于設(shè)計(jì)師自身或者團(tuán)隊(duì)的原因，界面樣式混亂缺乏一致性；另外，隨著用戶(hù)使用的設(shè)備類(lèi)型不斷增加，屏幕尺寸越來(lái)越多，單一的布局設(shè)計(jì)無(wú)法滿(mǎn)足；從整個(gè)開(kāi)發(fā)流程來(lái)說(shuō)，目前的瀑布式工作流也滿(mǎn)足不了敏捷開(kāi)發(fā)的需求；最后，靜態(tài)的設(shè)計(jì)稿無(wú)法展示響應(yīng)式設(shè)計(jì)以及交互，不能完全反映其在瀏覽器中的最終效果。
造成這些問(wèn)題的根本原因是“界面隱喻”。我們通常說(shuō)“網(wǎng)頁(yè)”，其實(shí)就是將它看做是一個(gè)頁(yè)面。頁(yè)面是平面設(shè)計(jì)的叫法，網(wǎng)頁(yè)設(shè)計(jì)也是由平面設(shè)計(jì)發(fā)展而來(lái)，因此保留了很多平面設(shè)計(jì)的方法。這些方法在一開(kāi)始很有用，但是隨著技術(shù)發(fā)展，已經(jīng)逐漸落伍，從而導(dǎo)致了上面所說(shuō)的幾個(gè)問(wèn)題。
那該如何解決這些問(wèn)題？ 那就是“模塊化設(shè)計(jì)”。模塊化是工業(yè)發(fā)展過(guò)程中產(chǎn)生的一種高效模式，制造業(yè)和建筑業(yè)等行業(yè)通過(guò)模塊化，大幅提高了效率。將這種思路引入到網(wǎng)頁(yè)設(shè)計(jì)，就可以解決現(xiàn)存的問(wèn)題。 通過(guò)模塊化的思路，可以改善落后的網(wǎng)站更新管理策略，不用每次改版都從頭重新設(shè)計(jì)一次；還可以使迭代開(kāi)發(fā)變得更加敏捷；網(wǎng)站內(nèi)容也可以適配大量的設(shè)備尺寸和環(huán)境；同時(shí)，很方便應(yīng)用于前端代碼中；最重要的是，模塊化重組了視覺(jué)設(shè)計(jì)的流程和方法，讓我們關(guān)注于更加體系化的界面設(shè)計(jì)方案。
基于模塊化的思想，出現(xiàn)了很多UI框架，作為現(xiàn)階段的解決方案，如Twitter的bootstrap，從一定程度上解決了問(wèn)題。但是，這些UI框架自身也帶來(lái)的不少問(wèn)題，如基于框架設(shè)計(jì)的網(wǎng)頁(yè)外觀(guān)非常相似，沒(méi)有品牌特色；框架整體過(guò)于龐大，帶來(lái)不少冗余，從而影響性能；框架的覆蓋度不夠時(shí)，需要自定義代碼；而且，我們自己不能命名組件，這對(duì)團(tuán)隊(duì)交流造成影響。
最后，終于發(fā)展出了設(shè)計(jì)體系，它成為終極解決方案。
設(shè)計(jì)體系的基礎(chǔ)是風(fēng)格指南（Style Guides）,根據(jù)內(nèi)容的不同，可以分為品牌識(shí)別指南、設(shè)計(jì)語(yǔ)言指南、語(yǔ)態(tài)和語(yǔ)氣指南、寫(xiě)作風(fēng)格指南、代碼樣式指南和前端樣式指南，即樣式庫(kù)。樣式庫(kù)是風(fēng)格指南的核心。
風(fēng)格指南相對(duì)于傳統(tǒng)的設(shè)計(jì)方法，很很多的優(yōu)勢(shì)：它可以促進(jìn)整個(gè)體驗(yàn)的一致性和凝聚力；加快團(tuán)隊(duì)的工作流程，節(jié)省時(shí)間和金錢(qián)；在所有崗位之間建立協(xié)作性更好的工作流；建立每個(gè)人之間的共享詞匯表；提供有用的文檔，幫助我們影響利益相關(guān)者、同事、甚至第三方；使跨瀏覽器/設(shè)備，性能和可訪(fǎng)問(wèn)性測(cè)試更加容易；提供良好的擴(kuò)展性基礎(chǔ)，可以隨著時(shí)間的推移進(jìn)行修改、擴(kuò)展和改進(jìn)。
總結(jié)來(lái)說(shuō)，就是現(xiàn)有設(shè)計(jì)方法不能滿(mǎn)足目前的環(huán)境，需要模塊化的解決方案。而基于模塊化的終極解決方案就是設(shè)計(jì)體系，設(shè)計(jì)體系的基礎(chǔ)是風(fēng)格指南，風(fēng)格指南的核心是樣式庫(kù)，而原子設(shè)計(jì)是構(gòu)建樣式庫(kù)的理論依據(jù)。因此，我們需要學(xué)習(xí)原子設(shè)計(jì)理論，來(lái)構(gòu)建樣式庫(kù)，從而建立屬于自己團(tuán)隊(duì)的設(shè)計(jì)體系。
弄清楚為什么，我們?cè)倏纯纯丛釉O(shè)計(jì)理論到底是什么。
原子設(shè)計(jì)是一種方法，它由五個(gè)不同的階段組成，這些階段一起工作，以更科學(xué)和層次分明的方式創(chuàng)建界面設(shè)計(jì)體系。原子設(shè)計(jì)的五個(gè)階段是：原子，分子，有機(jī)體，模板，界面。這5個(gè)階段并不是一個(gè)線(xiàn)性的過(guò)程，而是一種心智模型，用于把界面看做是整體與部分的集合。
原子是構(gòu)成用戶(hù)界面的基礎(chǔ)組成部分，它包含基礎(chǔ)的HTML元素，如label、input、button等，無(wú)法再分解，自身具有獨(dú)特屬性且不會(huì)單獨(dú)出現(xiàn)，只存在于實(shí)際界面中。
分子是相對(duì)簡(jiǎn)單的元素組，作為一個(gè)單元起作用，如上邊提到的原子label、input和button組合在一起，就形成了一個(gè)搜索分子。分子通常都具有一定的目的性和功能，簡(jiǎn)單可復(fù)用。
有機(jī)體是由分子、原子或其他有機(jī)體組成相對(duì)復(fù)雜的組件，如上邊提到的搜索分子和logo、導(dǎo)航一起形成頭部有機(jī)體。有機(jī)體可以由相似或不同的分子類(lèi)型組成，提供界面的上下文環(huán)境。
模板用來(lái)展示所有組件的頁(yè)面級(jí)對(duì)象，用來(lái)表明設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)。上邊提到的頭部有機(jī)體就可以被應(yīng)用到這個(gè)頭部模板中。
頁(yè)面是模板的特定實(shí)例，顯示了具有實(shí)際代表內(nèi)容界面。在頁(yè)面階段，我們可以查看真實(shí)的內(nèi)容是如何融合在一起，從而測(cè)試設(shè)計(jì)體系的有效性，查看界面有沒(méi)有什么問(wèn)題。如果存在問(wèn)題，就需要返回到更小的模塊中，進(jìn)行調(diào)整和修改。同時(shí)，頁(yè)面展示了模板中內(nèi)容中的動(dòng)態(tài)部分，比如長(zhǎng)短不一的標(biāo)題等。
原子設(shè)計(jì)理論有以下幾個(gè)優(yōu)點(diǎn)：整體與部分之間切換，確保組件的功能正常并且在界面中保持和諧；分離結(jié)構(gòu)與內(nèi)容，兩者會(huì)互相影響；規(guī)范組件命名。
弄清楚了原子設(shè)計(jì)的理論知識(shí)后，我們需要將它運(yùn)用起來(lái)，建立自己的樣式庫(kù)，從而形成設(shè)計(jì)體系。具體操作可分為4步：確定樣式庫(kù)范圍、確認(rèn)整體視覺(jué)風(fēng)格、搭建樣式庫(kù)以及維護(hù)樣式庫(kù)并形成設(shè)計(jì)體系。
確定樣式庫(kù)的范圍可以分為兩種情況。一種是對(duì)于已有的項(xiàng)目進(jìn)行重設(shè)計(jì)，另一種是設(shè)計(jì)新項(xiàng)目。
對(duì)于重設(shè)計(jì)的項(xiàng)目，需要利用界面清單來(lái)對(duì)樣式進(jìn)行匯總。界面清單是構(gòu)成用戶(hù)界面的完整集合。
具體如何操作？可以組織一次工作坊，團(tuán)隊(duì)中所有角色都盡量參加，來(lái)體驗(yàn)UI的不一致。讓所有人對(duì)構(gòu)成用戶(hù)體驗(yàn)的所有獨(dú)特UI樣式進(jìn)行截圖和分類(lèi)，對(duì)收集結(jié)果進(jìn)行匯總。討論要保留哪些樣式，刪除那些樣式，以及哪些樣式可以合并在一起。最后，討論如何對(duì)每個(gè)樣式進(jìn)行命名。
需要收集的元素類(lèi)別包括：全局元素，導(dǎo)航，圖片，圖標(biāo)，表單組件，按鈕，標(biāo)題，區(qū)塊，列表，交互式組件，多媒體組件，第三方插件，廣告，消息提醒，顏色，動(dòng)效等。 這些收集到的唯一元素，將作為建立樣式庫(kù)的依據(jù)。
對(duì)于新項(xiàng)目來(lái)說(shuō)，則需要產(chǎn)品經(jīng)理和交互設(shè)計(jì)師來(lái)快速生產(chǎn)低保真的線(xiàn)框圖，從而確定整個(gè)項(xiàng)目的內(nèi)容樣式清單，可以用Excel表格來(lái)展示。
從內(nèi)容清單中，我們也可以得到將要設(shè)計(jì)頁(yè)面的所有元素。
接下來(lái)需要視覺(jué)設(shè)計(jì)師來(lái)確認(rèn)整體視覺(jué)風(fēng)格。可以通過(guò)以下幾種方式來(lái)進(jìn)行：
快速找到視覺(jué)方向的方法是20秒直覺(jué)測(cè)試。它的具體操作方法是：選擇本行業(yè)和其他行業(yè)相對(duì)著名的網(wǎng)站20-30個(gè)，在項(xiàng)目啟動(dòng)會(huì)上向利益相關(guān)者展示，每個(gè)網(wǎng)站20秒。之后，讓每個(gè)人對(duì)所看的網(wǎng)站從1-10分進(jìn)行打分，1分表示很糟糕，10分表示很完美。
完成之后，將每個(gè)人的分?jǐn)?shù)相加，然后進(jìn)行討論。討論得分最低的5個(gè)網(wǎng)站，得分最高的5個(gè)網(wǎng)站和爭(zhēng)議最大的網(wǎng)站（有人打了高分，有人打了低分）。參與者向大家解釋他為什么打高分或者打低分，哪里吸引到他或者哪里覺(jué)得很差勁，通過(guò)小組來(lái)對(duì)意見(jiàn)的分歧進(jìn)行討論。
通過(guò)這個(gè)測(cè)試，設(shè)計(jì)師可以在前期弄清楚利益相關(guān)者的喜好，并解決審美差異，最終在視覺(jué)方向上達(dá)成一些共識(shí)，從而可以更好的開(kāi)展下一步的設(shè)計(jì)工作。
樣式圖塊可以在前期建立視覺(jué)方向，而又不用設(shè)計(jì)完整的設(shè)計(jì)稿。它通過(guò)前期調(diào)研的情緒版演化而來(lái)。通過(guò)文字、顏色，排版，造型，質(zhì)感等方向，建立一個(gè)由各種樣式圖塊組成的頁(yè)面。通過(guò)該頁(yè)面，可以和利益相關(guān)者交流視覺(jué)的各個(gè)方面，而又不用浪費(fèi)時(shí)間去直接出設(shè)計(jì)稿，進(jìn)行快速的反饋和討論。
樣式圖塊對(duì)于探索視覺(jué)方向非常有用，但是仍然比較抽象，因此還需要更直觀(guān)一點(diǎn)的展示方式，這就是元素拼貼。
在用樣式圖塊確定了基本的視覺(jué)元素之后，可以將這些元素應(yīng)用于實(shí)際的界面組件中，從而生成元素拼貼。它可以向利益相關(guān)者展示實(shí)際的頁(yè)面元素將會(huì)是什么樣子，從而讓他們真實(shí)感受到最終的頁(yè)面效果。
當(dāng)然，還有其他策略方法可以幫助建立視覺(jué)方向，但整體的原則都是在前期多進(jìn)行探索和確認(rèn)，不斷的進(jìn)行交流，而不是直接深入細(xì)節(jié)去做完整的設(shè)計(jì)稿。
在確定了樣式庫(kù)的范圍和視覺(jué)方向之后，就可以開(kāi)始著手搭建樣式庫(kù)。這個(gè)階段分為兩個(gè)部分：視覺(jué)組件庫(kù)和前端樣式庫(kù)建立。
視覺(jué)組件庫(kù)可以在A(yíng)dobe Xd或Sketch中進(jìn)行，這兩個(gè)軟件都支持樣式庫(kù)的建立。工作原理是最小的樣式（原子）包含在較大的樣式（分子）中，更大的樣式（有機(jī)體）中包含這些樣式，而有機(jī)體則包含在更大的樣式（模板）中。遵循“DRY”原則，即“don't repeat yourself”，更改某個(gè)樣式，所有用到該樣式的地方都會(huì)同步更改。
具體的搭建方式在這里不做詳細(xì)敘述，后邊將會(huì)單獨(dú)寫(xiě)文章來(lái)講解。
對(duì)于前端樣式庫(kù)的搭建，作者推薦了一個(gè)前端工具“Pattern Lab”，它也保持著原子設(shè)計(jì)理論的工作原理，并且還有可以將動(dòng)態(tài)數(shù)據(jù)添加進(jìn)樣式結(jié)構(gòu)中并展示樣式變化，如選中或禁用的tabs；同時(shí)支持響應(yīng)式的設(shè)計(jì)，可以查看整個(gè)分辨率內(nèi)的樣式變化；還可以展示樣式相關(guān)的底層代碼；提供樣式描述和注釋?zhuān)惶峁邮降纳舷挛男畔ⅲ鐦?gòu)成元素和使用場(chǎng)景。
Pattern Lab使用了Mustache的include功能，將將小的樣式包含在大的樣式中，感興趣的小伙伴可以去看本書(shū)的第三章。
創(chuàng)建完成樣式庫(kù)只是第一步，后邊還有一系列的維護(hù)和擴(kuò)展工作要做，直至形成屬于自己團(tuán)隊(duì)的設(shè)計(jì)體系。
首先，要將樣式庫(kù)作為一個(gè)正式的項(xiàng)目來(lái)維護(hù)，這就需要投入時(shí)間和人力，要有專(zhuān)門(mén)負(fù)責(zé)設(shè)計(jì)體系的團(tuán)隊(duì)。如果你屬于大型的設(shè)計(jì)團(tuán)隊(duì)，那么可以專(zhuān)門(mén)成立一個(gè)設(shè)計(jì)小組來(lái)負(fù)責(zé)設(shè)計(jì)體系；如果你的團(tuán)隊(duì)只有少數(shù)的幾個(gè)人，那么就需要少數(shù)的高級(jí)設(shè)計(jì)師來(lái)兼職負(fù)責(zé)設(shè)計(jì)體系。
其次，你需要建立樣式庫(kù)的更新規(guī)范，比如該如何修改、新增和刪除樣式。在修改樣式的時(shí)候，必須弄清楚修改的原因以及如何修改，修改完了之后如何同步；新增樣式時(shí)必須謹(jǐn)慎，保證每一個(gè)新增的樣式都是可以復(fù)用到其他地方；刪除樣式時(shí)，必須制定淘汰計(jì)劃，并提前通知使用該樣式的團(tuán)隊(duì)。
更新樣式庫(kù)之后，必須將這些更新內(nèi)容同步到實(shí)際項(xiàng)目中，這需要前端來(lái)優(yōu)化底層代碼，從而更好的實(shí)現(xiàn)同步功能。
之后，需要在整個(gè)公司去推廣你的樣式庫(kù)，讓更多的人收益。比如產(chǎn)品經(jīng)理，運(yùn)營(yíng)人員，后端開(kāi)發(fā)等，設(shè)計(jì)體系可以成為公司的資源池，使得各個(gè)崗位都能高效的協(xié)作。
為了讓大家都能很方便的訪(fǎng)問(wèn)并使用樣式庫(kù)，需要有一個(gè)專(zhuān)門(mén)的地方來(lái)展示設(shè)計(jì)體系，比如一個(gè)首頁(yè)。你需要保證這個(gè)首頁(yè)足夠的吸引人，這樣有助于建立認(rèn)知并幫助更多人來(lái)關(guān)注設(shè)計(jì)體系。
一旦團(tuán)隊(duì)的人都來(lái)使用你的樣式庫(kù)，你就需要一套交流和推廣的機(jī)制。
在前期的創(chuàng)建過(guò)程中，你可以建立一個(gè)內(nèi)部博客或者釘釘群來(lái)發(fā)布你的進(jìn)度，分享想法和解答疑問(wèn)。樣式庫(kù)建成之后，你需要及時(shí)將更新信息持續(xù)傳達(dá)給團(tuán)隊(duì)，如更新日志、路標(biāo)規(guī)劃、成功案例、提示和使用技巧等。同時(shí)需要通過(guò)培訓(xùn)等手段讓團(tuán)隊(duì)學(xué)會(huì)如何使用你的樣式庫(kù)，可以通過(guò)工作坊、在線(xiàn)會(huì)議、入職培訓(xùn)等方式來(lái)進(jìn)行。
你還需要反饋機(jī)制，幫助用戶(hù)在遇到問(wèn)題時(shí)可以找到解決方案。如建立JIRA的反饋庫(kù)、微信群、論壇或者定期回訪(fǎng)用戶(hù)；同時(shí)可以采取用戶(hù)訪(fǎng)談，問(wèn)卷調(diào)查或定期會(huì)議的方式主動(dòng)尋求反饋。
另外，公開(kāi)你的樣式庫(kù)，讓全世界都可以查看，這將提高你的知名度，增強(qiáng)團(tuán)隊(duì)責(zé)任感并且充當(dāng)出色的招聘工具來(lái)吸引優(yōu)秀的人加入到團(tuán)隊(duì)。
最后，可以通過(guò)不斷的擴(kuò)大范圍，來(lái)形成你的設(shè)計(jì)體系。如增加設(shè)計(jì)原則，品牌指南，語(yǔ)氣語(yǔ)調(diào)指南，寫(xiě)作指南等等，將適用范圍從Web擴(kuò)展到iOS和Android等。
只有投入大量的時(shí)間和精力，不斷維護(hù)和優(yōu)化，你的設(shè)計(jì)體系才能長(zhǎng)期發(fā)展。
以上就是關(guān)于原子設(shè)計(jì)的所有內(nèi)容。這還不是全部，點(diǎn)擊 鏈接 可以查看全書(shū)的思維導(dǎo)圖。怎么樣，還過(guò)癮吧？最后再給大家一個(gè)小小的福利，那就是《Atomic Design》全書(shū)的中文版pdf下載。只需要關(guān)注我的公眾號(hào)，并回復(fù)“原子設(shè)計(jì)”就可以獲取下載鏈接，快來(lái)領(lǐng)取吧！
原文鏈接：
川公網(wǎng)安備 51010702001600號(hào)
