美文网首页设计UI设计UI
史上最经典的8个UI动效

史上最经典的8个UI动效

作者: jwjwj | 来源:发表于2019-01-17 19:58 被阅读32次

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团队)

原文链接

相关文章

  • 史上最经典的8个UI动效

    UI动效仿佛是数字产品的调味料:添加太多会破坏作品的精髓,但是适当地添加就有助于产品展现其最好的品质,在瞬间传达出...

  • AE动效设计课堂笔记

    UI基础动效设计需要考虑的点: ①逻辑 ②空关系 ③层次感 ④架构 UI动效的三个特性: 功能性:动效对交互引导和...

  • UI动效

    分类: 衔接类动画:过度,自然 特效类动画:吸引注意力 PS将AE动画转换成gif的时候,ctrl+alt+shi...

  • UI动效

    1、挤压和拉伸 用来描述目标对象的刚性和质量,定义对象的物理属性。作用设计师你应该定义UI的属性:固定架构、刚性表...

  • UI动效

    动效软件 AE 动效软件的老大,功能强大,操作相对复杂,主要用于制作复杂的动画,简单的动画需求有其他更加容易上手的...

  • 动态ui设计为什么越来越受欢迎?

    如今的APP设计当中,其中的UI动效也越来越酷炫,为什么UI动效越来越受到青睐呢? 下面就和大家聊聊APP UI动...

  • 产品体验日记02 - UI Movement

    今天体验一下 UI Movement​uimovement.com 这个UI动效的网站,里面的动效非常值得学习。 ...

  • 腾讯出品的交互微动效设计指南

    本设计指南适用于UI设​计界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了...

  • 成就出色的UI动效技巧

    改进UI交互的实用建议 让我们来看一些UI动效从良好到优秀的例子,只要稍稍调整,就可以使用动效来提升UI模式。 列...

  • 桐乡平面设计培训:UI设计如何才能更进一步

    UI动效现如今在APP和网页中几乎已经成为了基本的组成部分,经过仔细打磨的UI动效对于整个界面的提升是显著的。 动...

网友评论

    本文标题:史上最经典的8个UI动效

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