我真的需要一个风格指南吗？

什么是风格指南，什么时候应该使用风格指南？我们将总结一个风格指南的主要属性，它应该包含什么，以及如何确定是否应该花时间为您的品牌/网站创建一个风格指南。

说实话，并不是每个网站都需要一个风格指南。你表哥的真棒钓具箱Tumblr博客或你的邻居Web.com“猫草”电子商务网站真的不需要一个风格指南。好吧，取决于他卖的多少猫草，但是那个解决方案博客是肯定不行的。忘记这些类型的网站，风格指南是真正需要保持专业外观，一致性品牌的网站。风格指南可能是耗时的怪物，所以你真的想确保这将是值得的投资。

什么是风格指南？

在我们确定你是否真的需要一个风格指南之前，什么是风格指南？简单的答案是，它只是一个HTML或印刷的文档，描述和显示您的网站应该是什么样子以及如何使用它的例子。这实际上只是您网站的指南，以及在提供和更新网站时使用的风格和标准。

• 使用什么颜色？
• H1有多大？
• 内容是否合理？

我们将在您的风格指南中介绍您将需要的以及您想要的内容，但现在，这是简单的答案。

为什么和什么时候我需要一个？

好问题。真的不是一个简单的答案，它取决于你的网站是什么，谁将会使用它 - 无论是最终用户还是设计者，开发者和内容贡献者。在你试图弄清楚为什么以及什么时候需要的时候，问自己最大的问题之一就是时间。很多设计师会告诉你，如果你现在花时间来开发一个风格指南，将会为你节省大量的时间。但是在很多情况下，你可能会花时间去开发一个你将来可能永远不会提及的风格指南 - 更糟的是，你的用户和贡献者可能永远不会引用它。

时间是一个很大的因素，当试图确定你是否真的需要一个风格指南。如果你只是开发一个网站或应用程序启动，你可能不想投入一大堆时间，可能永远不会看到一天的实际光。考虑到风格指南是一个长期的投资，如果你还没有准备好现在投资，那么不要。但是，如果这是一个长期的旅程，那么现在投入时间确实是非常明智的做法 -从长远来看，这确实使生活更加轻松。

如果你不确定你的“故事”是否会成为一个尖锐的电影专营权，或只是一个周五晚上的情景喜剧短期运行，这里有一堆问题，你可以问自己。如果你似乎对许多这些答案是肯定的，那么你可能正在考虑创建一个风格指南。

• 我想拯救我的脑细胞？
• 我喜欢良好的可用性和标准？
• 我真的很喜欢一致性？
• 我有一个超越我的网站的品牌？
• 其他人会用我的品牌和标志？
• 我会定期生成或更新内容？
• 除了我之外，我还有内容贡献者？
• 我是一名自由职业者，我喜欢让我的客户拥有一个真正可管理的网站？
• 我有一个API？
• 我在建公司？
• 我在一家大公司工作？

我如何构建风格指南？

如果你几乎确定你现在需要一个风格指南，你需要建立一个。你的风格指南取决于几个方面，例如：什么类型的网站，谁来实际使用风格指南。在某些情况下，你可能只是为你创建一个风格指南，所以它可能不需要超级细致和漂亮。在其他情况下，您可能会有数百个其他人参考该指南，您将需要深入了解并提供更多详细信息。

我编了两个清单：“你需要什么”和“你想要什么”。“你需要什么”列表是任何风格指南应具有或提供给用户的信息列表。“你想要的东西”只是你可能想添加的其他东西的列表。此外，不要将这些列表视为模板，这些只是在组合样式指南时需要考虑的项目 - 您并不需要它们，在大多数情况下，您需要添加其他信息更具体到你和你的网站设计。

你需要什么

品牌。定义和给出您的标志和配色方案的例子。显示您的标志应该如何用于全彩，装饰，平面，黑白或不同的背景。为每种颜色提供HEX和RBG颜色值和Pantone，并且您可能还想为.png .jpg甚至.ai和.psd格式的用户提供徽标文件。

印刷术。定义每个标题，段落，引用，块引用，标签，表单标题或任何其他格式化文本的字体系列和大小。还提供了应该使用字距，线高度或行间距的示例。

布局。定义HTML和其他元素在页面上的位置和方式，以及它们如何相互关联。定义总体布局的边距，填充，排水沟或网格模式，以及不同的特定元素。如有必要，请提供布局示例以显示页面或布局模板中的差异。

链接和按钮。定义将通过网站使用的所有链接和按钮的颜色和样式。显示网站上存在的内容链接，边栏链接样式，提交按钮，表单按钮，信息按钮或任何其他链接或按钮的示例和颜色代码。如果看起来太复杂，这甚至可能让你思考如何简化你的设计。

导航。定义主要和子导航样式以及它们的交互性。定义使用嵌套或父/子导航时会发生什么情况，并显示如何使用和/或创建导航的示例。

可视化层次结构。定义和显示页面上标题，图像，标题，段落和其他元素如何相互关联的示例。提供几个例子来定义你应该实现的视觉层次结构，甚至可以提供一个快速的描述，这个层次结构对于网站的外观和感觉是很重要的。

图像和图标。定义您网站上的图片和图标应使用哪种类型，尺寸，文件大小，尺寸和样式。你会有一个精选的图像为您的帖子？你有特定的图标集需要使用？内容图像应该集中还是浮动？显示图像和图标的例子，并提供用户占位符的图像和适当的图标集，他们将需要使用。

UI标准。定义每种交互应该使用哪种类型的UI元素以及它们应该如何查看。应该在哪里使用复选框或单选按钮，还是应该使用它们？多走一步，为您的网站设计一个完整的UI工具包，并提供生成每个UI元素的图像或代码。完整的UI工具包的好例子是Twitter Bootstrap和jQuery UI。

窗体/验证。定义表单元素的表单样式和布局。定义输入和标签如何对齐以及将应用什么样式。另外，定义表单的流程，以及在哪里应该使用什么类型的表单。定义什么类型的验证将发生，如果有的话，错误信息应该是什么样的，以及将使用什么颜色。

你会想要什么

偶。您可能需要根据用户和内容管理者的需要定义多个样式指南。最终用户可能不需要知道如何为您的网站编写内容的所有细节，而内容贡献者将会。如有必要，向特定用户提供特定的风格指南，或者只是简单地缩小每个用户的风格指南。

目标/使命。您可能想要定义您的网站或应用的总体目标和使命。如果你这样做，那么你的贡献者和用户可以更好地理解你为什么选择了你使用的风格，以及如何与更好的体验相关联。另外，如果你认真考虑你的网站，那么你的贡献者和用户也会这样做。

编码实践。您可能想要定义编辑时应使用哪些编码标准和实践，并在您的网站上编写任何类型的代码。在为网站编写代码时应该使用HTML，CSS和JavaScript标准，并展示示例代码来说明如何编写和提交代码。

文件命名。您可能需要为网站的所有贡献者和用户定义文件命名约定。这将防止长期存在的许多问题。定义在编辑和测试时如何版本文件，应该使用哪些文件类型，以及不应该使用哪些文件类型（提示：动画gif）。

内容标准。您可能想要定义应该如何生成内容，以及如何将样式和层次超出简单的CSS。定义内容区域和文章的长度，标签和标题的长度以及标题的长度。定义内容的基调，内容的提交，内容的删除以及编辑过程如何处理。另外，为添加和使用的内容定义版权标准，以避免任何法律行为。

评论标准。你可能想要定义标准，超越风格，评论和论坛领域。如何评论评论？应该怎么处理，网站如何处理巨魔？应该如何以及何时应该结束评论？

该做什么和不该做什么。您可能希望在样式指南中有一个小节来定义要素的注意事项和注意事项。例如，显示徽标如何正确使用以及永远不会使用徽标的示例。显示良好的视觉层次和糟糕的视觉层次的例子。展示什么样的CSS应该看起来像什么样的例子，什么CSS代码不应该被使用。

使其可下载打印。你可能想制作一个风格指南，用户可以根据需要下载和打印。有些用户可能希望自己拥有自己的样式副本，而不必访问URL。这是一个非常好的主意，但如果您更新了风格指南并进行了更改，则可能很难处理。如果你创建了一个可下载的风格指南，我建议你捕捉那里的电子邮件地址，这样当你进行修改时，你可以轻松地为这些用户发布一个新的指南。

使它漂亮。你可能想要考虑制作一个有很多很好的例子的视觉吸引人的风格指南。这可能需要更多的工作，但如果你有最终用户参考风格指南，这可能是值得额外的时间。您的风格指南就像您管理的任何其他面向公众的产品一样反映您的产品。但是，如果您的观众只是您的开发者或贡献者群体，那么简单的维基页面可能会很好，因为这些用户中的大多数已经非常了解您的品牌。

综上所述

风格指南不仅适用于您的用户，也适用于您自己的工具。他们是非常棒的节省时间，而且在长时间编辑和添加内容时，回答风格问题的时间非常庞大。但要小心你花了多少时间和努力，你的风格指南，不要去香蕉和风格指南如果你没有任何人会使用它。如果你的风格指南是冷却器比你的实际网站，那么也许你花了太多的时间。

更多风格指导/品牌示例：