切換菜單

- 主頁
- 文章
- 社交媒體
- 原子網頁設計：改善品牌網站的技巧

# 原子網頁設計：改善品牌網站的技巧

已發表: 2016-01-12
作者
克萊爾
約翰斯頓
類別
數字平台

創建網站絕非易事。 它需要廣泛的規劃、錯綜複雜的設計和開發工作，以及合適的熟練專家團隊才能使這一切成為可能。 每個網站都是不同的，因為所有品牌都有不同的目標和需要滿足的獨特需求。 話雖如此，對於真正希望利用其在線形象促進業務增長的品牌而言，沒有“一刀切”的網站設計。 我們的設計方法通常對每個項目的要求和規模都是獨一無二的。 在大型網站項目的情況下，我們發現可擴展性、靈活性以及在大量頁面（通常超過 10,000 個）中保持一致的品牌風格是一些最大的後勤挑戰。 一個優雅的解決方案是遵循原子設計過程。 這是一種更加模塊化和細化的網站設計和構建方法。 原子設計不是設計預設的頁面模板和佈局，而是設計可以在一組定義的規則內添加、複製和移動的構建塊或內容模塊，以創建適用於每種類型的內容和頁面的獨特頁面一個網站，同時保持它的品牌。 原子設計方法分為網站設計的 5 個不同階段：

## 原子

在科學術語中，原子是共同構成物質的基本組成部分。 當您將其轉化為網站設計方法時，它們具有類似的目的。 Atoms 充當您所有網站設計工作的基本構建塊。 雖然它們不是可以獨立存在的設計元素，但它們一起創建了在整個網站佈局中使用的不同元素。

在原子網站設計中，原子作為網站設計項目所有部分的起點。 如果沒有明確地創建和定義某些設計元素，您的項目將缺乏一致性和凝聚力。 這尤其適用於包含大量頁面的項目。 如果不定義基本的設計元素，例如移動設備上的字體或節標題的段落樣式，那麼在您繼續完成設計過程時，不僅要設計而且要編輯不同的頁面，這將是很困難的。 原子可以包括以下任何一種：

- 字體
- 配色方案
- 鈕扣
- 表單域
- 標誌
- 輸入
- 標籤

當遵循這種方法時，許多設計師創建他們的原子並將它們編譯成一個獨特的風格指南。 這包含您需要的所有基本原子，以便您在開始更大的設計元素時可以提取每個部分。 除了選擇調色板或確定頁面上所有段落的外觀外，設計師還必須考慮每個段落的移動和桌面版本。

## 分子

在化學中，分子代表任何化學元素的最小部分，由結合在一起的原子組成。 同樣，在原子設計過程中，分子是設計特徵，由樣式指南中定義的基本構建塊 - 原子組成。 為了更好地掌握如何在網站設計中創建分子，請考慮一個簡單的搜索表單。 您可以將按鈕（原子）與適當的輸入（原子）和標籤（原子）結合起來，創建一個功能齊全的搜索欄（分子）。 這些項目（按鈕、輸入和標籤）共同創造了對網站功能非常有用和必不可少的東西，但是如果它們單獨行動，它們就沒有那麼有價值了。

## 有機體

有機體是一組分子在一起。 這些有機體與分子的不同之處在於它們有幾種，使復雜性達到了一個新的水平。 在網站設計中，有機體是在頁面的一部分上組合在一起的幾個分子。

當您考慮主頁頂部的標頭時，您可以將其與組合在一起形成有機體的分子進行比較。 在您的標頭上，您可能會將導航、搜索欄和徽標放在一起，以幫助您的用戶輕鬆瀏覽您的網站。 如果必須（分子），這三個特徵中的每一個都可以單獨使用。 但是，如果您要進一步分解它們，它們可能不會獨立存在，它們只是幫助創建站點的其他功能（原子）所必需的基本構建塊。

## 模板

下一階段與前幾節的化學不一樣。 模板是通過將所有生物組合在一起來創建網站頁面來創建的。 這使您可以更深入地了解設計和頁面在完成並上線後的外觀。

在大多數情況下，創建模板是為了顯示結構和佈局，而不是頁面上實際內容的細節。 您可以看到大小和尺寸之類的內容，但看不到實際內容的適合程度。模板旨在為您的網站上線時的預期提供一個總體思路，並展示所有部分將如何組合在一起創建一個正常運行的頁面。

## 頁面

與模板非常相似，創建頁面是為了讓每個頁面的外觀更加真實。 通常會有佔位符（例如“內容在此處”）和一些圖像來提供頁面如何運行的生動感。

由於此階段提供了對網站上線後預期內容的最真實和準確的描述，因此此部分對於測試和審查至關重要。 您可以全面了解內容的顯示方式、網站的運行方式、圖像的排列方式、文本和照片的組合方式以及網站和每個頁面的整體流程將如何顯示。 如果您發現某些功能似乎關閉並且設計無法滿足您最初的預期需求，您可以從這裡進行任何必要的編輯。

## 可擴展性和一致性

這種類型的網站設計的最佳部分是，當您從每個設計元素移動到下一個設計元素時，您能夠準確地列出預期的內容。 通過使用最初一起創建的構建塊在您的界面中創建更複雜的系統，您可以毫不費力地專注於可擴展性和一致性，確保您的項目能夠以最有凝聚力和用戶友好的方式為您的用戶服務。

此塊已損壞或丟失。 您可能缺少內容，或者您??可能需要啟用原始模塊。
洞察力

##
相關文章

分享，謝謝！
您應該閱讀的 10 個最佳數字營銷博客

在本文中，我們列出了 10 個最佳數字營銷博客。 文章中的特色是 Moz 博客、營銷土地和生態諮詢。

閱讀更多
B2B 營銷策略：2015 年使用的最佳策略

這些 B2B 營銷策略為 2015 年的數字成功奠定了基調，並且肯定會成為來年 B2B 數字營銷策略的支柱。

閱讀更多
如何開始使用 Instagram 開展業務：清單

有興趣將 Instagram 用於您的業務嗎？ 查看我們最新的博客文章，了解您在開始 Instagram 之旅時需要什麼。

閱讀更多
改善 Instagram 廣告活動的 10 個想法

有興趣為您的品牌實施 Instagram 廣告活動嗎？ 看看我們列出的 10 個提示，讓您的努力更上一層樓。

閱讀更多
改善電子商務移動應用程序的四個營銷技巧

營銷您的電子商務移動應用程序可能是一個挑戰。 以下是在跨數字平台利用電子商務應用程序時需要維護的一些最佳實踐。

閱讀更多