<rp id="9thzz"><acronym id="9thzz"></acronym></rp>
    1. <dd id="9thzz"></dd>
    2. 首页 > 网页教程 > 设计分享 > 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浏览体验设计的思考:如何理解用户的眼?
      网页设计怎么破?创新式布局与交互的设计
      四大网页设计秘诀:让用户第一眼就爱上你的网站

      精彩推荐

      热门教程

      99热 久久99热视频只有精品 玖玖热爱视频精品 99热这里只有精品 久久re热这里只是精品