常用组件有哪些
组件是前人对常见问题的固定答案。认得全，你的选择就是从几个成熟方案里挑一个，而不是每次从头想。
你会遇到的现象
- 描述界面时只会说「加个框」「加个按钮」，做出来跟想的不一样
- 选了个不合适的组件，用户操作起来别扭但说不清哪里不对
- 同样的问题，产品里三个地方用了三种不同的组件
按问题认组件
| 要解决的问题 | 可选的组件 |
|---|---|
| 从一组里选一个 | 单选、下拉选择、分段控件、单选卡片 |
| 从一组里选多个 | 复选框、标签多选、穿梭框 |
| 输入内容 | 单行输入、多行文本、富文本、数字步进、日期选择 |
| 内容太多装不下 | 分页、无限滚动、折叠面板、标签页 |
| 要展示一批数据 | 列表、表格、卡片网格、时间轴 |
| 补充信息不打断 | 抽屉、气泡、工具提示、内联展开 |
| 必须打断 | 模态弹窗、全屏确认页 |
| 告诉用户结果 | 轻提示、全局横幅、状态标签、进度条 |
| 多步任务 | 步骤条、向导、分段表单 |
| 找东西 | 搜索框、筛选器、排序、快捷入口 |
几组容易选错的
- 下拉还是单选按钮。选项少于五个用单选按钮，一眼全看见；多于五个用下拉，省空间。超过二十个要加搜索。
- 弹窗还是抽屉。需要用户立刻做决定、且决定影响主流程，用弹窗；只是补充信息或做次要编辑，用抽屉——它不打断上下文。
- 分页还是无限滚动。需要精确定位、需要回到某一页，用分页；随便浏览、没有明确终点，用无限滚动。后台系统几乎都该用分页。
- 表格还是卡片。字段多、要对比、要排序，用表格；字段少、有图、移动端，用卡片。表格在手机上基本不可用。
- 步骤条还是一页到底。步骤之间有依赖、或者字段超过十个，用步骤条；否则一页填完更快。
每个组件都有状态
组件不是一个静态样式，是一组状态。选定组件之后，这几个状态要一并想清楚。
默认
悬停
按下
聚焦
不可点
处理中…
输入框还要多两个：报错态（红边框加提示文字）和只读态。列表要多四个：空、加载、出错、有数据。