如何創(chuàng)建網頁設計風格指南?

　　如果您的網站需要經常更新，或者很多人都需要維護或更新，那么最好使用網頁設計風格指南。這有助于確保與您的網站打交道的每個人都在同一標準下，并了解如何使所有內容保持一致。但是，到底什么是網頁設計風格指南?這意味著什么?以及如何為自己創(chuàng)建一個?這些是我們旨在在此處回答的問題。

　　什么是網頁設計風格指南?

　　在詳細介紹如何創(chuàng)建樣式指南之前，讓我們花一些時間來探索它們的實際含義。一個網站的設計風格指南是在您的網站一個頁面，列出了進入創(chuàng)建一個新的頁面或文章對您的網站的其余部分的一切。這包括商標圖形，徽標，字體和字體大小，文本和背景色，以及與網站更新和內容創(chuàng)建有關的任何其他內容。

　　當您的網站建設團隊有多個設計師或開發(fā)人員時，這一點尤其重要。這樣可以確保每個人都在同一規(guī)范下工作。另外，它實際上可以簡化開發(fā)，因為您可以參考此樣式指南，以更快，更高效地創(chuàng)建新頁面。

　　如何創(chuàng)建網頁設計風格指南

　　以下是您為自己創(chuàng)建網頁設計樣式指南所需采取的步驟：

　　1.熟悉品牌

　　無論您是為自己的網站還是為其他網站創(chuàng)建樣式指南，相同的原則仍然適用：您需要花一些時間來評估品牌的含義。這意味著，了解您的目標受眾，了解公司的價值，并對如何形象地表示具有扎實的想法。如果公司過去曾經對某些設計進行過A / B測試，那么現在是時候利用該信息來創(chuàng)建更強大，更有效的樣式指南。

　　2.選擇顏色

　　在評估品牌時，您需要考慮顏色。如果公司已經有了調色板，那么他們可以與之合作—完美。在樣式指南中添加顏色的十六進制代碼。確保將此信息細分為文本，鏈接，懸停鏈接，背景，按鈕等類別。明確應在何處使用哪種顏色。

　　3.選擇并識別版式

　　除了顏色之外，您還需要弄清楚應使用的字體(以及應在何處使用)。在您的網頁設計風格指南中，清楚地標識字體名稱，大小和行高。這使將來的設計師可以非常輕松地重新創(chuàng)建網站的外觀。更好的是，創(chuàng)建一個Photoshop模板，其中將這些元素設置為預設或標識為文件本身內的注釋。

　　您應盡一切努力消除此處的猜測。

　　4.建立內容網格

　　您應該添加到網頁設計樣式指南中的另一件事是創(chuàng)建內容網格。這是確定頁面和博客文章的布局方式的理想方法。展示圖片和圖形應放置在文本中的位置。您確實需要這樣做，以了解如何分隔內容。

　　現在，博客和頁面模板可以解決其中一些問題。即使這樣，將這些信息包括在樣式指南中仍然是一個好主意。

　　5.設置照片規(guī)格

　　您可以做的另一件事是設置照片規(guī)格。例如，許多網站會將過濾器或效果應用于博客文章中包含的圖像。因此，如果您想確保管理網站內容的人都知道如何使所有內容保持一致，則需要在網頁設計風格指南中注明這些細節(jié)。

　　確定每個圖像應遵循的規(guī)格，包括圖像高度，寬度，濾色器，不透明度以及是否應添加文本。如果您希望在圖形中包含文本，請確保也標注出字體，樣式，大小和顏色規(guī)格(如上所述)。

　　6.標志規(guī)格

　　我們在這里討論的最后一件事，您的指南中絕對必須包含有關徽標的信息?；諛艘苍S是您的品牌和網站中最可識別的部分，因此在此處進行討論非常重要。

　　徽標規(guī)范要求包括最小尺寸以及各種不同的徽標樣式。對于小空間，您應該有一個文本選項和一個圖形選項。對于較大尺寸的選項，帶有標語的徽標可能也是一個好主意。

　　您還應提供具有不同背景的徽標，包括透明徽標。這樣，無論背景是什么，您的徽標都將看起來很棒。這些徽標選項中的每一個都應包含在樣式指南頁面本身中，以便可以快速訪問和引用它們。

　　8個很棒的網頁設計風格指南示例

　　既然我們已經介紹了您的網頁設計樣式指南中應該包含的內容，下面讓我們看一些在展示這些指南的外觀和樣式方面確實非常出色的示例。

　　Material.io

　　Material.io樣式指南很全面。它分解了網站外觀的各個方面。它包含有關主題，圖標，調色板，版式，形狀甚至聲音的信息。

　　MailChimp

　　MailChimp樣式指南非常簡單明了，這正是您應該追求的。它包括屏幕左側的菜單選項，您可以選擇這些菜單選項，包括顏色，數據可視化，網格，類型，按鈕，對話框等。

　　Lonely Planet

　　Lonely Planet提供了另一個很棒的網頁設計風格指南以供參考。它的主要功能是調色板，圖標，UI組件，JS組件，小部件和CSS實用程序。

　　Yelp風格指南

　　Yelp風格指南甚至更重要。它提供清晰的字體信息，顏色，布局信息，鏈接，按鈕，導航選項等，使使用Yelp的人們更容易制作頁面和更新內容。

　　A11Y Style Guide

　　您可能要參考的另一種樣式指南是A11Y編寫的指南。該指南包括有關如何格式化名片，表格，媒體，導航的信息，并且還提供了一些其他資源。

　　Barnard Levit驗光師

　　Barnard Levit驗光師提供了一個超簡單的網頁設計樣式指南，可以幫助您完成工作。它提供了完整的排版詳細信息，包括標題，列和項目符號，以及有關如何格式化表格，表單和按鈕的信息。此外，它涵蓋了如何處理圖像，視頻以及網站的許多其他方面。

　　Ben Brignell風格指南

　　Ben Brignell的風格指南在美學上非常令人愉悅。它提供有關公司顏色(帶有十六進制代碼)，版式，塊引用，項目符號，按鈕，鏈接，視頻，圖像等的信息。

　　Beeline設計系統(tǒng)

　　Beeline設計系統(tǒng)網站上的樣式指南是另一個可供參考的好例子。它包括此處列出的所有其他樣式指南涵蓋的所有內容，但增加了模式，通知和選項卡，以進行額外的衡量。

　　總結

　　到目前為止，您已經知道什么是網頁設計風格指南。您知道為什么需要一個。您已經學會了如何將它們組合在一起，并且已經看到了一些目前網絡上最好的例子?，F在輪到該信息變成實際的東西。如果您的網站缺少樣式指南，那么現在是時候將它們組合在一起了。