案例锦囊|交互设计中「防呆手法」的巧妙应用!

2022-7-6    seo达人



RULE 1 断根

「断根」是指将发生错误的原因从根本上排除,不给用户犯错的机会。在交互设计中,最常见的设计方法就是使用置灰 / 禁用效果。

  案例 1    美团外卖对于在休息 / 暂不接单的店铺,除了使用「休息中」的 Tag 进行标注,还使用置灰的效果,让用户对于店铺营业情况一目了然,不会误点进入:

图片

  案例 2     支付宝理财产品阅读协议,在用户勾选前一直会显示「请勾选」,页面的确定按钮在协议签署前为不可点击状态

图片

案例 3     用户用 Gmail 写邮件时,可以设置邮件为「保密邮件」,收件人将无法进行转发、复制、下载或打印邮件;也可以设定保密邮件的可读时间,到期后邮件内容会自动消失,来确保信息的保密性:

图片

 

RULE 2 保险

「保险」是指按照顺序运行两个以上的动作才能完成操作,多加一步操作步骤,给用户创造更多的思考机会和时间。在交互设计中的典型用法是增加弹窗、链接等形式提供更多信息,让用户进一步确认。

案例 1     微信转账,连续转给好友同样金额的两笔钱,且第一笔好友未接收,系统会发出提醒,让用户再次确认,避免重复打款:

图片

案例 2     被从微信群踢出的用户,如果再次申请加入该群,该群的管理员可以在申请中查看 ta 曾经在群中的聊天记录,判断 ta 是否适合入群:

图片

案例 3     在一些重要的决策或不可逆的操作行为中,二次弹窗确认尤为常见。比如当用户在填写信息时点击「作废」,系统会给出提示让用户再次考虑

图片

 

RULE 3 标示

「标示」是指运用线条粗细、形状、颜色等区别以方便识别,提高易识别度。交互设计中多以颜色鲜亮的小色块、圆点等进行示意。

案例 1     钉钉的图片保存到本地的功能,做了很好的提示,下载过的图片会带有绿色的「对勾」,避免用户多次重复保存图片:

图片

案例 2     微信发朋友圈的分组功能,你可以选择「谁可以看」和「谁不可看」,可以看用的是绿色字,不可以看用的是红色字,很易于区分,不用担心会搞混或错用:

图片

案例 3     钉钉的会议未按时参会的提醒,用红色标签对时间进行重点标示:

图片

案例 4     使用 Sketch 导出同名同格式的文件时,系统会在弹窗中将「取消」作为主按钮的形式呈现,避免用户因为忘记重命名而覆盖之前的导出的同名文件:

图片

案例 5     钉钉和阿里的出差系统打通,当员工提交了出差申请,到了出差的那一天,钉钉上状态会自动切换成 「✈️出差中」,方便其他同事了解你的状态:

图片

案例 6     Google 的标签页,可以被分组,标记颜色和重命名,可以一定程度上缓解因标签页开得太多而找不到的情况:

图片

案例 7     疫情期间,很多小区的大门仅供行人通行,只有个别大门是行人和车辆都可通行。高德地图 App 会给每个小区的门标注好通行权限,方便开车的用户选择合适的门进入小区,不过个人感觉这个信息可以标注得更明显一些:

图片

 

RULE 4 警告

「警告」是指将不正常或即将要出问题的情况,通过颜色、灯光、声音、动效等明显、特殊的方式进行警告,提醒用户及时修正错误。交互设计可以借鉴工业设计中的报警器等产品的功能,用弹窗、灯光和声音等对用户进行提示。

案例 1     在铁路 12306 上购票时,如果选的列车时间距离现在 1 小时内,会弹出弹窗提示发车时间与现在较近,提醒用户注意行程时间:

图片

案例 2     京东 App 会在用户使用移动网络播放的环境下,提示用户注意流量损耗

图片

案例 3     上海的买菜 App 在疫情期间菜不好抢,盒马会在你加购每一件商品的过程中,都提示运力不足,让用户再做考虑:

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「防呆手法」的巧妙应用!

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档