Wishlist 0 ¥0.00

动效设计案例!学学这些爱不释手的加载动效设计

我们现在越来越注重细节,小到加载动画,大到界面配色。这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了。所以今天我们要重点说说那些你以前觉得“不那么重要”的加载设计。

等待和加载动效几乎是无处不在了。设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验的必须组件。

虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部分,在许多设计项目中,加载动效几乎做到了无处不在。内页切换的时候可以用,组件加载的时候可以用,甚至幻灯片切换的时候也同样可以用上。不仅如此,它还可以用承载数据加载的过程,呈现状态改变的过程,填补崩溃或者出错的页面,它们承前启后,将错误和等待转化为令用户愉悦的细节。

等待和加载动效中,最常见的表现形式是进度条,但是许多设计师采用了更加有趣的表现手法,接下来我们一起来看看这些案例。

       4:20 Dead Obies

动效设计 加载方式 加载动效 UI动效设计

加载动效并不一定非要用进度条,设计师在这个页面中将LOADING这个词的每个字母拆开,不断复制来呈现加载过程,静态的文字和动态的效果交错,让人在新鲜有趣的动画中度过略显漫长的加载过程。

       NewsTech

动效设计 加载方式 加载动效 UI动效设计

充满科技感的页面设计为整个网站定下了基调,这种面向未来的设计手法在这个页面中体现到极致,加载动效采用了各种数据加载的样式,将等待过程变成了一个巨大的“WOW”。

       Ferias Beach Park

动效设计 加载方式 加载动效 UI动效设计

这个Ferias海滩公园的页面借由有趣的配色和动效传达出欢快的情绪,加载动效中童趣盎然的设计也令人难忘。

       Mad Max Fury Road

动效设计 加载方式 加载动效 UI动效设计

年度神作《Mad Max 4》本就是以突出的视觉设计而令人记住,所以它的官网在设计美学上也保持了一致性。加载动效中那个粗糙但古朴的LOGO也与整个电影风格相呼应,营造出躁动而个性十足的氛围。

       Panda Raid

动效设计 加载方式 加载动效 UI动效设计

网站的加载动效还是保持了进度条的基本设计,但是展现方式上借用了汽车的形象,加载速度不同的时候轮胎滚动的速率也不同,有趣、拟真也和网站主题贴合。

       Wiser Digital

动效设计 加载方式 加载动效 UI动效设计

在加载过程中,设计师用最经典的游戏乒乓球来帮你填补等待的时间,虽然你无法参与到游戏当中,但是这种情怀满满的加载动效给人印象非常深刻。

       Tenfold Creative

动效设计 加载方式 加载动效 UI动效设计

为了填补等待的时间,设计师将朗朗上口的文字做成动效,在加载的时候用它们来与你进行互动。虽然许多文字是一闪而过,但是你可以在阅读中度过这段时间。

       Tham Nguyen

动效设计 加载方式 加载动效 UI动效设计

Tham Nguyen 是一位著名的法国女设计师,她的个人网站中糅合了自然的情怀和女性的细腻,加载动画采用了走路的小女孩儿,俏皮而有趣。

       50m.space

动效设计 加载方式 加载动效 UI动效设计

和前面许多案例一样,设计师采用了扁平风的动态插画来填补等待时间,强化整体风格。

       Madagence

动效设计 加载方式 加载动效 UI动效设计

其实这个加载动效看起来并不够细腻,但是它充分运用了几何图形,四个简单有趣的方格轮流变幻,值得学习。

       Kajikenseiji

动效设计 加载方式 加载动效 UI动效设计

设计师在这个网页中,使用的是吐着气泡的鱼来作为过度,古朴的文字强化了网站的品牌形象,简单的色调和鱼的形象也充满了日系网站的独特气质。

       One Kichjoji

动效设计 加载方式 加载动效 UI动效设计

和之前的网站一样,加载动效采用了单色的灯塔形象,简单有趣但是也优雅地呈现了品牌形象。

 

       Interatction with Artificial Physics

动效设计 加载方式 加载动效 UI动效设计

这是一个精心设计的网站,强调人造和物理的属性,这种兼顾自然和人工设计的特征也体现在加载动效上,四个相互运动的气泡时大时小,看起来自然而混乱,但是仔细看你又仿佛能找到某种规律,这个有趣的过程中你会忘记时间的流动,直到网站加载完成。

       Catch the Dragon

动效设计 加载方式 加载动效 UI动效设计

水波纹扩散一般的加载动效,在黑白色调之下,兼顾了自然的特征和科技的感觉,微妙的互补效应和震动的效果令整个动效简单而赏心悦目。

       SLMF

动效设计 加载方式 加载动效 UI动效设计

大胆的排版和明显的对比让整个页面给人沉稳而舒服的感觉,用数字来呈现加载过程,字体随着加载不透明度会逐步提升,让人感受到过程的变化,简单但是非常值得学习。

       Zodiac

动效设计 加载方式 加载动效 UI动效设计

这个页面的加载动效堪称是梦幻级的,它不仅充满艺术感,而且设计得整齐划一,加上戏剧感十足的背景,兼顾美观和技术的动效变化简直是教科书一般的设计。

       MTV Bump

动效设计 加载方式 加载动效 UI动效设计

打开页面之后,鼠标光标变成了复古的沙漏造型,更让人惊喜的是加载动画是一个不停吞吐着彩虹色带的MTV Logo,复古而有趣。

       Y7K

动效设计 加载方式 加载动效 UI动效设计

Y7K的加载动效其实蛮讨巧的,巨大的LOGO上叠加一个色彩丰富的视频,漂亮而简单。

       The Happy Forecast

动效设计 加载方式 加载动效 UI动效设计

这个网站的动效设计手法并不鲜见,但是设计是不仅仅是添加了进度条那么简单,他还用渐变的动态文字告诉用户正在加载网站的哪个部分。时间很长,但并不无趣。

结语

动效设计是小伎俩,但是它在用户体验设计中的作用是不可估量的,它让折磨人的等待变成了愉悦的消遣。动效设计是大势所趋,加载/等待动效也是其中的重要组成部分,如果你热衷于动效设计,不妨关注一下这个领域。

常见的几种Loading加载动态效果形式赏析

在浏览网页、玩游戏、手机应用等场景,因为网速慢或是硬件差的关系,难免会遇上等待加载的情况,没人喜欢等待,耐心差的用户可能因为操作得不到及时反馈,直接选择放弃。正所谓细节决定成败,这时添加一个Loading进度条动画,就可以大大缓解等待时候的无聊和焦虑,有效让用户明确知道目前Loading的状态,并对结果有一个直观的预期,甚至有趣巧妙的设计,能让用户爱上等待,把等待看成一件很美好的事。

那常见的Loading动效有哪些形式呢?在观摩过大量优秀的案例后,作者总结出Loading动效通常有B.R.A三种形式。为避免误解,下面逐一解释一下:

B,Bar。Loading动画从某种角度也可以说是进度条,一般用于较长时间的加载,通常配合百分比指数,让用户对当前加载进度和剩余等待时间有个明确的心理预期。

最常见的直线进度条。

或者圆形进度条。

进度条和转场完美融合。

也有给LOGO描线的进度条。

R,Rotation。旋转代表时间的流逝,暗示着时钟一样顺时针旋转。不停循环转动的动画,能有效吸引注意力,给用户时间加速的错觉。旋转Loading动画一般用在较短的加载中,要是一直转却始终加载不出来,用户又该烦躁了。

最常见的自转。

顺时针自转暗示着时间的流逝。

巧妙地用两架飞机形成公转。

不规则多向转动,让用户把等待的时间用在研究运动规律上。

A,Animation。如果在Loading时配上一个形象的动画,能大大提高产品的亲和力和品牌识别度,用户大多会接受并喜欢这样的形式,一般品牌形象明确的产品会这么做。

用可爱的奔跑拟人形象来告诉用户:我在很努力加载请耐心等待。

这样萌的章鱼,用户一定舍不得加载界面的结束。

以上就是常见的三种形式,当然创意是无止境的,还有很多Loading动效同时融合了这几种形式,或者用一种全新的形式,比如作者多年前在PSP上见过将小游戏植入到Loading界面中的情况,以至于感叹Loading时间太短都不能好好玩耍了。

真的还是PS的?来测试下你的观察力吧

巨头设计软件Photoshop 25周年庆,Adobe公司制作了一个用测试你观察力的在专题游戏,内容是一些逼真的图像和经过PS处理的图像,让用户来分辨真假,这里就考验一下你的观察能力了,在测试的同时,也感叹PS的强大,真的无所不能啊。

PS作品 PS图文教程 ps制作

下面一起测试下你的观察能力吧,首先打开Real or Photoshop的专题页面。

专题地址:http://landing.adobe.com/en/na/products/creative-cloud/69308-real-or-photoshop/

点击【START】按钮后就可以开始测试了,每个测试页面都会出现一张图片给你分辨是真是假,如果是真的就点击【REAL】按钮,如果你认为是PS图像就点击【PHOTOSHOP】按钮。

下面是一些截图:

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

PS作品 PS图文教程 ps制作

最后

额… 其实小编有点不好意思粘它出来了,你对了几个呢?欢迎在下面留言处粘出来给大家看看,留言可以上传图片,记住不要做假哦,把你第一次的测试结果分享出来:)

PS作品 PS图文教程 ps制作

再见Photoshop? 10个免费便宜的替代工具

 

Photoshop制作 图片设计工具 Photoshop代替工具

    说到编辑照片和图像文件,一般很多人都使用photoshop软件。然而,使用现在的最新版本Photoshop CC每月最低也要支付980日元,感觉使用门槛有点高的人应该不少吧。

    有一篇文章,推荐了10个免费或比较便宜的图像编辑软件作为Photoshop的替代工具“10个 Photoshop替代工具(免费或便宜)”,我借此文章,连同个人推荐的工具一起总结出10个为大家介绍。

    详细内容从下面开始。

Gimp(Win / Mac / Linux)

    GIMP (Gnu Image Manipulation Program)是适配于所有OS(操作系统)的图像编辑工具。它不仅能免费下载,还具备了修饰图片所必需的功能、是以高性能为卖点的。但是,同Photoshop一样功能有些过于繁杂,界面交互设计方面也有待改善,要习惯使用它需要花一些时间。

Photoshop制作 图片设计工具 Photoshop代替工具

Photoshop Express Editor(网页在线 / iOS / Android)

    Photoshop Express Editor是Adobe公司自家发布的一款免费图像编辑工具。它不仅可在线使用,也有适用iOS和Android的应用程序。虽然只有PS的基本功能,但它配有滤镜,在免费软件里算是具备足够的修饰图片功能啦。

Photoshop制作 图片设计工具 Photoshop代替工具

Pixlr(网页在线)

    Pixlr是一款可在线随时使用的云储存图像编辑工具。界面和Photoshop几乎一样,也有一些裁切工具、蒙板之类熟悉的功能。可以从本地上传图片进行编辑,适用于快捷处理图像。

Photoshop制作 图片设计工具 Photoshop代替工具

SumoPaint(网页在线)

    SumoPaint也是一种能在线使用的云储存图像编辑工具,同时也有专业版。具备裁切、调整图像尺寸等一些基本的功能。

Photoshop制作 图片设计工具 Photoshop代替工具

Paint.NET(Windows系统)

    Paint.NET是一款免费、开源的图像编辑工具。虽然不像Photoshop、Gimp等软件功能多,但只是变个图像尺寸这种简单的功能还是很好用的。此外它有很多活跃的讨论社区,在社区可根据自己需要下载一些插件,说不定可以成为自己的定制款哦。

Photoshop制作 图片设计工具 Photoshop代替工具

PicMonkey(网页在线)

    PicMonkey也是一款可以在线进行图像加工的图像编辑工具。比如要在照片上添点文字啦、或者加一个心形的装饰啦。适合这种需要稍微装饰处理的编辑需求。

Photoshop制作 图片设计工具 Photoshop代替工具

Canva(网页在线

    Canva是为满足进行简单设计需求的一款云储存图像编辑工具。除配备基本的拖拽移动功能外还可以上传自己的设计作品和全世界的设计师交流合作,功能颇具创意。

Photoshop制作 图片设计工具 Photoshop代替工具

Affinity(Mac)

    Affinity的工具设置不输photoshop。2014年发行,前不久有次大更新,发布了一些新功能。软件购入2年内,可以免费更新,这点对用户非常友好。可以读取psd和ai格式文件,也可以输出psd和svg格式文件(49.99美元大约6000日元)

Photoshop制作 图片设计工具 Photoshop代替工具

Pixelmator(Mac)

    Pixelmator 是一款mac专用的图像处理程序。经常被用来代替photoshop使用。也有很多使用教程。除去mac专用这一点,它价格相对便宜,功能丰富,是一款优秀的候补设计软件。(29.99美元大约3600日元)

Photoshop制作 图片设计工具 Photoshop代替工具

Photoshop Elements(Win / Mac)

    Photoshop Elements 如果处理图片时不需要特别专业的工具,那就推荐这款软件,也可以说是photoshop的廉价版。当然,Photoshop Express Editor还有很多不足,如果不想每月为photoshop支付980日元,那这款软件还是不错的(13,800日元)

Photoshop制作 图片设计工具 Photoshop代替工具

以上就是可以代替photoshop的图像处理工具大集合。另外,photoshop也有30天免费体验,可以尝试一下。

About Us

Since 1996, our company has been focusing on domain name registration, web hosting, server hosting, website construction, e-commerce and other Internet services, and constantly practicing the concept of "providing enterprise-level solutions and providing personalized service support". As a Dell Authorized Solution Provider, we also provide hardware product solutions associated with the company's services.
 

Contact Us

Address: No. 2, Jingwu Road, Zhengzhou City, Henan Province

Phone: 0086-371-63520088 

QQ:76257322

Website: 800188.com

E-mail: This email address is being protected from spambots. You need JavaScript enabled to view it.