23 组 · 61 个术语
长得像、名字也像的术语放在一起看。每组先读区分要点，再对照各自适合和不适合的场景。
015 组对比
整块页面怎么排。先看内容是什么，再看用户要拿它做什么。
01 · 3 个术语目录
区分要点
看卡片是否等高、图片是否裁成统一比例、有没有文字
Card Grid
把同一类条目做成大小一致的卡片，按行列整齐排成网格，每张卡片放封面图、标题和少量关键信息。
适合
条目结构相同、每条只需展示三五个字段，用户靠浏览来挑选时
不适合
条目同质、数量多、每条字段较多且需要逐列比较时（应该用数据表）
Masonry Layout
卡片等宽但高度随内容变化，新卡片总是填进最短的一列，整体错落像一面砖墙，常见于图片社区和种草类应用。
适合
内容以图片为主、图片宽高比各不相同且不希望裁切时
不适合
条目有明确顺序（时间、排名），用户需要按顺序查看时
Gallery
以图片为绝对主角的展示布局，同比例缩略图紧密排成网格，几乎不带文字，点击后放大查看并可左右切换。
适合
内容以图片或视频为主、文字可以省略时
不适合
每条内容需要配标题、描述、价格等多项文字信息时（应该用卡片网格）
02 · 3 个术语目录
区分要点
看每条有几个字段、要不要逐列比较、每条是入口还是完整内容
Data Table
用行和列展示大量同类记录，每行一条、每列一个字段，配合筛选、排序、分页和批量操作，方便逐行查找和比较。
适合
条目结构相同、数量多（几十到上千条），需要筛选、排序和翻页时
不适合
内容以图片为主、用户靠看图挑选时（应该用卡片网格或画廊）
List View
把同类条目从上到下排成一列，每行只有图标、标题和一两项辅助信息，适合条目简单、需要快速扫读和点选的场景。
适合
条目结构相同、每条只有两三个字段时
不适合
每条字段较多且需要逐列对照比较时（应该用数据表）
Feed
一条接一条纵向排列的完整内容，每条带作者、正文、配图和点赞评论等互动，用户在流里直接阅读并不断下滑加载。
适合
每条都是可以直接阅读的完整内容，长度和形式各不相同时
不适合
条目只是入口、每条只有标题和一两项信息时（应该用简单列表）
03 · 3 个术语目录
区分要点
看左栏放的是数据记录还是功能菜单，有没有右侧辅助栏
Master-Detail Layout
左侧是一列数据记录，右侧显示当前选中那条记录的详情，点击左边任意一项右边随之切换，不跳转页面。
适合
同一类记录需要一条接一条连续查看或处理时
不适合
左栏只是固定的功能菜单而不是数据记录时（应该用侧边导航+内容）
Sidebar Layout
左侧是一条竖向的功能菜单，右侧是当前菜单对应的页面内容，适合功能模块多、需要频繁切换的后台系统。
适合
功能模块多（超过七个）或者有两级以上菜单时
不适合
左栏要展示的是一条条数据记录、点击后看详情时（应该用主从布局）
Holy Grail Layout
页头和页脚横跨全宽，中间一行分成左侧栏、主内容、右侧栏三栏，两侧栏宽度固定，主内容栏自适应伸缩。
适合
页面同时有导航分类和辅助信息，需要在主内容两侧常驻展示时
不适合
只有导航没有辅助信息，右栏只能空着或硬塞内容时
04 · 3 个术语目录
区分要点
看有没有先后步骤、是统一提交还是改一项存一项
Wizard
把一个较长的操作拆成几个有先后顺序的步骤，每屏只处理一步，顶部步骤条显示进度，用上一步、下一步推进。
适合
操作有明确的先后步骤，后一步依赖前一步的结果时
不适合
字段不多（十个以内）、彼此没有先后关系时（应该用单页表单）
Single Page Form
把需要填写的字段全部放在一个页面里，从上到下排成一列，填完点底部按钮一次性提交，是新建和编辑数据最常见的页面。
适合
需要新建或编辑一条记录、字段在二十个以内时
不适合
操作有明确的先后步骤，或者字段多到要翻好几屏时（应该用分步向导）
Settings Page
把大量互相独立的选项按类别分组，左侧或顶部切换分类，每项配说明文字，用户随时回来修改其中某一项。
适合
选项很多、彼此独立，可以按类别分组时
不适合
需要一次性填写并统一提交的一组字段时（应该用单页表单）
05 · 2 个术语目录
区分要点
看用户是要填写修改，还是只读查看
0210 组对比
单个控件。很多组件长得像，区别在于点了之后发生什么。
06 · 3 个术语目录
区分要点
看内容多少、要不要保留背后的页面、是否必须处理完才能继续
Modal
在页面正中弹出的窗口，背后加遮罩，用户必须处理完或关闭它才能继续操作页面。
适合
删除、提交等不可撤销操作前，需要用户明确确认
不适合
只是通知操作结果，比如「保存成功」，不需要用户做任何决定
Drawer
从屏幕边缘滑出的面板，在不离开当前页面的情况下查看详情或填写表单。
适合
在列表页查看或编辑单条记录，希望保留列表上下文时
不适合
只需要用户确认一句话时，用对话框或气泡卡片更合适
Popover
点击或悬停某个元素后，在它旁边弹出的小卡片，可以放标题、几行说明甚至按钮。
适合
悬停或点击某个对象时，需要就地展示几行补充信息或一张资料卡
不适合
只需一句纯文字解释图标或按钮含义时，用文字提示更轻
07 · 3 个术语目录
区分要点
看是刚刚操作的结果、持续存在的状态，还是新到达的消息
Toast
操作后在屏幕顶部或底部短暂出现的一行小提示，几秒后自动消失，不打断用户。
适合
保存、复制、删除等操作完成后，只需要一句话告知结果
不适合
错误信息需要用户仔细阅读或照着处理，几秒就消失会来不及看
Alert
固定显示在页面或区块内的带色提示横条，用来说明当前状态、风险或需要注意的事项。
适合
需要持续提醒一个尚未解决的状态，比如账号未验证、服务维护中
不适合
只是反馈刚完成的操作结果，比如「复制成功」
Notification
从屏幕角落（通常是右上角）弹出的消息卡片，带标题和正文，用来提醒新消息或后台任务结果。
适合
后台任务完成或失败，而用户此时可能在做别的事
不适合
只是反馈用户刚刚点击的操作结果，用轻提示就够
08 · 3 个术语目录
区分要点
看知不知道进度、是不是首次加载
09 · 3 个术语目录
区分要点
看是选一个值、执行一个操作，还是沿层级选值
Select
点击后展开选项列表，从中选一项或多项，收起时只占一个输入框的位置，适合选项较多的情况。
适合
选项在 6 个以上、平铺出来太占地方，比如城市、国家、部门
不适合
选项只有 2~5 个、希望用户一眼看到全部选项时，应该用单选框
Dropdown Menu
点击或悬停某个按钮后弹出的一列选项，用来收纳一组相关的操作或跳转链接，选完即收起。
适合
某个对象有 3 个以上次要操作、全部平铺成按钮会显得拥挤时，例如表格行的更多操作
不适合
在表单里让用户选一个值并提交时，应该用下拉选择
Cascader
一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。
适合
表单里选择省市区、商品类目这类层级固定的单个值
不适合
需要一次勾选多个不同层级的节点，用带复选框的树形控件
10 · 3 个术语目录
区分要点
看是切换平级内容、切换同一份数据的视图，还是展示流程进度
Tabs
一排可点击的标签，点哪个就在下方显示对应的内容面板，用来在同一位置切换几块平级的内容。
适合
同一对象有几块平级信息、用户按需查看其中一块时，例如详情页的基本信息、记录、日志
不适合
有先后顺序、必须逐步完成的流程，例如注册、下单，应该用步骤条
Segmented Control
几个紧挨着排成一条的选项按钮，同一时间只能选中一个，用来在少量视图或模式之间快速切换。
适合
在同一份数据的两三种展示方式之间切换，比如列表和网格视图
不适合
切换的是几块完全不同的内容区域，用标签页更合适
Steps
用一排带编号的节点和连线，显示一个多步骤流程的全部步骤，以及用户当前做到了第几步。
适合
注册、下单、开通服务这类有固定先后顺序的多步流程
不适合
几块内容互相独立、可以按任意顺序查看时，应该用标签页
11 · 3 个术语目录
区分要点
看点了是执行动作还是跳到别处，含义是否一眼能懂
Button
点击后执行一个动作的可点击控件，比如提交表单、保存、删除、打开对话框。
适合
需要用户主动触发提交、保存、删除等会改变数据的操作时
不适合
点击后只是跳转到另一个页面或外部网址时，应该用链接
Icon Button
只显示一个图标、没有文字的按钮，用于关闭、更多、编辑、删除这类大家都认得的操作。
适合
表格行、卡片、列表项里重复出现的编辑、删除、更多等操作
不适合
操作含义不直观，只看图标猜不出点了会发生什么时
Link
点击后跳转到另一个页面、页面内某个位置或外部网址的文字，通常带颜色或下划线。
适合
点击后跳转到站内另一个页面，比如从列表进入详情
不适合
点击后会提交、删除、保存数据时，应该用按钮
12 · 3 个术语目录
区分要点
看能不能多选、改完是否立即生效
Checkbox
可以打勾和取消的小方框，用来从一组选项里选多个，或单独勾选「同意协议」这类确认项。
适合
从一组选项里选任意多个，比如兴趣、权限、要导出的字段
不适合
一组选项里只能选一个时，应该用单选框
Radio
一组圆形的选项，只能选中其中一个，选了新的会自动取消原来的，适合 2~5 个互斥选项。
适合
2~5 个互斥选项，希望用户不用点开就能看到并对比全部选项
不适合
可以同时选多个的选项，应该用复选框
Switch
像电灯开关一样的滑动小控件，表示某个功能开启或关闭，拨动后通常立即生效。
适合
设置页里开启或关闭某个功能，并且切换后立即生效
不适合
需要填完整个表单再点提交才生效的选项，比如同意协议，应该用复选框
13 · 2 个术语目录
区分要点
看是表示属性分类，还是提醒数量和新内容
14 · 3 个术语目录
区分要点
看字段多少、要不要比较、是否以图片为主
Table
用行和列排列多条结构相同的数据，每行一条记录、每列一个字段，方便横向比较、排序和筛选。
适合
条目同质、数量多、每条有四个以上字段，用户需要逐列比较时
不适合
每条数据只有两三个字段，例如标题加时间，用列表更清爽
List
把多条内容纵向一条接一条排列，每条通常是标题加一两行说明，适合逐条浏览和点击进入详情。
适合
每条内容只有标题加一两行说明、用户主要从上到下逐条浏览时，例如消息、通知、评论
不适合
条目同质、字段多、需要逐列比较或排序时，应该用表格
Card
一块带边框或阴影的独立矩形区域，把一组相关的图片、标题、说明和操作收在一起，自成一体。
适合
每条内容以封面图、商品图等视觉元素为主，用户靠看图挑选时
不适合
条目同质、数量多、需要逐字段比较或排序时，应该用表格
15 · 3 个术语目录
区分要点
看是浏览整个层级、在表单里选一个值，还是从列表里挑一批
Tree
用可以逐级展开的缩进列表展示有上下级关系的数据，比如组织架构、文件夹目录、分类。
适合
数据有明确的上下级关系，比如组织架构、文件夹、商品分类
不适合
表单里只需要沿层级选出一个值，比如选省市区，用级联选择更紧凑
Cascader
一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。
适合
表单里选择省市区、商品类目这类层级固定的单个值
不适合
需要一次勾选多个不同层级的节点，用带复选框的树形控件
Transfer
左右两个列表加中间的箭头按钮，把项目从「可选」一侧移到「已选」一侧，用来批量挑选。
适合
从几十到几百个平铺选项里挑出一批，并需要随时看到已选结果
不适合
选项只有几个，用复选框组或多选下拉更省空间
032 组对比
都是让页面更顺手的做法，解决的却是不同的问题。
042 组对比
同一件事的不同层面，分清了才能跟 AI 说准。
052 组对比
AI 改完代码后，汇报里常一起出现的几个词。
062 组对比
和 AI 编程工具打交道时，最容易混着用的说法。