有些问题不是单个组件能解决的,而是一套交互做法。交互模式收集了加载、表单、拖拽、引导、撤销这类高频场景的成熟方案,以及它们各自的取舍。
21 个概念
先用复选框勾选多行数据,再对整个选择集一次性执行同一操作。选择时操作栏浮现,给出已选计数与撤销入口。它把重复的单条点击合并为一次批量决策,适合清理、归档、打标、导出等列表维护场景。
页面正文
正文保持可用。同意条是法律门槛而非系统告警 — 未做出选择前不得落下非必要 Cookie。
我们使用 Cookie 做分析与广告。必要 Cookie 始终开启。继续前请做出选择。
consent = localStorage["cookie-consent"]
等待用户选择…
在写入非必要 Cookie 前向用户征求同意的横幅或浮层,属于合规门槛而非系统告警。提供接受、拒绝或颗粒度选项,并记住选择;未作出选择前不得落下追踪类 Cookie。常驻底部或首入居中,不应遮挡核心操作。
把卡片拖进其它箱 — 原位留占位,目标箱高亮。
收件箱3
文档库1
回收站0
用按住—拖动—松手的直接操作,把对象移动到新位置或新容器。所见即所得,比菜单命令更贴近空间直觉;拖动中要有清晰落点指示,目标容器需给出接受反馈。范围比拖拽排序更广:移动、归位、跨列表投递都算。
拖动整行换位,或用 ↑↓ 按钮 · Drag a row or use the arrows
用直接拖动的方式调整列表项的先后顺序:按住条目(或把手)拖到目标位置,其余条目实时让位并给出落点提示。 它把"排序"从抽象的上下移按钮变成所见即所得的空间操作,同时保留按钮作为可达性兜底。
当列表或页面没有数据时,不留一片空白,而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点:首次使用教用户开始,搜索无结果给出路。
试试输入 "hello" 或 "a@b.c",观察实时反馈 · Try "hello" or "a@b.c"
在用户填写表单的过程中或提交时检查输入合法性,并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改",而不是提交后被一整个错误页打回。
用"滚动到底自动追加下一页"取代传统分页:用户持续下滑,新内容不断出现, 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮,注意力始终停留在内容流上,长列表被拆成一次次无感的追加。
页面上的文本本身即可编辑:单击把文本原位变成输入框,Enter 或失焦确认,Esc 取消, 改完所见即所得。它解决的是"小改动也要跳转完整编辑页"的问题—— 把修改成本降到一次点击,特别适合单字段的快速修订场景。
待办 / To do
整理用户访谈记录
组件库 v2 迁移
进行中 / Doing
动效规范起草
已完成 / Done
信息架构梳理
点 ← → 在相邻列间移动卡片,列头计数实时更新
按状态分列的任务面板—— 通常"待办 / 进行中 / 已完成"三列, 卡片随状态推进在列间移动。 列的位置即流程阶段, 卡片的所在即任务状态, 一眼看清全局进展与瓶颈列。
按快捷键或点击按钮。
为高频操作提供可发现的键盘加速键,并配帮助入口。提示可用工具条标注、快捷键对话框(⌘K 风格)或 vim 式序列。它服务专家用户提速,同时必须保证焦点可见、不抢夺输入框按键,新手也能查到怎么按。
用"推迟加载"的方式处理暂不在视口内的资源:图片、列表分块、组件等在接近或进入可视区域时才真正请求和渲染。 首屏只承担可见部分的开销,配合占位骨架避免突然撑开布局,让长页面既快又稳。
首页视觉与文案重做,预计本周提测。
左侧一列摘要条目,右侧展示选中项的完整详情,点击左侧条目右侧即时联动更新。 它解决的是"在列表页与详情页之间来回跳转"的问题——总览与细读同屏共存, 用户切换条目不丢方向感,浏览和比对多个条目的成本大幅降低。
这里是主导航,切换不同的工作区。
This is the main nav — switch between workspaces.
用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面:每一步只露出一个关键区域并就地解释, 上一步/下一步与步骤指示器控制节奏,可随时跳过。它把功能说明放在功能发生的位置, 而不是让用户去文档里自己找。
来自 Rin · 今天 09:24
用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。
把 Token 当接口
设计系统不是组件仓库,而是一套共享决策。真正难的不是画按钮,而是让十个团队在同一处停下、做出同一判断。
把 Token 当接口维护:改一处、全端跟随。命名要表达意图而非外观,否则换肤时会全线崩塌。
评审节奏比规范文档更关键。每周一次的组件诊所,比沉睡在仓库里的五十页指南更能拦住走形。
当采用率停滞,先看贡献成本,而不是继续加组件。摩擦在哪里,生态就停在哪里。
在内容或功能达到门槛后阻止继续访问,要求付费或订阅才能解锁。可硬性截断、按次数计量,或用预览加升级提示软性引导。它把价值展示与付费决策接在一起,关键是先让用户看清能获得什么,再谈付费。
把信息分层呈现:先给最常用、最必要的部分,把次要细节藏到"展开""下一步""显示更多"后面, 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担,让界面入门简单,同时保留深度供高级用户按需取用。
在列表顶部按住并向下拖动(触屏或鼠标均可) · Drag down at the top
在列表顶部按住并向下拖动,出现随拖动距离变化的加载指示,超过阈值后松手即重新拉取最新数据。 它解决的是"内容可能已经过期"的问题——用户主动、可预期地请求更新, 而不是被动等待自动轮询,刷新的时机和结果都由自己掌控。
共 8 个组件 · 8 components
用即时过滤把大列表缩到与当前输入相关的一小部分:用户在搜索框敲字,列表随之实时收窄, 并显示命中数量与空结果提示。它把"查找"变成"修剪",不用提交、不用等跳转,反馈就在眼前。
用与真实内容结构一致的灰色占位块表示加载状态,通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位,结构长这样",而不是让用户盯着空白或转圈等待。
删除一条试试,5 秒内可撤销 · Delete one — undo within 5s
用"先执行、给反悔窗口"的方式处理高风险操作:删除等动作立即生效并展示结果,同时在底部弹出 带倒计时的撤销条,窗口期内一键恢复,倒计时结束才真正提交。相比弹窗确认,它不打断操作流, 又比"确认一次就完"的弹窗多了一层真正可用的后悔药。
账号
把长表单拆成有序步骤,每步聚焦少量字段,逐步推进到完成。用步骤指示器标出进度与当前位置,用户可回看已完成步骤、修正后再前进,末步通常汇总确认。它把"填不完的大表单"变成可完成的小任务,降低单屏认知负荷。
当前分类和列表中没有匹配项,可以扩大搜索范围。