原子設計：吹噓你對網頁設計的了解

人們普遍認為，靈活性與不受約束是一樣的，要具有創造力，您也必須不受約束。 但是，要完成一個項目，尤其是像網頁設計一樣複雜的項目，創建結構實際上可以為您提供更大的靈活性。 你需要一個框架——它是不容商量的。 在真正擁有自由的地方展示您的藝術和創意肌肉，將產生既具有靈感又具有功能性和現實性的設計。 原子設計是一種合理的、有條理的網頁設計方法，它仍然讓您有機會在框架內進行實驗。

設計系統

設計師不再只是簡單地創建網頁； 他們創建設計系統。 設計系統包括：

• 顏色
• 網格
• 質地
• 排版
• 等等。

我喜歡 UX Planet 的 Jack Strachan 對設計系統的描述：“簡而言之，設計系統是一組可重複使用的組件，以明確的標準為指導，可以組裝在一起以構建任意數量的應用程序。 設計系統是一種在處理不同接觸點時在產品中翻譯一致體驗和視覺語言的方法。”

設計元素可能是主觀的，它們很快就會變得勢不可擋和混亂。 為了對它們進行分類，必須以更有條理的方式看待設計。 這就是網頁設計師 Brad Frost 所做的。

原子設計的誕生

以下是 Brad 提出原子設計的方式：“在尋找靈感和相似之處的過程中，我不斷地回到化學領域。 這個想法是所有物質（無論是固體、液體、氣體、簡單的、複雜的等）都是由原子組成的。 這些原子單元結合在一起形成分子，這些分子又結合成更複雜的有機體，最終創造出我們宇宙中的所有物質。”

他繼續解釋說，接口由可以歸類為構建塊的組件組成。 下面是從小到大的順序：

• 原子
• 分子
• 有機體
• 模板
• 頁面

資料來源：BradFrost.com

原子設計的基石

原子設計的主要吸引力在於它促進了一致性。 您創建的許多元素都可以輕鬆複製、重用或縮放。 為了跟踪所有這些，設計師可以為自己建立一個庫，在那裡他們可以在一個地方看到他們的所有元素和样式。 也有一些定制的空間，但前提是構建塊在範圍上變得更加複雜和宏大。 讓我們進入五個構建塊：

1. 原子

正如原子在自然界中很重要一樣，HTML 標籤對於 Web 界面來說也是如此。 含義：所有 Web 界面都以 HTML 標籤或基本元素（動畫、按鈕、調色板、字體、表單標籤等）開頭。 雖然這些原子本身對網頁設計沒有好處，但它們是構建網頁界面所必需的。

2. 分子

分子比原子更複雜，但它們總體上並不復雜。 當您將不那麼有用的原子組合在一起時，您將擁有更有用的分子：搜索表單標籤 + 輸入 + 按鈕（原子）= 完成的搜索表單（分子）

3. 生物

當你將分子組合在一起時，你會得到比它們的前輩更複雜的有機體：徽標 + 導航 + 搜索表單 + 社交媒體圖標（分子）= 已完成的標頭（有機體）

理想情況下，您將能夠在網站上或跨不同網站重複使用有機體，保持總體佈局並使用不同的文本和圖像對其進行自定義。 例如，您可以在您設計的所有網站上使用相同類型的標頭，或者您可以創建特定於產品的有機體（圖像 + 標題 + 價格），並在產品頁面上重複。

這是 Web 界面真正開始以獨特的、定制的方式形成的時候。 在此之前，您的界面只是普通元素的集合。 在有機體階段，網站變得更加視覺化。

如果您要與客戶分享您的流程，這就是他們會去的部分，“哦，我明白了。” 現在是開始繪製線框圖或製作模型的時候了，這樣客戶就可以在你進一步發展之前給你反饋。

4. 模板

當您將有機體組合在一起時，您就有了模板。 這是實際頁面佈局組合在一起的時候。 雖然分子和生物體有自己的內部佈局，但模板階段是您開始了解它們如何相互補充和相互作用的階段； 他們彼此相對的位置； 以及它們作為一個整體如何流動。 模板給出了分子和生物體的上下文。 請注意，模板具有佔位符內容，而不是自定義或原始內容。

資料來源：BradFrost.com

5. 頁面

通過用實際內容替換佔位符內容，頁面將模板提升到一個新的水平。 它可能不會是最終的內容，但它會更能代表最終的設計和內容。 此時添加高質量、永久的內容可能是一種浪費，因為網站仍然需要測試、審查和調整。 也就是說，您可能會插入最終的內容——這取決於您在該過程中的位置。

這是網站將受到最嚴格審查的階段。 根據您獲得的評論和反饋，可能需要更改分子、生物體和模板。 這也是測試設計變化的好時機。

最後的想法

關於原子設計的事情是它並不新鮮——口頭上是，但理論不是。 這就是網站長期以來的設計方式。 使用原子設計術語不會自動使您成為出色的設計師或開發人員； 它不能替代紮實的工作。

以這種方式談論它的一個好處是，在使用這種術語來闡明方法時，非開發人員更容易理解——您可以向客戶解釋您的過程。 對於有組織的開發人員來說，這是一種劃分設計的方式。 您將能夠深入研究一個組件或一小組不起作用的元素。 它可以幫助你只見樹木不見森林，而不是說“這整件事都有缺陷”。

原子設計使您可以擁抱創造力而不會迷失其中。 它以一種讓您更快地開始項目的方式處理基本元素和設計系統，以便您可以將時間花在最需要您的藝術性和技能的地方——進行複雜的調整、解決問題、滿足客戶需求並最終創建一個網站超出常態。

保持網頁設計的勢頭，並查看每個網頁設計項目要遵循的 10 條優秀 UI 設計規則。

特色圖片來自 ShadeDesign/shutterstock.com