020-39991468

快捷导航

# 业务咨询
电 话:020-39991468

张经理 / 18665606093

Email / service@2000new.com

Wechat

扫一扫添加顾问

番禺网页设计:视差效果的五种应用技巧

来源:新际网络 发布时间:2021-04-08

  视差效果是番禺最流行的网页设计趋势之一。在这种滚动动画特效的支持下,滚动浏览时,前景的元素和背景会以不同的速度移动,创造出动态而独特的视觉体验。


  视觉差异化效果可以在大多数类型的网站中使用,是增强用户参与度、提升用户体验的有效手段之一。视差效果的优点是不需要硬性应用到每一页。同时可以让用户更加关注网页内容,增强整体参与度。


  视差效果为网页中的元素提供了距离和深度。换句话说,它给了网页近乎三维的视觉体验,也让网页有了近乎身临其境的体验。


  但是视差效果的缺陷很明显,在移动端也不一定好用。在视差效果的具体应用中,有一些技巧和注意事项是不容错过的。在今天的文章中,我们总结了视差效果的五个技巧。


a337bf302c8441fd4.jpg

  1.使用动态效果显示更改


  设计人员可以使用视觉差异效果来显示页面中的变化。这些随着滚动不断运动的元素,可以传达时间、空间、位置之间的关系。


  视差效果与网站内容配合使用时,最能显示变化。


  在上面的保时捷进化网站中,不同时代的保时捷车型随着时间的变化而展示,背景图片和场景也在变化。如果你仔细听,你会发现音乐会随着时代的变化而演变。


  这种设计技巧会驱使用户滚动浏览,因为人们想看看接下来会发生什么变化。有了这个视差滚动时间轴,用户可以从上到下浏览,也很有意思。


  Sonance中的视差显示了另一个变化,页面中元素的位置发生了变化。视差效果已经成为网站导航模式的一部分。当用户浏览时,视差效果会告诉用户他们在哪里。


  2.鼓励用户滚动浏览


  视差效果有利于交互,很大程度上是因为它鼓励用户持续滚动页面,让用户持续参与交互。


  很多使用视差滚动的网页会直接在首页说“滚动”,或者使用闪烁的光标来吸引用户的注意力,鼓励用户滚动。《行尸走肉僵尸》的首页,有这样的引导信息。


  与其他带有视差滚动的网页设计不同,《行尸走肉》的页面布局是水平的。用户滚动页面时,人物会滚动不同的场景,剧情也会相应发展,挺有意思的。3.运动和色彩


  应用视差效果的方法有很多,其中最有趣的一种方法是将不同内容的颜色结合起来,以显示不同的项目和元素。变色和动画结合在一起,通过交互触发,产生全新的体验。


  色彩是最有吸引力的设计工具,它在吸引用户注意力方面的效果非常明显。


  上面的Werkstatt网页使用白色背景和灰色轮廓来勾勒不同的项目部分。当光标悬停在不同的项目上时,该部分中的项目图片将显示为彩色。这种组合效果并不复杂,但是非常有效,鼓励用户与单个项目进行交互。


  露易丝牛仔裤用的是另一种搭配方式。设计师使用不同的颜色来突出不同的活动和不同的主题。当页面滚动时,背景的颜色会发生变化,与前景滚动的图片相匹配。


  4.使信息更容易消化


  视差效果还可以帮助设计师将更复杂的信息或大块信息分割成小块,更容易阅读和消化。当您设计随页面移动的文本元素时,视差效果的这一特性非常有用。但是在实际操作中,需要仔细考虑内容的载体。


  以上两个网页都采用了这种设计理念,只是应用方式略有不同。


  梅勒妮大卫的个人页面采用单页设计。她用一半的页面作为导航。当您滚动时,页面的一侧不移动,而另一侧正常滚动。当你读完,自然会切换到下一个内容块。


  在Le  Duc  Restaurant的网站上,设计师根据你的阅读习惯和点餐方式,将菜单分成单独的块。动画很简单,背景中的鱼起到了很好的装饰作用。用户在浏览时可以更好的了解点菜的信息。


  5.创造视觉奇迹


  视差效果最重要的用途之一是创造独特而逼真的视觉奇观。设计师通过合理的材料搭配、动态效果和不同的设计技巧,创造出生动有趣的视觉体验。


  越来越成熟的3D设计,使得接近现实的动漫和设计元素的设计成本更低。和上面的Madwell一样,这些风格接近漫画,但视觉效果和形式感极其突出的元素,在视觉差异效应下产生了类似VR的视觉体验。


  西雅图太空针的视差效果是比较经典的设计。当用户浏览时,由于元素之间的移动速度不同,会有一种伪真实的浏览体验。不过这个网站的独特之处在于从下往上浏览,很有意思。当用户通过网站的不同区块到达顶部的餐厅区域时,会觉得餐厅位置很高,城市的天际线与CTA元素相结合,让你不会错过关键信息。这个设计有教育意义,也有风险,但却创造了前所未有的体验,令人难忘。标签


  视差效果确实时尚有趣,但正如我们在评价设计趋势时多次说过的,并不一定适合每一个项目。当你在构思网站设计的时候,你要提前了解你的用户和他们的喜好,通过小规模的测试和跟踪分析,知道你的策略是否有效。当你发现视差效果很好的时候,嗯,不妨用它做点有意思的事情。


联系我们
  1. 咨询电话 咨询电话

    业务咨询:

    020-39991468

    服务监督:

    郭经理 18620727292
  2. 联络邮箱 联络邮箱

    业务邮箱

    service@2000new.com

    招聘邮箱

    hr@2000new.com
  3. 新际网络公司总部地址 总部中心
    广州市番禺区万博奥园国际中心2座1919室
  4. 新际网络 微信客服 微信沟通
    售前顾问

    扫一扫加售前顾问

返回顶部

电话咨询

在线咨询

留言预约

*新际020中心将尽快与您联系