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

相关推荐

  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17
  • 7个技巧,帮你搞定网页首图设计

    首屏设计的7个技巧,它们并不复杂,却能帮你的首图设计更上一层楼。

    2017-06-06
  • 【交互设计-UX/UE】评论回复

    前项目有做到评论回复功能,途中遇到一些不解,就是回复某个人的时候,到底回复的类容是紧接着被评论者的下方,还是按时间另起一栏? 我们可以先对比一下QQ和微信.....keep watching!!! 微信版本号:V6.3.16 QQ…

    2016-08-03
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 交互设计入门—交互设计的职能

    上个章节讲了为什么要有交互设计,本章主要详述一下交互设计的职能——交互设计师具体做哪些内容?

    2017-08-04
  • 交互设计之架构真经

    建立信息架构是交互设计师主要工作之一,是需求转向交互稿中非常重要的过程。一个架构的好坏决定这这个产品未来的命运,只有具有一个好的信息架构,才会具有一个好的产品体验。以下将从认识——前期工作——如何产出——如何判断,四个步骤来介绍信息架构。一、何为信息架构信息架构设计是对信息进行结构、组织方式以及归类的设计、好让使用者容易使用和理解的一项艺术与科学。这是比较官方的说法,简单通俗的说法就是对信息进行组织和层级分层。当我们一看到购物车这个信息...

    2018-05-01
  • 互联网产品经理要看哪些经典书籍?需要准备什么?

    入行产品经理所需的准备目前,互联网产品经理的社区很多,里面有海量的信息,如何修炼成为一名优秀的产品经理的经验也是林林种种,笔者也阅读不少,获益不少。今天,笔者并不是谈如 何成为一名优秀的产品经理,成为优秀的产品经理只是第二步,入行才是第一步。笔者作为一个做了一段时间产品的人。谈谈入行产品经理所需做的准备。前提:做产品,关键是要发现用户的需求点,发现用户的痛处~~关注互联网动态和产品动态:1 每天阅读新浪科技或者其他门户网站最新的互联网资...

    2018-03-14
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 如何有效的做产品迭代分析

    “ 做过这么多产品迭代分析,却依然找不到合适的方式表达。” 产品迭代分析对于交互设计师可以说是家常便饭了,隔壁的某某有了新功能,某某家的谁又更新了个大版本,都需要时时保持关注。但是,每当小珏吭哧吭哧的收…

    交互设计 2014-11-11
  • 【CIO说】花椒直播韩三普:用户体验与核心技术才是硬实力

    本期推荐韩  三  普花 椒 直 播 CTO社交直播作为一个年轻的行业,”高富帅”表现出的强大增长和吸金实力虽让业外人士倍感羡慕,然而作为一个严重依赖技术、用户体验要求极高的行业,流量等时代红利已经不能称其为门槛。如何打造平台差异化的竞争力?近日,花椒直播CTO韩三普接受了ENI经济和信息化网的采访,分享了花椒直播快速增长背后技术所提供的强大支持。并结合当下创新趋势,分享了直播在其中可发挥的作用。亮点提炼如何打造平台差异化的竞争力,以核...

    2018-04-26