设计系统不一定是由庞大团队维护的厚重文档。对于小型网站,它可以只是一组明确的决定,避免同一个问题在每页被不同处理。关键不是企业够不够大,而是一致性是否能减少工作、帮助访客。

从重复的决定开始

找出多次出现的元素:按钮、标题、表单、间距、页面宽度和导航。先统一这些元素,再打磨单独页面。少量可复用规则,就能让以后修改更加稳妥。

例如,主要操作在一页是蓝色,在另一页是黑色,到第三页又成了普通链接,用户就得重新理解界面。变化可以有合理原因,但应该来自有意选择,而不是偶然。

不仅规定外观,也规定行为

按钮不只是矩形加标签。还需要明确焦点、加载中、禁用和出错后的表现。输入框需要标签、必要说明,以及告诉用户如何修正问题的反馈。

这些行为应适用于不同操作方式。漂亮的悬停效果不能代替可见的键盘焦点。可复用组件应该让无障碍成为默认路径,而不是事后补加的版本。

让内容也有规则

为标题、操作标签、日期、价格和错误信息建立简单约定。选择用户匆忙时也能理解的表达。相同类型的操作,在整个网站中应有容易识别的名称。

多语言网站要在固定布局前测试较长标签。灵活的按钮或卡片,比只适合一句话的组件更有用。说明哪些部分允许变化,哪些需要保持一致。

保持小而实用

从网站真正需要的元素开始。有实际页面需求时,再增加新模式并记录原因。几十种从未使用的变体,可能让决策更多而不是更少。

最终成果可以只是一页参考说明和代码中的少量组件。只要下一位参与者能不用猜测地增加页面,就已经有用。设计系统的价值来自日常使用,而不是展示规模。

开始之前

  • 先找重复元素,再创建新模式。
  • 规定加载、错误、焦点和禁用状态。
  • 记录少量清楚的内容约定。
  • 根据真实需求逐步扩展。
开始你的项目 ↗