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

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

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

當(dāng)您的網(wǎng)站上有多個(gè)設(shè)計(jì)師或開發(fā)人員時(shí)，這一點(diǎn)尤其重要。這確保每個(gè)人都在同一頁(yè)上。另外，它實(shí)際上簡(jiǎn)化了開發(fā)，因?yàn)槟梢詤⒖歼@個(gè)樣式指南來更快、更有效地創(chuàng)建新內(nèi)容。

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

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

1.熟悉你自己的品牌

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

2.選擇顏色

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

3.選擇和識(shí)別排版

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

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

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

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

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

5.組照片規(guī)范

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

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

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

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

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

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

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

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

Material.io

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

MailChimp

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

孤獨(dú)星球

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

USWDS：美國(guó)網(wǎng)頁(yè)設(shè)計(jì)系統(tǒng)

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

Yelp格式指南

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

A11Y風(fēng)格指南

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

Barnard Levit Optometrists

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

Ben Brignell格式指南

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

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

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

Ceasefire Oregon

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

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

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