“确定”、“保存”和“完成”,你用对了吗?

Hang UE designer

在交互设计中,按钮文案一直是一个容易被忽视但实际又很重要的设计点。按钮文案的细微差异传递到用户认知层面可能会带来不同的预期。选择正确的文案可以降低用户的认知负荷,让操作意图更加清晰,从而避免误操作。

今天,我们就来分析一下日常设计中,几乎算是最常见的按钮——“确定”,以及他的两个近亲——“保存”、“完成”

“确定”、“保存”和“完成”这三个按钮都是用于结束某个操作流程,但它们在本质上有着清晰的区别。

1、确定

语义分析

我们先来看《汉典》对于这个词语的解释:

1、固定;2、明确肯定

我们通常用这个词表示知晓、同意或确认一个信息或状态。日常设计中,它的主要作用是让用户确认一条系统发出的通知或者一个即将执行的操作。

使用场景

“确定”按钮表示对一件事的回应。这件“事”可以大致分为几种:
1、征求性询问
当用户即将执行一项危险性操作时,系统需要得到用户的“授权”。实际上这是一种责任划分机制,潜台词是“我们事先已征求了您的同意,出了什么事儿,您自己负责”。如“您确定要删除联系人吗?”用户可以自行选择“确定”或“取消”。

2、告知性信息
用户只需要确认收到了这条信息并关闭弹窗,不需要额外的操作。 如“手机号更改成功”。当然,根据信息的重要性不同,我们也可以使用 Toast、Snackbar 或其他形式的轻提示来向用户传递告知性信息。

在一些情况下,“告知性信息”与“征求性询问”两者具备时序关系——事前“询问”,事后“告知”。

“确定”按钮本质上是对信息的回应。 如果这条信息你需要用户获知并回应,那就使用它。

留个钩子:“确定”和“确认”在大部分情况下都可以互换,但它们之间仍存在细微差别,后面可以找时间细聊一下。

2 、保存

语义分析

同样先看下《汉典》对于这个词的解释:

1、继续存在、不受损失;2、保管收存

通俗来讲,就是保持事物当前的状态,使其能够被长期利用。它通常用于数据的留存,表示将用户创建或编辑的数据长期存储起来

使用场景

“保存”适用于用户创建或编辑了数据,并需要将其存储起来的场景。常见有两类:
1、内容填写和编辑
如新建银行账户、更改系统设置、修改个人资料等。

2、需要中途退出的场景
这类场景在 B 端尤其常见。通常在用户填写一个长表单时,中途可能会因为其他事需要暂时中止填写行为,但又需要保存已填写的部分。

在各大在线设计软件(figma、mastergo 等)兴起之前,大家都在用 PS 的年代,这个按钮可以说是设计师的“达摩克利斯之剑”。一旦遇到电脑重启、软件卡死(绿色版,懂的都懂)等意外情况,忘记保存…

总之,“保存”按钮本质上是对数据的操作指令。 如果你需要明确告诉用户“你的所有修改会被记录下来,下次打开仍会维持现状”,那就使用它。

3 、完成

语义分析

《汉典》对这个词的解释是:

事情按预定目标做成

在设计中,常用来结束了一个流程或一个阶段性任务。点击后通常会退出当前页面,回到之前的页面或进入一个新的状态。

使用场景

“完成”适用于多步骤、有明确开始和结束的任务流程,具体来讲:
1、多步骤操作的最后一步
这种场景下,“完成”有两种状态:

  1. . “完成”是操作的最后一环,需要点击后系统才会“保存并退出”——但也有例外,常见于引导页,整个过程不涉及到数据保存,“完成”只代表退出。
  2. . 实际需要的操作已执行完毕,数据已存储成功,“完成”只是代表结束当前状态,如“软件已安装成功”。

2、退出特定的模式
用户进入了一个特定的模式(如编辑模式、选择模式),需要一个明确的按钮来退出该模式。如 ios 系统自定义墙纸时、微信选取照片时。

容器 14@3x.png

“完成”按钮本质上对一个过程的终结。 如果用户已经做完了所有必要的操作,可以安心地离开当前界面时,请使用它。

目录
“确定”、“保存”和“完成”,你用对了吗?