Common Components
Components are previous generations' fixed answers to common problems. Know them all and your job is picking from a few mature options, not reinventing every time.
What you will run into
- 描述界面时只会说「加个框」「加个按钮」，做出来跟想的不一样
- 选了个不合适的组件，用户操作起来别扭但说不清哪里不对
- 同样的问题，产品里三个地方用了三种不同的组件
Know Components by the Problem
| 要解决的问题 | 可选的组件 |
|---|---|
| 从一组里选一个 | 单选、下拉选择、分段控件、单选卡片 |
| 从一组里选多个 | 复选框、标签多选、穿梭框 |
| 输入内容 | 单行输入、多行文本、富文本、数字步进、日期选择 |
| 内容太多装不下 | 分页、无限滚动、折叠面板、标签页 |
| 要展示一批数据 | 列表、表格、卡片网格、时间轴 |
| 补充信息不打断 | 抽屉、气泡、工具提示、内联展开 |
| 必须打断 | 模态弹窗、全屏确认页 |
| 告诉用户结果 | 轻提示、全局横幅、状态标签、进度条 |
| 多步任务 | 步骤条、向导、分段表单 |
| 找东西 | 搜索框、筛选器、排序、快捷入口 |
Easy to Get Wrong
- Dropdown or radio buttons. Under five options, use radio buttons—everything visible at a glance; over five, use a dropdown to save space. Over twenty, add search.
- Modal or drawer. If the user must decide now and the decision affects the main thread, use a modal; if it's supplementary info or a secondary edit, use a drawer—it doesn't interrupt the context.
- Pagination or infinite scroll. If users need to locate precisely or return to a specific page, use pagination; if they browse casually with no clear endpoint, use infinite scroll. Back-office systems should almost always paginate.
- Table or card. Many fields, comparison, sorting—use a table; few fields, with images, on mobile—use cards. Tables are basically unusable on phones.
- Stepper or one-page-to-the-end. If steps depend on each other or fields exceed ten, use a stepper; otherwise one page is faster.
Every Component Has States
A component isn't one static style, it's a set of states. Once you pick a component, work through these states together with it.
默认
悬停
按下
聚焦
不可点
处理中…
输入框还要多两个：报错态（红边框加提示文字）和只读态。列表要多四个：空、加载、出错、有数据。