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

相关推荐

  • 从交互层面探讨:不一样的 App 该如何设计?

    针对APP同质化现象,本文作者从从交互层面探索了不一样的 App 该如何设计,且谈及自己的解决方案。值得一读。     “首先占据人们大多数时间的同类型APP内容高度同质化,而风格取决于内容,在平庸的内容下只能诞生风格平庸的APP设计。其次,对于以商业目标为根本的APP应用设计开发,设计风格的投入产出比并不高(游戏依然除外),设计模式的流行以及交互方式的单一使得保守的设计投入产出更高。最后在现今的消费领域,功能主义盛行,界面设计中理性居于主导地位,设计风格显示不是理性思考的首要考量目标。”

    2017-05-04
  • 交互设计实例分享

    现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己…

    2017-08-03
  • 在互金个人理财爆发之前,以UX方法进行货币基金体验设计

    以业务模式和产品生命周期为核心的方法论所构建的功能模型完备而趋同,产品无法和用户的内心产生共振。UX方法论的核心专注于用户的想法,感受和目标,而非业务和功能。本文通过20个小时对货币基金APP的产品研究,用户研究,使用UX工具构建场景,目的在于改变产品高度趋同现状,使得呈现模型遵循用户的心智,而不再仅仅是“买与卖”的理财超市。

    2017-04-28
  • 中国App设计真好!—— 一个美国人到中国当产品经理的心得

    导读:应用软件层出不穷,各个国家的人为自己生活的便利设计出各款的应用。然而,同样的应用,是否会因为中西方文化的差异,或者是生活方式的不同,导致相同应用的设计有所不同吗?是的,有的!Dan Grover 现在是腾…

    2015-02-10
  • 据说这是一个用户体验设计师必须掌握的

      引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。 你最终想知道…

    2015-11-22
  • 今天的互联网设计师很有“钱途”,如何才能更好地理清自己的发展方向?

    哪种设计师价值更高?如何才能更好地理清自己的发展方向?本文将对交互设计师(或者称UI设计师)发展的三部曲——器、势、人分别进行讲述。全是干货分享,好好吸收吧,因为这三部曲基本会贯穿你的职业生涯。我要不要学XX软件啊?软件要不要报班啊?一个四十岁的土老板,每天最多的事就是接打电话。老板每天可能会打几百个电话,这个频率是你们想象不到的,他可能随时随地都在打电话,而很少用微信、QQ。传统手机接打电话非常方便,按下按钮或翻盖闭眼都能接电话,用智能机反而不方便,所以他希望自己用的还是传统手机。但是传统手机太低端了,老板担心同行和下属嘲笑他,就很纠结——于是我们的手机就诞生了。任何项目第一保证的都是效率。

    2017-05-17
  • iOS系统设计细节|人性化带来更好的产品设计

    从今年3月份使用苹果以来,偶尔会在某个不经意的瞬间,感受到ios系统设计的人性化之处,深刻感受到了简约不简单的魅力。

    2017-05-22
  • 十张图看懂交互设计原则

    一致性保持视觉统一性,才能加深用户对产品品牌的认知,降低用户的学习成本可视性用户一看便知的操作方法认知不一味只求美感或者感觉,而是从一般人的认知习惯,比如视觉,阅读,记忆,学习等多方面开展设计反馈用户需要接收到操作结果的完整、持续的反馈信息自然操作流程顺畅不生硬,节点、逻辑跳转符合人类的思维习惯情感化与人文关怀赋予设计的产品生命力和亲和力,不要把产品当成一个冷冰冰的使用工具错误控制考虑可能出现的人为差错,在设计的时候先行避免效率简化任务...

    2018-04-12
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • 交互设计套路之——导航设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Five Hundred MilesThe Shadows - Dance With The Shadows/The Sound Of The Shadows亲爱的小伙伴们好久不见啦你们的涂涂回来啦!!不知是时间太快还是指缝太粗总是留都留不住总之感谢小伙伴们的不离不弃话不多说赶快准备好小板凳和瓜子嗑着瓜子咱们就开聊吧下面开始分享app的套路之一导航设计一、导航的分类1.标签式导航...

    2018-02-11