新的APP演示良方:GIF动画

标签: 翻译 | 发表时间:2014-04-13 13:24 | 作者:可乐橙
出处:http://colachan.com

[国外设计第36期]

Next for Zite

每种事物都有回归的本能,长期以来,GIF动画在开发者当中,失去了它的统治地位,不再受欢迎,不再通用,近期它摆出了回击的姿态。尽管还是一如既往展示图像序列,但它不再像当年那些生硬的低画质视频,没有粗糙简陋的过渡效果。如今,GIF动画能够通过抢眼的效果和流畅的过渡,有效地聚集人气,给最终的动画一种柔滑精致的感观。

UI/UX开发者迅速估量了这种动画图片的潜力,它们虽小却非常有效,极具解释性。我们都知道,有时向客户或最终用户解释APP最后看起来将是什么样,会是多么困难、气人且耗时的事情;没有华丽的高质量截屏,精心绘制的用户界面配上一大堆解释和“手势”说明效果,并不怎么管用。只有视频和这些简短的GIF动画,才能轻松展示操作流程,并传达一款“活”APP的所有魅力,在众多功能组件之间,有效地展现交互。

颇具讽刺意味的是,我们的展示工具集中,最近补充了一种新工具,而它实际上一直以来就近在咫尺。

今天,我们汇集了一系列GIF动画作品,愉快地展现了各种移动应用的操作流程。

第一件作品是Dmitriy Chuta的Chapps,你可以欣赏它整个漂亮的动画效果,一组不同职业人员的照片卡。这张GIF图片展示了一种讨人喜爱的方式,通过令人愉快的视觉表现,来在数据库中进行选择和搜索。

First shot in Chapps

Bastien Leprince的APP概念设计,这里,我们的主要注意力,集中在地图组件内嵌的拖拽筛选功能上。所展示的所有功能界面和组件,相互间完美互动,为用户提供了一套流畅的操作流程。

App concept

George Frigo的FaceScan APP概念设计,尽管动画只持续了12秒,但它足够清晰地表达了这个APP的主要创意。对于那些想要一睹完整版的人,这位UI设计师也提供了AVI文件。

FaceScan app concept

Alexander van Ravestyn设计的WIP音乐发现APP,就如名字所暗示的,设计师想将用户的注意力引导到多媒体内容的浏览过程上来,不出所料,最终来到一个设计精美的音乐播放器界面。

Discover Music app

Jakub Antalík设计的Speedcam APP动画,设计师非常棒地通过动画表现他的APP。GIF漂亮地展示了speedcam的一部分,光彩夺目。

Speedcam app animation

Barthelemy Chalvet的Workflow Payment,这个团队展示了他们新APP的几张GIF。下面这张将关注点固定在支付流程上,看起来相当优雅便捷。其他GIF突出了时间轴、支付/费用、卡片和账户处理。

Workflow Payment

Barthelemy Chalvet的Dashag Tour,这个团队只是展示了一张小GIF动画,让人想起他们之前的项目。如果你想完全熟悉这个APP,可以访问他们的官方网站,里面包含了一大堆GIF动画,展示几乎所有的功能界面。

Dashag Tour

Sergey Valiukh的GIF动画设计,这个一流的界面有着令人愉快的精心处理的过渡动画,表现了在基本地图组件与主菜单间切换的简短流程。通过舒服的动画效果,一切相互衔接良好。

gif animaton

Devin Ruppert的Walkthrough动画,这张GIF展现了一个欢迎界面,带有多个动态图的幻灯片和登陆按钮面板。一切都活了,有效地表现了这个APP所带来的功能。

Walkthrough Animation

Mihnea Zamfir的交互概览,这是个非常简短却有效的动画,初衷是描绘一个从卡片目录中添加和删除项目的简单流程。

Interaction overview

Tobs设计了给队友删除和添加任务的动画,这张GIF动态展现了标准的滑动技巧,有效地支撑了整个审美取向,让APP看起来更鲜活、现代和诱人。

Delete task and assign task

Jan Losert的团队信息工具,这个团队为用户提供了大量解释性资料,不仅用来展示带有描述的静态屏幕截图,还有视频和一张巨大的GIF动画,展现这个APP的真实操作过程。

Ben Dunn的菜单交互GIF,这个动画GIF被当作展示动态美感的工具,表现了菜单优雅地从左侧滑出,并列出所有必要链接的过程。

Menu interaction

Ed Sansom的Poppin添加任务效果,这个APP有着讨人喜爱的圆形氛围和优雅的扁平美学取向,集各种柔滑效果于一张GIF,使它得到了恰到好处的强调

Adding a task

Dennis Terrey的第一件UI动画作品,这张GIF试图示范,如何使一个基本的菜单看上去干净、时尚和细腻。

UI Animation

Danny Spitzer-Cohn的Zite新鲜事设计,我希望用这个讨人喜爱的GIF动画来补充这篇作品集,它对高雅和传统的运用,绝对给人带来一丝愉悦的怀旧感。

Next for Zite

对于那些想要尝试这种展现方式的人,我们也准备了几样赠品——可以被轻松拆解成组件的GIF动画。

赠品:PixelBuddha的扁平风格预加载动画

Freebie: flat preloaders

Areus Wade预制的触摸手势动画

Precomposed Touch Gestures

结论

就APP创造者和客户(或最终用户)间的互动而言,像Adobe After Effects这样的视频编辑软件充满了机会和可能,能够解决很多问题。GIF图片可以用来简短的解释动画效果,有效的展现操作流程,让人更好地理解这是怎么回事。

原文链接

随意看看吧

活力四射的状态指示器:移动APP界面的加载动画与进度条

光彩夺目的柔滑渐变APP界面

将APP设计理念用于网页设计

8个优秀的移动APP字体运用案例

网页与APP中那些优美的登陆表单
无觅

相关 [app gif 动画] 推荐:

新的APP演示良方:GIF动画

- - 设计师可乐橙
每种事物都有回归的本能,长期以来,GIF动画在开发者当中,失去了它的统治地位,不再受欢迎,不再通用,近期它摆出了回击的姿态. 尽管还是一如既往展示图像序列,但它不再像当年那些生硬的低画质视频,没有粗糙简陋的过渡效果. 如今,GIF动画能够通过抢眼的效果和流畅的过渡,有效地聚集人气,给最终的动画一种柔滑精致的感观.

Jamie Beck的创意GIF动画图片

- scaoen - PADMAG视觉杂志
Jamie Beck来自美国,现居纽约,是一名摄影师,他擅长制作一些小的GIF图片,将画面的大部分制作成静止,仅某个细节有细腻的动画,造成奇妙的视觉效果和氛围. 他的个人博客:http://fromme-toyou.tumblr.com/. 以上这张的说明是:曼哈顿忙碌的一天,但总还是有时间读报纸.

AnimateGif – 快速创建 GIF 动画 | 小众软件 > 媒体工具

- Keen - 小众软件
AnimateGif 是一款小巧的 GIF 创建工具,只需要将一些图片拖进 AnimateGif ,一张 GIF 动画就出来了,简单、快捷. AnimateGif 支持 JPG , PNG , GIF 等格式的图片. 图片的分辨率最好一样,不然会有黑边. 下载(50.2 KB): dbank | 官方网站 | 来自小众软件.

9个javascript和gif动画解决方案

- 泽 - 我爱互联网
我开始学习制作loading动画是在我学习flash的时候,当时还是flash5. 如今,我们看到html/css/JS的网站,特别是由Ajax驱动的,loading动画是极其有用的让用户知道服务器到此有止处理请求. 不要低估它,它可以网站更具有用户交换性. 它用于表示在当前场景背后有事情发生,通知用户等一会.

GifCam:最佳免费gif动画精细录制/剪辑软件

- - 善用佳软
小巧、免费的新秀软件 GifCam,凭借『精确录制、后期剪辑』特色,自第一次试用,就成为我『自用首选,分享首荐』的 gif 动画制作软件. 而此前,我制作软件教程/界面相关的 gif 动画,求快则用 LICEcap( 文章)直接录制,求精确则手工截屏 + AnimateGif( 文章)合成,求优化则动用 GIMP( 文章).

使用 Byzanz 录制 Gif 动画或 Ogv 视频

- - LinuxTOY
Byzanz 是一个不错的选择. Byzanz 简单小巧,容易使用,既能录制 Gif 动画,又可录制 Ogv 视频. 可执行下列指令来安装 Byzanz,注意需要 root 权限:. Arch Linux 用户可在 AUR 中找到 Byzanz. 如果你不能在自己所用的 Linux 发行版包仓库中找到 Byzanz,那么可以获取其 源代码,自行编译.

前端必会技能-gif动画图片制作

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2924. //zxx: 标题没有任何意思,当然,本作选入中学语文教科书另当别论. 今天微博上晒支付宝年支付的人爆棚,看着自己可怜巴巴的那点支出,实在不好意思拿出来;尤其对比 @老赵 10万+的支出. 除了这个,我还对活动页面上右上角,动啊动的效果感兴趣:.

[原]FFmpeg续篇:截取视频片段转成GIF动画

- - 呦呦鹿鸣
前段时间写过 一篇文章,介绍了FFmpeg的几个常用的命令行. 最近,项目里需要做一个把视频片段转成GIF动画的功能,便于用户分享到微博. 惊奇地发现,原来强大的FFmpeg是支持的. 可以简单地执行下面的命令行:. 意思是:将D:\Media目录下的源文件bear.wmv,从第25秒的位置开始,截取10秒长度的视频转成GIF文件,保存为D:\a.gif.

苹果 iPhone、iPad、iPod touch 上将多张照片拼接或将视频转为 GIF 动态图片的应用:GIF快手(免费 App)

- HICU - 苹果fans-中文 Apple Blog
    苹果 iPhone、iPad、iPod touch 的摄像头拍摄的都是单张照片,如果你想把多张照片拼接成 GIF 动画图片,或者录制基于 GIF 图片的“视频”(虽然苹果 iOS 设备的摄像头能直接录制视频,但传播起来(比如发微博)麻烦得多),可以试试这款名叫 “GIF快手” 的应用. 它是中文界面,能设置每帧图片间隔时间,支持将生成的 GIF 动态图片分享到新浪微博/腾讯微博/人人网/邮件附件或传回电脑.

Web 应用程序中提交表单时处理 GIF 动画的最佳实践

- - 博客 - 伯乐在线
来源 developerWorks. 简介: 在 Web 应用中的提交表单时,为了很好的用户体验或防止表单重复提交,我们通常会从请求发起那一刻开始,展示出一个动态的 GIF 图标来提示用户请求正在处理. 本文将介绍在传统的提交方式下,如何巧妙地使用 Javacript 方式来解决请求发起时 IE 浏览器下动态沙漏图标不播放的问题,以及在请求完成后点击浏览器回退按钮,Firefox 浏览器依旧显示着沙漏图标的问题.