UI最佳实践:深度解析模态窗口

模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。


模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。

UI最佳实践:深度解析模态窗口

模态窗口、叠加窗口、对话框、无论你叫它们什么,是时候重温这个UI模式了。当它们第一次来到现场,模态窗口是一个优雅的关于UI问题的解决方案。第一是它简化了UI,第二是它节省了屏幕空间。从那时起,设计师就已经采用了模态窗口,有些已经采取了极端方式。模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。

定义

模态窗口是位于应用程序主窗口顶部的元素。它创建一个模态,该模态禁用于主窗口,但保持它与模态窗口可见作为它前面的子窗口。用户必须与模态窗口交互,才能返回到原有的应用程序。—维基百科

用法

当你需要的时候,你可以考虑使用模态窗口。

吸引用户注意力

当你想要抓住用户对更重要的事情的注意力而打断用户当前的任务时,来使用模态窗口。

需要用户输入

当你想要从用户那里获取信息时使用。例如,用户注册和登录。

在界面环境中显示其他信息

当你想显示其他信息而不丢失父页面的环境时使用。例如,显示较大的图像或视频。

显示其他信息(不在界面环境中)

当你想要显示与父页面不直接相关的信息或与其他页面“独立”的选项时使用。例如,通知,但这可以通过“非阻塞”模态来完成。

注意:不要使用显示错误,成功或警告的消息。要让它们在页面上。

模态窗口的剖析

执行效果不佳的叠加可能会阻碍任务完成。为了确保你的模态不会妨碍你的方式,请务必包含以下内容:

UI最佳实践:深度解析模态窗口

1.逃生出口

给用户一种逃避方式,给他们一种方式来关闭模式。这可以通过以下方式实现:

  • 取消按钮
  • 关闭按钮
  • 换码键
  • 在窗口外单击

辅助功能提示;每个模态窗口必须具有一个键盘可访问控制以关闭该窗口。例如,换码键应该关闭窗口。

2.描述性标题

用模式标题向用户提供上下文。这能让用户知道他/她在哪里,因为他们没有离开原始页面。

UI最佳实践:深度解析模态窗口

点击推特按钮-模态标题:组成新的推特。提供上下文。

提示:按钮标签(启动模态)和模态标题应该匹配。

3.按钮

按钮标签应该有可操作的,可理解的名称。这适用于任何情况下的按钮。对于模态,“关闭”按钮应以标记“关闭”的按钮或“X”的形式存在。

UI最佳实践:深度解析模态窗口

侵袭是已经清晰标记的按钮

注意:不要让按钮标签混淆。如果用户正在尝试取消并且模态显现时出现另一个取消按钮,则会发生混乱。“我要取消删除吗?还是继续我的删除?”

4.尺寸和位置

模态窗口不应该太大或太小,你想要让它刚刚好。目标是协调好环境,因此模态不应该占据整个屏幕视图。内容应该适合模态。如果需要滚动条,你可以考虑创建一个新页面。

UI最佳实践:深度解析模态窗口

  • 位置-上半部分的屏幕,由于如果放置较低的话在移动视图模态可能会丢失
  • 尺寸-不要使用超过50%的屏幕覆盖

5.焦点

当你打开“封闭”模态(用户无法继续与模态交互)使用灯箱效果(使背景变暗)。这引起对模态的注意,并指示用户不能与父页面交互。

辅助功能提示:将键盘焦点放在模态上

6.用户启动

弹出的模态不要让用户感到惊讶。让用户执行操作,如单击按钮,跟随链接或选项,触发模式。不请自来的模式可能会使用户感动惊讶,并导致快速解除窗口。

UI最佳实践:深度解析模态窗口

模态的开始由点击登录

移动模式

模态和移动设备通常不能一起用。因为模态太大,查看内容很困难,占用太多或太小的屏幕空间。添加元素,如设备键盘和嵌套滚动条,用户左右捏和缩放试图捕捉模态窗口的字段。有更好的替代模态且不应该在移动设备上使用。

UI最佳实践:深度解析模态窗口

模态窗口做的很不错的—Facebook

辅助功能

UI最佳实践:深度解析模态窗口

键盘

当创建模态时记得添加键盘辅助功能。考虑以下内容:

  • 打开模态——触发对话框的元素必须可以通过键盘访问
  • 将焦点移动到对话框——一旦模态窗口打开,键盘焦点需要移动到顶部
  • 管理键盘焦点——一旦焦点移动到对话框中,它应该被“捕获”在其中,直到对话框关闭。
  • 关闭对话框——每个叠加窗口必须具有键盘可访问控件才能关闭该窗口。

有关上面列表的更多信息,请查看Nomensa的博客文章

ARIA

可访问的丰富网络应用程序(ARIA)定义了使万维网的内容和应用程序更容易访问的方法。

以下ARIA标签可以有助于创建可访问的模态:Role = “dialog” , aria-hidden, aria-label

有关ARIA的更多信息,请查阅Smashing杂志文章

此外,记住低视力用户。他们可以在显示器上使用屏幕放大镜来放大屏幕内容。一旦放大,用户只能看到部分屏幕。这里的模态将具有相同的效果,因为它们在移动。

结论

如果人们已经被训练成自动尝试关闭模态的话,为什么要使用它们呢?

获得用户的注意,保持环境和简化UI是模态的最佳优势。然而,也有一些缺点,因为它们中断了用户流,并且通过隐藏模态后面的内容使得不能与父页面交互。模态可能不总是答案。做出选择时请考虑以下事项:

清单

  • 我们什么时候显示模态?
  • 我们如何显示模态?
  • 模态是什么样子的?
  • 我们提供和收集什么信息?

有一个替代的UI组件模态:非模态或也叫作toast(谷歌在材料设计和微软中使用的术语)。查看我的下一篇文章,了解更多。

参考:

Overlays Patterny

Modal Windows UI Patterns

Overuse of Overlays NNgroup

10 Guidelines to Consider when using Overlays UX for the Masses

Making Modal Windows Better For Everyone Smashing Magazine

How to improve the accessibility of overlay windows Nomensa

 

作者信息:Naema Baskanderi

原文地址:https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c#.honbti3xi

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23416/

(0)
CatherineCatherine
上一篇 2017-05-05 08:54
下一篇 2017-05-05 10:47

相关推荐

  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 不止是划条线!移动端UI中常见的视觉分隔设计技巧

    即使是元素与元素之间的分隔方式,都能随随便便用一整篇文章来进行探讨。

    2017-05-18
  • APPLE WATCH 中文手册:WatchKit使用iOS语言

    WatchKit应用扩展可以使用绝大多数iOS技术。由于应用扩展和应用还是有一些不同,因此某些技术的使用可能会受到限制,或者不受到推荐。下面是决定是否使用特定技术的准则: · 避免使用需要用户权限的技术,比如Core …

    2015-06-15
  • 功能确定之后,如何做好UCD概念设计?

      功能和数据都确定下来了,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。 如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓…

    2016-02-20
  • 我从比我聪明的家伙们那里偷来了9个UI设计的秘密

    译者按:都说设计重要,但是好设计的标准似乎一直都没个定数。学苹果的拟物、学谷歌的material design、学微软的metro风,学到的似乎都只是皮毛和表象。设计师应该是整个公司里思考得最深最细的人,是重要的产品驱动力之一,而不是单纯的美工或执行者。

    2017-05-27
  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • 微信的扫码和摇一摇,给老美好好上了一堂创新课 【UXRen译#150】

    作者: YUNNUO CHENG & RALUCA BUDIU @NNGroup |  翻译:张维钢、朱玲 ,校审:Junliang   摘要:与美国相比,在中国扫描二维码和摇一摇成为了有效沟通线上线下的交流方式,并且应用广泛。   图为中国“绝味鸭脖…

    交互专题 2017-08-07
  • Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 《用户体验要素》的笔记 (2) 第三章 战略层

    1. 战略层主要解决两个问题:1)我们想通过这个产品得到什么?即产品目标是什么?2)用户想通过这个产品得到什么?即用户需求是什么?此处的关键词是【明确】。当我们能越清楚的表达我们想要什么,以及确切的知道其他人想要从我们这里得到什么时,我们就能越精确的满足双方的需求。注:而最终导致产品失败的原因也经常出现在这个环节,很多产品口号喊的很响亮,但就是不愿意进一步去描述,并不是说产品经理一定要上层决策好目标和需求的每一个字,然后就不容易出错,没...

    微信热点 2018-04-08
  • 交互设计启示录:交互设计三大标准,信息表述五种方式

    交互设计本就该是互联互通环环相扣的。设计的作用在于寻找功能和社会间的接点, 在功能足以说明一切的前提下,装饰是可以节制的,如何把握节制的度是考验一个设计师是否成熟的标尺。—— 田中一光

    2017-05-04