原子填硕，分子耘戚，組織玷犹，模板鉴未，頁(yè)面（Atoms, molecules, organisms, templates, and pages）
我對(duì)設(shè)計(jì)界面設(shè)計(jì)系統(tǒng)的方法論的研究引導(dǎo)我在其他領(lǐng)域和行業(yè)中尋找靈感。鑒于我們創(chuàng)造的這個(gè)極其復(fù)雜的世界赃份，其他領(lǐng)域解決了我們可以學(xué)習(xí)并適用的類似問題似乎是很自然的稿茉。事實(shí)證明，其他領(lǐng)域（如工業(yè)設(shè)計(jì)和建筑）的負(fù)載已經(jīng)開發(fā)了智能模塊化系統(tǒng)，用于制造飛機(jī)漓库，輪船和摩天大樓等極為復(fù)雜的物體。
但是我最初的探索讓回到自然世界园蝠，這激發(fā)了我坐在高中化學(xué)實(shí)驗(yàn)室里搖搖欲墜的辦公桌上的回憶渺蒿。
從化學(xué)中尋找靈感
在自然界中，原子元素結(jié)合在一起形成分子彪薛。這些分子可以進(jìn)一步結(jié)合形成相對(duì)復(fù)雜的生物茂装。進(jìn)一步說明：
- 原子（Atoms）是所有物質(zhì)的基本組成部分。每個(gè)化學(xué)元素都有其獨(dú)特的特性善延，在不失去其含義的情況下無(wú)法對(duì)其進(jìn)行進(jìn)一步分解少态。（是的，確實(shí)是原子由質(zhì)子易遣，電子和中子等更小的位組成彼妻，但是原子是最小的功能單元。）
- 分子（Molecules ）是兩個(gè)或兩個(gè)以上通過化學(xué)鍵結(jié)合在一起的原子的組豆茫。原子的這些組合具有其自身的獨(dú)特特性侨歉，并且比原子更有形和可操作。
- 組織（Organisms 揩魂，譯注：谷歌翻譯為有機(jī)體幽邓，我的團(tuán)隊(duì)內(nèi)部習(xí)慣稱之為組織）是一起作為一個(gè)單元發(fā)揮作用的分子的集合體。這些相對(duì)復(fù)雜的結(jié)構(gòu)可以從單細(xì)胞生物一直到人類等極其復(fù)雜的生物火脉。
當(dāng)然牵舵，我正在簡(jiǎn)化宇宙中難以置信的豐富組成部分，但基本原理仍然存在：原子結(jié)合在一起形成分子倦挂，然后進(jìn)一步結(jié)合形成組織（Organisms ）畸颅。這種原子理論意味著，已知宇宙中的所有物質(zhì)都可以分解為有限的原子元素集妒峦。
原子設(shè)計(jì)方法論
到現(xiàn)在為止重斑，您可能想知道為什么我們要談?wù)撛永碚摚苍S您甚至生我的氣肯骇，因?yàn)閺?qiáng)迫您重溫高中化學(xué)課的回憶窥浪。但是，我保證這很有用笛丙。
前面我們討論了如何將宇宙中的所有物質(zhì)分解為一組有限的原子元素漾脂。碰巧的是，我們的界面可以分解為一組相似的有限元素胚鸯。Josh Duck的HTML元素周期表很好地闡明了我們所有的網(wǎng)站骨稿，應(yīng)用程序，內(nèi)部網(wǎng)絡(luò)，hoobadyboops以及其他所有內(nèi)容都是如何由相同的HTML元素組成的坦冠。
因?yàn)槲覀儚囊唤M有限的相似構(gòu)建塊開始形耗，所以我們可以應(yīng)用自然界中發(fā)生的相同過程來(lái)設(shè)計(jì)和開發(fā)我們的用戶界面。
（開始）進(jìn)入原子設(shè)計(jì)
原子設(shè)計(jì)是一種方法辙浑，它由五個(gè)不同的階段組成激涤，這些階段共同工作，以更仔細(xì)和更分層的方式創(chuàng)建界面設(shè)計(jì)系統(tǒng)判呕。原子設(shè)計(jì)的五個(gè)階段是：（譯注：括號(hào)內(nèi)為我的團(tuán)隊(duì)內(nèi)部對(duì)其的稱呼倦踢，后文將不會(huì)特殊備注）
- Atoms (原子)
- Molecules （分子）
- Organisms （組織）
- Templates （模板）
- Pages （頁(yè)面）
原子設(shè)計(jì)不是一個(gè)線性的過程边涕，而是一個(gè)思維模型晤碘，在同一時(shí)間來(lái)幫助我們思考我們的用戶界面既是一個(gè)整體和部分的集合。五個(gè)階段??中的每個(gè)階段在我們的界面設(shè)計(jì)系統(tǒng)的層次結(jié)構(gòu)中都扮演著關(guān)鍵角色奥吩。讓我們深入探討每個(gè)階段哼蛆。
原子
如果原子是物質(zhì)的基本組成部分，那么我們界面的原子就可以作為構(gòu)成我們所有用戶界面的基礎(chǔ)組成部分霞赫。這些原子包括基本的HTML元素腮介，例如表單標(biāo)簽，輸入端衰，按鈕叠洗，以及在不停止工作的情況下無(wú)法進(jìn)一步分解的其他元素。
在模式庫(kù)的上下文中旅东，原子一目了然地展示了您的所有基本樣式灭抑，這對(duì)于在開發(fā)和維護(hù)設(shè)計(jì)系統(tǒng)時(shí)不斷回頭是很有幫助的參考。但是抵代，就像自然界中的原子一樣腾节，界面原子也不是在真空中存在，只有在應(yīng)用中才能真正實(shí)現(xiàn)荤牍。
分子
在界面中案腺，分子是相對(duì)簡(jiǎn)單的UI元素組，它們一起作為一個(gè)單元起作用康吵。例如劈榨，表單標(biāo)簽，搜索輸入和按鈕可以結(jié)合在一起以創(chuàng)建搜索表單分子晦嵌。
當(dāng)結(jié)合在一起時(shí)同辣，這些抽象原子突然具有目的】阶耍現(xiàn)在，label原子定義了input原子『岛現(xiàn)在單擊button原子即可提交表單响巢。結(jié)果是一個(gè)簡(jiǎn)單，可移植棒妨，可重用的組件抵乓，可以將其放置在需要搜索功能的任何位置。
現(xiàn)在靶衍，將元素組裝成簡(jiǎn)單的功能組是我們構(gòu)造用戶界面時(shí)經(jīng)常要做的事情。但是茎芋，將原子設(shè)計(jì)方法的一個(gè)階段專用于這些相對(duì)簡(jiǎn)單的組件颅眶，可以為我們提供一些關(guān)鍵的見解。
創(chuàng)建簡(jiǎn)單的組件有助于UI設(shè)計(jì)人員和開發(fā)人員遵守單一職責(zé)原則田弥，這是一個(gè)古老的計(jì)算機(jī)科學(xué)準(zhǔn)則涛酗，它鼓勵(lì)“做一件事情，把它做好（do one thing and do it well）”的心態(tài)偷厦。給單個(gè)模式增加過多的復(fù)雜性會(huì)使軟件笨拙商叹。因此，創(chuàng)建簡(jiǎn)單的UI分子可以使測(cè)試變得更容易只泼，鼓勵(lì)可重用性并促進(jìn)整個(gè)界面的一致性剖笙。
組織
組織是由分子或者原子或者其他組織組成的相對(duì)復(fù)雜的ui組件。
雖然某些組織可能由不同類型的分子組成请唱，但其他組織可能由一次又一次重復(fù)的同一分子組成弥咪。例如，訪問幾乎所有電子商務(wù)網(wǎng)站的類別頁(yè)面十绑，您都會(huì)看到以某種網(wǎng)格形式顯示的產(chǎn)品列表聚至。（譯注：可以腦補(bǔ)京東和淘寶app里面瀏覽商品列表的界面，都是一個(gè)方框本橙，里面主要由圖片（或視頻）扳躬，標(biāo)題，價(jià)格組成）
從分子積累到更精細(xì)的組織甚亭，為設(shè)計(jì)師和開發(fā)人員提供了重要的背景知識(shí)贷币。組織表現(xiàn)出那些較小，較簡(jiǎn)單的動(dòng)作成分狂鞋，并作為可以反復(fù)使用的獨(dú)特模式片择。產(chǎn)品網(wǎng)格組織可用于需要顯示一組產(chǎn)品的任何地方，從類別列表到搜索結(jié)果再到相關(guān)產(chǎn)品骚揍。
模板
模板是頁(yè)面級(jí)對(duì)象字管，可將組件放置在布局中并闡明設(shè)計(jì)的基礎(chǔ)內(nèi)容結(jié)構(gòu)啰挪。在前面的示例的基礎(chǔ)上，我們可以獲取header組織并將其應(yīng)用于首頁(yè)模板嘲叔。
該主頁(yè)模板顯示了一起運(yùn)行的所有必要頁(yè)面組件亡呵，從而為這些相對(duì)抽象的分子和組織提供了上下文。在設(shè)計(jì)有效的設(shè)計(jì)系統(tǒng)時(shí)硫戈，至關(guān)重要的是要在布局的背景下演示組件的外觀和功能锰什，以證明零件加起來(lái)能正常工作。我們將對(duì)此進(jìn)行更多討論丁逝。
模板的另一個(gè)重要特征是汁胆，它們專注于頁(yè)面的基礎(chǔ)內(nèi)容結(jié)構(gòu)，而不是頁(yè)面的最終內(nèi)容霜幼。設(shè)計(jì)系統(tǒng)必須考慮內(nèi)容的動(dòng)態(tài)性質(zhì)嫩码，因此闡明組件的重要屬性（例如標(biāo)題和文本段落的圖像大小和字符長(zhǎng)度）非常有幫助。
頁(yè)面
頁(yè)面是模板的特定實(shí)例罪既，這些模板顯示了帶有實(shí)際代表性內(nèi)容的UI的外觀铸题。在前面的示例的基礎(chǔ)上，我們可以將主頁(yè)模板作為模板琢感，然后將代表性的文本丢间，圖像和媒體倒入模板中，以顯示實(shí)際的內(nèi)容驹针。
除了向用戶展示最終界面時(shí)烘挫，頁(yè)面對(duì)于測(cè)試基礎(chǔ)設(shè)計(jì)系統(tǒng)的有效性至關(guān)重要。在頁(yè)面階段牌捷，我們可以了解將真實(shí)內(nèi)容應(yīng)用于設(shè)計(jì)系統(tǒng)時(shí)所有這些模式如何保持墙牌。一切看起來(lái)都不錯(cuò)，并且功能正常嗎暗甥？如果答案是否定的喜滨，那么我們可以環(huán)回并修改分子，組織和模板撤防，以更好地滿足內(nèi)容的需求虽风。
我們必須創(chuàng)建能夠建立可重用設(shè)計(jì)模式的系統(tǒng)，并且還必須準(zhǔn)確反映我們要在這些模式內(nèi)部放置的內(nèi)容的真實(shí)性寄月。
頁(yè)面還提供了表達(dá)模板變化的地方辜膝，這對(duì)于建立健壯和相關(guān)的設(shè)計(jì)系統(tǒng)至關(guān)重要。以下是模板變體的一些示例：
- 一個(gè)用戶的購(gòu)物車中有一個(gè)商品漾肮，另一個(gè)用戶的購(gòu)物車中有十個(gè)商品厂抖。
- Web應(yīng)用程序的儀表板通常會(huì)顯示最近的活動(dòng)，但是對(duì)于首次使用的用戶克懊，該部分將被隱藏忱辅。
- 一個(gè)文章標(biāo)題的長(zhǎng)度可能為40個(gè)字符七蜘，而另一個(gè)文章標(biāo)題的長(zhǎng)度可能為340個(gè)字符。
- 與非管理員用戶相比墙懂，具有管理權(quán)限的用戶可能會(huì)在其儀表板上看到其他按鈕和選項(xiàng)橡卤。
在所有這些示例中，底層模板都是相同的损搬，但是用戶界面發(fā)生了變化碧库，以反映內(nèi)容的動(dòng)態(tài)性質(zhì)。這些變化直接影響基礎(chǔ)分子巧勤，生物和模板的構(gòu)建方式嵌灰。因此，創(chuàng)建解決這些變化的頁(yè)面有助于我們創(chuàng)建更具彈性的設(shè)計(jì)系統(tǒng)颅悉。
這就是原子設(shè)計(jì)伞鲫！這五個(gè)不同的階段同時(shí)工作，以產(chǎn)生有效的用戶界面設(shè)計(jì)系統(tǒng)签舞。概括地說原子設(shè)計(jì)：
- 原子是無(wú)法進(jìn)一步細(xì)分的UI元素，它們是界面的基本構(gòu)建塊柒瓣。
- 分子是形成相對(duì)簡(jiǎn)單的UI組件的原子的集合儒搭。
- 組織是形成界面離散部分的相對(duì)復(fù)雜的組件。
- 模板將組件放置在布局中芙贫，并演示設(shè)計(jì)的基礎(chǔ)內(nèi)容結(jié)構(gòu)搂鲫。
- 頁(yè)面將真實(shí)的內(nèi)容應(yīng)用于模板，并闡明變化形式以演示最終的UI并測(cè)試設(shè)計(jì)系統(tǒng)的彈性磺平。
原子設(shè)計(jì)的優(yōu)點(diǎn)
那么魂仍，為什么要經(jīng)歷所有這些冗長(zhǎng)的廢話（rigamarole）？原子設(shè)計(jì)有什么用拣挪？考慮到我們已經(jīng)建立用戶界面很長(zhǎng)時(shí)間了擦酌，而沒有明確的五階段方法，所以這些是有效的問題菠劝。但是原子設(shè)計(jì)為我們提供了一些關(guān)鍵的見解赊舶，可以幫助我們創(chuàng)建更有效，經(jīng)過深思熟慮的UI設(shè)計(jì)系統(tǒng)赶诊。
-
部分和整體
原子設(shè)計(jì)提供的最大優(yōu)勢(shì)之一是能夠在抽象和具體之間快速轉(zhuǎn)換笼平。我們可以同時(shí)看到界面分解為原子元素，還可以看到這些元素如何組合在一起形成我們的最終體驗(yàn)舔痪。
構(gòu)成我們界面的原子寓调，分子和組織并非生活在真空中。而且我們界面的模板和頁(yè)面確實(shí)由較小的部分組成锄码。我們?cè)O(shè)計(jì)的各個(gè)部分影響整體夺英，而整體則影響各個(gè)部分晌涕。兩者交織在一起，原子設(shè)計(jì)也包含了這一事實(shí)秋麸。
當(dāng)設(shè)計(jì)師和開發(fā)人員制作特定的組件時(shí)渐排，我們就像畫布上的畫家創(chuàng)建詳細(xì)的筆觸。當(dāng)我們?cè)诰哂袑?shí)際代表性內(nèi)容的布局環(huán)境中查看這些組件時(shí)灸蟆，我們就像畫家在畫布后面幾英尺處評(píng)估其詳細(xì)筆觸如何影響整個(gè)構(gòu)圖驯耻。有必要將一個(gè)特定的組件置零，以確保其功能性炒考，可用性和美觀性可缚。但是，也有必要確保組件在最終UI的上下文中功能正常斋枢，可用且美觀帘靡。
原子設(shè)計(jì)為我們提供了一個(gè)在各部分和整個(gè)UI之間導(dǎo)航的結(jié)構(gòu)，這就是為什么重申原子設(shè)計(jì)不是線性過程至關(guān)重要的原因瓤帚。孤立地設(shè)計(jì)按鈕和其他元素描姚，然后跨過我們的手指，希望一切都聚在一起形成一個(gè)有凝聚力的整體戈次，這是愚蠢的轩勘。因此，請(qǐng)勿將原子設(shè)計(jì)的五個(gè)階段解釋為“步驟1：原子怯邪；步驟2：分子绊寻；第三步：組織澎媒；步驟4：模板深纲；步驟5：頁(yè)面∧慷В” 取而代之的是和泌，將原子設(shè)計(jì)的各個(gè)階段視為一種思維模型村缸，使我們能夠同時(shí)創(chuàng)建最終的UI及其底層設(shè)計(jì)系統(tǒng)。
-
結(jié)構(gòu)與內(nèi)容之間的清晰分隔
討論設(shè)計(jì)和內(nèi)容有點(diǎn)像討論雞和雞蛋武氓。馬克·布爾頓（Mark Boulton）解釋：
內(nèi)容需要結(jié)構(gòu)化王凑，結(jié)構(gòu)化會(huì)改變您的內(nèi)容，設(shè)計(jì)會(huì)改變內(nèi)容聋丝。它不是“先有內(nèi)容又有設(shè)計(jì)”或“內(nèi)容或設(shè)計(jì)”索烹。這是“內(nèi)容與設(shè)計(jì)”。
原子設(shè)計(jì)為我們提供了一種用于討論UI模式結(jié)構(gòu)以及這些模式內(nèi)部?jī)?nèi)容的語(yǔ)言弱睦。盡管內(nèi)容結(jié)構(gòu)的骨架（模板）和最終的內(nèi)容（頁(yè)面）之間有清晰的分隔百姓，但原子設(shè)計(jì)認(rèn)為這兩者之間有很大的影響。
-
名字叫什么
在整本書中况木，我都提到模塊化設(shè)計(jì)和開發(fā)并不是什么新鮮事物垒拢。那么旬迹，為什么我們只能堅(jiān)持使用諸如模塊，組件奔垦，元素尸疆，部分和區(qū)域之類的既定術(shù)語(yǔ)，而又引入諸如原子犯眠，分子和組織之類的術(shù)語(yǔ)呢筐咧？
在我一直在談?wù)撛釉O(shè)計(jì)的時(shí)候噪矛，我一直在為人們提供方法學(xué)階段的替代名稱艇挨。第一個(gè)人會(huì)建議：“為什么不僅僅給它們命名元素，模塊和組件？” 而第二個(gè)人會(huì)建議：“為什么不僅僅給它們命名基礎(chǔ)楷怒，組件和模塊瓦灶？” 諸如組件和模塊之類的術(shù)語(yǔ)的問題在于贼陶，不能僅從名稱中推斷出層次感。原子烘贴，分子和組織暗示著一個(gè)層次結(jié)構(gòu)撮胧，任何具有化學(xué)基礎(chǔ)知識(shí)的人都可以希望繞開它的頭。
話雖這么說芹啥，給事物命名是困難和不完善的铺峭。我為原子設(shè)計(jì)階段選擇的名稱對(duì)我以及與我一起創(chuàng)建UI設(shè)計(jì)系統(tǒng)的團(tuán)隊(duì)非常有效卫键。但是也許它們對(duì)您和您的組織都不起作用虱朵。這也不算什么。
團(tuán)隊(duì)使用的分類法是“原理”呢袱，“基礎(chǔ)”翅敌，“組件”蚯涮，“模板”遭顶，“功能”和“應(yīng)用程序”。這些標(biāo)簽對(duì)您有意義嗎喘批？沒關(guān)系 通過建立對(duì)他們的團(tuán)隊(duì)有意義的分類法饶深，每個(gè)人都可以加入原子設(shè)計(jì)原則并共同開展有效的工作敌厘。
“原子設(shè)計(jì)”作為流行語(yǔ)封裝了模塊化設(shè)計(jì)和開發(fā)的概念朽合，這對(duì)于說服利益相關(guān)者和與同事交談是一個(gè)有用的捷徑。但是曹步，原子設(shè)計(jì)并不是嚴(yán)格的教條宪彩。最終，無(wú)論您選擇使用哪種分類法讲婚，都應(yīng)能幫助您和您的組織更有效地進(jìn)行溝通，以構(gòu)建出色的UI設(shè)計(jì)系統(tǒng)。
-
理論與實(shí)踐中的原子設(shè)計(jì)
本章介紹了原子設(shè)計(jì)方法纳猫，并演示了原子，分子芜辕，組織尚骄，模板和頁(yè)面如何協(xié)同工作以精心設(shè)計(jì)周到的，精心設(shè)計(jì)的界面設(shè)計(jì)系統(tǒng)倔丈。原子設(shè)計(jì)使我們能夠看到將UI分解為原子元素，并且還使我們能夠同時(shí)逐步完成這些元素如何結(jié)合在一起以形成最終UI的過程状蜗。我們了解了內(nèi)容與設(shè)計(jì)之間的緊密聯(lián)系需五，以及原子設(shè)計(jì)如何使我們能夠設(shè)計(jì)適合生活在其中的內(nèi)容的設(shè)計(jì)系統(tǒng)。最后宏邮，我們了解了原子設(shè)計(jì)的語(yǔ)言如何為我們提供了與同事討論模塊化的有用捷徑，并為我們的設(shè)計(jì)系統(tǒng)提供了非常需要的層次感缸血。
原子設(shè)計(jì)是一種有用的設(shè)計(jì)和開發(fā)方法捎泻，但從本質(zhì)上講笆豁，它只是用于構(gòu)造UI的思維模型〈秤現(xiàn)在煞赢，您可能想知道如何進(jìn)行原子設(shè)計(jì)爷辱。好吧录豺，親愛的讀者，不要擔(dān)心饭弓，因?yàn)楸緯钠溆嗖糠旨性谑鼓脑釉O(shè)計(jì)夢(mèng)想成真的工具和流程上双饥。
小結(jié)：這一章正式提出了原子設(shè)計(jì)理論，正如同文末所說弟断，不同的團(tuán)隊(duì)咏花，甚至不同的開發(fā)者對(duì)界面的理解都不同，但是這個(gè)劃分頁(yè)面結(jié)構(gòu)的理論是很好的，我個(gè)人通過vue項(xiàng)目實(shí)踐之后覺得分子組件和組織組件其實(shí)是可以合并的昏翰，因?yàn)榻M件分太細(xì)的話團(tuán)隊(duì)的每個(gè)成員理解都不太相同苍匆，組織和分子容易混淆，而原子組件一般可以直接使用ui庫(kù)中的組件而非自己創(chuàng)建棚菊，對(duì)于模板層組件的使用則需要小心浸踩，多人開發(fā)寧可不用模板級(jí)組件，或者頁(yè)面只有一小部分簡(jiǎn)單的可高度復(fù)用的內(nèi)容使用模板組件统求，因?yàn)橐粋€(gè)模板級(jí)組件過于龐大就會(huì)使頁(yè)面代碼很難維護(hù)检碗，vue組件中傳入的變量可能都有上百行，不同的人開發(fā)可能熟悉代碼就得花一段時(shí)間码邻。我總結(jié)出來(lái)的比較好的頁(yè)面表現(xiàn)方法是折剃，多個(gè)組織、分子組件和簡(jiǎn)單的模板組件來(lái)組成頁(yè)面像屋，或者多個(gè)簡(jiǎn)單模板組件來(lái)組成頁(yè)面怕犁，正如文中強(qiáng)調(diào)的，原子設(shè)計(jì)并不是線性的开睡，我們并不是要把分子組件因苹，組織組件都組合成模板再形成頁(yè)面。
下一章 【譯】原子設(shè)計(jì)3——工具集(節(jié)選)
譯文目錄在這里： http://www.reibang.com/nb/47456777
