视差特效是现在最盛行的网页设计趋势之一。在这个翻翻滚画特效支撑之下,远景的元素和布景会在翻滚阅览时以不同的速度运动,营建出动感又共同的视觉体会。
视差动效能够运用在绝大多数类型的网站傍边,它是增强用户参加度、提高用户体会的有用手段之一。视差特效的好处在于,它并不需求硬性的运用到每一个页面傍边,一同,它还能促运用户愈加专心于网页内容,提高整体的参加度。
视差特效让网页中的元素,相互之间有了距离和深度,换句话说,它让网页拥有了挨近三维的视觉体会,这也使得网页有了挨近沉浸式的体会。
不过,视差特效的缺点也很显着,它在移动端上并不一定总是那么好用。在视差特效的具体运用过程中, 有一些技巧和留意事项是不容错失的,今日的文章我们总结了视差特效的5种运用技巧。
1、用动效来展现改变
Porche
Sonance
设计师能够运用视差动效来展现页面中的改变。这些跟着翻滚而不断运动的元素能够传达出时刻、空间和方位上的联系。
视差特效和网站内容一同作业的时分,最能展现其间的改变。
在上面 Porsche Evolution 这个网站傍边,不一同代的保时捷车型跟着时刻的改变而展现,布景的图片场景也随之改变,如果你细心听会发现音乐也会跟着时代的改变而演化。
这种设计技巧会唆使着用户翻滚阅览,由于我们想看接下来会有什么样的改变。在这种视差翻滚+时刻轴的调配之下,用户能够从上到下阅览,反过来看也很有意思。
Sonance 这个网页傍边的视差则呈现出别的一种改变,元素在页面中的方位改变。视差特效成为了网站导航方式中的一部分,当用户在阅览的过程中,视差特效会奉告用户他们所在的方位。
2、鼓舞用户翻滚阅览
视差特效有利于交互,很大程度上是由于它会鼓舞用户继续不断翻滚阅览页面,让用户继续地参加到互动傍边。
许多选用视差翻滚的网页会在主页上就直接言明“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元素结合到一同,让你不会错失要害的信息。这样的设计是教育性的,也是冒险的,可是它的确发明了史无前例的体会,令人难忘。
结语
视差特效的确是时尚而又风趣的,可是正如我们无数次评估设计趋势的时分所说的:它并不一定合适每个项目。当你在构思网站设计的时分,仍是要事先了解你的用户和他们的偏好,经过小范围的测验和盯梢剖析,了解你的战略是否是有用的。当你发现视差特效有着不错的作用之时,well,无妨拿来做点风趣的东西。
微信:boxiangchina