如何制作专业网页样式指南？

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

既然我们要设计一个样式指南，它应该包含哪些信息？如何确保其他人能够遵循其标准，并保持设计和经验的一致性？我们今天来谈谈。

如果你从来没有做过一个风格指南，从头开始创建一整套风格指南是一个真正的麻烦。

大多数样式指南由两部分组成：

代码的两部分实际上同等重要，贯穿整个样式指南。不同元素的融合可以在足够的认知度下塑造品牌形象，每个品牌和网站实际上都会有所不同。当你准备好为你的文本和视觉选择颜色和样式时，你和你的用户也应该在整个系统中被考虑。

在进行品牌识别时，我们应该考虑用户和利益相关者。目前的品牌设计是他们想要和期望的吗？是否考虑了所有因素？用户是否有与之互动的欲望？

尽管视觉风格引导占了比例，但文本中的语调和语调也非常重要。它们是品牌和网站“身份”的一部分。它们决定了与用户交流的方式。它们是正式的还是随意的，冗长而准确的，还是直截了当而清晰的？

你的风格指南应该与网站的文案和风格一致。这使您的团队对设计有更清晰的预期，并更清楚地了解展示对品牌形象的影响。

因此，你能与外界交流的每一个字都应该保持同样的语调。如果你回到MailChimp的案例，如果你仔细阅读，他们也会试图通过语言建立一个独到的品牌形象。当他们在时尚指南中提到他们的吉祥物时，他们说：“弗雷迪是我们的吉祥物。我们不会让他和我们的标志结合在一起。弗雷迪总是看着你，对你眨眼。”

风格指南是你设计的“脚本”。“剧本”比强调“规则”更贴心吗？

风格指南应分别列出何时何地使用何种字体、颜色和风格，并以简洁、灵活的方式表达出来。下面是一个列表：

·配色方案，包括每种颜色的具体参数，以及其他可接受的颜色

·字体和排版方案，包括字体类型、大小、重量和各部分的具体用途

·标志，包括其样式、变化、尺寸和位置说明

·拼写、关键字选择、文案风格（包括按钮、社交媒体等）

·图片使用标准，包括颜色、切割规则和视觉性能标准

·空间和空白说明（设计严密性等）

·关键点描述（团队成员可能提出的问题或需要澄清的要点）

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

·在内容表达上不要限制太多，这毕竟是风格导向，关键是视觉导向，设计是核心；

·将相关及相关项目整合在一起，快速引导：一页介绍颜色，另一页制作版面规格等；

·用图片和案例展示界面的外观，而不是仅仅用枯燥的文字做介绍；

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

·对部分设计案例进行分解和说明，确保各元素的功能和使用规则足够清晰；

无论您的样式指南是打印的、电子的还是基于web的文档，它都应该包含可用的工具和材料。关键是用例，可以做什么和禁止什么。你可以专注于品牌的视觉表现。

然后，可以列出易于访问的零件列表，并创建一个所有团队成员都可以根据使用频率访问的材料库。为了便于访问，将此材料库存储在本地，并且可以随着项目的进展更新其中的材料和文档。

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

当涉及到样式和特定功能的开发时，应该创建一个代码片段列表，以确保前端人员能够快速调用，特别是那些常见的部分，它们应该位于每个人都可以访问和调用的易访问的共享位置。

但并非不重要的是，记得更新。当文件和资料确定需要更改时，确保本地和云文件和资料得到完整及时的更新。

一个问题终于来了。那么，我们如何让人们遵循风格指南中的规则呢？如果你的风格指南组织得很好，概念清晰，需求清晰，组织清晰，那么这种风格至少在规则上有坚实的基础。

简单明了的语言可以使读者更容易理解和关注。只有认真对待你的风格指南，就像设计一个网站，它才能使用和容易使用。这样，用户就会不自觉地遵循你的规则。

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