国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

银河网上开户: 取消与关闭:请在设计上区分差异

发布时间:2019/09/13标签:   设计原则      设计规范      设计理论    点击量:

原标题:银河网上开户: 取消与关闭:请在设计上区分差异

请注意:在关闭前保存中间工作或维护正在进行的过程是主动的,银河官网,但有时可能会与用户的意图相反:如果用户打算通过单击“X”按钮取消其选择,那自动应用这些选择可能会令人困惑和沮丧。

译文地址:站酷

b 用户在按下“X”图标之前还是不知道它到底做了什么,代表什么意思,因此他们可能会对这个操作感到疑惑。

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

若存在疑问,请记住:先保存,再退出。

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

Glow Baby:(左)点击运行计时器视图中的“X”图标,在不停止计时器的情况下取消视图,从而允许用户继续使用APP记录其他类型的事件、参与社区讨论、阅读文章等。(中)运行计时器的状态显示在屏幕顶部的状态栏中。(右)在计时器暂停时点击“X”图标,弹出“放弃”或“取消”按钮以确认用户的真正意图。

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

  · 使用明确的文本标签而不是模糊图标

例如: Gmail会自动保存在非模态窗口中填写的邮件信息到草稿(Drafts)。这样的好处是,用户在需要折叠或关闭该窗口时,仍然保存原来的内容以便于下次继续编辑。将鼠标悬停在消息窗口右上角的“X”图标上时,会显示一段提示:Save & Close(保存到草稿并关闭)。此外,点击窗口右下角的“垃圾桶”图标可以删除该邮件 – 这个图标离顶部的“保存和关闭”选项很远,可以防止用户误点。

c. 而模态对话框虽然干扰性较强,但用户可以随时控制,在使用过程中是用户掌握主导权。补充:Toast这一控件,原是Android系统的控件。但自Android 5.0 推出原质化设计后,Toast就被弱化,而是将 Snackbar 作为官方推荐的控件。如今在 Material Design中更是找不到 Toast的踪影。主要原因还是 Snackbar 在交互友好性方面比 Toast 要好,例如:支持手势交互、支持与CoordinatorLayout联动等。所以说 Toast都过时了呢,应该讲 Snackbar。

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

银河网上开户: 取消与关闭:请在设计上区分差异

原文地址:Nielsen Norman Group

银河网上开户: 取消与关闭:请在设计上区分差异

四、结论

虽然“X”图标会造成模棱两可,而且经常导致可用性问题,但它不太可能马上从所有接口中消失。设计人员应该注意“X”图标的多重含义,消除“关闭”和“取消”之间的歧义,并提供确认对话框或自动保存等保护性措施,避免丢失任何用户正在操作的内容。

3、关闭并保存

如果必须使用“X”图标而不是文本标签(比如为了以节省空间,或者因为正在遵循团队的设计语言),请谨慎使用,并在用户完成前保存操作/内容。另外,可以提供一个单独的“取消”按钮,让用户在进程之外有一个紧急出口,并消除“X”(关闭 or 取消)在两种含义之间的歧义。

银河网上开户: 取消与关闭:请在设计上区分差异

为什么手机验证码登录微信/淘宝时,验证码输入错误,二者都是用的模态对话框提示用户,而不是用Toast呢?

银河网上开户: 取消与关闭:请在设计上区分差异

五、小思考

版权信息Copyright © 银河官网 版权所有    ICP备案编号:鲁ICP备09013610号