返回知识库

界面与交互 · 操作与输入

按钮Button

按钮发起当前页操作:说明能不能做、进行中防连点,并把成功或失败写回正在操作的对象;去别处用链接。

保存一张资料卡,而不是跳去别处

按钮用来发起当前页的动作。完成一次成功和失败→修复→重试,你会看到按钮不是“可点的字”,而是一次有生命周期的操作入口。

任务:把这张已填好的资料卡保存到当前页。先正常保存;再断开网络,观察失败没有把资料清空,恢复网络后重试。

账户设置个人资料待保存
昵称
阿羊
邮箱
yang@example.com
未保存的更改:1 项○ 等待操作

资料已齐全:按下按钮会在当前页写入这张资料卡。

从面板里带走的判断

刚才资料卡、按钮和网络状态共同证明了按钮该承担的事。

  1. 动作留在当前页“保存资料”写回当前资料卡,所以用 button;“查看所有订单”去新页面,应使用 link。
  2. 进行中要阻止重复动作按钮显示“正在保存”且不可按,避免同一次保存被连续提交。
  3. 结果要落在对象上成功时资料卡有“最后保存”;失败时它明确“未写入”,而不是只在页脚报一句话。
  4. 失败要能继续完成任务资料没有消失;恢复网络后主按钮变成“重试保存”。

什么时候用、怎么用

当用户要提交表单、保存设置、打开一个当前页面板或执行一次操作时使用按钮。

文案用动词说清后果;补齐前置条件,点击后给进行中和结果;若目的地是 URL、文件或另一页,则改用链接。

同一个目标的正反例

目标都是让用户知道下一步会发生什么,唯一差别是目的地。

正例 · 当前页动作保存资料

点击后资料卡更新,保存中防连点,失败保留原内容并可重试。

反例 · 其实要导航按钮写“查看全部订单”

它会离开当前页,却伪装成按钮。应改为带 href 的“查看全部订单”链接。

快速自测

“下载发票 PDF”会打开一个资源地址。优先应该是什么?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。