设计术语词典组件系统 / 设计术语词典
组件与状态：让同类元素遵循规则
组件让重复的设计有共同规则，状态说明规则在不同条件下如何表现。复制外观只能得到相似画面，还需要明确内容和行为。
词条定义
- 组件 Component
- 把一组结构、样式和行为组织为可重复使用的界面单元，例如按钮、输入框或活动卡片。
- 状态 State
- 组件在特定条件下呈现的情况，例如默认、聚焦、加载、禁用或错误。不同状态应对应真实条件。
一个具体例子
原创教学示例：展览卡片固定包含标题、日期与详情链接，图片则可以是可选字段。“含图片”和“纯文字”可作为结构变体；键盘焦点落到链接则是一个状态。如果活动详情尚未生成，不能画一个看似可点击却没有目标的入口来充数。
把两个概念分清
| 观察对象 | 描述什么 | 使用边界 |
|---|---|---|
| 变体 | 表示组件的一种结构或用途，例如主按钮与次按钮。 | 应有明确的使用条件。 |
| 状态 | 表示使用中的条件，例如聚焦或提交中。 | “提交成功”必须有真实结果支持，不能只是装饰标签。 |
怎样观察与修改
- 列出组件必须包含和允许省略的字段，例如标题必填、图注可选。
- 明确点击目标、键盘访问方式与需要显示的状态。
- 放入长标题、缺图片和错误信息，检查组件能否扩展而不互相遮挡。
- 记录规则：什么时候用哪种变体、什么条件触发状态、怎样回到可操作状态。
适用情景与限制
适用于多页网站、重复表单与产品界面。一次性的艺术排版可以更自由，但重复出现的操作仍需要让读者理解其一致含义。
动手练习
为一个“查看详情”链接写三行记录：目标地址是什么、键盘聚焦如何识别、标题很长时如何换行。确认这三项后，再考虑视觉细节。
常见问答
长得一样就算一个组件吗？
还要看结构与行为是否相同。卡片可以共用样式，但不同目标和规则应写清楚。
需要为所有想象中的状态作图吗？
先覆盖产品实际存在的条件。没有后端提交的阅读网站，不必制造加载和成功状态。