沙海拾贝的惊喜!20个以细腻动画取胜的优秀网页设计

2014/12/11 9841

20-subtle-motion-website-design-1

编者按:动画今年是热门,像一场跳跃腾挪的表演,久看也不免厌倦。在这波浪潮里,有一小股设计师别出心裁,给网站加了细腻而不恼人的动画,一方面给网站添了生气,不致沉闷,一方面顺应潮流,锦上添花,实在是聪明得紧,来学习一下。

目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果,不过我们在使用动画时也不能太弦,可以适当的并且有意义的去使用,这才不会分散网站访客的注意力。

网页设计中如何合理使用动画效果呢?

我们可以参考今天整理的20个融合细微动画的优秀网页设计作品,这些网页使用了简单并不复杂的动画效果,在拥有好看界面同时用户也不会被无关的动画而分心。

建议谷歌/火狐浏览器打开。

看到这儿的同学,偷偷放个双十二福利,设哥微信号走起:youshege

AQUATILIS EXPEDITION

使用了HTML5视频作为网页背景,视频内容为简单的波浪动画,网站整体为暗调风格,其中有个边框背景不错,可以借鉴下:)

AQUATILIS EXPEDITION

Little Forge

Little Forge

BarCamp Omaha 2014

这网站的动画仅仅是背景上的云彩,但里面的插画相当好看,so… 网页设计师还是要学习点绘画功能更好。

BarCamp Omaha 2014

WILD

WILD

Nerisson

Nerisson

Dragone

这个背景banner动画只是一些雨滴效果,但去能让气氛更加融合呦。

Dragone

Blu Homes

Blu Homes

LETTERS, INC.

LETTERS, INC.

Omnisense

Omnisense

INDUSTRY

雪山?哪就为它加雪吧!

INDUSTRY

The Beauty of Brewing

首屏动画和上面雨滴案例差不多,为了让情景更生动一些。此外,这网站的图片虚实技巧的使用可以多看看。

The Beauty of Brewing

Bicycle Speed Shop

Bicycle Speed Shop

Thermodo

Thermodo

Bellroy

这个网站的产品处理很特别,都给它们加上雨水、雪、冰碎来增加真实感,也能体现产品“防水防雪防沙”功效?

Bellroy

Siberia

云雾动画用得很好,能过banner文字来做出空间感。

Siberia

Carbure Digital Workshop

里面的图标可以用鼠标拖动……

Carbure Digital Workshop

The Fernway

The Fernway

High Tide

有高潮,才HIGH,不是吗?

High Tide

总结

网站界面很好看是吧?但设计的背景设计师是花了多少心思我想就只有他们知道了。接下来的品牌网站建设,我建议同学们可以从这里获取些灵感,尝试这些使用一些细微动画美化网页,增加氛围:)

招聘风暴月来了,来看看怎么找到工作!

心血合集!你的工作就它承包了!
《毕业生求职指南!手把手帮你从零开始找到工作!》

给自己打气!来看看90后的大学生活!
《这才是大学生活!90后设计师的成长记事录》

自学时刻到,我们一起来祷告!
《超赞!设计师完全自学指南》

原文地址:line25
译文地址:shejidaren

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量87万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/20-subtle-motion-website-design

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里