前端交互开发微体验--总结了一些国内外炫酷的网站

前端交互开发微体验

关于首屏灵动小效果，微交互提升页面生机；

一、关于首屏视频播放

http://designmodo.com/startup/

感官体验：科技感，高大上，酷

综合评价：如页面请求不多且视频占空小的情况下使用。一般为首屏轮播图的情况下使用，前两张轮播为图片，最后为视频，多给视频一些加载时间。还有就是非首屏使用。

推荐指数：★★★☆☆

二、Hover时实现图片随着鼠标方向而变动

http://atieva.com/

https://labs.invisionapp.com/

http://www.gv.com/

https://studiorotate.com/

http://www.trainrobber.com/

http://makeitbright.diadora.com/

http://2016.makemepulse.com/

感官体验：新颖独特，画龙点晴般灵动，增加页面生机，互动感强，再配上相应的音乐，可使用户停留时间加长，比如现在天猫超市的一些网站都加入与自己品牌风格相符的music。

页面某处的小细节加上些微动效，体验效果最佳，如http://atieva.com/按钮Hover效果。

综合评价：单色色块叠加(正片叠底)到图片之上，加载速度快，互动性强。页面干净整洁，简单的文字加留白使整个页面较高雅，

推荐指数：★★★★★

三、svg线条与色块实现图形特效

https://research.google.com/

感官体验：新鲜有趣

综合评价：使用svg技术实现一些线条，色块之间的动态效果，加载速度较快，可用SVGDeveloper进行绘制。

推荐指数：★★★★★

四、页面上一些游走小色块

http://designerbundle.com/

http://www.lab21.gr/

感官体验：无论是单色，多色色块，大小，颜色，位置随机飘浮展示，顺间为页面提升了生机。

综合评价： 全部由代码编写，加载速度快，推荐。

推荐指数：★★★★★

五、页面滚动到元素位置时的一些加载动画效果

http://bundy.madebywild.com/

http://www.details.ch/

http://dagobert.com/

http://elespacio.net/info

感官体验：滚到相应元素时，不同切入效果。适当为图片，按钮，文字添加一些hover效果，会提升页面的交互性。

综合评价： 全部由代码编写，加载速度快，推荐。现在很流行这种写法。

推荐指数：★★★★★

六、页面加载时Loading效果

https://chekhov.withgoogle.com/alive#about

https://www.don-guri.com/

http://inspacewetrust.org/en/

http://tolia.ge/

感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。

极力推荐类似色块与线条化设计方式，因不用加载图片等资源，固加载速度快，超出平常体验感。

综合评价： 如果页面请求或图片资源较多，可加类似效果。很鼓励类似新颖且独特的色块与线条化设计

推荐指数：★★★★★

七、不一样的Loading方式与导航栏呈现

http://exhibitions.guggenheim.org/zero/

http://www.spotify-valentines.com/

感官体验：一般loading百分比都是正序，而这个是倒序方式，从100-0递减的过程，之后有个白色抖动的小球一直放大放大，感觉要蹦出屏幕似的，还以为是个bug呢，完全覆盖屏幕后显示一个大时钟导航栏。

综合评价：带有丝丝恐惧感的加载方式，好有趣。

推荐指数：★★★★★

八、简单明了首屏配图+大文字+微动效

http://www.riiotlabs.com/en/home

感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。

综合评价： 如果页面请求或图片资源较多，可加类似效果。

推荐指数：★★★★★

九、较酷炫的首屏加载

https://baconclubhouse.no/en

http://www.wearetopsecret.com/

感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。

综合评价： 如果页面请求或图片资源较多，可加类似效果。

推荐指数：★★☆☆☆

十、巧妙引入正文

https://chekhov.withgoogle.com/alive#about

感官体验：简单的色块引入，互动下便可分出导航到，生动有趣

综合评价： 将loading效果与首页联系到一起，缩短了页面加载时间，同时也使导航栏变得更加新颖独特；

推荐指数：★★★★★

十一、渐变色+背景色块动态引入

http://www.fibersensing.com/

http://www.lahautesociete.com/

感官体验：简单的色块引入，互动下便可分出导航到，生动有趣

综合评价： 将loading效果与首页联系到一起，缩短了页面加载时间，同时也使导航栏变得更加新颖独特；

推荐指数：★★★★★

十二、特炫CSS3动效

http://species-in-pieces.com/#

感官体验：利用不同颜色的色块将一些濒临灭绝的动物绘制出来，呼吁人们去保护动物。

综合评价： 通过色块变形拼接出来动物的形状，并将其动效特征描绘出来。

推荐指数：★★★★★

十三、首屏高度适应屏幕100%展示

感官体验：简单的色块搭配or纯色背景or一张清晰的大图是现在较流行的网页表现方式

综合评价： 简单明了，干净整洁是其最主要的风格

推荐指数：★★★★★

十四、使用动态切换导航栏

http://www.dogstudio.be/

感官体验：展示方式较强，间接的方式将页面呈现给访问者

综合评价： 将方位与鼠标hover完美的结合在一起，同时利用不同的颜色做为区分模块，加上导航栏每隔2秒自动切换，给用户一种新鲜的体验感。

推荐指数：★★★★★

十五、繁星闪闪，基于Canvas绘制

http://www.jq22.com/yanshi4374

http://metting.moxz.cn/views/

http://www.plasticbcn.com/

http://void.hi-res.net/hires

http://www.deutser.com/

http://lab.hakim.se/wave/03/

http://personalbrandinstitute.com/

http://dataveyes.com/#!/en

感官体验：超级炫酷的动效，通过互过+娱乐的方式展示

综合评价：开发难度较大，略显繁乱。

推荐指数：★★☆☆☆

十六、首屏下雨效果

http://www.yyyweb.com/demo/rainy-day/

感官体验：根据相应的场景，加上雨点微点缀会让人身临其境

综合评价：看着比较好玩

推荐指数：★★★★☆

十七、简单大标题+缓动背景

http://beta.rallyinteractive.com/

http://browser.qq.com/?adtag=SEM5

感官体验：简单明了的标题，首屏以100%高度展示，背景色块微微缓动。

综合评价：看着比较好玩

推荐指数：★★★★☆

十八、超简洁文字+色块，极力推荐类似的

http://melanie-f.com/en/

感官体验：简洁明了，背景微元素动态效果，随着页面的滚动，元素依次下滑微动显示。

综合评价：页面效果超赞，动效也很好玩，类似咱们设计中心官网，随机动态生成小图片那块。加载速度快，体验效果佳。

推荐指数：★★★★★

十九、局部动效+时尚背景

http://www.jesuisunicq.com/

http://mux.baidu.com/

感官体验：哪怕页面有一个动效元素，瞬间也会使页面生动起来

综合评价：利用图片切换，使其变得朴树迷离

推荐指数：★★★★★

二十、SVG矢量图形引入首屏加载

http://www.nerisson.fr/

感官体验：n多色块组成的小图形+微动态是现在很流行的一种表现方式

综合评价：轻量极加载模式，在减少请求的同时也减少了空间资源

推荐指数：★★★★★

二十一、页面滚动时变换不同的图形

http://sendamessage.to/

http://www.fontwalk.de/03/

感官体验：随着页面的滚动，实现图形的变换合成等效果

综合评价：建议用矢量色块或者小图片文字结合，可使页面加载更快些。

推荐指数：★★★★★

二十二、方位与滚屏结合起来

http://shakerbrand.com/

http://lamoulade.com/#!/home

感官体验：将鼠标hover方位与滚动结合起来，

综合评价：利用svg向下顺移图片，并指引

推荐指数：★★★★★

二十三、淡淡的首屏背景，花式切换轮播

http://jovaconstruction.com/

感官体验：新鲜有趣，高端优雅，滚动时首屏渐渐模糊，逐一淡出线条文字信息。

综合评价：根据window.onscroll事件进行一系列的动态加载，较独特，且加载较快。

推荐指数：★★★★★

二十四、巧妙运用色块整合文字

http://www.risotteriamelottinyc.com/

感官体验：同样利用scroll事件，为要点内容添加背景底色以突出

综合评价：往往页面中一那么一点不寻常就会给人带来以惊喜感，很赞的想法

推荐指数：★★★★★

二十五、利用好hover效果，使页面灵动起来

http://twofold.com/

http://kenjiendo.com/

感官体验：超级超级酷的体验，在超级简洁的页面上，用户hover或者滚动时，给予不同的反响，那么对于我来说，这网站细节做的就很好。

综合评价：极力推荐这种从细节做起，从一个按钮的hover状态，以及hover消失时之间图形的变换，如果这些细节做到了，那么就是一个成功的网站。

推荐指数：★★★★★

二十六、推崇极简风格，与MUJI风格相似

http://kalpakian.fr/#/projets

感官体验：所有文字信息左边显示，图片右边展示。底色选用淡淡渐变的灰，产品详情页以弹窗方式呈现，利用不完整图形展示出来。

综合评价：淡淡的底色配以淡淡的图形，再加白色的文字，瞬间使产品提升了一个档次，详情页更是以不同寻常的矩形，一个三角形的缺失，却给页面带来了艺术气息。

推荐指数：★★★★★

二十七、极酷的页面体验，超牛的Canvas

http://www.acnplwgl.com/

http://pablotheflamingo.com/

http://www.makemepulse.com/

http://thecolorsofmotion.com/films/up

http://thecolorsofmotion.com/

http://www.offpixel.co/

http://claudiocalautti.cc/

http://www.shanemielke.com/archives/usopen-sessions/

感官体验：带有利用canvas将图形以马赛克方式显示，并随机消除马赛克，同样详情页也会先以马赛克方式展示，之后再显示清晰图片。

综合评价：体验方式很好，但实现起来并没那么简单，可能很难。

推荐指数：★★☆☆☆

二十八、循环自动放大背景图片

http://www.andy-wolf.com/awe/#/

感官体验：将背景自动循环放大1-1.5倍，稍同点缀下。

综合评价：很微妙的体验。

推荐指数：★★★☆☆

二十九、强大的Canvas—— 色值大全

http://thecolorsofmotion.com/

感官体验：将背景自动循环放大1-1.5倍，稍同点缀下。

综合评价：很微妙的体验。

推荐指数：★★★☆☆

三十、异形背景色块使网页更灵动

http://panizzon.ind.br/panizzon/public/

http://roguesocietygin.com/

感官体验：首屏用svg勾勒出图形边缘后，再显示图片，内容背景用不同的异形做为背景，及hover互动效果。

综合评价：整个页面写的非常棒，配色也很好。无论颜色还是交互看起来很都很有趣，值得学习。

推荐指数：★★★★★

三十一、背景动效

https://leancloud.cn/

感官体验：利用多边形展示出不同的形态，给人以深不可测感。同时也体验了团队的强大性吧。

综合评价：科技感吧。

推荐指数：★★★★★

三十二、在字母上做细节

http://www.adamhartwig.co.uk/

感官体验：利hoer字母时将字母变换为另一种方式。

综合评价：改变微细节

推荐指数：★★★★★

三十二、偶尔页面中加些有趣的元素

http://fff.cmiscm.com/#!/main

感官体验：根据不同的标签，呈现不同的内容，很好玩，在枯燥的页面中加入一些好玩的元素或许会为页面增添很多色彩呢。

综合评价：在页面的某处加入这些微元素，会显得很有趣呢。

推荐指数：★★★★★

三十二、连贯性的页面引入

http://sidigital.co/

感官体验：随着页面的滚动使液体一直下流，并实现相应的动效。

综合评价：根据自身需求，利用树状形结构以好玩的形式展现出来。

推荐指数：★★★★★

三十三、使用变动的图形，吸引点击

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动效+页面动态小元素尚不成熟，用的较少，也不够灵活。

建议设计师与前端开发多沟通了解，将自己的想法告诉前端看能否实现。

作为前端的我们也应多学习一些流行的特效技巧。

前端交互开发微体验--总结了一些国内外炫酷的网站相关推荐

前端实现炫酷动效_web前端入门到实战：使用CSS创建一个炫酷的球体动画效果
一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈创建一个圆圈的第一步是生成所有组成圆圈的粒子.有了Jade ...
button按钮的属性设置_web前端入门到实战：CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...
开发微商城分销系统有什么优势？
随着移动互联网的快速发展,新零售和共享经济将会是未来电商行业发展的主流模式.开发微商城分销系统整合了传统零售的线下渠道和线上渠道,每一个品牌商.厂商.供货商甚至分销商通过开发微商城分销系统,然后通过发 ...
前端利器——炫酷的CodePen
前言众所周知,前端是一个很容易将自己的劳动成果呈现出来的一个职位,无论是写1行代码还是写100行代码,都可以通过页面来进行呈现,在工作中的劳作成果也是可以一眼就呈现给客户.用户的.比如一些精美的页面 ...
小龙虾炒菜机器人_开挖掘机炒小龙虾？机器人餐厅？吃饭竟也能如此炫酷！
长沙端午节期间,街头都开始用挖掘机炒龙虾了,还免费请大家吃. 很多人第一次见到挖掘机炒小龙虾,感到十分新奇. 300斤龙虾在大铁锅中,被挖掘机搅来搅去,这真是吃货们喜闻乐见的场面啊! 机器人餐厅挖掘 ...
web前端开发技术期末考试_智慧树来我校开展WEB前端开发微专业导学
11月17日,在6号教学楼6102阶梯教室,智慧树工作人员带来了WEB前端开发微专业导学.根据前期长青联盟微专业的报名情况及学生学习情况,为进一步提高学生学习微专业的质量,学院联系了微专业教学平台的专 ...
使用.NET Core 2.1，RabbitMQ，SignalR，EF Core 2.1和Angular 6开发微服务
目录介绍单一软件微服务架构微服务设计与规划示例应用程序示例应用程序的微服务微服务进程间通信微服务与消息队列之间的消息传递 RabbitMQ消息代理消息队列体系结构目标和决策帐户管理 ...
智能化软件开发微访谈·第十九期暨2022新年特辑：软件智能化开发：进展与挑战...
CodeWisdom 智能化软件开发沙龙是复旦大学CodeWisdom团队参与组织的专注于代码大数据与智能化软件开发的学术和技术沙龙,面向相关领域的学术界研究者和工业界实践者,通过各种线上和线下交流活 ...

前端交互开发微体验--总结了一些国内外炫酷的网站

前端交互开发微体验--总结了一些国内外炫酷的网站相关推荐

最新文章

热门文章