广东省住房和城乡建设网站,横沥镇网站仿做,如何给网站挂黑链,大龄程序员都干啥去了本文是「经典交互模式」系列第二篇#xff0c;前文回顾#xff1a;面包屑导航 Breadcrumbs Trail全文目录什么是模态窗 模态窗的使用问题 模态框应用实践 什么是模态窗 Modal Window我们在各种不同的屏幕应用中见过「模态窗」#xff0c;全屏幕模态窗、弹出信息框、#xf…本文是「经典交互模式」系列第二篇前文回顾面包屑导航 Breadcrumbs Trail全文目录什么是模态窗 模态窗的使用问题 模态框应用实践 什么是模态窗 Modal Window我们在各种不同的屏幕应用中见过「模态窗」全屏幕模态窗、弹出信息框、跟随触发弹出信息框、灯箱弹窗、多步骤对话框等等它们有着不同的形状、大小和交互模式。 可以说所有屏幕应用都可以分为模态窗口和非模态窗口。 什么是模态窗口我们先从「模态」理解起。 Modal 模态是指计算机处于一种特殊状态下此时用户进行同样的输入操作会得到不一样的输入结果。典型的案例即按下 大写锁定Caps Clock时用户输入的字母会变成大写此时大写锁定键成为了模态开关。 而「模态窗」即指窗口的特殊模式出现在前级主视窗前方使主窗口可被看到移动屏幕上可能出现全屏但无法使用。用户想要返回主应用需要先与模态窗进行互动。 在非模态窗中用户可以自由的浏览、操作、返回或是通过导航跳转而在模态窗中你需要先完成操作才可以返回状态。 在「相册」应用中可以任意浏览照片、查看详情而在图片选择的模态窗口中需要选择图片或退出模态窗的使用问题由于模态框覆盖原浏览内容且不进行操作无法离开的特点它总被应用于强制打断用户的工作流程获取用户的注意力。久而久之人们反而形成了一种「应激机制」——精准地找到「关闭按钮」瞬间关闭。 当年被弹窗支配的恐惧需要即刻的注意力 模态窗将系统置于一个特殊模态中用户需要搞懂模态窗的内容并作出反应。 打断用户的工作流 从模态窗返回后用户需要额外的时间和精力想起此前的工作内容。 用户产生了额外的目标 有些复杂内容的模态窗花费了更多的额外成本用户不得不将「关闭窗口」作为当前的任务目标。遮挡了主窗口内容 特别是出现表单类模态窗口时重要的信息被遮挡导致无法完成表单填写。 纵观带来的巨大交互成本模态窗的使用却依旧广泛。因此了解如何合理、节制地使用模态窗口或许可以帮助你创建更加安全、流畅的产品体验。 模态窗应用实践展示更多内容 模态窗口可以用于展示更多的浏览内容例如图片、视频等。 dribbble 的项目详情完成一个独立的任务模态窗口可以承载应用主任务之外的独立任务它有着明确的触发点和结束点。 浏览朋友圈作为主任务模态窗口承载发布新内容的独立任务显示重要警告 用于预防或改正严重错误 预防总比补救更重要。这可能是最常见的模态窗使用方式。那么什么才是「防止严重错误」的重要时刻呢1 只需要用户留意就可以避免的错误 只要稍微提醒就会发现没有添加附件2 难以补救的错误 没有自动保存的机制下内容丢失就很难找回补充重要信息 保证流程继续进行 由于信息的缺失流程无法继续下去时我们运用模态窗要求用户补全信息。 购物网站不会要求立即注册或登录而结算时需要用户提供账户信息避免让用户在模态框中做复杂决策 模态窗的内容应当简洁、直接避免用户完成复杂的计算或研究。例如模态窗显示的商品优惠却遮挡了原价信息用户难以做出选择。 避免用模态窗显示提示消息 警告或错误提示尽量出现在相关目标旁边消息通知不需要额外占用用户的注意力。 订单会如期出现在「已取消」的标签页下不需要模态窗的提示总结无论是否使用模态窗口我们的产品目的总是帮助用户解决问题、完成任务继而达成目标。没有人愿意自己着手的事情没打断所以在应用模态窗时衡量一下它的交互成本并保证用户会觉得这次中断是有价值的。 参考链接Therese Fessenden, Modal Nonmodal Dialogs: When ( When Not) to Use Them, Nielsen Norman GroupRaluca Budiu, Interaction Cos, Nielsen Norman GroupNaema Baskanderi, Best Practices for Modals / Overlays / Dialog Windows, uxplanet.orgFabian Sebastian, Modality Is the One UX Concept That Most Designers Don’t Fully Understand, uxplanet.org
