弹窗发展简史(一):Alert弹窗

PC端软件和移动端应用中的弹窗是它们和用户之间进行信息交互的重要方式之一,也是GUI(Graphical User Interface)重要的组成部分。

在最早的CLI(Command Line Interface-命令行界面)界面时,囿于文字的表现形式和交互形式的单一性,并没有弹窗的界面元素,但已经有了类似的提示信息,但不是模态的,用户很容易忽略。

CLI的模仿弹窗效果

在GUI交互方式诞生后,在操作系统里和在浏览器上,逐渐出现并完善了三种基本的弹框类型,这三种弹窗类型分别针对三种不同的使用场景,这些弹框都是模态的,如果用户不对当前的弹框界面元素做出反馈,就不能进行后续操作,这三种弹窗形式分别是:

1. Alert弹窗

Alert弹窗是用模态方式阻止用户当前操作,并告知用户相关信息。

Alert弹框

Alert弹窗仅仅单向通知用户某个信息,不能收集用户的反馈信息,系统仅仅侦测判断用户被动接收到信息并点击了“确定”按钮,系统就会解散弹窗并继续进行后续操作。

Alert弹窗的交互特点是:模态地阻断用户当前和界面的其他交互,强迫用户点击“确定”按钮来确保用户明确了解当前发生的状况,Alert弹窗只是线性流程上的一个断点,一个安全阀,本身除了返回是否执行的状态,不返回任何其他值,所以也不可能在点击“确定”按钮后提供不同支路。

所以Alert弹窗最适合的使用场景包括:强出错提示、强知会通知、新手引导、系统反馈等等不需要用户给出选择,只需要用户单向被动接收系统信息的使用场景。

Alert 弹窗的交互流程

Alert弹窗在IE和Chrome等浏览器上可以用Javascript代码快速实现,你可以在浏览器地址栏输入“javascript:alert();”查看效果。

Alert弹窗以其简单易用、可递归使用、可本地调用等特性而受到开发者青睐,成为最广泛使用的一种交互控件,然而也正是因为其这种使用简单的特性而成为垃圾代码、恶意代码的重要工具。

日本刈谷市警方近日质询并指控了一名13岁的女学生,起因是她将一段恶意代码的链接放到了在线公告栏上,广泛传播代码。

图片发自简书App


这段有问题的恶意代码是弹出警告消息的无限循环,每当你点击“确定”就会立即显示新的消息,这种恶意代码就是利用了Aert弹窗的简单易用的特性。

恶意代码展示效果

而这段代码只有短短几行:

for ( ; ; ) {window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/  )\n(ノΠU\n何回閉じても無駄ですよ~ww\nm9(^Д^)プギャー!!\n byソル (@0_Infinity_)")}

为了抗议日本警察将国中女生当做罪犯以及将分享链接定性为犯罪的荒谬行径,东京的程序员Kimikazu Kato在GitHub上发布了一个名为Let's Get Arrested快来抓我啊的项目。将只包含上述代码的项目托管到GitHub网站上,并呼吁大家一起分享,将犯罪行为置于警方触手可及的显眼位置。

这可以说是Alert弹框使用场景和被滥用可能的最佳代言了。

无论是在PC操作系统还是移动端操作系统上,系统自带的Alert弹窗都渐渐无法满足产品设计者和开发者的不断增加的用户体验提升要求和功能需求,所以产生了很多种形式的自定义样式。

多种多样的自定义Alert 弹窗

但万变不离其宗,Alert弹窗基本的交互特点:单向通知、无需用户选择、模态显示等等可以让我们在林林总总的交互控件中,一眼就认出这种使用最频繁、交互最简单的弹窗控件。

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

推荐阅读更多精彩内容