dialog对话框
视频及原型文件下载:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定义:
用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。
交互原则:
1、不要在标题中使用“抱歉打扰”、“危险!”、“你确定?”此类道歉、警告或含糊不清的标题;
2、不要打乱按钮顺序,肯定性按钮在右,否定性按钮在左;
3、建议使用三种按钮文案,确定文案(如删除/导出)、驳回文案(如取消)和确认文案(如我知道了/好的);
4、不要滥用,无预期的频繁打断用户会引发反感;
5、绝对不能被其他元素遮挡,需一直保持焦点直到被关闭或某个动作已被执行。
交互说明:
1、【文案】:说明提示的文案内容,需要注明标题、内容、操作项文案,例如:
标题文案:商品删除确认;
内容文案:请确定是否删除该商品?
操作文案:取消/确定;
2、【触发条件】:需要说明触发Dialog的条件,例如:点击【删除】按钮,显示Dialog提示;
3、【触发后的流程】:需要说明触发Dialog,后续有哪些流程,例如:
用户点击【删除】按钮后,显示商品删除确认提示框,当客户点击【确定】按钮后删除该商品,点击取消按钮时,关闭Dialog对话框,取消删除操作;
4、【显示位置】:说明Dialog提示的位置,例如:当前窗口居中显示;
5、【是否有遮罩效果】:说明弹窗时是否需要遮罩效果,例如:点击【删除】按钮,遮罩显示Dialog提示;
使用场景:
1、用于紧急不可逆情况的提示,需要用户确认该信息。
2、用于提供列表项的详细信息或操作。
3、用于页面的调整确认。
windows系统的确定按钮一般在左边,而Mac OS的确定一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。
微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是最弱的。
dialog对话框,有三种常见的使用场景。其中表单对话框、提示类、表单类样式、嵌套类都是基于二次确认类对话框样式的改变而得到不同的样式。