史上最经典的8个UI动效

UI动效仿佛是数字产品的调味料:添加太多会破坏作品的精髓,但是适当地添加就有助于产品展现其最好的品质,在瞬间传达出或复杂、或新颖、或激进的想法。

尽管很少得到应有的认可,动效是任何数字体验(和产品)的基本组成部分,因此,我们整理出了8个最重要的用户界面动效。它们隶属于不同的时代、空间和媒体,但有一个共同点:每一个都代表着我们与技术和思想互动方式的一次飞跃。

1. 闪烁的光标(1967)

光标仿佛自互联网诞生起就已经存在。就像任何真正的艺术经得起时间和媒介的考验。

1967年,Charles A Kiesling首次申请了这项专利。目前,光标仍在手机、atm机、电脑、浏览器上被使用,当然还将被运用到未来的设备上。它是UI动效的蒙娜丽莎——简单、经典、并为整个流派的艺术表达奠定了基础。

光标建立了一个至今仍在使用的约定,它让我们知道屏幕的焦点在哪里,并告诉你,它已经为您的输入做好了准备。就像最忠实的朋友一样,闪烁着的光标陪伴并见证着我们的进步。

2. 世嘉创世纪( Sega Genesis )的闪屏(1989)

每台游戏机都有自己的开场动画,但最具标志性的当属“世嘉创世纪”(Sega Genesis)。

世嘉创世纪是一个好斗的对手,相比之下,任天堂的Super NES要保守得多。世嘉的刺猬索尼克很有个性,而马里奥是一个谦虚的笨手笨脚的水管工;世嘉的硬件是光滑而黑色的,任天堂则是灰色而笨重的。品牌个性在用户使用的第一秒便得以传达。

每一款世嘉创世纪游戏的开机动画都是如此的不同。(从Blockbuster租借一款新游戏,观看其独特的开机动画,可能会让一个11岁的孩子兴奋不已)。与此同时,任天堂娱乐系统(1985年发布)和超级NES(1991年发布)都跳过了开屏的设计,从而错过了一个能制造些许乐趣的机会。

世嘉帮助任天堂和电子游戏达到了另一个高度,但在21世纪头10年逐渐没落。然而90后的孩子永远不会忘记:世嘉的动画意味着一场有趣的经历的开始。

3. AOL的登录界面(1995)

2019年,一切都是在线的。我们甚至能在口袋或厨房里有这样一部扬声器,只要我们唤一声它的名字,它就立刻把我们和互联网连接起来。

但曾几何时,上网是一种有意识的行为。你需要坐下来,整理好你的日程安排(和电话线),并在精神上做好与世界各地的陌生人联系的准备。

对许多人来说,AOL是他们接触网络的第一个窗口,他们认为自己并不孤单。它的最后一帧,一个人转变成一个群体的一部分,是网络最初的乐观承诺。

4. Windows XP的下载界面(2001)

曾经,下载速度如此之慢,我们需要一种视觉上的安慰,告诉我们:是的,那个文件正在一个字节一个字节地下载中。

时间估算栏总是让人抓狂,但看着这些文件从左到右懒洋洋地飘浮,会让你进入催眠状态。你接受了自己的命运。在某个地方,数据慢慢地流入你的电脑,你很快就能看到同事们引人入胜的TPS报告,或者你在TRL上听到的那首难听的歌。

5. Mac的沙滩球(2001)

早期的mac的加载是一个滴答作响的手表。窗口随着沙漏加载出来。这仿佛是你的设备在提醒着你:你的生活中有多少时间正随着加载而白白流逝。

之后,加载变成了一个旋转的沙滩球。我们仍然不喜欢等待,在现代设备上,这通常意味着出了真正的问题。但至少OSX设备给了我们一些视觉上好看的东西,让我们对等待有了一些耐性。

6. iMessage的“输入中” (2007)

这一标志性的动效不仅意味着你的朋友正在输入,这也是永远使你焦虑的三个小点:

“我的玩笑成功了吗?我会被拒绝吗?对方在策划一场恶狠狠的反击吗”

虽然我确信这一设计的初衷只是让用户知道他们的联系人在打字,但它最终是对人类状况的一种映射:我们永远无法真正了解人们对我们的真实想法。

7. Uber的打车搜索动效(2010)

打开Uber,看到一小排可选的私人司机,感觉很奢侈,但也觉得很安全。这将可怕的拼车化为一种美妙的体验:无论你身在何处,想如何到达目的地,你都可以回家。

8. Twitter的下拉刷新(2010)

在这个内容永无止境的时代,刷新是需要进行重大革新的传统之一。洛伦·布里切特(Loren Brichter)发布Twitter应用Tweetie时,推出了移动应用中最具革命性的UI动效之一:“下拉刷新”(the pull torefresh)。

现在,“下拉刷新”几乎是每个应用程序的一部分,也是它自己的一种艺术形式。它是我们日常生活中固有的一部分;就连小孩子也本能地知道如何用这种方式使用触摸屏。

刷新的吸引力一直存在在我们身上,只是一个Twitter应用程序让它浮出了水面。


原文作者:Nicole Beckerman(InVision团队)、Sean Blanda(InVision团队)

原文链接

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

推荐阅读更多精彩内容

  • 改进UI交互的实用建议 让我们来看一些UI动效从良好到优秀的例子,只要稍稍调整,就可以使用动效来提升UI模式。 列...
    Ystarsan阅读 799评论 0 0
  • 我们花了很多时间来改进数字体验,而之后才进行构建动画。实际上,很多设计师没有动效设计的经验,我们很多动效的设计都依...
    LuluZhang_阅读 3,252评论 0 19
  • 2018.06.13 太阳的白世界桥:跨越心智的鸿沟,才能迎来崭新的未来。 每日践行:想要除掉花园中的杂草,最好的...
    天涯海角_a50e阅读 147评论 0 0
  • 1,初见碧瑶 文/颜克 午后,从马尼拉出来一直向北,在平原行车6个小时后,再绕2个小时的山路,就到了幻想中的碧瑶。...
    颜克阅读 179评论 2 0
  • 习题一:第一个程序 习题二:注释和井号 习题三:数字和数字计算 习题四:变量和命名 习题五:更多的变量和打印 习题...
    张毛毛的成长记录仪阅读 225评论 0 0