致力于高端网站建设服务的专业公司
网站建设热线:010-51000596
首页 > 网站资讯 > 网页设计 > 网页设计:如何做好网站滚动视差设计

网页设计:如何做好网站滚动视差设计

 

  作为未来网页设计的热点趋势之一的“滚动视差设计”在近年来被越来越多网站所采用,特殊新颖的展示模式也让许多用户眼前一亮。作为一个视觉设计其实做设计的时候有很多束缚,能够遇到一个可以玩滚动视差的项目不容易,遇到了就不要轻易放掉,好好玩一把,它会让你的设计增色不少。
 
  什么是滚动视差?
 
  滚动视差(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。
 
  视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。
 
  滚动视差网站设计中的一些小技巧和小细节:
 
  1、斜线的巧妙运用。
 
  当斜线从底部向上划入的时候,通常视觉上会给人一种是从右下角以一定角度划入的错觉。所以斜线的布局也经常被采用在滚动视差网站的设计中去。
 
  2、纯色的运用
 
  没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式
 
  纯色比渐变和图片更容易延展,并且纯色很容易区分视差区间。在使用时我们可以调整颜色的透明度,来达到各种视觉效果。所以纯色的运用也是滚动视差设计者的大爱。
 
  3、 别忘了loading 。
 
  滚动视差网站由于内容分层会用到很多大尺寸图片或者png图片,所以体积往往比较大,所以这个时候千万别忘了设计loading动画。
 
  滚动视差网站的设计流程
 
  毕竟视觉设计师输出的视觉稿都是静态图片,而滚动视差网站时一个随着滚动不断变化的,所以设计时与传统网页有很多不同。在设计初期设计师要判断这个页面适不适合采用滚动视差。在决定采用滚动视差之后就需要设计者整理现有的内容资料,将其故事化或场景化,然后根据构思设计出关键状态的视觉设计稿。传统网页设计师做到这一步基本上工作就已经完成,可以交给其他人不管了。但是滚动视差的网站不行,视觉设计的工作才刚刚开始,这时,你需要负责跟重构设计师讲解你的设计思路,你需要怎么分层怎么运动。在重构设计师实现的时候通常并不会一帆风顺,通常会因为实现成本等各种问题需要设计师返回去重新修改设计稿。通过反复的沟通,反复的磨合才能完成预想中的漂亮的滚动视差网站。