组件设计

组件不只是"长得像"——它还要定义怎么动、有几个状态、有哪些变体。只定义长相的组件，好看，但拼不进系统里。学会把组件定义完整，你就从"画界面"迈进了"建系统"。

为什么只定义"长相"的组件中看不中用

你已经会做组件了：把按钮做成母版，改一处所有副本一起变。这时你手上有了一堆"长得像的组件"——按钮、气泡、列表项、头像。但用起来会发现差了口气：按钮按下去应该变什么？没人定义。联系发不出去时，按钮该是什么样？没人定义。同一个"发送"按钮，在不同页面该有大号/小号吗？没人定义。

结果每个页面临时发挥：这个按钮按下变灰、那个变蓝，同一个组件在不同地方行为不一致。看着像一套，用着是各干各的。关键就在这里——只定义"长相"的组件，是半个组件。

组件 = 四件事共同定义的完整单元

构成	是什么	微信里的例子
视觉样式	颜色、圆角、字号、间距	绿色发送按钮的圆角、绿色
行为 Behavior	点击、悬停、拖动时怎么响应	点"发送"→ 消息发出、输入框清空
状态 State	normal / pressed / disabled	没输入时发送按钮是灰的（disabled）
变体 Variant	大小、主题、实心/描边	大按钮 / 小按钮、绿色 / 描边按钮

组件是一个可复用的界面单元，但它不是"长得像"三个字能概括的，而是由四件事共同定义：视觉样式（长什么样）、行为（点了怎么样）、状态（不同处境怎么样）、变体（不同场合怎么样）。缺了任何一格，组件换个场合就散架。

组件 = 视觉样式 + 行为 + 状态 + 变体，四格缺一不可。

设计四原则：克制、单一、可复用、可组合

组件设计有四条原则，前两条是"少"，后两条是"用"：一个组件一个职责（一个按钮只干"触发一个动作"一件事）——单一；可复用（能被多处、多场景反复用，而不是给某页面特供）；可组合（小组件能拼成大组件，头像 + 名字 + 一句话 = 一个列表项）；克制（组件不是越多越好）。

关键澄清：组件越多越好是错的。每多一个组件，就多一份维护、学名、判断"该用哪个"的负担。少而精确，才是系统。

四原则：一个职责 · 可复用 · 可组合 · 克制。

行为 Behavior：组件怎么回应操作

行为定义用户操作组件时，组件怎么回应——这是"画界面"最容易漏掉的一格。点击主按钮 → 执行动作（发送、保存、确认）；悬停（桌面端）→ 有反馈（变色、浮起）；拖动 → 跟随手指、到边界弹性回弹。

原理：反馈必须即时且可预期。用户点了，界面要在 100ms 内给他"我收到了"的信号，否则他觉得卡、觉得按错了。微信点"发送"，气泡立刻出现在自己一侧、输入框清空——动作 + 反馈一气呵成，用户不需要想"成功了吗"。

反馈应在 100ms 内给出，否则用户会觉得卡、觉得按错了。

状态 State：不同处境下的样子

微信输入框空着时，"发送"按钮是灰色禁用态；一打字，按钮变绿可点——这个状态切换，就是组件状态设计的教科书案例。

状态是用户的处境，不是设计者的喜好。常见三种：normal 常态（可用可点，正常颜色）、pressed 按下（手指正按着，变深/下沉，给"点到了"的反馈）、disabled 禁用（暂不可用，变灰变淡，看起来"点不了"）。

三种状态：normal（常态）/ pressed（按下）/ disabled（禁用）。

变体 Variant：不同场合下的换装

变体是同一组件，不同尺寸 / 主题 / 风格，共用同一套行为与状态。大小：大按钮（主操作）/ 小按钮（次要）；主题：浅色 / 深色模式下的配色；风格：实心（主）/ 描边（次）。

原理：变体要在同一个组件里切换，而不是再复制一份。这样"换装"不破坏"同步"——改母版，大小号一起变。微信同一个"气泡"，单聊更宽、群聊略窄，但圆角、颜色、状态逻辑完全一致——只是变体不同。

变体三场景：大小 · 主题 · 风格；变体在同一组件内切换，改母版仍全局同步。

实例：设计微信"发送按钮"组件

把前面四格串起来，设计一个规范组件：视觉样式 = 绿色实心、圆角、白字；行为 = 点击发送消息、清空输入框；状态 = normal（绿）/ pressed（按下变深）/ disabled（灰，空输入时）；变体 = 大号（聊天输入框旁）/ 小号（快速回复）。

设计完，微信里每一个"发送"场景都从这一个组件拖出来。改组件 → 全局同步；定义清楚 → 全局一致。这就是"建系统"。

微信发送按钮：绿底实心 · 点击发送并清空 · 三状态 · 大小两变体。

深度

原理：为什么"建系统"比"画界面"重要？ 画界面是一次性的：每个页面各画各的界面，好看但会漂移——这个页面按钮宽一点、那个页面绿深一点。建系统是把"随手画的元素"升级成规范组件：统一视觉、行为、状态、变体。从此任何页面拖出来都是同一套，改母版全平台同步。微信打开就是一座组件库：气泡（绿/白两种，标题 + 一行内容 + 时间戳）、列表项（设置页一行一行，图标 + 文字 + 右箭头）、名片（头像 + 昵称 + 签名）、按钮（主操作绿实心 / 次操作描边 / 发不出去禁用）、头像（圆形图片，聊天列表、群聊、名片到处用同一个）。设计系统的任务，就是把它们全部升级成规范组件。

边界一：状态不是越多越好。 加一个状态，就要在所有场景定义清楚、全都长一样。少而一致的状态，胜过一堆定义不清的状态——否则组件库会变成字典都没有的状态沼泽。

边界二：变体 ≠ 复制一份。 变体应在同一个组件里切换（知识点 14 的组件属性），而不是复制出新组件。复制的"变体"不再是变体，它们会各自漂移、失去同步。

与后续衔接。 组件的状态怎么正式命名、怎么形成统一清单 → 知识点 24 展开；组件依赖的颜色、字号、间距怎么抽象成 Token → 知识点 23 展开。本知识点先讲组件设计本身：一个组件该被定义成什么样。

误区

误解	正解
组件 = 长得像就行	组件要完整定义视觉 + 行为 + 状态 + 变体，缺一不可
组件越多越高级	组件越多维护和选择负担越大；克制、少而精确才是系统
状态是设计可选	状态是处境：normal / pressed / disabled 要在所有场景定义一致
变体就是再复制一份	变体应在同一组件里切换（改母版仍同步），不是复制新组件
组件只在画图时用	组件是设计系统的心脏，从"画界面"到"建系统"全靠它

练习

即时题 Q1：一个完整组件由哪四格构成？（答案：视觉样式 + 行为 + 状态 + 变体——长得怎样、点了怎样、不同处境怎样、不同场合怎样。）

Q2：微信"发送"按钮在输入框空着时是灰色，这属于组件的哪一格？（答案：状态，disabled 禁用态——它定义的是"不同处境下的样子"。）

Q3："组件越多越好"对不对？为什么？（答案：不对。组件越多，维护、命名、选择判断的负担越大。克制、少而精确才是系统。）

Q4：大号按钮和小号按钮是"两个组件"还是"一个组件的两个变体"？（答案：一个组件的两个变体（大小变体）。变体共用视觉/行为/状态，改母版仍全局同步。）

模块题 描述一下：微信底部 Tab 栏，如果把它设计成规范组件，四格分别是什么？请写一段话。（参考：把 Tab 栏定义成一个组件。视觉样式 = 图标 + 文字 + 底部选中色条，统一间距与字号；行为 = 点击切换页面、选中时图标变绿；状态 = 未选中灰 / 选中绿 / 无权限入口置灰；变体 = 标准尺寸（底部）/ 紧凑型（某些子页）。四个 Tab（微信/通讯录/发现/我）都是这一个组件的实例，改组件（比如换选中色）全 App 一起变——这就把"界面"升级成了"系统"。）

迷你案例：收敛 30 个按钮 一家 App 把"按钮"做成了 30 个互相独立的样式，每个页面各画各的。请用组件设计原则给一份"收敛方案"。

现状：① 按钮重复定义，大号/小号各复制一份，互不同步；② 按下、禁用长什么样没人定义，各页面随缘；③ 团队觉得"样式多 = 功能全"，还在不停加新按钮。

修正参考：① 收敛成 1 个按钮组件，唯一视觉样式 + 大/小号两个变体（不再复制）→ 复用原则；② 定义 3 个状态 normal / pressed / disabled，全 App 一处定义、处处同步 → 完整构成；③ 新按钮先问"能不能用现有组件 + 变体"表达，只有确实表达不了才新增 → 克制原则。

改完，30 个各画各的按钮 → 1 个组件 + 2 个变体 + 3 个状态，从"画界面"变成"建系统"。

素材

• 搜 "Design System components 定义"——组件库方法论，行为/状态/变体的标准框架。
• 搜 "Component states UI design"——normal / hover / pressed / disabled 状态规范图解。
• 搜 "What is a component variant"——Figma / Penpot 组件变体机制。
• 微信实际使用：边用边数——气泡、列表项、名片、按钮、头像，各自的行为、状态、变体是什么。
• 后续衔接：本知识点（组件设计）→ 23 Design Tokens（组件依赖的色/字/间距抽象为 Token）→ 24 组件状态与命名（状态正式命名、形成统一清单）。

---