首页 > 网页教程 > 设计分享 > 3 个技巧帮你区分「取消」与「关闭」的设计差异

3 个技巧帮你区分「取消」与「关闭」的设计差异

时间:2019-10-04    来源:Aurora Harley

区分取消与关闭,可以很大程度上避免丢失用户已操作的内容。在关闭视图之前保存用户的更改,使用文本标签而不是「X」图标,并在破坏性操作之前提供确认对话框。

让人迷惑的「X」图标

很久以前,「X」这个符号是用在地图上,标记「宝藏的藏身地」。但在今天的数字化界面中,「X」符号不再用来标记位置,而是被用来取消进程,或者关闭某个临时页面/弹框。但是如何确定「X」代表的是「取消」 还是「关闭」?有的时候可以确定,有时却模糊不清难以界定。

其实,主要的问题在于「X」图标缺少了文本标签。当同一个图标在不同的界面,却代表不同的含义,该图标的可用性就会受到影响,因为用户判断不了到底是什么含义。

为什么要区分「取消」与「关闭」

当用户单击/点击「X」按钮来关闭模态弹框或视图时,系统会完全取消该过程并清空之前所有操作,这让人沮丧,甚至抓狂。因为用户通常认为「X」图标表示取消或者关闭,所以区分这两种可能性对于交互的成功至关重要。

在某些情况下,区分取消 or 关闭并不重要。当一个弹窗占据你的大部分屏幕时,点击「X」按钮(尽可能快地),既可以关闭该模态,也可以取消它可能触发的任何进程。

但是,如果页面中包含正在运行的计时器,正在播放的音频,正在选择多个选项标签,或其他类型未保存的内容,那就很有必要说明「X」图标所代表的意义。因为用户可能打算让计时器或音频继续运行,或者希望立刻应用这些选好的选项标签,或保存正在进行的工作,同时希望关闭该视图继续其他操作。

例如:丝芙兰在结账过程中,使用模态窗口来展示用户可以添加到购物车的免费商品。在以下示例中,单击「 ADD(添加)」按钮选择商品后, 该按钮直接被变成了「 Remove(移除)」,看起来似乎商品已经被添加到购物车中了。但是,实际上当用户单击右上角的「X」图标后,该商品并不在购物车中。他需要再重复这个步骤,最后点击「Done(完成)」按钮,商品才会被加入购物车。

Sephora:单击右上角的「X」会取消选择这些试用商品整个过程。用户必须先单击「ADD」,再单击「Done」才能将商品添加到购物车。

如何避免丢失用户正在操作的内容

要避免丢失用户正在操作的内容,首先需要确定用户的意图,是取消还是关闭,并提供明确的选项。有以下几种方法:

  • 主动要求用户确认他们的意图;
  • 使用明确的文本标签而不是模糊图标;
  • 显示两个不同的按钮:「X」图标表示关闭视图(可以自动保存页面内容/操作),而「取消」则代表放弃该过程。

1. 要求确认

如果用户在已经执行操作的模态弹框或页面视图中,点击「X」图标,app 则可以在关闭视图之前,直接询问用户是否应用该操作,来确认其意图。此解决方案非常适合会破坏用户工作的破坏性取消操作。例如,过滤器视图可能会被意外关闭,并且关闭会导致用户丢失其选定的选项。

这个问题在移动端界面上很常见,因为过滤器视图占用了很大的屏幕空间,这使用户很难或不能判断是否已经应用了那些选择。为了防止这种潜在的错误,在关闭过滤器视图之前,跟用户确认是否要应用这些选择并关闭视图,抑或是清除这些选择。例如:下图中,当用户选择后,点击「X」图标时,Lowes 会出现如下确认弹框。

左 :点击「X」图标或返回箭头,所有的选项都会被取消,并将用户带回上一个页面。右:点击「X」后,出现一个确认对话框,确认用户是应用还是取消筛选,然后再返回结果列表页。

同样,当用户关闭正在进行的课程时,语言学习应用Duolingo 会显示一个确认对话框,课程进行中不能中途离开,除非确认「退出」。至少,该 APP 向用户传达了这一限制,同时他们也可以选择「取消」来继续课程。点击「X」按钮将结束当前课程。为了防止出错,结束前会出现一个确认对话框。

缺点:

  • 虽然确认对话框在避免「X」图标有歧义方面很有效,但它却添加了额外的步骤;
  • 用户在按下「X」图标之前还是不知道它到底做了什么,代表什么意思,因此他们可能会对这个操作感到疑惑。

2. 使用文本标签

不要完全依赖对话框来让用户确认模糊的「X」图标,而是使用明确的文本标签。文本可以消除歧义,并清楚地传达将发生的操作:取消与关闭。

Yelp 的筛选页面在屏幕顶部提供了标有「Cancel(取消)」和「Reset(重制)」的按钮,在底部提供了一个大大的「Apply(应用)」按钮。类似地,Etsy 中的 Filters 视图提供了「Clear(清除)」和「Done(完成)」两个按钮。

注意:Etsy 使用「Done」而不是「Apply」,因为过滤器一经选择就可以被应用,而这里是关于开关切换与否的建议。

(左)Yelp:Cancel、Reset 和 Apply 这三个文本标签既直接又清晰,这样用户就不太可能不小心关闭视图而丢失他们过滤器中的选择。(右)Etsy:Clear 为用户取消提供了一种清晰的方式,而点击 Done 则返回到「产品列表」页,其中的选择已经应用。

相关推荐
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
浅谈交互设计中的默认值对用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁平化设计的优缺点
分享淘宝购便利交互设计心得
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设计分享
18个超棒的响应式Web设计前端开发教程
在视觉设计中对像素的深度解析
网页设计中创新式布局与交互设计思考
换汤不换药?看应用们如何“为iOS 7设计”
产品设计:万水千山总是情 不要图片行不行
APP浏览体验设计的思考:如何理解用户的眼?
网页设计怎么破?创新式布局与交互的设计
四大网页设计秘诀:让用户第一眼就爱上你的网站

精彩推荐

热门教程

网站地图 澳彩网彩票官网登入 易博团队骗术登入 新葡京彩票官方网登入
菲律宾申博网上娱乐 沙龙亚洲第一品牌 太阳城菲律宾官网申博 澳门申博官网
ca亚洲城88直营网 g电子游戏app登入 菲律宾申博代理登录 mg电子导航登入
易博国际娱乐平台登入 七星彩票走势图登入 东方彩票网登入 新葡京彩票平台登入
东方彩票网注册登入 特区七星彩票论坛头尾登入 易博娱乐登入 七星彩票官方网登入
689psb.com 8AKS.COM rq138.com 98csb.com 697SUN.COM
S618B.COM 205SUN.COM XSB518.COM XSB788.COM 585sj.com
67ib.com S618H.COM 97jbs.com 122TGP.COM 986jbs.com
XSB389.COM 8YQS.COM 1555DZ.COM 383PT.COM 175SUN.COM