弹窗总结ing

作者: 简里的简书 | 来源:发表于2018-07-22 12:35 被阅读4次
image.png

今天来聊一聊 产品设计 各环节中必不可少的元素【模态弹框】和【非模态弹框】

一、相关定义

模态弹窗:打断用户流程,用户可以通过完成任务或点击外部区域来关闭;
非模态弹窗:不打断流程,用户不回应也可以进行操作。

二、差异

模态弹框和非模态弹框最大的区别就是是否强制用户交互

三、模态弹窗&非模态弹窗的各种表现形式

(Alert、Modal/Dialog、Popup、Popover/Tooltip/Hovercard、Toast、Snackbar)

image.png

模态弹窗形式

Alert(警告框):

会阻断用户当前操作的流程,一般用于需要立即关注处理的警示信息(警示信息要言简意赅), 警示的窗体通常是前置在当前用户界面,使得用户不能忽视之而必须立即做出响应, 通过提示来选择「确定」或者「取消」。Alert 一般不允许通过弹窗外的操作来关闭,但现在很多 Alert 是通过 Modals 的形式展现的。

Modal/Dialog

一般用于通过点击或其它动作后产生的二次操作,操作的窗体就是Modal 或 Dialog。一般适用于用户进行判断操作。Modal 或 Dialog 主要用于那些不必时时刻刻显示在主界面上,在一定情况下才展示的信息(包括操作本身),通常伴有遮罩层且用户点击空白处(或者关闭按钮——如果有的话)即可消失。


image.png
image.png
image.png
Popup

一般用于展示一些不需要立即处理的信息。但Popup 一般不会自动消失,需要手动关闭,手动关闭的行为表示你已经看到并知晓信息了(跟“勾选表示我已经阅读”的意思差不多)。

Popover/Tooltip/Hovercard

用于对于页面上某个元素展示额外的信息。常常用来添加额外的说明或提示,或者在用户进行某些动作予以预告形式的提醒(比如“点击这个链接会发生什么”的情景)。


image.png

非模态弹窗形式

Toast

一般是进行某些操作后会出现的提示,有时间限制,如果不管它就会在一定时间后消失(一般是几秒钟)。它们大多时候只是展示信息,但在有些地方,例如 iOS 版 Outlook APP,将「归档」和「删除」后的「撤销」操作放在了 Toast 中。


image.png
image.png
Snackbar(Android独有)

当你删除某张照片时,可以在屏幕底部出现Snackbar(仅Android),提示“照片成功删除”,并附带撤销操作,当用户点击撤销时,照片可恢复。用户不进行操作Snackbar则消失,照片删除成功。
虽然snackbar属于非模态弹框,但是它也有模态弹框的一些特点。例如snackbar也有按钮来供用户交互;此外snackbar一般会出现在界面下方,这点又和动作栏中的Action sheet很像


image.png

相关文章

  • 弹窗总结ing

    今天来聊一聊 产品设计 各环节中必不可少的元素【模态弹框】和【非模态弹框】 一、相关定义 模态弹窗:打断用户流程,...

  • 2016.10.31星期一西瓜会怪木西西工作日报

    1.今日工作总结 premiere学习,音频剪辑 【ing】 录制视频课程《暗时间》 【ing】 ...

  • 关于弹窗Dialog,Toast,PopupWindow,Sna

    关于弹窗Dialog,Toast,PopupWindow,SnackBar总结分析目录介绍:0.关于弹窗概述1.关...

  • APP页面提示样式小总结

    最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。 我按弹窗提示的样式分为了以下几种来进行说明。每种样式...

  • 总结

    总结: number +str ing 拼接 number +boo L ean boolean转number ...

  • APP弹窗的分类及设计技巧

    刷了很多文章,看到各式各样的弹窗分类,今天总结一下。 什么是弹窗? 弹窗又称为对话框,是App与用户进行交互的常见...

  • 新任务

    压力山大。奋斗中ing,也是对自己的总结和升华吧!

  • 【ING】dfs总结

    https://leetcode.com/tag/depth-first-search/ https://leet...

  • iOS 三方库汇总

    总结https://github.com/Sakyaa/Resource 启动页 XHLaunchAd 弹窗Ale...

  • Appium-处理系统弹窗

    前言: 最近在搞appium自动化,iOS的系统弹窗是大家都会遇到的,本文来总结处理这种弹窗的用法。 环境: Ma...

网友评论

    本文标题:弹窗总结ing

    本文链接:https://www.haomeiwen.com/subject/eielmftx.html