您网站的设计系统

设计系统是什么

设计系统是关于您网站外观和行为的单一真实来源——从按钮的颜色到间距的逻辑和表单的行为。最简单的方式是将其想象为三个相互连接的层——tokens, components 和 patterns——以设计师和开发人员都能理解的语言描述界面。

值得将设计系统与样式指南或UI工具包区分开。样式指南是一个快速过时的推荐文档。UI工具包是Figma中的一个模型库。设计系统将这些模型与真实代码连接起来：颜色或按钮的相同定义同时存在于设计和标记中，因此绘制方式与构建方式之间的差距显著缩小。

令牌、组件和模式

这三层像套娃一样工作——从最小的决策到最大的决策。

• Tokens是命名的设计值：颜色、字体大小、间距、角半径、阴影、动画持续时间。团队使用像color-primary这样的token，而不是像'blue #1A6DFF'这样的原始值。在一个地方更改token，整个网站都会更新。
• 组件是由令牌组装而成的界面构建块：按钮、输入字段、卡片、模态框、导航。每个组件都有状态（默认、悬停、聚焦、禁用、错误）和变体（主要、次要、破坏性）。
• 模式是解决重复任务的稳定方法：注册表单的外观、产品卡的结构、错误和空状态的显示方式。模式由组件构建，并在每个页面上提供可预测的行为。

在这些层之上，总是有文档：使用规则、示例和不示例，以及对特定决策做出解释的原因。

为什么这对商业很重要

设计系统解决了四个相互关联的业务需求。

• 一致性。相同的元素在每个页面上看起来和表现得完全相同。用户更快地学习网站，品牌感觉一致且值得信赖。
• 速度。新页面或部分是由现成组件组装而成，而不是从头绘制和编码。以前需要一周的工作现在只需几天。
• 规模。当多个设计师和开发人员在一个项目上工作时，系统可以防止他们的风格偏离。新团队成员依赖于文档化的规则，而不是猜测。
• 更便宜的更改。重新品牌、一个新的强调色、更新的排版——所有这些都在令牌级别进行编辑，并自动在整个网站上推出，无需手动重新处理数百个屏幕。

最后一点通常是投资回报的地方：产品生命周期越长，每一次单独的更改在没有系统的情况下就变得越昂贵。

何时需要一个，何时过于复杂

设计系统是一个工具，而不是一个目标。它并不总是有回报，一个诚实的合作伙伴会直接说出来。

当网站规模庞大且仍在增长时；当有几个人在上面工作时；当计划进行定期更新和新增部分时；当有多个产品或子域需要统一外观时；或者当即将进行品牌重塑或重新设计时，完整的设计系统是合理的。

当项目只是一个单一的着陆页或一个五到七页的小型宣传网站时；当它是一个不会发展的单次项目时；或者当预算和截止日期紧迫，目标仅仅是快速上线时，这就显得过于复杂。在这些情况下，一套轻量级的样式和几个可重用的模块就足够了——这仍然是一种系统化的方法，只是缩小了规模。

好消息是，系统可以逐步发展：从令牌和核心组件开始，然后随着项目的增长进行扩展，而无需一次性重建所有内容。

一个完成的系统内部包含什么

一个完成的设计系统不是一个文件，而是一组相互保持同步的工件。

• 设计工具中的一个库。通常是带有变量、样式和组件的Figma，设计师从中组装新的屏幕。
• 一个代码组件库。在标记中实现的相同按钮和卡片——使用纯HTML/CSS或项目所使用的任何框架。
• 一个令牌文件。一个单一的值源，理想情况下自动为设计和代码提供支持。
• 文档。实时组件示例、使用规则、可访问性原则和视觉语言的语调。
• 可访问性规则。对比度、点击目标大小和键盘行为——内置于组件中，而不是每次都手动检查。

这里的关键词是同步。只有当设计和代码保持为一个整体，而不是在发布几个月后逐渐分离时，系统才会有价值。

Ostohlo 如何构建设计系统

在Ostohlo，我们为特定项目构建设计系统，而不是从模板开始。这个过程通常分为几个步骤。

1. 审核。我们审查现有的屏幕，找出每个重复的元素以及颜色、字体和间距中的每个不一致之处。通常，仅此一步就能显示出网站的漏洞。
2. 令牌和基础。我们定义调色板、排版以及间距和半径的比例，然后将它们正式化为令牌。
3. 组件。我们构建核心组件集——按钮、字段、卡片、导航——以及它们的所有状态和变体。
4. 模式和页面。我们从组件中组装典型屏幕，并确认系统覆盖真实场景。
5. 文档和交接。我们描述规则并培训客户团队，以便系统在上线后继续运行。

我们将此过程与我们更广泛的界面设计方法联系起来 — 在关于的文章中有更多内容UX/UI设计过程。如果系统需要更新现有网站，重要的是不要失去进展 — 我们在关于的文章中讨论了这一点在不失去流量的情况下重新设计.

维护和常见错误

设计系统比维护更容易创建。我们看到一些典型的错误会削弱其价值。

• 孤立的系统。一个美丽的组件库没有人使用，因为它与产品的实际任务脱节。
• 设计和代码逐渐分离。在 Figma 中是一回事，在标记中又是另一回事。没有单一的令牌源，这几乎是不可避免的。
• 过度复杂。团队自己都迷失在数十种按钮变体中。一个好的系统是最小化的，涵盖真实的，而不是假设的案例。
• 没有负责人。一个没有人负责的系统在几个月内就会变得陈旧。

这就是为什么我们总是建立更新规则，并达成谁进行更改以及如何进行更改的共识。设计系统是一个活的产品，而不是驱动器上的一次性工件。

从哪里开始

如果你不确定你的项目是否需要一个完整的设计系统，还是只需要一套整洁的样式，这是一个合理的问题——最好用具体的数字和任务来回答，而不是抽象的方式。

看看我们的 服务 以了解我们的工作方式，然后 联系 — 我们将讨论您的项目，评估范围并提出适合任务的解决方案，而不强迫过度工程化。

常见问题