返回知识库

界面与交互 · 操作与输入

按钮Button

按钮发起当前页的一次操作;跳转用链接。按下后要有开始、进行中与结果反馈,未就绪时说明缺什么。

在账户设置页点「保存资料」

按钮发起当前页的一次操作(状态术语另见「状态」)。按下后你要能看出:有没有开始、还能不能按、结果落在哪。跳去别的页面用链接,不要用按钮冒充。

场景:账户设置改完昵称与邮箱,点「保存资料」。先清空邮箱看禁用,再选成功或失败,观察按钮怎样告诉你「开始了 / 还能不能按 / 结果落在哪」。

账户设置个人资料

对照:邮箱已填,按钮可提交。按下只做当前页操作,不会跳去别的页面。

做按钮时要盯这五件事

离开这页后,用下面五条检查任何「可点的东西」是不是真按钮、反馈够不够。

  1. 按钮还是链接当前页改数据、提交、打开面板 → 按钮。去另一页、下载、跳章节 → 链接。别用按钮假装「查看全部订单」。
  2. 未就绪时禁用并说明缺什么只变灰不够。写清「还缺邮箱」之类,用户才知道下一步补什么。
  3. 进行中防重复点击进入「保存中」后禁用或忽略连点,避免同一操作发两次请求。
  4. 成功 / 失败反馈在哪按钮旁结果 chip、状态条、Toast——位置要固定可找;失败不要假装成功。
  5. 危险操作用 AA 红,不是主操作红删除、清空等不可逆操作用 AA 红 #a83a44 + 明确后果文案,必要时二次确认;别和主操作红撞色,以免误点。

主操作之外:次级、幽灵、危险

一个页面通常只有一颗主操作按钮(上方「保存资料」,唯一的填充红)。其余按层级递减弱化。

次级 · 描边取消幽灵 · 透明了解更多危险 · AA 红删除资料

对照:主操作红只给当前页发起的一次操作;次级用描边中性、幽灵用透明文字;危险操作单独用 AA 红 #a83a44,从颜色就和主操作区分开。

同一账户页:正例与反例

目标都是让用户完成一件事。差别只在:这件事是「当前页保存」,还是「去别的页面」。

正例「保存资料」用按钮

邮箱齐了才可点;保存中禁用;成功 / 失败出现在按钮旁结果区。这是当前页操作入口,有生命周期反馈。

反例用按钮假装「查看全部订单」

目的是去订单列表页,却做成按钮再偷偷跳转。用户以为会改当前页数据,结果页面被换走。应改成链接,文案对准目的地。

保存失败时怎么恢复

失败不是终点:保留已填内容,说明原因,让用户改完再按一次。

1状态条说明失败原因2输入仍在,可改邮箱或昵称3主按钮变为「重试保存」

快速自测

「查看全部订单」会带用户去新页面,应该优先用什么?

继续查证

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

下一步学

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