如果你有一個需要經(jīng)常更新的網(wǎng)站，會有很多人會參與維護(hù)或更新，那么有一個合適的網(wǎng)頁設(shè)計風(fēng)格指南是一個好主意。這有助于確保每個人處理你的網(wǎng)站都將相似，并了解如何保持他們看起來一致。但是什么是網(wǎng)頁設(shè)計風(fēng)格指南呢？它需要什么？你如何為自己創(chuàng)造一個？這些就是我們現(xiàn)在要回答的問題。

什么是網(wǎng)頁設(shè)計風(fēng)格指南？

在詳細(xì)介紹如何創(chuàng)建樣式指南之前，讓我們先花點時間了解一下它們實際上是什么。網(wǎng)站設(shè)計風(fēng)格指南是網(wǎng)站上的一個頁面，它概述了在網(wǎng)站其余部分創(chuàng)建新頁面或博客文章的所有內(nèi)容。這包括品牌圖形、徽標(biāo)、字體和字體大小、文本和背景顏色，以及與站點更新和內(nèi)容創(chuàng)建相關(guān)的任何其他內(nèi)容。

當(dāng)您的網(wǎng)站上有多個設(shè)計師或開發(fā)人員時，這一點尤其重要。這確保每個人都在同一頁上。另外，它實際上簡化了開發(fā)，因為您可以參考這個樣式指南來更快、更有效地創(chuàng)建新內(nèi)容。

如何創(chuàng)建一個網(wǎng)頁設(shè)計風(fēng)格指南

以下是你需要采取的步驟來為自己創(chuàng)建一個網(wǎng)頁設(shè)計風(fēng)格指南：

1.熟悉你自己的品牌

無論你是為自己的網(wǎng)站還是為別人的網(wǎng)站創(chuàng)建一個風(fēng)格指南，同樣的原則仍然適用：你需要花時間來評估這個品牌是關(guān)于什么的。這意味著，了解你的目標(biāo)受眾，了解公司的價值，并對如何在視覺上表現(xiàn)有一個堅實的想法。如果該公司過去曾對某些設(shè)計進(jìn)行過A/B測試，那么現(xiàn)在是利用這些信息創(chuàng)建更健壯、更有效的樣式指南的時候了。

2.選擇顏色

當(dāng)你評估品牌時，你需要考慮顏色。如果公司已經(jīng)有一個調(diào)色板，他們與-完美。在樣式指南中為顏色添加十六進(jìn)制代碼。確保將這些信息分成文本、鏈接、懸停鏈接、背景、按鈕等類別。明確在什么地方應(yīng)該使用什么顏色。

3.選擇和識別排版

除了顏色之外，你還需要弄清楚應(yīng)該使用什么字體（以及應(yīng)該在哪里使用）。在您的網(wǎng)頁設(shè)計風(fēng)格指南中，明確標(biāo)識字體名稱、大小和行高。這使它超級容易為未來的設(shè)計師重建適當(dāng)?shù)耐庥^您的網(wǎng)站。更好的方法是創(chuàng)建一個Photoshop模板，將這些元素設(shè)置為預(yù)設(shè)值，或者在文件本身中標(biāo)識為注釋。

你應(yīng)該盡一切努力消除這里的猜測。

4.建立內(nèi)容網(wǎng)格

您應(yīng)該添加到網(wǎng)頁設(shè)計風(fēng)格指南中的另一件事是創(chuàng)建內(nèi)容網(wǎng)格。這是確定頁面和博客文章布局的最佳方法。顯示圖片和圖形應(yīng)該放置在文本中的位置。你真的需要這個來理解你的內(nèi)容應(yīng)該如何被隔開。

現(xiàn)在，其中一些可以通過博客和頁面模板來實現(xiàn)。即使如此，在你的風(fēng)格指南中包含這些信息仍然是一個好主意。

5.組照片規(guī)范

你能做的另一件事是設(shè)置照片規(guī)格。例如，許多網(wǎng)站會對博客文章中的圖片應(yīng)用過濾器或效果。因此，如果你想確保管理你網(wǎng)站內(nèi)容的人知道如何保持所有內(nèi)容一致，你需要在你的網(wǎng)站設(shè)計風(fēng)格指南中指出這些細(xì)節(jié)。

確定每個圖像應(yīng)該遵循的規(guī)格，包括圖像的高度、寬度、顏色過濾器、不透明度，以及是否應(yīng)該添加文本。如果你想在你的圖形中包含文字，一定要把字體、樣式、大小和顏色規(guī)格（如上所述）也寫出來。

6.標(biāo)識規(guī)范

我們在這里討論的最后一件事是，你的指南絕對必須包括關(guān)于標(biāo)識的信息。標(biāo)識可能是你的品牌和網(wǎng)站中最容易識別的部分，因此在這里討論它非常重要。

標(biāo)志規(guī)格要求包括最小尺寸以及各種不同的標(biāo)志風(fēng)格。您應(yīng)該有一個文本選項和一個用于小空間的圖形選項。對于較大尺寸的選項來說，帶有標(biāo)語的徽標(biāo)也是個好主意。

您還應(yīng)該提供不同背景的徽標(biāo)，包括透明的。這樣，你的標(biāo)志將看起來很好，無論它坐在什么背景上。這些標(biāo)識選項中的每一個都應(yīng)該包含在樣式指南頁面中，這樣就可以快速地訪問和引用它們。

10個很棒的網(wǎng)頁設(shè)計風(fēng)格指南的例子

既然我們已經(jīng)介紹了什么應(yīng)該包括在你的網(wǎng)站設(shè)計風(fēng)格指南，讓我們看看一些例子，真正擅長展示這些指南可以和應(yīng)該如何看。

Material.io

Material.io風(fēng)格的指南是全面的，它分解了網(wǎng)站的各個方面。它包括關(guān)于主題、圖標(biāo)、調(diào)色板、排版、形狀甚至聲音的信息。

MailChimp

MailChimp風(fēng)格指南非常簡單明了，這正是您應(yīng)該追求的。它包括屏幕左側(cè)的菜單選項，您可以選擇這些選項，包括顏色、數(shù)據(jù)可視化、網(wǎng)格、類型、按鈕、對話框等。

孤獨星球

《孤獨星球》提供了另一個很好的網(wǎng)頁設(shè)計風(fēng)格指南。它突出了調(diào)色板、圖標(biāo)、UI組件、JS組件、小部件和CSS實用工具。

USWDS：美國網(wǎng)頁設(shè)計系統(tǒng)

美國的網(wǎng)頁設(shè)計系統(tǒng)也提供了很好的風(fēng)格參考指南。它包括為大多數(shù)政府網(wǎng)站創(chuàng)建頁面的細(xì)節(jié)，包括實用工具、頁面模板等。

Yelp格式指南

Yelp的風(fēng)格指南甚至更切題。它提供了清晰的排版信息、顏色、布局信息、鏈接、按鈕、導(dǎo)航選項，以及更多的內(nèi)容，使得在Yelp上工作的人更容易制作頁面和更新內(nèi)容。

A11Y風(fēng)格指南

另一個你可能想要參考的風(fēng)格指南是由A11Y整理的。本指南包括關(guān)于如何格式化卡片、表單、媒體、導(dǎo)航的信息，并提供了一些額外的資源。

Barnard Levit Optometrists

Barnard Levit Optometrists有一個超級簡單的網(wǎng)頁設(shè)計風(fēng)格指南，可以完成這項工作。它提供了完整的排版細(xì)節(jié)，包括標(biāo)題、列和項目符號，以及關(guān)于如何格式化表、表單和按鈕的信息。此外，它還涵蓋了如何處理圖像、視頻和網(wǎng)站的許多其他方面。

Ben Brignell格式指南

Ben Brignell風(fēng)格的指南是超級審美愉快。它提供關(guān)于公司顏色（十六進(jìn)制代碼）、排版、塊引號、項目符號、按鈕、鏈接、視頻、圖像等更多信息。

直線設(shè)計系統(tǒng)

另一個值得參考的例子是"直線設(shè)計系統(tǒng)"網(wǎng)站上的風(fēng)格指南。它包含了這里列出的所有其他樣式指南所涵蓋的所有內(nèi)容，但是添加了模態(tài)、通知和額外度量的選項卡。

Ceasefire Oregon

最后一個是Ceasefire Oregon。這是另一個非常簡單的風(fēng)格指南，但不要讓它看起來像在欺騙你——它非常全面。本指南涵蓋了樣式表、顏色、網(wǎng)格、實用工具、圖標(biāo)、徽標(biāo)、報頭信息等。

使用這些信息創(chuàng)建一個網(wǎng)頁設(shè)計風(fēng)格指南

現(xiàn)在，您已經(jīng)知道什么是網(wǎng)頁設(shè)計風(fēng)格指南了，你知道你為什么需要它。您已經(jīng)學(xué)習(xí)了如何將它們組合在一起，并且已經(jīng)看到了一些當(dāng)前網(wǎng)頁上最好的示例?，F(xiàn)在輪到把這些信息轉(zhuǎn)化為實用的東西了，如果你的網(wǎng)站缺少一個風(fēng)格指南，現(xiàn)在是時候把它們放在一起了。