3450399331
网站制作

怎么样在网站制作中玩好视差特效

发表日期:2024-09-06   作者来源:www.muerya.com   浏览:0   标签:网站制作    

视差特效是现在最火爆的网站制作趋势之一。在这个滚动动画特效支撑之下,前景的元素和背景会在滚动浏览时以不一样的速度运动,打造出动感又独特的视觉体验。

视差动效可以运用在绝大部分种类的网站当中,它是增强用户参与度、提高客户体验的有效方法之一。视差特效有哪些好处在于,它并无需硬性的运用到每个页面当中,同时,它还能促进用户愈加专注于网页内容,提高整体的参与度。

视差特效让网页中的元素,相互之间有了距离和深度,换句话说,它让网页拥有了接近三维的视觉体验,这也使得网页有了接近沉浸式的体验。

不过,视差特效的缺点也非常明显,它在手机端上并未必一直那样好使。在视差特效的具体运用过程中, 有一些方法和需要注意的地方是不容错过的,今天的文章大家汇总了视差特效的5种运用方法。

1、用动效来展示变化

Porche

Sonance

设计师可以用视差动效来展示页面中的变化。这类伴随滚动而不断运动的元素可以传达出时间、空间和地方上的关系。

视差特效和网站内容一块工作的时候,最能展示其中的变化。

在上面 Porsche Evolution 这个网站当中,不同年代的保时捷车型伴随时间的变化而展示,背景的图片场景也随之变化,假如你仔细听会发现音乐也会伴随年代的变化而演变。

这种设计方法会驱使着用户滚动浏览,由于大伙想看下面会有哪些样的变化。在这种视差滚动+时间轴的搭配之下,用户可以从上到下浏览,反过来看也非常有意思。

Sonance 这个网页当中的视差则呈现出另外一种变化,元素在页面中的地方变化。视差特效成为了网站导航模式中的一部分,当用户在浏览的过程中,视差特效会告知用户他们所处的地方。

2、鼓励用户滚动浏览

Walking-dead

Firewatch

视差特效有益于交互,非常大程度上是由于它会鼓励用户持续不断滚动浏览页面,让用户持续地参与到互动当中。

很多使用视差滚动的网页会在首页上就直接言明“Scroll”或者通过闪动的光标等方法,吸引用户注意并鼓励用户滚动浏览。在行尸走肉(The Walking Dead Zombiefied)的首页上,就包括了如此的引导性信息。

和其他的视差滚动的网站制作不同,The Walking Dead Zombiefied 的页面布局是横向的,当用户滚动页面的时候,角色会伴随滚动,穿过不一样的场景,剧情也随之进步,颇为有趣。

3、运动与色彩

Werk

Lois

视差特效的应用方法有非常多种,其中最有趣的应用方法之一,是让色彩和不一样的内容结合到一块,用来展示不一样的项目和元素。颜色的变化和动画组合到一块,用交互来触发,产生全新的体验。

色彩是最为引人注意的设计工具,它在吸引用户注意力上,成效很明显。

上面 Werkstatt 这个网页就用了白底和灰色的轮廓来勾勒出不一样的项目板块,当光标悬停在不一样的项目上的时候,这个区块的项目图片会出现色彩,这种组合成效并不复杂,却很有效,鼓励用户和单个项目进行交互。

Lois Jeans 则使用了另外一种搭配方法,设计师用不一样的色彩来凸显不一样的活动和不一样的主题,伴随页面滚动,背景的颜色随之变化,和前景滚动变化的图片相搭配。

4、让信息更容易被消化

Mel-art

Ledur

视差特效还能帮助设计师将更复杂的信息或者大块的信息,分割成小份,让它愈加易读,也愈加容易被消化。当你设计伴随页面运动的文本元素的时候,视差特效的这个特点会很有用。不过在实质操作的时候,需要仔细斟酌内容的载体。

上面两个网页就使用了这一设计定义,不过在运用方法上略有不同。

Melanie David 的这个个人页面使用了单页设计,她将页面的一半用作导航,当你滚动的时候,页面的一侧不动,另一侧会正常滚动,当你完成阅读之后,会自然切换到下一个内容区块。

Le Duc 餐厅的网页当中,设计师根据你的阅读习惯和订餐的方法,将菜单划分为单独的区块。动画非常简单,背景的鱼起到了非常不错的装饰性用途,用户在浏览的时候,可以更好地知道订餐的信息。

5、打造视觉奇观

Madwell

Seattle Space Needle

视差特效非常重要的作用之一,是打造独特的、拟真的视觉奇观。设计师通过适当的素材搭配,借用动效和不一样的设计方法,来创造逼真、有趣的视觉体验。

愈加成熟的3D设计让卡通和接近现实的设计元素的设计本钱变得低廉,像上面 Madwell 这个网页,这类风格接近卡通,但视觉成效和形式感都极为突出的元素,在视差动效下产生了类似VR的视觉体验。

而 Seattle Space Needle 的视差特效则使用的是更为经典的设计,当用户在浏览的时候会由于元素间不一样的运动速度而产生拟真的浏览体验。不过,这个网站的独特之处在于,它是从下往上浏览的,很有意思。当用户通过网站的不同区块到达顶端的餐厅地区的时候,会感觉到这个餐厅所处的地方之高,城市的天际线和CTA元素结合到一块,叫你不会错过重点的信息。如此的设计是教育性的,也是冒险的,但它确实创造了前所未有些体验,让人难忘。

结语

视差特效确实是时髦而又有趣的,但正如大家无数次评价设计趋势的时候所说的怎么样在网站制作中玩好视差特效怎么样在网站制作中玩好视差特效文章链接:

如没特殊注明,文章均为建站精灵 原创,转载请注明来自http://www.huijianjun.com/news/2/13909.html
上一篇:

下一篇: