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

用户交互_对话框


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

页面中央打断式出现,需搭配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次;


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,040评论 3 119
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,620评论 25 709
  • 爸,我这几天在外出差,这个班是以家庭教育为主题的,请的主讲老师是全国有名的教育家庭教育专家,所以我也在学习,学习了...
    门外一只牛阅读 1,937评论 0 0
  • 欢迎来到博星教育108将讲师朱老师课堂,这里是朱老师第223条早安问候。 求知若饥,虚心若愚 (stay hung...
    高飞1阅读 1,261评论 0 0
  • 补一个昨天傍晚的心情 知其不可为而为之 像一个小心翼翼的小偷 也像一个自编自导的小丑 我可能是 真的走火入魔了吧
    念晴柔阅读 1,391评论 0 0