如何制作网络风格指南？

标准化设计下的网页通常具有系统的网页样式指南。如果您想确保您的网页设计更加一致，并且每个参与者和用户都可以在规范框架内进行设计，开发和使用，那么样式指南就是有意义的。

既然我们想设计一个样式指南，它应包含哪些信息？如何确保其他人遵守其标准并使设计和体验保持一致？我们今天来谈谈这个话题。

品牌概述

如果你从未做过风格指南，那么从头开始创建一个完整的风格指南肯定是很多工作。众所周知，新手可以找到您喜欢的样式指南作为参考模板。—— MailChimp的风格指南非常好，也符合CC许可证。

大多数风格指南由两部分组成：

·文案规范

·视觉指南

“守则”的两个部分同样重要，贯穿整个风格指南。通过将不同元素集成在一起，您可以建立具有足够认可度的品牌形象。每个品牌和网站实际上都是不同的。当您准备为文本和视觉选择颜色和样式时，您和您的用户也应该在整个系统中考虑。

在进行品牌识别的过程中，用户和兴趣都包含在思考中。品牌的当前设计是他们想要的，是他们所期望的吗？你是否考虑过所有因素？用户是否有与他们互动的愿望？

语气和语调

来源：Mailc

虽然视觉指南占很大比例，但副本中的色调和色调也非常重要。它们是品牌“身份”的一部分，网站，它决定了与用户沟通的方式，是正式的还是随意的，是冗长而准确的，还是直截了当的？

您的样式指南应与网站的副本和样式一致。这将使您的团队更清晰地了解设计，更清楚地了解演示文稿将如何影响品牌形象。

因此，与外界沟通的每一个词应该具有一致的语气和语调。回到MailChimp案例，如果你仔细观察，你会发现他们也试图通过语言建立一个独特的品牌形象。当他们在风格指南中提到他们的吉祥物时，他们说：“弗雷迪是我们的吉祥物。我们不会让他加入我们的LOGO，弗雷迪总是向右看，总是你眨眼。”

规则和用途

资料来源：Tamu

样式指南是您设计的“脚本”。 “脚本”是否比强调“规则”更贴心？

样式指南应概述应使用字体，颜色和样式的时间和位置，并以简单且移动的方式表达它们。这是清单：

·配色方案，包括每种颜色的特定参数和其他可接受的色调

字体和布局方案，包括每个部分的字体类型，大小，重量和用法

·LOGO，包括其样式，变化，尺寸和位置的描述

·拼写，关键词选择，复制方式（包括按钮，社交媒体等）

·图像使用规范，包括颜色，裁剪规则和视觉性能标准

·SEO信息，例如可选标签和关键字

·网格标准（主要用于网页布局和打印）

·空间和空白的描述（设计紧密度等）

·关键点的描述（团队成员可能要求或指出澄清的点）

简单而具体的概念

资料来源：Trello

下一步是输入关键链接。当您最终收集上述所有信息时，您需要将它们分解，重新组织它们，并将它们组织成简单，具体和可执行的概念。

·不要限制内容表达过多。毕竟这是一种风格指南，重点是视觉指导，设计是核心;

·将相关和链接的项目集成在一起以便快速指导：一页介绍颜色，另一种页面布局规范等;

·使用图片大小写来显示界面的外观，而不是简单地使用无聊的文字来介绍;

·提供具体的说明。例如，颜色方案提供颜色的RGB或CMYK的特定值，以确保颜色可以一致使用;

·分解设计案例的一部分，以确保每个元素的功能和使用规则足够清晰;

示例和代码段

资料来源：Handdy

无论您的风格指南是印刷的，电子的还是基于网络的，它都应包含可用的工具和材料。关键是用例，可以做什么以及禁止什么。您可以专注于品牌的视觉呈现。

然后，您可以将易于访问的部分放入列表中，并创建一个库，所有团队成员都可以根据使用频率访问该库。已知该库存储在本地，易于访问，并且随着项目的进展可以更新材料和文档。

之后，提供一系列基于云的软件列表（提供链接，登录信息等），将材料提交到云端，并包含相应的字体包，徽标，图片素材。这些文件和资料应合理组织，当其他成员访问时，他们可以根据组织逻辑找到相应的文件，工具或材料。 （本地，云和备份应以井井有条的方式组织）

在开发样式和特定功能时，您应该创建一个代码片段列表，以确保前端人员可以快速呼叫，特别是那些应该易于访问的共享位置中的每个人都可以访问和访问的公共部分。

后一点是要记住更新。确定文档和材料发生变化时，请确保本地和云文档和材料完整且即时更新。

风格指南的实施

资料来源：jquery

后一个问题终于到了。那么如何让人们遵循风格指南中的规则？如果您的风格指南设计得井井有条，清晰明了，那么这种风格至少在规则中有坚实的基础。

简单直接的语言使读者更容易理解和关注。像网站一样小心对待您的样式指南，使其可用且易于使用，以便用户无意识地遵循您的规则。

作为网站的样式指南，它本身并不是静态的。您应该为团队的其他成员留出足够的空间来改进，添加内容并确保其灵活性。同样，样式指南也应该有一个“管理员”，管理员可以使用它来批准更改，控制更改和协调整个系统。