模态/弹层/对话框的超级准则。UI最佳实践:深度剖析模态窗口。

模态,弹层,对话框,不管而怎么样称呼其,现在给我们来再次审视一下以此片段。当她首先软出现不时,模态窗口都是均等栽优雅的视觉解决方案。首先她简化了视觉,其次,它节省了屏幕空间。从那以后,设计师就十分愿意使用模态窗口,而且有些设计师甚至超负荷的运它们。模态窗口慢慢演变成为了今底这种吓人的弹窗。人们觉得它非常嫌,并且本能的、不自觉的大意这些窗口。

图片 1

定义:

一个模态窗口是一个覆盖于软件要布局框架之上的窗口。它创造了这样同样栽模式:模态窗口以相同种子窗口的花样出现于主界面上方,使主界面可见但是未响应任何操作。用户必须完成模态窗口上指定的操作下,才堪回去主界面。

——维基百科

模态窗口、叠加窗口、对话框、无论你吃它啊,是早晚再这个UI模式了。当其第一破至现场,模态窗口是一个淡雅的有关UI问题之化解方案。第一是其简化了UI,第二凡是它节省了屏幕空间。从那时起,设计师就曾运用了模态窗口,有些都用了太方法。模态已化作今天的可怕的弹奏有窗口的版。用户发现模态窗口很骚扰人,人们本能地活动关闭这些窗口。

用法

而可以以你生如下需求时使用模态窗口:

定义:

收获用户的瞩目

当你不能不打断用户眼前方进行的天职流,将用户所有注意力引导及一个更为重要的作业上时时。

模态窗口是放在应用程序主窗口顶部的要素。它创建一个模态,该模态禁用于主窗口,但保持它和模态窗口可见作为它们面前的子窗口。用户须与模态窗口交互,才会回到回到原来的应用程序。—维基百科

需用户输入

当您得用户输入信息经常。举个例子,注册或登录。

用法

于内容遭显得额外的音讯

当您想在用户消费主页面中内容之而想展示一些额外的音信之早晚可应用她。例如展示大图或者视频。

当你要的时,你可考虑动用模态窗口。

来得额外的音讯(不是在内容遭显得)

当您想展示一些勿是直接依赖让母页面额外信息,或者其他的局部请勿借助于让页面的单身选项。例如通知。

微贴士:不要就此模态弹窗展示错误、成功、或者警告信息。让这些消息留在页面中。

引发用户注意力

一个模态弹窗的详细分析

不好的弹层会妨碍任务之成功。通过下的计来保证你的弹窗不见面作这样的失实:

当您想要抓住用户对重新要之事情的注意力而堵塞用户眼前的天职时,来以模态窗口。

1.逃生阀

为用户一个相距的门路,这样他们即好积极关闭弹窗。可以由此如下的计贯彻:

– 取消按钮

– 关闭按钮

– 退出按键

– 点击弹窗以外的区域

易用性小贴士:每个弹窗都须有一个足以经键盘控制的快速退出方式。例如应该可以运用ESC按键来关闭弹窗。

待用户输入

2.叙述清晰的标题

通过标题告诉用户有消息。这样可以叫用户知道她们时所处的职务——他们连没距离最初的页面。

点击“Tweet”按钮——弹窗标题:创建新推特。给出信息。

多少贴士:呼出弹窗的按钮中之文案应该与弹窗标题相对应

当您想要自用户那里获取信息时利用。例如,用户注册和登录。

3.按钮

按钮应该发一个可操作、可掌握的讳。这取决按钮所处之具体情况。在模态弹窗中,一个“关闭”按钮可以是一个按钮或者仅是一个“X”。

Invision拥有简洁明了底按钮

稍许贴士:按钮上的文案不要使人口纳闷。如果用户点击了注销按钮,但是弹窗出现了另外一个撤销按钮,困惑就应运而生了,“我是在撤销我之取消操作,还是当此起彼伏之前的撤?”

当界面环境面临展示任何信息

4.分寸及岗位

一个模态窗口不应允无比要命啊未承诺无限小,你望它正好合适。目标是保留应的消息,同时一个模态窗口不应占据整个可看窗口。内容要适应模态窗口。如果要一个滚长长的,你用考虑创建另外一个页面来顶替它。


位置——屏幕中央偏上,因为在运动装备遭遇,如果处在靠下的职务或会见以可窗口被流失。

– 大小——不要占用整个屏幕超过50%之上之面积

当您想展示其他消息要无丢父页面的条件时采用。例如,显示较充分之图像或视频。

5.焦点

当您以灯箱效果(使背景变暗)来打开一个模态窗口时,由于用户无法还跟母页面进行互动,因此用户的注意力让抓住到模态窗口被。

些微贴士:此时只要以键盘的光标焦点以移到模态窗口被

展示其他信息(不以界面环境面临)

6.于用户之操作触发开关

毫不突然弹来一个模态窗口,这样见面好到用户。让用户发生一个操作行为,例如点击按钮、链接或者选择一个选择,以这个来出发模态窗口。不请自来的模态窗口会吓到用户,并且会导致用户直接忽略其中的始末。

点击呼起的登录弹窗

当你想只要出示和父页面不直接相关的音讯或同任何页面“独立”的挑项时使用。例如,通知,但马上可以通过“非阻塞”模态来成功。

倒装备遭遇之模态弹窗

模态弹窗和移动设备并无克挺爱的和谐相处。由于模态弹窗的面积一般比较充分,占用了屏幕或大或小的等同有些区域,因此在运模态弹窗的还要花费内容就转换得无那么容易了。加入设备键盘或者放到的轮转条之类因素,用户会不停歇缩放屏幕,视图寻找模态弹窗的位置。模态弹窗可以起广大替的表达方式,最好不用以倒装备中使用其。

做的比较好的模态弹窗——facebook

小心:不要以显示错误,成功还是警示的音信。要吃它于页面及。

帮忙力量

模态窗口的解析

键盘

创立模态弹窗时,时刻记得加上可应用的键盘操作。考虑如下几接触:

打开弹窗——呼起弹窗的要素必须是键盘可操作的

将刀口移动到对话框中——当模态弹窗打开后,键盘焦点应该走到模态弹窗的尽上端

管理键盘焦点——当问题移动到对话框中之后,它要稳定在输入框中,直到对话框关闭

关对话框——所有弹窗都应有产生一个键盘可控的离方式

又多列表查看Nomensa’s blog
article

施行效果不美之增大可能会见阻拦任务就。为了确保您的模态不会见妨碍你的法,请务必包含以下内容:

ARIA

但看的富网络程序(Accessible Rich Internet
Applications)定义了同种让网站内容以及网站采取越来越便宜使用的法子。

正如所展示之ARIA标签可以很好之创导可用之模态弹窗:

Role = “dialog” , aria-hidden, aria-label

打听再多之有关ARIA的信,点击查阅Smashing’s Magazine
article

还要,不要忽视低视力人群用户。他们唯恐当使系统中之放大镜功能来加大屏幕中之情节。当屏幕放大时,用户只能观屏幕的一模一样局部内容。模态弹窗也使考虑到对他们的熏陶。

图片 2

总结

苟用户被训练的无自觉的关门模态弹窗,你还有呀说辞使用它们啊?

取用户的注目,同时确保内容和视觉及的简洁清晰是模态弹窗最酷之优点。但是,它为保有好之欠缺,它见面阻断用户工作流,并且要用户无法同隐藏在模态弹窗后面的母页面中的情节进行互。模态弹窗并无总是顶好的缓解方案。当您做出选择的下,考虑如下几触及:

自我批评清单:

– 你如果于何时使用模态弹窗?

– 如何运用模态弹窗?

– 模态弹窗要长大什么样子?

– 模态弹窗中需要展示什么消息?

此地发出一部分得以替模态弹窗的UI控件:非模态弹窗,也号称toast(该术语最早被谷歌的Material
Design以及微软提出)。点击如下内容来询问再多:

1.逃生谈话

参考文献

Overlays — Patterny

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

翻译注:译自Medium,在翻译过程中将与统筹主题无关之组成部分开展了删节

原文链接

为用户同样种逃避方式,给他俩相同种植方法来关闭模式。这可以通过以下措施实现:

—取消按钮

—关闭按钮

—换码键

—于窗口外单击

助作用提示;每个模态窗口要有一个键盘可访问控制以关闭该窗口。例如,换码键应该关闭窗口。

2.描述性标题

因此模式标题为用户提供上下文。这会叫用户知道他/她在哪里,因为她们从没离开原页面。

图片 3

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

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

3.按钮

按钮标签应该发可操作的,可分晓的名。这适用于其他动静下之按钮。对于模态,“关闭”按钮应坐标记“关闭”的按钮或“X”的花样在。

图片 4

袭击是曾清楚标记的按钮

专注:不要让按钮标签混淆。如果用户正在品尝取消以模态显现时起另一个取消按钮,则会发出乱。“我若注销删除吗?还是继续自己的删减?”

4.尺寸暨岗位

模态窗口不应尽特别还是极端小,你想只要为它们正好。目标是协调好条件,因此模态不应占据整个屏幕视图。内容应当抱模态。如果需要滚动条,你可以考虑创建一个新页面。

图片 5

—�位置-上半局部的屏幕,由于要放置于逊色的语句在动视图模态可能会见丢掉

—�尺寸-不要以过50%的屏幕覆盖

5.焦点

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

扶植功能提示:将键盘焦点放在模态上

6.用户启动

弹来的模态不要给用户觉得好奇。让用户执行操作,如单击按钮,跟随链接或选择,触发模式。不请自来的模式也许会见如用户感动惊讶,并促成高速消除窗口。

图片 6

模态的始发由于点击登录

挪模式

模态和走设备通常不可知同从而。因为模态太非常,查看内容十分困难,占用太多还是极小之屏幕空间。添加元素,如设备键盘与嵌套滚动条,用户左右掐和缩放试图捕捉模态窗口的字段。有更好的代表模态且非应有于走设备上动。

图片 7

模态窗口开的特别正确的—Facebook

帮忙功能

图片 8

键盘

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

打开模态——触发对话框的元素必须得由此键盘访问

以刀口移动到对话框——倘若模态窗口打开,键盘焦点需要活动到顶部

管制键盘焦点——假使焦点移动到对话框中,它当吃“捕获”在里面,直到对话框关闭。

闭馆对话框——每个叠加窗口要拥有键盘可看控件才能够关闭该窗口。

关于地方列表的复多信息,请查看Nomensa的博客文章

ARIA

但看的长网络应用程序(ARIA)定义了一旦万维网的情及应用程序更便于看的方式。

以下ARIA标签可以推进创造而看的模态:Role = “dialog” ,aria-hidden,
aria-label

至于ARIA的复多信息,请查阅Smashing杂志文章

此外,记住低视力用户。他们得于显示器上行使屏幕放大镜来推广屏幕内容。一旦放开,用户只能望有的屏幕。这里的模态将有着同样的职能,因为它们以倒。

结论

要人们曾经让教练成电动品关闭模态的话,为什么而运用它们为?

取用户之注目,保持环境及简化UI是模态的最佳优势。然而,也来部分短,因为她中断了用户流,并且经过隐匿模态后面的情节让不能够跟父页面交互。模态可能无连续答案。做出选择时伸手考虑以下事项:

清单

俺们什么时候显得模态?

我们哪展示模态?

模态是呀体统的?

俺们提供与集什么信息?

起一个替的UI组件模态:非模态或为给作toast(谷歌在资料设计及微软遭行使的术语)。查看自己的下一样篇稿子,了解再多。

参考:

Overlays—Patterny

Modal
Windows—UI
Patterns

Overuse
ofOverlays—NNgroup

10 Guidelines to Consider whenusing
Overlays—UX
for the
Masses

MakingModal Windows Better For
Everyone—Smashing
Magazine

Howto improve the accessibility of overlay
windows—Nomensa

原文链接:https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c\#.honbti3xi

笔者信息:Naema Baskanderi

译文出自:SKYUI

欢迎关注SKYUI官方微博“SKYUIHOME”

官微信公众账号“SKYUIUX”

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注