- 1、本文档共10页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
UI最佳实践:深度解析模态窗口
UI最佳实践:深度解析模态窗口
模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。
模态窗口、叠加窗口、对话框、无论你叫它们什么,是时候重温这个UI模式了。当它们第一次来到现场,模态窗口是一个优雅的关于UI问题的解决方案。第一是它简化了UI,第二是它节省了屏幕空间。从那时起,设计师就已经采用了模态窗口,有些已经采取了极端方式。模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。
定义
模态窗口是位于应用程序主窗口顶部的元素。它创建一个模态,该模态禁用于主窗口,但保持它与模态窗口可见作为它前面的子窗口。用户必须与模态窗口交互,才能返回到原有的应用程序。—维基百科
用法
当你需要的时候,你可以考虑使用模态窗口。
吸引用户注意力
当你想要抓住用户对更重要的事情的注意力而打断用户当前的任务时,来使用模态窗口。
需要用户输入
当你想要从用户那里获取信息时使用。例如,用户注册和登录。
在界面环境中显示其他信息
当你想显示其他信息而不丢失父页面的环境时使用。例如,显示较大的图像或视频。
显示其他信息(不在界面环境中)
当你想要显示与父页面不直接相关的信息或与其他页面“独立”的选项时使用。例如,通知,但这可以通过“非阻塞”模态来完成。
注意:不要使用显示错误,成功或警告的消息。要让它们在页面上。
模态窗口的剖析
执行效果不佳的叠加可能会阻碍任务完成。为了确保你的模态不会妨碍你的方式,请务必包含以下内容:
1.逃生出口
给用户一种逃避方式,给他们一种方式来关闭模式。这可以通过以下方式实现:
取消按钮
关闭按钮
换码键
在窗口外单击
辅助功能提示;每个模态窗口必须具有一个键盘可访问控制以关闭该窗口。例如,换码键应该关闭窗口。
2.描述性标题
用模式标题向用户提供上下文。这能让用户知道他/她在哪里,因为他们没有离开原始页面。
点击推特按钮-模态标题:组成新的推特。提供上下文。
提示:按钮标签(启动模态)和模态标题应该匹配。
3.按钮
按钮标签应该有可操作的,可理解的名称。这适用于任何情况下的按钮。对于模态,“关闭”按钮应以标记“关闭”的按钮或“X”的形式存在。
侵袭是已经清晰标记的按钮
注意:不要让按钮标签混淆。如果用户正在尝试取消并且模态显现时出现另一个取消按钮,则会发生混乱。“我要取消删除吗?还是继续我的删除?”
4.尺寸和位置
模态窗口不应该太大或太小,你想要让它刚刚好。目标是协调好环境,因此模态不应该占据整个屏幕视图。内容应该适合模态。如果需要滚动条,你可以考虑创建一个新页面。
位置-上半部分的屏幕,由于如果放置较低的话在移动视图模态可能会丢失
尺寸-不要使用超过50%的屏幕覆盖
5.焦点
当你打开“封闭”模态(用户无法继续与模态交互)使用灯箱效果(使背景变暗)。这引起对模态的注意,并指示用户不能与父页面交互。
辅助功能提示:将键盘焦点放在模态上
6.用户启动
弹出的模态不要让用户感到惊讶。让用户执行操作,如单击按钮,跟随链接或选项,触发模式。不请自来的模式可能会使用户感动惊讶,并导致快速解除窗口。
模态的开始由点击登录
移动模式
模态和移动设备通常不能一起用。因为模态太大,查看内容很困难,占用太多或太小的屏幕空间。添加元素,如设备键盘和嵌套滚动条,用户左右捏和缩放试图捕捉模态窗口的字段。有更好的替代模态且不应该在移动设备上使用。
模态窗口做的很不错的—Facebook
辅助功能
键盘
当创建模态时记得添加键盘辅助功能。考虑以下内容:
打开模态——触发对话框的元素必须可以通过键盘访问
将焦点移动到对话框——一旦模态窗口打开,键盘焦点需要移动到顶部
管理键盘焦点——一旦焦点移动到对话框中,它应该被“捕获”在其中,直到对话框关闭。
关闭对话框——每个叠加窗口必须具有键盘可访问控件才能关闭该窗口。
有关上面列表的更多信息,请查看Nomensa的博客文章
ARIA
可访问的丰富网络应用程序(ARIA)定义了使万维网的内容和应用程序更容易访问的方法。
以下ARIA标签可以有助于创建可访问的模态:Role = “dialog”, aria-hidden, aria-label
有关ARIA的更多信息,请查阅Smashing杂志文章
此外,记住低视力用户。他们可以在显示器上使用屏幕放大镜来放大屏幕内容。一旦放大,用户只能看到部分屏幕。这里的模态将具有相同的效果,因为它们在移动。
结论
如果人
您可能关注的文档
- iOS和Android规范解析——底部浮层(下).doc
- iOS和Android规范解析——确认弹框、全屏弹框和模态视图.doc
- iOS和Android规范解析——标签导航和分段控件.doc
- iOS和Android规范解析——简易菜单、简易对话框和弹出框.doc
- iOS和Android规范解析:警告框(Alerts).doc
- iOS和Android规范解析:提示框(Toast)对比.doc
- iOS轩辕剑外传天之痕所有隐藏宝物大全.pdf
- iOS和Android规范解析:底部浮层(上).doc
- iPhone8值不值得购买iPhone7与iPhone8的性价比.doc
- iPhoneX官方钴蓝色硅胶保护壳评测.doc
文档评论(0)