前邊對《Atomic Design》全書做了翻譯并按照章節(jié)順序梳理了核心要點(diǎn)，進(jìn)行了知識提煉。本篇文章將對全書內(nèi)容進(jìn)行總結(jié)和重新梳理，讓大家可以更清楚的弄懂原子設(shè)計的所有內(nèi)容。本文將分為三部分：

• 1.為什么需要原子設(shè)計理論？

• 2.原子設(shè)計理論是什么？

• 3.原子設(shè)計理論的實(shí)際應(yīng)用

為什么需要原子設(shè)計理論？

弄清楚一個事情的最好方式不是問是什么，而是先問為什么。那為什么要學(xué)習(xí)原子設(shè)計理論呢？這需要從網(wǎng)頁設(shè)計的現(xiàn)狀說起。

現(xiàn)存問題

現(xiàn)在的網(wǎng)頁設(shè)計遇到了幾個問題。首先，由于設(shè)計師自身或者團(tuán)隊的原因，界面樣式混亂缺乏一致性；另外，隨著用戶使用的設(shè)備類型不斷增加，屏幕尺寸越來越多，單一的布局設(shè)計無法滿足；從整個開發(fā)流程來說，目前的瀑布式工作流也滿足不了敏捷開發(fā)的需求；最后，靜態(tài)的設(shè)計稿無法展示響應(yīng)式設(shè)計以及交互，不能完全反映其在瀏覽器中的最終效果。

根本原因

造成這些問題的根本原因是“界面隱喻”。我們通常說“網(wǎng)頁”，其實(shí)就是將它看做是一個頁面。頁面是平面設(shè)計的叫法，網(wǎng)頁設(shè)計也是由平面設(shè)計發(fā)展而來，因此保留了很多平面設(shè)計的方法。這些方法在一開始很有用，但是隨著技術(shù)發(fā)展，已經(jīng)逐漸落伍，從而導(dǎo)致了上面所說的幾個問題。

解決思路

那該如何解決這些問題？ 那就是“模塊化設(shè)計”。模塊化是工業(yè)發(fā)展過程中產(chǎn)生的一種高效模式，制造業(yè)和建筑業(yè)等行業(yè)通過模塊化，大幅提高了效率。將這種思路引入到網(wǎng)頁設(shè)計，就可以解決現(xiàn)存的問題。 通過模塊化的思路，可以改善落后的網(wǎng)站更新管理策略，不用每次改版都從頭重新設(shè)計一次；還可以使迭代開發(fā)變得更加敏捷；網(wǎng)站內(nèi)容也可以適配大量的設(shè)備尺寸和環(huán)境；同時，很方便應(yīng)用于前端代碼中；最重要的是，模塊化重組了視覺設(shè)計的流程和方法，讓我們關(guān)注于更加體系化的界面設(shè)計方案。

現(xiàn)有解決方案

基于模塊化的思想，出現(xiàn)了很多UI框架，作為現(xiàn)階段的解決方案，如Twitter的bootstrap，從一定程度上解決了問題。但是，這些UI框架自身也帶來的不少問題，如基于框架設(shè)計的網(wǎng)頁外觀非常相似，沒有品牌特色；框架整體過于龐大，帶來不少冗余，從而影響性能；框架的覆蓋度不夠時，需要自定義代碼；而且，我們自己不能命名組件，這對團(tuán)隊交流造成影響。

終極解決方案

最后，終于發(fā)展出了設(shè)計體系，它成為終極解決方案。

設(shè)計體系的基礎(chǔ)是風(fēng)格指南（Style Guides）,根據(jù)內(nèi)容的不同，可以分為品牌識別指南、設(shè)計語言指南、語態(tài)和語氣指南、寫作風(fēng)格指南、代碼樣式指南和前端樣式指南，即樣式庫。樣式庫是風(fēng)格指南的核心。

風(fēng)格指南相對于傳統(tǒng)的設(shè)計方法，很很多的優(yōu)勢：它可以促進(jìn)整個體驗的一致性和凝聚力；加快團(tuán)隊的工作流程，節(jié)省時間和金錢；在所有崗位之間建立協(xié)作性更好的工作流；建立每個人之間的共享詞匯表；提供有用的文檔，幫助我們影響利益相關(guān)者、同事、甚至第三方；使跨瀏覽器/設(shè)備，性能和可訪問性測試更加容易；提供良好的擴(kuò)展性基礎(chǔ)，可以隨著時間的推移進(jìn)行修改、擴(kuò)展和改進(jìn)。

總結(jié)來說，就是現(xiàn)有設(shè)計方法不能滿足目前的環(huán)境，需要模塊化的解決方案。而基于模塊化的終極解決方案就是設(shè)計體系，設(shè)計體系的基礎(chǔ)是風(fēng)格指南，風(fēng)格指南的核心是樣式庫，而原子設(shè)計是構(gòu)建樣式庫的理論依據(jù)。因此，我們需要學(xué)習(xí)原子設(shè)計理論，來構(gòu)建樣式庫，從而建立屬于自己團(tuán)隊的設(shè)計體系。

原子設(shè)計理論是什么？

弄清楚為什么，我們再看看看原子設(shè)計理論到底是什么。

原子設(shè)計是一種方法，它由五個不同的階段組成，這些階段一起工作，以更科學(xué)和層次分明的方式創(chuàng)建界面設(shè)計體系。原子設(shè)計的五個階段是：原子，分子，有機(jī)體，模板，界面。這5個階段并不是一個線性的過程，而是一種心智模型，用于把界面看做是整體與部分的集合。

原子是構(gòu)成用戶界面的基礎(chǔ)組成部分，它包含基礎(chǔ)的HTML元素，如label、input、button等，無法再分解，自身具有獨(dú)特屬性且不會單獨(dú)出現(xiàn)，只存在于實(shí)際界面中。

分子是相對簡單的元素組，作為一個單元起作用，如上邊提到的原子label、input和button組合在一起，就形成了一個搜索分子。分子通常都具有一定的目的性和功能，簡單可復(fù)用。

有機(jī)體是由分子、原子或其他有機(jī)體組成相對復(fù)雜的組件，如上邊提到的搜索分子和logo、導(dǎo)航一起形成頭部有機(jī)體。有機(jī)體可以由相似或不同的分子類型組成，提供界面的上下文環(huán)境。

模板用來展示所有組件的頁面級對象，用來表明設(shè)計的底層內(nèi)容結(jié)構(gòu)。上邊提到的頭部有機(jī)體就可以被應(yīng)用到這個頭部模板中。

頁面是模板的特定實(shí)例，顯示了具有實(shí)際代表內(nèi)容界面。在頁面階段，我們可以查看真實(shí)的內(nèi)容是如何融合在一起，從而測試設(shè)計體系的有效性，查看界面有沒有什么問題。如果存在問題，就需要返回到更小的模塊中，進(jìn)行調(diào)整和修改。同時，頁面展示了模板中內(nèi)容中的動態(tài)部分，比如長短不一的標(biāo)題等。

原子設(shè)計理論有以下幾個優(yōu)點(diǎn)：整體與部分之間切換，確保組件的功能正常并且在界面中保持和諧；分離結(jié)構(gòu)與內(nèi)容，兩者會互相影響；規(guī)范組件命名。

原子設(shè)計理論的實(shí)際應(yīng)用

弄清楚了原子設(shè)計的理論知識后，我們需要將它運(yùn)用起來，建立自己的樣式庫，從而形成設(shè)計體系。具體操作可分為4步：確定樣式庫范圍、確認(rèn)整體視覺風(fēng)格、搭建樣式庫以及維護(hù)樣式庫并形成設(shè)計體系。

確定樣式庫范圍

確定樣式庫的范圍可以分為兩種情況。一種是對于已有的項目進(jìn)行重設(shè)計，另一種是設(shè)計新項目。

對于重設(shè)計的項目，需要利用界面清單來對樣式進(jìn)行匯總。界面清單是構(gòu)成用戶界面的完整集合。

具體如何操作？可以組織一次工作坊，團(tuán)隊中所有角色都盡量參加，來體驗UI的不一致。讓所有人對構(gòu)成用戶體驗的所有獨(dú)特UI樣式進(jìn)行截圖和分類，對收集結(jié)果進(jìn)行匯總。討論要保留哪些樣式，刪除那些樣式，以及哪些樣式可以合并在一起。最后，討論如何對每個樣式進(jìn)行命名。

需要收集的元素類別包括：全局元素，導(dǎo)航，圖片，圖標(biāo)，表單組件，按鈕，標(biāo)題，區(qū)塊，列表，交互式組件，多媒體組件，第三方插件，廣告，消息提醒，顏色，動效等。 這些收集到的唯一元素，將作為建立樣式庫的依據(jù)。

對于新項目來說，則需要產(chǎn)品經(jīng)理和交互設(shè)計師來快速生產(chǎn)低保真的線框圖，從而確定整個項目的內(nèi)容樣式清單，可以用Excel表格來展示。

從內(nèi)容清單中，我們也可以得到將要設(shè)計頁面的所有元素。

確認(rèn)整體視覺風(fēng)格

接下來需要視覺設(shè)計師來確認(rèn)整體視覺風(fēng)格?？梢酝ㄟ^以下幾種方式來進(jìn)行：

快速找到視覺方向的方法是20秒直覺測試。它的具體操作方法是：選擇本行業(yè)和其他行業(yè)相對著名的網(wǎng)站20-30個，在項目啟動會上向利益相關(guān)者展示，每個網(wǎng)站20秒。之后，讓每個人對所看的網(wǎng)站從1-10分進(jìn)行打分，1分表示很糟糕，10分表示很好。

完成之后，將每個人的分?jǐn)?shù)相加，然后進(jìn)行討論。討論得分最低的5個網(wǎng)站，得分高的5個網(wǎng)站和爭議大的網(wǎng)站（有人打了高分，有人打了低分）。參與者向大家解釋他為什么打高分或者打低分，哪里吸引到他或者哪里覺得很差勁，通過小組來對意見的分歧進(jìn)行討論。

通過這個測試，設(shè)計師可以在前期弄清楚利益相關(guān)者的喜好，并解決審美差異，最終在視覺方向上達(dá)成一些共識，從而可以更好的開展下一步的設(shè)計工作。

樣式圖塊可以在前期建立視覺方向，而又不用設(shè)計完整的設(shè)計稿。它通過前期調(diào)研的情緒版演化而來。通過文字、顏色，排版，造型，質(zhì)感等方向，建立一個由各種樣式圖塊組成的頁面。通過該頁面，可以和利益相關(guān)者交流視覺的各個方面，而又不用浪費(fèi)時間去直接出設(shè)計稿，進(jìn)行快速的反饋和討論。

樣式圖塊對于探索視覺方向非常有用，但是仍然比較抽象，因此還需要更直觀一點(diǎn)的展示方式，這就是元素拼貼。

在用樣式圖塊確定了基本的視覺元素之后，可以將這些元素應(yīng)用于實(shí)際的界面組件中，從而生成元素拼貼。它可以向利益相關(guān)者展示實(shí)際的頁面元素將會是什么樣子，從而讓他們真實(shí)感受到最終的頁面效果。

當(dāng)然，還有其他策略方法可以幫助建立視覺方向，但整體的原則都是在前期多進(jìn)行探索和確認(rèn)，不斷的進(jìn)行交流，而不是直接深入細(xì)節(jié)去做完整的設(shè)計稿。

搭建樣式庫

在確定了樣式庫的范圍和視覺方向之后，就可以開始著手搭建樣式庫。這個階段分為兩個部分：視覺組件庫和前端樣式庫建立。

視覺組件庫可以在Adobe Xd或Sketch中進(jìn)行，這兩個軟件都支持樣式庫的建立。工作原理是最小的樣式（原子）包含在較大的樣式（分子）中，更大的樣式（有機(jī)體）中包含這些樣式，而有機(jī)體則包含在更大的樣式（模板）中。遵循“DRY”原則，即“don't repeat yourself”，更改某個樣式，所有用到該樣式的地方都會同步更改。

具體的搭建方式在這里不做詳細(xì)敘述，后邊將會單獨(dú)寫文章來講解。

對于前端樣式庫的搭建，作者推薦了一個前端工具“Pattern Lab”，它也保持著原子設(shè)計理論的工作原理，并且還有可以將動態(tài)數(shù)據(jù)添加進(jìn)樣式結(jié)構(gòu)中并展示樣式變化，如選中或禁用的tabs；同時支持響應(yīng)式的設(shè)計，可以查看整個分辨率內(nèi)的樣式變化；還可以展示樣式相關(guān)的底層代碼；提供樣式描述和注釋；提供樣式的上下文信息，如構(gòu)成元素和使用場景。

Pattern Lab使用了Mustache的include功能，將將小的樣式包含在大的樣式中，感興趣的小伙伴可以去看本書的第三章。

維護(hù)樣式庫并創(chuàng)建設(shè)計體系

創(chuàng)建完成樣式庫只是第一步，后邊還有一系列的維護(hù)和擴(kuò)展工作要做，直至形成屬于自己團(tuán)隊的設(shè)計體系。

首先，要將樣式庫作為一個正式的項目來維護(hù)，這就需要投入時間和人力，要有專門負(fù)責(zé)設(shè)計體系的團(tuán)隊。如果你屬于大型的設(shè)計團(tuán)隊，那么可以專門成立一個設(shè)計小組來負(fù)責(zé)設(shè)計體系；如果你的團(tuán)隊只有少數(shù)的幾個人，那么就需要少數(shù)的高級設(shè)計師來兼職負(fù)責(zé)設(shè)計體系。

其次，你需要建立樣式庫的更新規(guī)范，比如該如何修改、新增和刪除樣式。在修改樣式的時候，必須弄清楚修改的原因以及如何修改，修改完了之后如何同步；新增樣式時必須謹(jǐn)慎，保證每一個新增的樣式都是可以復(fù)用到其他地方；刪除樣式時，必須制定淘汰計劃，并提前通知使用該樣式的團(tuán)隊。

更新樣式庫之后，必須將這些更新內(nèi)容同步到實(shí)際項目中，這需要前端來優(yōu)化底層代碼，從而更好的實(shí)現(xiàn)同步功能。

之后，需要在整個公司去推廣你的樣式庫，讓更多的人收益。比如產(chǎn)品經(jīng)理，運(yùn)營人員，后端開發(fā)等，設(shè)計體系可以成為公司的資源池，使得各個崗位都能高效的協(xié)作。

為了讓大家都能很方便的訪問并使用樣式庫，需要有一個專門的地方來展示設(shè)計體系，比如一個首頁。你需要保證這個首頁足夠的吸引人，這樣有助于建立認(rèn)知并幫助更多人來關(guān)注設(shè)計體系。

一旦團(tuán)隊的人都來使用你的樣式庫，你就需要一套交流和推廣的機(jī)制。

在前期的創(chuàng)建過程中，你可以建立一個內(nèi)部博客或者釘釘群來發(fā)布你的進(jìn)度，分享想法和解答疑問。樣式庫建成之后，你需要及時將更新信息持續(xù)傳達(dá)給團(tuán)隊，如更新日志、路標(biāo)規(guī)劃、成功案例、提示和使用技巧等。同時需要通過培訓(xùn)等手段讓團(tuán)隊學(xué)會如何使用你的樣式庫，可以通過工作坊、在線會議、入職培訓(xùn)等方式來進(jìn)行。

你還需要反饋機(jī)制，幫助用戶在遇到問題時可以找到解決方案。如建立JIRA的反饋庫、微信群、論壇或者定期回訪用戶；同時可以采取用戶訪談，問卷調(diào)查或定期會議的方式主動尋求反饋。

另外，公開你的樣式庫，讓全世界都可以查看，這將提高你的知名度，增強(qiáng)團(tuán)隊責(zé)任感并且充當(dāng)出色的招聘工具來吸引優(yōu)秀的人加入到團(tuán)隊。

最后，可以通過不斷的擴(kuò)大范圍，來形成你的設(shè)計體系。如增加設(shè)計原則，品牌指南，語氣語調(diào)指南，寫作指南等等，將適用范圍從Web擴(kuò)展到iOS和Android等。

只有投入大量的時間和精力，不斷維護(hù)和優(yōu)化，你的設(shè)計體系才能長期發(fā)展。

總結(jié)

以上就是關(guān)于原子設(shè)計的所有內(nèi)容。這還不是全部，點(diǎn)擊鏈接 可以查看全書的思維導(dǎo)圖。怎么樣，還過癮吧？最后再給大家一個小小的福利，那就是《Atomic Design》全書的中文版pdf下載。只需要關(guān)注我的公眾號，并回復(fù)“原子設(shè)計”就可以獲取下載鏈接，快來領(lǐng)取吧！

文章名稱：關(guān)于原子設(shè)計，你想要的都在這里
文章轉(zhuǎn)載：http://jinyejixie.com/news/18840.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、外貿(mào)建站、Google、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)