在详细介绍如何创建样式指南之前，让我们花一些时间来探索它们的实际含义。一个网站的设计风格指南是在您的网站一个页面，列出了进入创建一个新的页面或文章对您的网站的其余部分的一切。这包括商标图形，徽标，字体和字体大小，文本和背景色，以及与网站更新和内容创建有关的任何其他内容。
当您的网站建设团队有多个设计师或开发人员时，这一点尤其重要。这样可以确保每个人都在同一规范下工作。另外，它实际上可以简化开发，因为您可以参考此样式指南，以更快，更高效地创建新页面。
如何创建网页设计风格指南
以下是您为自己创建网页设计样式指南所需采取的步骤：
1.熟悉品牌
无论您是为自己的网站还是为其他网站创建样式指南，相同的原则仍然适用：您需要花一些时间来评估品牌的含义。这意味着，了解您的目标受众，了解公司的价值，并对如何形象地表示具有扎实的想法。如果公司过去曾经对某些设计进行过A / B测试，那么现在是时候利用该信息来创建更强大，更有效的样式指南。
2.选择颜色
在评估品牌时，您需要考虑颜色。如果公司已经有了调色板，那么他们可以与之合作—完美。在样式指南中添加颜色的十六进制代码。确保将此信息细分为文本，链接，悬停链接，背景，按钮等类别。明确应在何处使用哪种颜色。
3.选择并识别版式
除了颜色之外，您还需要弄清楚应使用的字体（以及应在何处使用）。在您的网页设计风格指南中，清楚地标识字体名称，大小和行高。这使将来的设计师可以非常轻松地重新创建网站的外观。更好的是，创建一个Photoshop模板，其中将这些元素设置为预设或标识为文件本身内的注释。
您应尽一切努力消除此处的猜测。
4.建立内容网格
您应该添加到网页设计样式指南中的另一件事是创建内容网格。这是确定页面和博客文章的布局方式的理想方法。展示图片和图形应放置在文本中的位置。您确实需要这样做，以了解如何分隔内容。
现在，博客和页面模板可以解决其中一些问题。即使这样，将这些信息包括在样式指南中仍然是一个好主意。
5.设置照片规格
您可以做的另一件事是设置照片规格。例如，许多网站会将过滤器或效果应用于博客文章中包含的图像。因此，如果您想确保管理网站内容的人都知道如何使所有内容保持一致，则需要在网页设计风格指南中注明这些细节。
确定每个图像应遵循的规格，包括图像高度，宽度，滤色器，不透明度以及是否应添加文本。如果您希望在图形中包含文本，请确保也标注出字体，样式，大小和颜色规格（如上所述）。
6.标志规格
我们在这里讨论的最后一件事，您的指南中绝对必须包含有关徽标的信息。徽标也许是您的品牌和网站中最可识别的部分，因此在此处进行讨论非常重要。
徽标规范要求包括最小尺寸以及各种不同的徽标样式。对于小空间，您应该有一个文本选项和一个图形选项。对于较大尺寸的选项，带有标语的徽标可能也是一个好主意。
您还应提供具有不同背景的徽标，包括透明徽标。这样，无论背景是什么，您的徽标都将看起来很棒。这些徽标选项中的每一个都应包含在样式指南页面本身中，以便可以快速访问和引用它们。
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设计系统
Beeline设计系统网站上的样式指南是另一个可供参考的好例子。它包括此处列出的所有其他样式指南涵盖的所有内容，但增加了模式，通知和选项卡，以进行额外的衡量。
