浅谈用户交互关于“对话框”的使用分类

用户交互_对话框


对话框是让用户执行命令、向用户提问、向用户提供信息或操作反馈的模态化窗口;

页面中央打断式出现,需搭配30%蒙层,通过操作按钮或“x”键才能退出对话框;

因操作场景不同,对话框通常以询问式出险,特殊场景可配置选择、输入等元件交互使用,详见如下坐标轴分布及其场景应用指南。




对话框的特点

阻塞:模态窗口,出现后仅可操作对话框内容;

遮罩:对下方页面进行遮罩,完成内容后才可对下方页面进行操作;

居中:出现位置在页面中央




对话框的使用坐标分类示例

浅谈用户交互关于“对话框”的使用分类_第1张图片


一阶

[通知]、[提示]、[说明]

一般不涉及到命令输出,操作后关闭对话框或进入对话框指定任务

1.1基础

浅谈用户交互关于“对话框”的使用分类_第2张图片

1.2、兼容

浅谈用户交互关于“对话框”的使用分类_第3张图片

1.3、极大值

浅谈用户交互关于“对话框”的使用分类_第4张图片

基础+1

浅谈用户交互关于“对话框”的使用分类_第5张图片


二阶

[确认]、[执行]

对发起内容的肯定性操作或退出对话框;发起操作后需执行当前任务


2.1、基础


浅谈用户交互关于“对话框”的使用分类_第6张图片

2.2、兼容

浅谈用户交互关于“对话框”的使用分类_第7张图片

2.3、极大值

浅谈用户交互关于“对话框”的使用分类_第8张图片

2.4、基础+1

浅谈用户交互关于“对话框”的使用分类_第9张图片

2.5、基础+2

浅谈用户交互关于“对话框”的使用分类_第10张图片

2.6、兼容+1

浅谈用户交互关于“对话框”的使用分类_第11张图片




三阶

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


3.1、基础

浅谈用户交互关于“对话框”的使用分类_第12张图片

3.2、极大值

浅谈用户交互关于“对话框”的使用分类_第13张图片

半自定义

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

浅谈用户交互关于“对话框”的使用分类_第14张图片


自定义

适具体需求而定,不做任何限制;右图比例为参考值;


5.1、基础

浅谈用户交互关于“对话框”的使用分类_第15张图片

5.2、兼容

浅谈用户交互关于“对话框”的使用分类_第16张图片




总结

以上为本次针对“对话框”做出的归类和总结;

在整理公司移动端交互规范指南时;如有不足,还请各位看官加以指正;

后续小编将持续更新关于交互设计指南用户交互章节的相关设计要点,更新周期大概1周1次;


注:图片资源来源于网络,设计资料内容来自于个人的相关看法及一些相关资料的总结。

你可能感兴趣的:(浅谈用户交互关于“对话框”的使用分类)