網頁設計風格指南類似於品牌風格指南，但網頁設計風格指南包含有關你網站設計的資訊， 而不是僅僅你的品牌logo和其他元素。
設計師在設計你的網站時通常會為網站整理一份網頁設計風格指南。它包括你網站的主要顏色、字體類型和大小、按鈕和懸停效果等。
為什麼網頁設計風格指南至關重要？因為每當你需要重新設計站點或添加新網頁時，你就可以遵循一致的顏色和設計方案 。一致的網站設計對於你的品牌看起來專業和可信至關重要。
為網頁設計建立風格指南需要經過許多複雜的步驟。但是你不必擔心，因為下面我們已經用簡單的術語為你解釋了網頁設計風格指南的所有步驟。
文章綱要：
1. 網頁設計風格指南的好處
2. 網頁設計風格指南入門
3. 輕鬆設計和建立你的網站
4. 小結
網頁設計風格指南的好處
網頁設計風格指南透過提高效率和減少繁瑣的任務來使品牌和平面設計師受益。由於網頁設計風格指南定義了每條規則，你的平面設計師將在對你的網站進行一些修改時節省尋找確切顏色或樣式的時間。
帶有可下載資訊的公開網頁設計風格指南可能對你的客戶或附屬機構有所幫助。 當他們想要發布有關貴公司的資訊時，他們還可以使媒體受益。
此外，網頁設計風格指南可以讓每個人都了解你網站的風格。
網頁設計風格指南入門
網頁設計風格指南一開始就包含了大量品牌元素資訊，例如標誌、標語等。
在建立網頁設計風格指南之前，請確保你已經徹底研究了你的品牌和目標受眾。你也了解 品牌的價值和個性，然後透過你網站的視覺元素來傳達它。
完成研究後，請按照以下步驟建立網頁設計風格指南。
1. 定義標誌規則
網站的這一部分需要諮詢團隊中的專業品牌或平面設計師。你可以詢問他們是否對品牌標誌有任何特定規則。
此處需要定義的包括有關標誌的顏色、字體（大小和样式）、元素的間距和位置、網格、不同背景上的細節外觀等資訊。
2.確定調色板
調色板是網站最重要的元素之一 。如果調色板錯誤，可能會導致訪客流失。此外，錯誤的網站設計顏色選擇會使你的網站看起來不專業。
你網站的調色板將向觀眾介紹你品牌的個性和目的。每種顏色都有意義並服務於一個目的。它告訴觀眾你品牌的利益市場。例如，綠色表示自然。
對於你網站的調色板，你需要選擇與你的品牌個性和現有元素（例如標誌）相匹配的顏色。
調色板由主要顏色、次要顏色、第三顏色和中性顏色組成。請注意，你最多可以選擇三種原色。
在為按鈕、壁紙等選擇顏色時，請考慮色彩心理學。人類是視覺動物，根據色彩心理學選擇顏色，你可以影響他們對你網站的某些方面的反應。
確保你最終獲得正確顏色組合的另一個技巧，是建立淺色和深色的對比。
另外，選擇完文本和背景顏色後，請確保將它們相互匹配，確認你的文本是否易於閱讀。
最後，將你選擇顏色的視覺外觀和技術價值包含在你的調色板中。例如，當包含紅色時，你必須提及其RGB和十六進制代碼。這一步是必不可少的，因為當其他設計師想要使用相同的顏色時，他們可以簡單地使用十六進制代碼進行選擇，而無需經歷繁瑣的匹配過程。
3.定義排版規則
圖片取自Strikingly用戶網站
排版規則是網站風格指南的重要組成部分，因為它們決定了網站內容的視覺層次結構。視覺層次結構指的是設計元素，它們只得到應有的關注。例如，100px 的文字會比 20px 的文字更能吸引用戶的注意力。
首先確定從 H1 到 H6 標題的字體和大小。接下來，確定你的正文、警告消息和表單的字體和大小。你必須以像素 (px) 為單位定義字體大小。
選擇字體系列和大小時，請將可讀性視為關鍵因素。不太重要的文本可以使用可讀性較低的字體系列，但重要的文本必須使用可讀性最高的字體系列。
接下來，你需要確定行距和字符間距，文本的外觀，段落、文本的強調部分等。
4.設定網格
在網頁設計風格指南中，網格決定了網站元素（例如圖像、影片、文本等）的間距和組織方式。網格保護你的網站免受不一致和糟糕的佈局的影響。
為了使將來更容易向你的網站添加新頁面，你可以為網站的主要佈局建立模板。
5. 自定義插圖和圖像的注意事項
如果你確信要為你的網站加入一些插圖以賦予它獨特的感覺，則必須在你的網頁設計風格指南中包含它的規則。包括顏色偏好和插圖類型（三維、二維、輪廓、鉛筆素描、水彩畫等）。
對於圖像，你需要加入亮度、對比度、清晰度、濾鏡等指南。你還可以設定應使用哪種圖像的規則。
另一件要設定的事情是圖像的基調。 例如，照片是否可以是隨意拍攝的、偷拍的、擺拍的或者修圖過的？
輕鬆設計和建立你的網站
當你的編碼經驗為零時，請與網站建設者攜手建立你的網站。我們知道你可以透過聘請開發人員來完成它而無需動手指。但是這樣開支比較大。特別是對於剛剛開始起步的公司來說，花那麼多錢似乎沒有必要。
圖片取自 Strikingly產品
如果你確信要使用網站構建器，你應該選擇哪一個？我們建議你考慮一下Strikingly。為什麼呢？它非常易於使用，並透過實時聊天和電子郵件提供 24/7 全天候客戶支持 ，因此你不必在遇到問題時停止網站構建。
Strikingly 為其用戶提供超過 200 個可修改的免費網站模板。你需要做的就是根據你的品牌要求在直觀的網站編輯器中對其進行編輯，然後你的網站就可以發布了。
Strikingly 提供了廣泛的自訂選項，從更改背景圖像和部分佈局到建立個性化部分和合併自訂元素。
你網站的設計在視覺上代表了你品牌的個性。因此，確保它與你品牌的組成部分保持一致至關重要。
記住要更新你的網頁設計風格指南。隨著技術的快速發展，你的品牌將來可能會對其組件進行一些修改，確保你的網站設計與你品牌的最新元素時刻保持一致，並相應地更新你的網頁設計風格指南。
現在你已經了解瞭如何建立網頁設計風格指南，馬上就開始行動吧。每當懷疑你的網頁設計風格指南缺少必要的組件時，你可以參考阿里巴巴的 Ant Design 或谷歌的 Material Design。
