原子網頁設計：改善品牌網站的技巧
已發表: 2016-01-12創建網站絕非易事。 它需要廣泛的規劃、錯綜複雜的設計和開發工作，以及合適的熟練專家團隊才能使這一切成為可能。 每個網站都是不同的，因為所有品牌都有不同的目標和需要滿足的獨特需求。 話雖如此，對於真正希望利用其在線形象促進業務增長的品牌而言，沒有“一刀切”的網站設計。 我們的設計方法通常對每個項目的要求和規模都是獨一無二的。 在大型網站項目的情況下，我們發現可擴展性、靈活性以及在大量頁面（通常超過 10,000 個）中保持一致的品牌風格是一些最大的後勤挑戰。 一個優雅的解決方案是遵循原子設計過程。 這是一種更加模塊化和細化的網站設計和構建方法。 原子設計不是設計預設的頁面模板和佈局，而是設計可以在一組定義的規則內添加、複製和移動的構建塊或內容模塊，以創建適用於每種類型的內容和頁面的獨特頁面一個網站，同時保持它的品牌。 原子設計方法分為網站設計的 5 個不同階段：
原子
在科學術語中，原子是共同構成物質的基本組成部分。 當您將其轉化為網站設計方法時，它們具有類似的目的。 Atoms 充當您所有網站設計工作的基本構建塊。 雖然它們不是可以獨立存在的設計元素，但它們一起創建了在整個網站佈局中使用的不同元素。
在原子網站設計中，原子作為網站設計項目所有部分的起點。 如果沒有明確地創建和定義某些設計元素，您的項目將缺乏一致性和凝聚力。 這尤其適用於包含大量頁面的項目。 如果不定義基本的設計元素，例如移動設備上的字體或節標題的段落樣式，那麼在您繼續完成設計過程時，不僅要設計而且要編輯不同的頁面，這將是很困難的。 原子可以包括以下任何一種：
- 字體
- 配色方案
- 鈕扣
- 表單域
- 標誌
- 輸入
- 標籤
當遵循這種方法時，許多設計師創建他們的原子並將它們編譯成一個獨特的風格指南。 這包含您需要的所有基本原子，以便您在開始更大的設計元素時可以提取每個部分。 除了選擇調色板或確定頁面上所有段落的外觀外，設計師還必須考慮每個段落的移動和桌面版本。
分子
在化學中，分子代表任何化學元素的最小部分，由結合在一起的原子組成。 同樣，在原子設計過程中，分子是設計特徵，由樣式指南中定義的基本構建塊 - 原子組成。 為了更好地掌握如何在網站設計中創建分子，請考慮一個簡單的搜索表單。 您可以將按鈕（原子）與適當的輸入（原子）和標籤（原子）結合起來，創建一個功能齊全的搜索欄（分子）。 這些項目（按鈕、輸入和標籤）共同創造了對網站功能非常有用和必不可少的東西，但是如果它們單獨行動，它們就沒有那麼有價值了。
有機體
有機體是一組分子在一起。 這些有機體與分子的不同之處在於它們有幾種，使復雜性達到了一個新的水平。 在網站設計中，有機體是在頁面的一部分上組合在一起的幾個分子。
當您考慮主頁頂部的標頭時，您可以將其與組合在一起形成有機體的分子進行比較。 在您的標頭上，您可能會將導航、搜索欄和徽標放在一起，以幫助您的用戶輕鬆瀏覽您的網站。 如果必須（分子），這三個特徵中的每一個都可以單獨使用。 但是，如果您要進一步分解它們，它們可能不會獨立存在，它們只是幫助創建站點的其他功能（原子）所必需的基本構建塊。
模板
下一階段與前幾節的化學不一樣。 模板是通過將所有生物組合在一起來創建網站頁面來創建的。 這使您可以更深入地了解設計和頁面在完成並上線後的外觀。
在大多數情況下，創建模板是為了顯示結構和佈局，而不是頁面上實際內容的細節。 您可以看到大小和尺寸之類的內容，但看不到實際內容的適合程度。模板旨在為您的網站上線時的預期提供一個總體思路，並展示所有部分將如何組合在一起創建一個正常運行的頁面。
頁面
與模板非常相似，創建頁面是為了讓每個頁面的外觀更加真實。 通常會有佔位符（例如“內容在此處”）和一些圖像來提供頁面如何運行的生動感。
由於此階段提供了對網站上線後預期內容的最真實和準確的描述，因此此部分對於測試和審查至關重要。 您可以全面了解內容的顯示方式、網站的運行方式、圖像的排列方式、文本和照片的組合方式以及網站和每個頁面的整體流程將如何顯示。 如果您發現某些功能似乎關閉並且設計無法滿足您最初的預期需求，您可以從這裡進行任何必要的編輯。
可擴展性和一致性
這種類型的網站設計的最佳部分是，當您從每個設計元素移動到下一個設計元素時，您能夠準確地列出預期的內容。 通過使用最初一起創建的構建塊在您的界面中創建更複雜的系統，您可以毫不費力地專注於可擴展性和一致性，確保您的項目能夠以最有凝聚力和用戶友好的方式為您的用戶服務。