标签：
前端交互开发微体验
关于首屏灵动小效果，微交互提升页面生机；
一、关于首屏视频播放
http://designmodo.com/startup/
感官体验：科技感，高大上，酷
综合评价：如页面请求不多且视频占空小的情况下使用。一般为首屏轮播图的情况下使用，前两张轮播为图片，最后为视频，多给视频一些加载时间。还有就是非首屏使用。
推荐指数：★★★☆☆
二、Hover时实现图片随着鼠标方向而变动
http://makeitbright.diadora.com/
感官体验：新颖独特，画龙点晴般灵动，增加页面生机，互动感强，再配上相应的音乐，可使用户停留时间加长，比如现在天猫超市的一些网站都加入与自己品牌风格相符的music。
页面某处的小细节加上些微动效，体验效果最佳，如http://atieva.com/按钮Hover效果。
综合评价：单色色块叠加(正片叠底)到图片之上，加载速度快，互动性强。页面干净整洁，简单的文字加留白使整个页面较高雅，
推荐指数：★★★★★
三、svg线条与色块实现图形特效
感官体验：新鲜有趣
综合评价：使用svg技术实现一些线条，色块之间的动态效果，加载速度较快，可用SVGDeveloper进行绘制。
推荐指数：★★★★★
四、页面上一些游走小色块
感官体验：无论是单色，多色色块，大小，颜色，位置随机飘浮展示，顺间为页面提升了生机。
综合评价： 全部由代码编写，加载速度快，推荐。
推荐指数：★★★★★
五、页面滚动到元素位置时的一些加载动画效果
感官体验：滚到相应元素时，不同切入效果。适当为图片，按钮，文字添加一些hover效果，会提升页面的交互性。
综合评价： 全部由代码编写，加载速度快，推荐。 现在很流行这种写法。
推荐指数：★★★★★
六、页面加载时Loading效果
https://chekhov.withgoogle.com/alive#about
感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。
极力推荐类似色块与线条化设计 方式，因不用加载图片等资源，固加载速度快，超出平常体验感。
综合评价： 如果页面请求或图片资源较多，可加类似效果。很鼓励类似新颖且独特的色块与线条化设计
推荐指数：★★★★★
七、不一样的Loading方式与导航栏呈现
http://exhibitions.guggenheim.org/zero/
http://www.spotify-valentines.com/
感官体验：一般loading百分比都是正序，而这个是倒序方式，从100-0递减的过程，之后有个白色抖动的小球一直放大放大，感觉要蹦出屏幕似的，还以为是个bug呢，完全覆盖屏幕后显示一个大时钟导航栏。
综合评价：带有丝丝恐惧感的加载方式，好有趣。
推荐指数：★★★★★
八、简单明了首屏配图+大文字+微动效
http://www.riiotlabs.com/en/home
感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。
综合评价： 如果页面请求或图片资源较多，可加类似效果。
推荐指数：★★★★★
九、较酷炫的首屏加载
http://www.wearetopsecret.com/
感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。
综合评价： 如果页面请求或图片资源较多，可加类似效果。
推荐指数：★★☆☆☆
十、巧妙引入正文
https://chekhov.withgoogle.com/alive#about
感官体验：简单的色块引入，互动下便可分出导航到，生动有趣
综合评价： 将loading效果与首页联系到一起，缩短了页面加载时间，同时也使导航栏变得更加新颖独特；
推荐指数：★★★★★
十一、渐变色+背景色块动态引入
http://www.lahautesociete.com/
感官体验：简单的色块引入，互动下便可分出导航到，生动有趣
综合评价： 将loading效果与首页联系到一起，缩短了页面加载时间，同时也使导航栏变得更加新颖独特；
推荐指数：★★★★★
十二、特炫CSS3动效
http://species-in-pieces.com/#
感官体验：利用不同颜色的色块将一些濒临灭绝的动物绘制出来，呼吁人们去保护动物。
综合评价： 通过色块变形拼接出来动物的形状，并将其动效特征描绘出来。
推荐指数：★★★★★
十三、首屏高度适应屏幕100%展示
感官体验：简单的色块搭配or纯色背景or一张清晰的大图是现在较流行的网页表现方式
综合评价： 简单明了，干净整洁是其最主要的风格
推荐指数：★★★★★
十四、使用动态切换导航栏
感官体验：展示方式较强，间接的方式将页面呈现给访问者
综合评价： 将方位与鼠标hover完美的结合在一起，同时利用不同的颜色做为区分模块，加上导航栏每隔2秒自动切换，给用户一种新鲜的体验感。
推荐指数：★★★★★
十五、繁星闪闪，基于Canvas绘制
http://www.jq22.com/yanshi4374
http://personalbrandinstitute.com/
感官体验：超级炫酷的动效，通过互过+娱乐的方式展示
综合评价：开发难度较大，略显繁乱。
推荐指数：★★☆☆☆
十六、首屏下雨效果
http://www.yyyweb.com/demo/rainy-day/
感官体验：根据相应的场景，加上雨点微点缀会让人身临其境
综合评价：看着比较好玩
推荐指数：★★★★☆
十七、简单大标题+缓动背景
http://beta.rallyinteractive.com/
http://browser.qq.com/?adtag=SEM5
感官体验：简单明了的标题，首屏以100%高度展示，背景色块微微缓动。
综合评价：看着比较好玩
推荐指数：★★★★☆
十八、超简洁文字+色块，极力推荐类似的
感官体验：简洁明了，背景微元素动态效果，随着页面的滚动，元素依次下滑微动显示。
综合评价：页面效果超赞，动效也很好玩，类似咱们设计中心官网，随机动态生成小图片那块。加载速度快，体验效果佳。
推荐指数：★★★★★
十九、局部动效+时尚背景
http://mux.baidu.com/
感官体验：哪怕页面有一个动效元素，瞬间也会使页面生动起来
综合评价：利用图片切换，使其变得朴树迷离
推荐指数：★★★★★
二十、SVG矢量图形引入首屏加载
感官体验：n多色块组成的小图形+微动态是现在很流行的一种表现方式
综合评价：轻量极加载模式，在减少请求的同时也减少了空间资源
推荐指数：★★★★★
二十一、页面滚动时变换不同的图形
感官体验：随着页面的滚动，实现图形的变换合成等效果
综合评价：建议用矢量色块或者小图片文字结合，可使页面加载更快些。
推荐指数：★★★★★
二十二、方位与滚屏结合起来
感官体验：将鼠标hover方位与滚动结合起来，
综合评价：利用svg向下顺移图片，并指引
推荐指数：★★★★★
二十三、淡淡的首屏背景，花式切换轮播
感官体验：新鲜有趣，高端优雅，滚动时首屏渐渐模糊，逐一淡出线条文字信息。
综合评价：根据window.onscroll事件进行一系列的动态加载，较独特，且加载较快。
推荐指数：★★★★★
二十四、巧妙运用色块整合文字
http://www.risotteriamelottinyc.com/
感官体验：同样利用scroll事件，为要点内容添加背景底色以突出
综合评价：往往页面中一那么一点不寻常就会给人带来以惊喜感，很赞的想法
推荐指数：★★★★★
二十五、利用好hover效果，使页面灵动起来
感官体验：超级超级酷的体验，在超级简洁的页面上，用户hover或者滚动时，给予不同的反响，那么对于我来说，这网站细节做的就很好。
综合评价：极力推荐这种从细节做起，从一个按钮的hover状态，以及hover消失时之间图形的变换，如果这些细节做到了，那么就是一个成功的网站。
推荐指数：★★★★★
二十六、推崇极简风格，与MUJI风格相似
感官体验：所有文字信息左边显示，图片右边展示。底色选用淡淡渐变的灰，产品详情页以弹窗方式呈现，利用不完整图形展示出来。
综合评价：淡淡的底色配以淡淡的图形，再加白色的文字，瞬间使产品提升了一个档次，详情页更是以不同寻常的矩形，一个三角形的缺失，却给页面带来了艺术气息。
推荐指数：★★★★★
二十七、极酷的页面体验，超牛的Canvas
http://thecolorsofmotion.com/films/up
http://www.shanemielke.com/archives/usopen-sessions/
感官体验：带有利用canvas将图形以马赛克方式显示，并随机消除马赛克，同样详情页也会先以马赛克方式展示，之后再显示清晰图片。
综合评价：体验方式很好，但实现起来并没那么简单，可能很难。
推荐指数：★★☆☆☆
二十八、循环自动放大背景图片
http://www.andy-wolf.com/awe/#/
感官体验：将背景自动循环放大1-1.5倍，稍同点缀下。
综合评价：很微妙的体验。
推荐指数：★★★☆☆
二十九、强大的Canvas—— 色值大全
感官体验：将背景自动循环放大1-1.5倍，稍同点缀下。
综合评价：很微妙的体验。
推荐指数：★★★☆☆
三十、异形背景色块使网页更灵动
http://panizzon.ind.br/panizzon/public/
感官体验：首屏用svg勾勒出图形边缘后，再显示图片，内容背景用不同的异形做为背景，及hover互动效果。
综合评价：整个页面写的非常棒，配色也很好。无论颜色还是交互看起来很都很有趣，值得学习。
推荐指数：★★★★★
三十一、背景动效
感官体验：利用多边形展示出不同的形态，给人以深不可测感。同时也体验了团队的强大性吧。
综合评价：科技感吧。
推荐指数：★★★★★
三十二、在字母上做细节
感官体验：利hoer字母时将字母变换为另一种方式。
综合评价：改变微细节
推荐指数：★★★★★
三十二、偶尔页面中加些有趣的元素
感官体验：根据不同的标签，呈现不同的内容，很好玩，在枯燥的页面中加入一些好玩的元素或许会为页面增添很多色彩呢。
综合评价：在页面的某处加入这些微元素，会显得很有趣呢。
推荐指数：★★★★★
三十二、连贯性的页面引入
感官体验：随着页面的滚动使液体一直下流，并实现相应的动效。
综合评价：根据自身需求，利用树状形结构以好玩的形式展现出来。
推荐指数：★★★★★
三十三、使用变动的图形，吸引点击
https://trends2015.hautehorlogerie.org/#!/
感官体验：利用一直变动的图形，并加以独特的表现方式增加趣味性，同时吸引注意力。
综合评价：一般动态的人们就喜欢点击，所有为你的页面多添加一些动效吧。
推荐指数：★★★★★
最后总结：
核心思想：
1. 页面请求资源少(图片少),尽量以色块代替图片；
2. 为页面多添加一些互动或者动态小元素，比如：
1） 尽量多地为按钮添加hover效果，给予反响并将效果做精，hover时的效果,hover失去时的效果，hover转换时的效果等；
2） 为图片添加相应的效果，hover后显示相应的信息；
3） 背景添加一些小动效，类似多边形，圆形，三角形，线条等。
3. 滚动加载——>>根据scroll事件，滚到当前位置时，将文字、图片配以动效逐一加载；
4. 首屏高度100%全屏显示，淡淡的背景色+大title描述，是现在较流行的表现方式；
5. 背景色可以使用非规则矩形表示，显得不那么刻板老套；
6. 如想做出超炫酷的小特效：
1）可以借助CodePen中指定小特效；
2）SVGDeveloper可以绘制SVG图形，之后将想法表达给前端展示；
7. 如页面请求资源过多，就如图片过多。可以为页面添加与之相关的Loading效果，以loading形式引入正文，分散用户等待的注意力，使其愿花费更长的时间去等待；
8. 导航栏的展现，不一定非得居于顶部、左侧显示，可以变换其它的显示方式，具体的请参考第七条；
9. 也可以为页面添加背景音乐、视频等元素，一般首屏加载完毕后自动播放视频，较科技感，但前提是视频占空间较小，或者首屏轮播图，最后一页显示视频；
10. 第十五条、二十七条这种基于Canvas实现的超级酷炫最好少用：
1）加载时间过长，使用户丧失耐心；
2）技术上实现比svg难度大，建议多用svg做一些小特效。
11. 目前调研的大多是国外的优秀设计网站，固在技术方面很成熟，动效、交互、颜色搭配、色块与标题间的搭配、页面互动方式等都比国内的要酷些。
据了解现阶段国内网页互动+hover动效+页面动态小元素尚不成熟，用的较少，也不够灵活。
建议设计师与前端开发多沟通了解，将自己的想法告诉前端看能否实现。
作为前端的我们也应多学习一些流行的特效技巧。
标签：
原文地址：http://blog.csdn.net/qq_26445509/article/details/51442793
