EN
AR
RU
ZH
FR
ES
2025年3月8日 • 作者 KWD
确保团队在设计网站的不同部分或保存开发人员的设计时步调一致的方法之一是创建 设计文档 或 网页设计风格指南。
拥有风格指南有利于在不同页面之间创建统一的体验。此外，它有助于确保未来开发或第三方生产将遵循品牌指南，并将被视为整体 品牌的一部分。
什么是风格指南？
风格指南是预先设计的元素、图形和规则的集合，设计人员或开发人员应该遵循这些内容，以确保网站的各个部分保持一致，最终创建统一的体验。
Airbnb UI工具包 –网络由 Derek Bradley
为什么重要？
当多个设计人员在大型网站或网络应用上工作时，确保他们不会过度解读，不会根据个人偏好改变或调整风格是极其重要的。在开发中，定义网站元素使开发人员能够轻松地重用这些元素。而且，这样做会更容易，因为他们会知道必须编码哪些元素，并从一开始就看到它们的外观。
为了让开发人员的工作更轻松，设计人员的职责是包括所有可能的交互，例如按钮、标题、链接等的悬停、点击、访问和其他状态。
创建网页设计风格指南
1. 研究品牌
首先，您需要研究品牌，以便了解它代表什么。了解品牌背后的故事，观察团队并找出公司的愿景、使命和价值观。深入研究品牌很重要，这样您创建的风格指南将在视觉和情感上代表该组织。
如果您是不会编码的设计师，只需打开 Photoshop 并为您的文档提供标题和简短描述，说明该文档是什么及其用途。
如果您会编码，最好创建一个带有预编码资产的 HTML 文档，以便轻松重用。
2. 定义排版
根据 Oliver Reichenstein 的说法，排版占网页设计的 95%。
您必须正确处理排版，因为它是访问者和您的网站之间最重要的交流工具之一。
设定层级并识别它。有标题类型：h1、h2、h3、h4、h5 和 h6。
然后检查正文副本、粗体和斜体变体的标签。考虑将用于较小链接、介绍文本等的自定义副本。提供字体系列、粗细和颜色。
风格指南 by Zech Nelson
3. 色彩调色板
人类感知颜色和将色调与已知品牌联系起来的方式令人惊叹。想一想可口可乐，我敢打赌您现在看到那红色了。
首先为风格指南设置主要颜色，这些颜色将主导您的网站。主导色应包括不超过三种色调。但是，在某些情况下，您需要次要色甚至三级色来说明用户界面，确保您也定义了它们。同时包括白色、灰色和黑色等中性颜色，使主要品牌颜色脱颖而出。
Guest Center 色彩调色板 by Chloe Park
4. 声音
我所指的声音是实际的文案。在开始风格指南之前，您已经研究了品牌，并发现该品牌年轻而时尚。如果没有针对文案声音的指导，您必须定义它。它可以是一个简单的示例，显示声音必须既专业又有趣且亲切。与其说"您遇到 404 错误"，不如说"哦天哪，您破坏了互联网。404 错误。"如果声音更加企业化，您就不会这样做。卓越之处在于细节。
5. 图标
图标已经存在了数千年，比文字和单词更古老。利用在项目中使用图标的优势，因为它们会立即告诉访问者发生了什么以及接下来会发生什么。选择正确的图标将比色彩调色板、文案或图形为内容提供更多背景。使用图标时，请务必考虑目标受众、宗教、历史，以避免误解。还有一点要提及，请考虑品牌及其价值，这样您就不会在大型银行网站上使用手绘图标。
Iconfinder 是为您的项目查找超棒图标的绝佳工具。
NounProject 正在构建任何人都能理解的视觉图标语言
6. 图像
图片胜过千言万语。确保包括定义网站应使用的图片风格和方向的图像。再次考虑品牌的价值观和使命。例如，一个水利慈善机构使用具有强烈情感的令人印象深刻的图像、良好的事业，并呼吁人类情感，使他们庆幸拥有水、食物、电力和教育等基本生活必需品。
一些获取免费图像的优秀网站：查找最佳免费库存照片的 16 个地方。
7. 表单
表单是使您的网站或网络应用交互式和动态的因素，用户可以输入数据，然后您可以操作它并完成工作。
确保建立层级并包括来自表单的可能反馈——活跃、悬停、添加错误、警告和成功消息，包括诸如密码太弱、电子邮件无效或简单成功消息（如"电子邮件已发送"）之类的内容。
8. 按钮
按钮是色彩调色板、表单和声音的混合。依靠这些先前创建的资产来创建一致的外观和功能的按钮，具有不同的状态设计。
9. 间距
间距如何能在风格指南中？提及间距是极其重要的。它可以采用用于布局的网格形式；它可以是标题、按钮、图像、表单和其他元素之间的间距。
正确处理间距很重要，因为它为元素提供了更多的呼吸空间，一致的使用会使您的工作看起来结构化和专业。
10. 应该做和不应该做
最后但同样重要的是：制作"应该做"和"不应该做"部分，就像常见问题解答一样，展示最常见的陷阱，并给出事物应该如何看起来和工作的示例。
示例
以下是一些最好的风格指南示例，可在创建自己的风格指南时用作灵感。请记住，这些指南受到组织设置、其愿景、使命和价值观的高度影响，一些决定可能与您所做的工作无关或不合逻辑，所以不要盲目遵循那里所做的事情。
Spotify – 合作伙伴品牌指南 (PDF)
Dropbox 品牌和徽标
Kickstarter 风格指南
Lonely Planet 设计指南
查找指南 – 查找品牌资产的最快方式
结论
您必须研究您为其创建风格指南的品牌，确保正确处理设计的不同部分，并确保风格指南保持一致并包括将设计转换为可工作产品时的所有可能场景。
