一个关于弹窗案例的思考

弹窗,顾名思义,是指弹出的窗口,强调一个弹字。无论是在web端还是在移动端,弹窗都是一种十分常见的一种交互方式,经常被用于以下四种情况

1.广告投放

2.用于系统提示、通知、警告类的消息弹窗。

3.用户引导

4.显示加载

本次案例里主要涉及提示弹窗引导弹窗:主要是对一个批量上传的新建任务弹窗功能的改进。

1.弹窗作为模态窗(Modals)的一种,本身处在一个不稳定的状态。本项目里面的上传任务较为复杂,安排在一个弹窗里操作会在一个不稳定状态耽误用户的大量时间,以至于在这段时间里需要把填充弹窗作为首要任务(因为一旦离开可能弹窗的不稳定性会造成其信息丢失)。所以将弹窗的任务分解,把“分配主播”功能放在上传结束之后。

原始设计
降低分配主播的优先级


2.第二版中,重新思考了分配主播功能的意义:如果将其放在上传结束后再分配,需增加让用户“立即分配”和“以后分配”的选项已将其与上传步骤分开,若“以后分配”的话,会使一部分用户忘记分配,从而造成二次选择,增加了不必要交互的步骤。故直接取消弹窗,用面包屑的方式将其潜入在网页之中。

嵌入网页
信息全在网页里显示

此时整个业务流程也变为

流程图

3.在第三版中,对这样的修改提出异议:上传作品虽然过程复杂,但是放在网页中,与总的任务列表的父子级关系没有表现出来。且流程涉及继续上传,也过于复杂。弹窗不是不可取,可以选用引导弹窗,把复杂的选项安排在不同的弹窗步骤里,通过下一步,上一歩的操作来维系稳定。

引导弹窗



此时任务流程也得到简化



附:两个改进

1.弹窗(可能是警告框,Alert):

Alert会阻断用户当前操作的流程,一般是通过提示来选择「确定」或者「取消」。此时任务流程也得到简化

出于人机工程学,左边的伸出去的点击要比右边缩回去要容易。故一般确定在左,取消在右。


2.弹窗的终止性:由于Alert会阻断用户当前操作的流程,造成对用户的惊吓。故除了必要操作和提示要出现弹窗之外,一般不需要出现太多弹窗。诸如此类的Alert犹如鸡肋,不如去之后快。

��������s�۾��

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,380评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,680评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生x阅读 15,967评论 3 119
  • 天气渐凉,都多穿些衣服,防止着凉了,
    天长地久盼三生阅读 118评论 0 0