正文
(5) 描述具体的行动召唤按钮
比如,“删除文章”、“支付97美元”、“继续当前交易”、“发送消息”等,这要比通用文案“是/确认”更明确!特别是包含受影响的项目名称或具体金额。
避免使用通用文案,描述应该尽量具体
02 增强版模态对话框
尽管模态对话框能预防误操作,但是如果增加一些额外操作,效果更好。
典型的设计是要求用户键入一些特殊内容(比如项目名称),才能激活行动召唤按钮。
convertkit.com 的特殊确认,要求用户键盘输入 DO IT,才会执行危险操作。
专业提示:请注意,上图例子中的确认按钮放在了取消按钮的左侧。这是根据格式塔心理学中的“贴近原则”,保证输入框和按钮更贴近(虽然只有一个输入框)。
resend.com 的特殊确认,要求用户键盘输入 DELETE,才执行删除数据。
▼加强版模态对话框的最佳实践:
(1) 对话框标题说明了操作
比如,图中的“Delete API Key”。
(2) 加粗目标项目名称
比如,图中的“Onboarding”是具体的 API Key 的名称。
(3) 警示色强调危害
比如,图中“This can not undone”的红色字体。
(4) 要求用户执行额外确认
比如,图中要求用户键入 DELETE
(5) 明确的行动召唤按钮
比如,图中“Delete API Key”按钮,使用了警示色,并且避免了“确认”或“删除”这样的通用文案。
请注意,Resend 也把主要按钮放在了取消按钮的左侧。
专业提示:虽然《按钮不应该置灰》,但在“加强版确认对话框”中可以例外(比如上面两个例子)。
03 输入密码的对话框
除了键入特殊文本,还可以要求用户输入密码:
-
OTP (一次性密码/验证码)
-
PIN (个人密码)
-
2FA (双重身份认证)
此时,甚至可以去掉行动召唤按钮,直接提交确认。
银行系统要求提供密码确认操作
▼无障碍隐患
输入4~6位数字组成的简单验证码,去掉提交按钮是否影响无障碍使用,一直存在争议。
虽然作者不是信息无障碍专家,但是他觉得去掉提交按钮,并不算重大缺陷。
首先,输入验证码属于中间步骤,界面载入就自动聚焦第一位数字输入框,完全依赖键盘的残障人士可以按下Tab切换到下一个输入框。
最关键的是,由于验证码只有很少的4~6位,在末尾输入后立即提交校验,即便提醒错误,也是可以接受的。
一方面,如果大家非常在意信息无障碍设计,那么必然会涌现出更好的辅助残障技术(译注:作者的意思是不要纠结于输入框);另一方面,去掉按钮自动提交,简化了操作,即便极少数情况下出现错误,也允许重新输入。
04 专属的“危险操作区”
应该为最危险的操作集中管理,可以称其为“危险操作区”交互模式。
Github 专门开辟的危险操作区
危险操作区可以拥有独立界面,或者放在设置/个人中心的底部。该区域包含一个或多个操作,并且通常与模态对话框等方法配合使用;如果系统中包含大量危险操作,建议设置独立界面来管理它们。
Plausible.io 设置的危险操作区独立界面
▼何时使用危险操作区?
使用危险操作区对不可逆、丢失数据、极有可能造成灾难性后果的操作进行分组管理,通常包括账户自毁、数据擦除、身份变更等可以影响权限或数据读写的操作。