深度拆解原子設(shè)計(jì)理論，及高效擴(kuò)展運(yùn)行的設(shè)計(jì)方法

什么是原子設(shè)計(jì)？ 可查詢我們過(guò)去的文章 ，其實(shí)原子設(shè)計(jì)允許您創(chuàng)建可重用的UI設(shè)計(jì)組件，從而在您創(chuàng)建新數(shù)字化產(chǎn)品時(shí)，可節(jié)省時(shí)間并減少錯(cuò)誤。

原子設(shè)計(jì)是如何構(gòu)建的？
原子設(shè)計(jì)的核心是使用一組五個(gè)元素：原子、分子、有機(jī)體、模板和頁(yè)面。所有原子設(shè)計(jì)項(xiàng)目，包括遵循原子設(shè)計(jì)原則的 React 開發(fā)項(xiàng)目，在構(gòu)建時(shí)都考慮了這些元素。

原子
原子是離散的內(nèi)容單元，類似于文本或圖像塊。稱為分子的原子組可以填滿整個(gè)頁(yè)面或部分。構(gòu)成完整部分或頁(yè)面的分子組稱為有機(jī)體。更不用說(shuō)，模板是構(gòu)成完整程序的生物集合。

分子
分子是鍵合在一起的原子團(tuán)，具有獨(dú)特的新特性。它們形成相對(duì)簡(jiǎn)單的 UI 元素，作為一個(gè)單元一起運(yùn)行。一些示例是：表單標(biāo)簽、搜索輸入和按鈕。

有機(jī)體
有機(jī)體是由分子和/或原子組組成的相對(duì)復(fù)雜的 UI 組件。大多數(shù)有機(jī)體都可以獨(dú)立運(yùn)行，而不依賴于頁(yè)面上的其他元素。一些示例是：導(dǎo)航、側(cè)邊欄、表單和彈出窗口。

模板
模板是沒(méi)有實(shí)際內(nèi)容的頁(yè)面，它闡明了設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)。本質(zhì)上，它們將有機(jī)體組合成適當(dāng)?shù)木W(wǎng)站布局。

頁(yè)面
頁(yè)面是模板的特定實(shí)例，用于展示最終 UI界面 的設(shè)計(jì)外觀并具有真實(shí)的代表性內(nèi)容。

可擴(kuò)展性
創(chuàng)建可擴(kuò)展設(shè)計(jì)系統(tǒng)的能力是原子設(shè)計(jì)的主要優(yōu)勢(shì)之一。設(shè)計(jì)人員和開發(fā)人員可以構(gòu)建可重復(fù)使用的設(shè)計(jì)組件庫(kù)，通過(guò)將設(shè)計(jì)分解為最小的組成部分，這些組件可用于創(chuàng)建新的組件、頁(yè)面和界面。從長(zhǎng)遠(yuǎn)來(lái)看，這可以節(jié)省時(shí)間和精力，因?yàn)樗藶槊總€(gè)項(xiàng)目創(chuàng)建新設(shè)計(jì)元素時(shí)從零開始的需要。

一致性
原子設(shè)計(jì)的另一個(gè)優(yōu)點(diǎn)是鼓勵(lì)整個(gè)設(shè)計(jì)系統(tǒng)的一致性。通過(guò)創(chuàng)建原子元素的集合，設(shè)計(jì)人員和開發(fā)人員可以確保所有組件和界面具有一致的外觀和感覺(jué)。一致性可以讓用戶更輕松地瀏覽網(wǎng)站和應(yīng)用程序并與之交互，從而改善用戶體驗(yàn)。

最后，使用原子設(shè)計(jì)，我們的數(shù)字化產(chǎn)品（網(wǎng)站、APP、HMI）的 UI界面會(huì)被充分分解為1.原子、2.分子、3.有機(jī)體、4.模板、5.頁(yè)面。最后我們通過(guò)將頁(yè)面分解為這幾個(gè)組件來(lái)開發(fā)一種有助于 UI 設(shè)計(jì)構(gòu)建的心智模型。我們維好維可-設(shè)計(jì)公司基于原子設(shè)計(jì)理論結(jié)合自身團(tuán)隊(duì)特點(diǎn)和當(dāng)下設(shè)計(jì)環(huán)境結(jié)構(gòu)，通過(guò)深度思考和學(xué)習(xí)衍生出了自己公司的UI組件設(shè)計(jì)與構(gòu)建的心智模型，希望可推動(dòng)行業(yè)發(fā)展。