常用组件有哪些 | 设计交互 | 做产品

常用组件有哪些

组件是前人对常见问题的固定答案。认得全，你的选择就是从几个成熟方案里挑一个，而不是每次从头想。

你会遇到的现象

• 描述界面时只会说「加个框」「加个按钮」，做出来跟想的不一样

• 选了个不合适的组件，用户操作起来别扭但说不清哪里不对

• 同样的问题，产品里三个地方用了三种不同的组件

按问题认组件

要解决的问题可选的组件 从一组里选一个单选、下拉选择、分段控件、单选卡片 从一组里选多个复选框、标签多选、穿梭框 输入内容单行输入、多行文本、富文本、数字步进、日期选择 内容太多装不下分页、无限滚动、折叠面板、标签页 要展示一批数据列表、表格、卡片网格、时间轴 补充信息不打断抽屉、气泡、工具提示、内联展开 必须打断模态弹窗、全屏确认页 告诉用户结果轻提示、全局横幅、状态标签、进度条 多步任务步骤条、向导、分段表单 找东西搜索框、筛选器、排序、快捷入口

按问题记比按名字记有用。真正要练的是看到一个需求，能立刻说出「这是从一组里选一个的问题」。

几组容易选错的

• **下拉还是单选按钮。**选项少于五个用单选按钮，一眼全看见；多于五个用下拉，省空间。超过二十个要加搜索。

• **弹窗还是抽屉。**需要用户立刻做决定、且决定影响主流程，用弹窗；只是补充信息或做次要编辑，用抽屉——它不打断上下文。

• **分页还是无限滚动。**需要精确定位、需要回到某一页，用分页；随便浏览、没有明确终点，用无限滚动。后台系统几乎都该用分页。

• **表格还是卡片。**字段多、要对比、要排序，用表格；字段少、有图、移动端，用卡片。表格在手机上基本不可用。

• **步骤条还是一页到底。**步骤之间有依赖、或者字段超过十个，用步骤条；否则一页填完更快。

几组容易选错的，判断线其实都很硬

从一组里选一个

单选按钮

下拉

下拉 ＋ 搜索 少于 5 个，一眼全看见 5 到 20 个，省空间 超过 20 个

要立刻做决定吗

是 → 弹窗，打断主流程

否 → 抽屉，不打断上下文

要精确定位吗

是 → 分页（后台几乎都该用）

否 → 无限滚动，随便浏览

字段多且要对比吗

是 → 表格

否 → 卡片（移动端必然）

按问题记比按名字记有用——真正要练的是看到一个需求，能立刻说出「这是从一组里选一个的问题」。 组件不是一个静态样式，是一组状态。AI 生成的组件里，disabled 和 focus 是最容易缺的两个。

「聚焦」这个状态最常被漏掉，而它决定了键盘用户能不能用你的产品。选定组件之后，默认、悬停、按下、聚焦、不可点、处理中这六个要一并想清楚——输入框还要多加报错态和只读态。

每个组件都有状态

组件不是一个静态样式，是一组状态。选定组件之后，这几个状态要一并想清楚。

默认 悬停 按下 聚焦 不可点 处理中…

输入框还要多两个：报错态（红边框加提示文字）和只读态。列表要多四个：空、加载、出错、有数据。

「聚焦」这一个最常被漏掉，它决定了键盘用户能不能用你的产品。AI 生成的组件里，disabled 和 focus 是最容易缺的两个。

接着看

交互管的是行为 选定组件之后，还要说清它的字符限制、操作结果和必填规则，那七类注释缺一不可。

四态齐全 列表类组件的四种状态。选了组件不等于状态齐了。

先定组件后拼页 组件认全了之后，下一步是把常用的那十几个定成自己的一套，页面才不会各处长得不一样。