浅谈用户交互关于“对话框”的使用分类
2018-07-17 本文已影响0人
九天来仪箫
用户交互_对话框
对话框是让用户执行命令、向用户提问、向用户提供信息或操作反馈的模态化窗口;
页面中央打断式出现,需搭配30%蒙层,通过操作按钮或“x”键才能退出对话框;
因操作场景不同,对话框通常以询问式出险,特殊场景可配置选择、输入等元件交互使用,详见如下坐标轴分布及其场景应用指南。
对话框的特点
阻塞:模态窗口,出现后仅可操作对话框内容;
遮罩:对下方页面进行遮罩,完成内容后才可对下方页面进行操作;
居中:出现位置在页面中央
对话框的使用坐标分类示例

一阶
[通知]、[提示]、[说明]
一般不涉及到命令输出,操作后关闭对话框或进入对话框指定任务
1.1基础

1.2、兼容

1.3、极大值

基础+1

二阶
[确认]、[执行]
对发起内容的肯定性操作或退出对话框;发起操作后需执行当前任务
2.1、基础

2.2、兼容

2.3、极大值

2.4、基础+1

2.5、基础+2

2.6、兼容+1

三阶
三级输出方向,正逆向的基础上添加分流程
3.1、基础

3.2、极大值

半自定义
使用场景和内容不做限制;可通过替换图片和内容选择应用区域;

自定义
适具体需求而定,不做任何限制;右图比例为参考值;
5.1、基础

5.2、兼容

总结
以上为本次针对“对话框”做出的归类和总结;
在整理公司移动端交互规范指南时;如有不足,还请各位看官加以指正;
后续小编将持续更新关于交互设计指南用户交互章节的相关设计要点,更新周期大概1周1次;
注:图片资源来源于网络,设计资料内容来自于个人的相关看法及一些相关资料的总结。