网站内容设计(如何创建一个网页设计风格指南时间了解它们实际上)

　　网站内容设计(如何创建一个网页设计风格指南时间了解它们实际上)

　　如果你有一个网站需要经常更新，很多人会参与维护或更新，那么有一个合适的网页设计风格指南是个好主意。这有助于确保处理您的 网站 的每个人都是相似的，并学习如何使它们看起来一致。但是什么是网页设计风格指南？它需要什么？你如何为自己创造一个？这些就是我们现在要回答的问题。

　　什么是网页设计风格指南？

　　在我们详细介绍如何创建样式指南之前，让我们花点时间了解它们的实际含义。网站Design Style Guide 是 网站 上的一个页面，它在 网站 的其余部分中概述了有关创建新页面或博客文章 所需了解的所有内容。这包括品牌图形、徽标、字体和字体大小、文本和背景颜色，以及与网站更新和内容创建相关的任何其他内容。

　　当您的 网站 上有多个设计人员或开发人员时，这一点尤其重要。这样可以确保每个人都在同一页面上。此外，它实际上简化了开发，因为您可以参考此样式指南来更快、更高效地创建新内容。

　　如何创建网页设计风格指南

　　以下是为自己创建网页设计风格指南所需的步骤：

　　1.熟悉自己的品牌

　　无论您是为自己的网站 还是其他人的网站 创建风格指南，同样的原则仍然适用：您需要花时间评估品牌的含义。这意味着，了解您的目标受众，了解您公司的价值观，并对如何以视觉方式呈现它有一个扎实的想法。如果公司过去曾对某些设计进行过 A/B 测试，那么现在是时候使用这些信息来创建更强大、更有效的风格指南了。

　　2.选择一种颜色

　　当你评估一个品牌时，你需要考虑颜色。如果公司已经有调色板，他们会选择 - 完美。在样式指南中添加颜色的十六进制代码。确保将此信息分为文本、链接、悬停链接、背景、按钮等类别。明确应在何处使用哪种颜色。

　　3.选择和识别字体

　　除了颜色，你还需要弄清楚应该使用什么字体（以及在哪里）。在您的网页设计风格指南中，清楚地识别字体名称、大小和行高。这使得未来的设计师可以非常轻松地重新创建 网站 的正确外观。更好的方法是创建一个 Photoshop 模板，将这些元素设置为预设，或在文件本身中标识为注释。

　　您应该尽一切可能消除这里的猜测。

　　4.创建内容网格

　　您应该添加到您的网页设计风格指南的另一件事是创建内容网格。这是确定页面和博客的 文章 布局的最佳方式。显示图片和图形应放置在文本中的位置。你真的需要这个来了解你的内容应该如何间隔。

　　其中一些现在可以通过博客和页面模板实现。即便如此，将这些信息收录在您的风格指南中仍然是一个好主意。

　　5.合影规格

　　您可以做的另一件事是设置照片规格。比如很多网站对博客文章中的图片应用滤镜或者效果。因此，如果您想确保管理您的 网站 内容的人员知道如何使所有内容保持一致，您需要在您的 网站 设计风格指南中指出这些细节。

　　确定每个图像应遵循的规范，包括图像的高度、宽度、颜色过滤器、不透明度以及是否应添加文本。如果您想在图形中收录文本，请务必同时收录字体、样式、大小和颜色规范（如上所述）。

　　6.识别规范

　　我们在这里讨论的最后一件事是您的指南绝对必须收录有关徽标的信息。徽标可能是您品牌和 网站 中最知名的部分，因此在这里讨论它很重要。

　　徽标规范要求包括最小尺寸和各种不同的徽标样式。对于小空间，您应该有一个文本选项和一个图形选项。带有标语的徽标对于较大尺寸的选项也是一个好主意。

　　您还应该提供具有不同背景的徽标，包括透明的。这样，无论它位于什么背景，您的徽标都会看起来不错。这些标识选项中的每一个都应收录在样式指南页面中，以便可以快速访问和引用它们。

　　10 个很好的网页设计风格指南示例

　　既然我们已经介绍了您的 网站 设计风格指南中应该收录的内容，让我们看一些真正擅长展示这些指南的外观和外观的示例。

　　材料.io

　　Material.io 风格指南很全面，分解了 网站 的各个方面。它包括有关主题、图标、调色板、排版、形状甚至声音的信息。

　　丰收路网站设计

　　邮件黑猩猩

　　MailChimp 样式指南非常简单明了，这正是您应该追求的。它包括屏幕左侧的菜单选项，您可以从中进行选择，包括颜色、数据可视化、网格、类型、按钮、对话框等。

　　孤独星球

　　Lonely Planet 提供了另一个很棒的网页设计风格指南。它突出显示了调色板、图标、UI 组件、JS 组件、小部件和 CSS 实用程序。

　　丰收路网页设计

　　USWDS：美国网页设计系统

　　美国网页设计系统也提供了很好的风格参考指南。它包括为大多数政府创建页面的详细信息网站，包括实用程序、页面模板等。

　　丰收之路网站优化

　　Yelp 格式指南

　　Yelp 的风格指南更为相关。它提供了清晰的排版信息、颜色、布局信息、链接、按钮、导航选项等，使在 Yelp 上工作的人更容易制作页面和更新内容。

　　丰收路出品网站

　　A11Y 风格指南

　　您可能想要参考的另一个风格指南是由 A11Y 整理的。本指南收录有关如何格式化卡片、表单、媒体、导航的信息，并提供了一些其他资源。

　　巴纳德·莱维特验光师

　　Barnard Levit Optometrists 有一个超级简单的网页设计风格指南，可以完成这项工作。它提供了完整的印刷细节，包括标题、列和项目符号，以及有关如何格式化表格、表单和按钮的信息。此外，它还涵盖了如何处理图像、视频和 网站 的许多其他方面。

　　Ben Brignell 的格式指南

　　Ben Brignell 的风格指南非常美观。它提供有关公司颜色（十六进制代码）、排版、块引用、项目符号、按钮、链接、视频、图像等的信息。

　　线性设计系统

　　另一个很好的例子是线性设计系统 网站 的风格指南。它包括此处列出的所有其他样式指南所涵盖的所有内容，但添加了用于模式、通知和额外指标的选项卡。

　　停火俄勒冈

　　最后一个是停火俄勒冈。这是另一个非常简单的风格指南，但不要让它看起来像是在欺骗你——它非常全面。本指南涵盖样式表、颜色、网格、实用程序、图标、徽标、标题信息等。

　　使用此信息创建网页设计风格指南

　　既然您知道什么是网页设计风格指南，那么您就知道为什么需要它了。您已经学会了如何将它们组合在一起，并且您已经看到了当前网络上的一些最佳示例。现在是时候把这些信息变成实用的东西了，如果你的 网站 缺少风格指南，是时候把它们放在一起了。返回搜狐，查看更多