说说设计体系、风格指南和模式库

目录

一、定义

二、设计体系

2.1?Design system

2.2 风格指南

2.3?Component

三、样式库

---

一、定义

设计体系（Design system）：可共享的设计语言的基础合集，包含了设计价值，语义，语法和上下文。

风格指南（Style guide）：包含一个设计体系的样式，组件，实例和原则的物理或数字文档，并解释如何使用。

样式库（Pattern library）：有组织的一组可复用的组件，通常会包含代码实例，设计指南和用例。

组件（Component）：一个独立且可复用的样式，代表了一个特定界面或功能。

二、设计体系

2.1?Design system

Design system是一种可重用的设计规范和组件库，可帮助设计师和开发人员在一致的视觉和交互模式下构建高质量的数字产品。它是一套设计、开发、文档和管理工具的集合，可以为跨团队和项目提供一致的品牌体验和用户体验。它通常包括设计原则、颜色、字体、排版、图标、组件、模板、样式指南、交互模式和代码库等内容。通过使用设计系统，团队可以更快地构建产品，减少设计错误，提高一致性和可维护性，并节省时间和资源。

设计体系是团队中共享的语言，而语言的核心是保证系统的交流顺畅。编程语言使人们可以和计算机进行交流，平时说的语言可以让人们与讲同样语言的任何人沟通。而设计语言为你团队的设计思想赋予意义，并帮助团队之间传达这种意义。当使用一种共享的语言时，交流想法就会统一和具体，从而更容易。

即使当你还没有建立设计体系的时候，你的团队也在使用它。想想你是如何传达设计理念的，某些词定义了某种界面元素的类型，某些组件应该在外观和交互上不相同。甚至不需要刻意去将它写成文档，你们都有一个关于事情如何工作的共同假设。当然，如果没有文档，假设可能并不总是一致。

为了保证你的设计语言更加一致和明确，你的团队应该创建一个风格指南（Style guide）。

2.2 风格指南

Style guide（样式指南）是一个文档，其中包含了一个品牌或产品的视觉和声音方面的规范和指南。它通常包括标准化的规则和指导方针，用于确保品牌的一致性和统一性，以及为设计和写作提供支持。样式指南通常包括设计元素（例如颜色、字体、图标和图像）、排版和布局、品牌声音（例如用语、风格和声音标识）以及使用指南（例如品牌名称、标志和其他标识符）。样式指南的主要目的是确保品牌或产品在所有的渠道和媒体上都保持一致的外观、感觉和声音，从而提高品牌知名度和可识别性。

设计指南是设计系统的物理或数字呈现形式，通过参考设计风格指南，团队成员可以开始掌握定义系统的各个部分和决策。

在网络出现之前，风格指南主要用于定义书写和印刷设计的标准和样式，像AP Stylebook或Chicago Manual of Style这样的书仍然是写作者和编辑在大多数主要出版社如何保持一致性和定义最佳实践的基础资源。

如今，数字出版商和产品设计团队建立风格指南来帮助巩固他们团队的设计语言。风格指南帮助他们编纂已建立的规范，记录现有的模式和程序，并使新成员快速跟上进度。

数字设计的风格指南可以包含以下部分或全部：

• 设计原则（Design principles）
• 最佳实践（Best practices）
• 品牌风格指南（Brand style guide）
• 书写风格（Writing styles）
• 图标设计（Iconography）
• 图像（Imagery）
• 样式库（Pattern library）
• 代码风格指南（Code style guide）
• 模板（Templates）
• 工具（Tools & Utilities）
• 说明文档（Further documentation）

2.3?Component

Component（组件）是指一个可重复使用的、独立的、具有特定功能的UI元素。组件通常由HTML、CSS和JavaScript代码组成，可以通过简单的调用或复制粘贴来在不同的部分或页面中使用。组件的使用可以提高开发效率，同时也可以确保界面设计的一致性和可维护性。常见的组件包括按钮、表单、导航、卡片、对话框等。组件的开发方式可以基于不同的框架或库，例如React、Angular、Vue等，也可以使用纯原生的HTML、CSS和JavaScript进行开发。组件化的开发模式已成为现代Web开发的重要趋势之一，为Web应用和网站的开发提供了更好的可扩展性和可维护性。

三、样式库

正如上面看到的，样式库只是组成风格指南的一部分。它们可能在内容和使用方面构成了风格指南中最大的一部分，但不能代替整个风格指南。

在构建样式库时，你应该为添加的每个模式考虑以下问题:

• 模式名称：
• 视觉表现：
• 设计元素
• 代码示例
• 变形
• 用例
• 注意事项
• 相关元素