中国建设银行十堰分行网站,什么网站可以做英语题,推广网站广告,成都制作网站公司简介我们日常所说的弹性框架是非常笼统的概念。我们习惯性地称之为对话框架、浮动层和提示条。弹性框架可以分为两种:模态弹性框架和非模态弹性框架。产品需要弹性框架来传递信息#xff0c;用户需要弹性框架来接受反馈#xff0c;但是没有经过推敲的弹出窗口设计很容易让用户感到…我们日常所说的弹性框架是非常笼统的概念。我们习惯性地称之为对话框架、浮动层和提示条。弹性框架可以分为两种:模态弹性框架和非模态弹性框架。产品需要弹性框架来传递信息用户需要弹性框架来接受反馈但是没有经过推敲的弹出窗口设计很容易让用户感到沮丧。今天就和分享模态框架和非模态框架的设计规范和使用方法。
一、模态框是什么
模态框Modal Dialog指用户操作中断用户必须完成对话框中的任务(或主动关闭对话框后)才能继续主窗操作的弹框。起源于模态框架 Microsoft Windows、Mac OS 和 UNIX 等待界面应用程序但是随着不断的发展模式框架已经从网站广泛应用于移动应用程序。常见的模式框架可能会用编程语言创建一个模式“对话框架”作为引导引导用户操作这相当于通常要求用户提供与他们正在浏览的内容相关的信息的表格。
举例来说如果你在使用某一应用程序时可能会弹出一个模式对话框询问是否允许使用某一应用程序或者浏览的银行网站可能会启动一个模式框以便在对话即将超时时提醒您。
常用的模态框有五种情境类型
错误提醒用户错误。警告警告用户潜在风险。资料从用户那里收集资料。确定或提示提醒用户在继续之前要做些什么。助手通知用户重要信息。
二、模态与非模态的异同
从名称上来说无论是模式还是非模式都可以统称为弹出窗口。从风格上来说两者都可以理解为类似的卡片可以帮助用户快速定位获取关键信息并进行操作。它的内容是灵活的通常包括文字、图标和按钮。弹出窗口的设计是为用户传达与当前场景所需的操作相关的内容。
即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具支持 Sketch、Figma、XD 格式导入海量优质设计资源即拿即用。支持创建交互原型、获取设计标注为产设研团队提供一站式协同办公体验。https://js.design/community?categorydetailtyperesourceid60d3301e333c5ce7ab0c0adfsourcecsdnplanyb6192 三、模态和非模态的主要区别是
在UI设计中模式窗被称为子窗旨在唤起用户对紧急情况的意识。模式框架通常有一个黑色透明的面板。一旦调用模式对话框用户就不允许使用父窗。用户必须关闭应用程序中的模式对话框才能访问菜单选项或其他对话框。最好在真正需要的情况下使用模式框架。大多数情况下它可以移动或调整大小但不能最小化。
非模态框一般没有黑色透明面板允许用户访问父窗不会影响主流程也不用担心原有进度会停止。当用户继续工作时非模态对话框仍然可以打开。非模态弹窗通常被设计成告诉用户信息内容而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。
一个非常生动的比喻可以帮助我们更好地理解两者的区别:非模态框就像我们身边的好朋友。他总能在困难的情况下提供帮助但维护成本不高或要求不高而模态框则是另一个讨厌的朋友。当他们有情绪时他们需要立即吸引别人的注意力并强迫别人放下手头的一切来处理他们。
四、模态和非模态的使用范围及注意事项
出于安全原因当通知用户必须立即更改密码时是选择模态框还是非模态框提醒用户使用模态框还是非模态框应用程序或网站刚刚更新了新产品或新功能
4.1 根据使用场景进行选择
一般来说如果请求的信息没有必要继续建议使用非模态框因为模态框会暂时停止与启动APP的互动用户很容易因为突然中断而感到恼火。与模态弹框相比非模态弹框是轻量级反馈不会对用户造成太大干扰。
4.2 遵循界面设计原则
弹性框架系统的建立和优化原则可以用一句话概括:如果可以直接在界面上显示尽量使用弹性框架。如果可以使用非模态弹性框架则不要使用模态弹性框架因为任何弹性框架都会干扰用户。从用户体验的角度来看一个操作过程的干扰越少越好。
4.3 根据优先级展示
优先级不同的信息应该获得不同的视觉权重所以视觉权重最大的模态弹框应该显示重要的内容。因此我们应该对需要显示的信息进行优先安排使模态弹框能够使用真正重要的信息。只有低频合理使用用户才会认真对待。过度使用会给用户带来“狼来了”的心理。
小结
一般来说模式和非模式有不同的优缺点。对于两者的选择要以应用场景和用户体验为核心选择合适的方式实现设计目标。这就要求UI和UX设计师不仅要了解弹出窗口的类型和区别还要熟悉自己的业务场景和用户行为。在实际应用过程中他们需要相互碰撞打破和重组找到合适的方法。
