網頁中的原子設計

原子設計是一種網站迭代開發廣泛，有效的方法。這個由Brad Frost在2013年引進的設計方法跟網頁的敏捷開發相似。原子設計是模塊化，動態的設計系統，由五個層面組成——「原子」，「分子」，「組織」，「模板」和「頁面」。

「原子」，包括表單標籤，輸入框或者一個按鈕，都是設計師在架構網站時所須要的基本模塊。全部與項目有關的人員都須要在邏輯上遵循這種流程。這種技術性的，代碼集中的開發方法把用戶體驗放在了很突出的位置。

「原子」包括更多的抽象元素好比調色板，字體，甚至更多的界面的無形部分好比動畫。做爲物質的原子是抽象的，單獨而言是無心義的。可是它們很是適合在模式庫的上下文中引用，所以能夠很容易地看到全局樣式的展現。

「分子」 - 當咱們開始把原子結合在一塊兒的時候，事情就會變得更加有趣真實。分子由一組原子組成，是複雜元素的最小基本單元。這些分子都有本身的功能特性，並造成咱們設計系統的骨幹。

舉個例子，表單標籤，輸入框或按鈕自己是不能實現用戶功能的，可是當它們被分組在一塊兒造成表單的時候，他們就能夠完成諸如搜索的任務。

組織 - 分子是咱們須要處理以實現局部功能的一些界面板塊，接下來咱們就能夠把分子組合起來造成組織。組織是由一組分子組合造成的相對複雜，獨立的界面功能模塊。

在網頁原子設計中有如下幾點須要避免的誤區：

1. 靜態工做流

一般狀況下代理機構都會把基於印刷的工做流轉移到網站的開發上。好比書籍或海報這樣的靜態媒介須要靜態的網格和圖案——可是媒體和用戶在數字，交互格式中的永久交互須要複雜的動做反應循環。

2. 屈服於客戶的壓力

在原子設計中，數字設計師會從小到大總體地進行工做。所以，最終的佈局相對較晚。一些缺少抽象能力的客戶不該該強迫他展現完整的設計。 

3. 千篇一概

成功的前端框架如Bootstrap或Foundation是如今網站大同小異的潛在緣由。所以，網站中即便是最小的元（正如衆所周知的Microinteraction微交互）都應該根據品牌風格精心設計，不然會很是千篇一概。

此外，還有如下幾點是須要遵循的：

1. 對複雜項目使用原子設計

網站工程越龐大，遵循原子設計的做用和意義就越大，由於這樣的工程須要大量的準備時間。單個的網頁是不值得的。

2. 直接進入編碼

概念和設計的修正應該直接在代碼中完成，而不是創建固定的線框和PS佈局模型。這須要容許模塊在任什麼時候候被重複使用。這種線框應該能夠跟客戶更客觀地討論，由於能夠具體的顯示用戶如何感知信息的架構並與其交互。

3.  不帶視覺元素測試

在測試的時候使用灰度原型可以減小視覺元素帶來的影響，只有在釋放編碼線框後才能使用前端指南中定義的原子，分子和組織來開發佈局。此外灰度原型能夠由一些簡便快捷的原型軟件工具來製做。

4.  早期測試

建議在代碼中儘早檢查UX的概念。這樣能夠更好的理解編程上面限制和挑戰。