×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 滚动视差设计指南

滚动视差设计指南

2014-08-151022分享

视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。

背景层的滚动(最慢)

贴图层(内容层和背景层之间的元素)的滚动(次慢); 按照现实生活的经验,越远的景物移动越慢。

内容层的滚动(可以和页面的滚动速度一致) 。

我们让三个图层的滚动速度不一致,就做出了简单的差异滚动效果。

blob.png

需要有一个视觉引导元素贯穿整站,。这个视觉引导会让你在场景种有个代入感。仿佛你就随着这个引导元素来体验整个故事。在对设计稿分层时,设计者要定位好背景层,贴图层和内容层之间的关系。

根据页面自身的功能来定义是否需要贴图层,贴图层的存在是为了更有效的传达视觉效果,但如果它成为了干扰,就会违背了我们使用的初衷

内容层的展现是最主要的,无论背景层和贴图层有多少花哨,在设计师设计过程中,内容层对用户的展示是最优先的。

 

blob.png

网站从Listen everywhere(随处可听)、Search & discover(搜索与探索)、Build your collection(建立你的收藏)、Follow & share(关注和分享)、Radio(电台)这五个纬度来介绍spotify这个音乐产品。运用合适的背景图片营造五个场景,介绍产品的五种特性。设计者将网页分为内容层和背景层上下两层,运用滚动时的速率差异形成滚动视差。一屏一个场景,也可以称为一个画面,五个场景相互独立,通过纵向的滚屏来实现切换。


blob.png

这个网站设计者也是采用多场景式,将网页横向分割成多个场景,场景与场景之间通常颜色区分很明显,用以分割场景。场景内设计者将近景的部分做了高斯模糊,从而巧妙的形成了景深视觉效果。在技术实现上,除了利用了不同分层滚动速率不一样外,还限定了相应元素的显示范围。滚动时超出范围的部分会隐藏掉,形成被遮挡的视觉上的分层效果。

blob.png

这是一个产品的介绍网站,设计者非常有意思,以多场景的形式介绍了产品的几大功能,同时在这个过程中又以产品本身为线索贯穿所有的场景。有点像是故事型和多场景型的结合。

blob.png

毕竟视觉设计师输出的视觉稿都是静态图片,而滚动视差网站时一个随着滚动不断变化的,所以设计时与传统网页有很多不同。在设计初期设计师要判断这个页面适不适合采用滚动视差。在决定采用滚动视差之后就需要设计者整理现有的内容资料,将其故事化或场景化,然后根据构思设计出关键状态的视觉设计稿。传统网页设计师做到这一步基本上工作就已经完成,可以交给其他人不管了。但是滚动视差的网站不行,视觉设计的工作才刚刚开始,这时,你需要负责跟重构设计师讲解你的设计思路,你需要怎么分层怎么运动。在重构设计师实现的时候通常并不会一帆风顺,通常会因为实现成本等各种问题需要设计师返回去重新修改设计稿。通过反复的沟通,反复的磨合才能完成预想中的漂亮的滚动视差网站。


  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

解读网站结构对收录有什么影响?
这个网站建设市场里,一些企业的网站并不重视网站的内容结构。像内容标……
细谈网建中需注意的一些错误
建一个什么样的网站,是能帮企业来获得成功?对于网站的搭建,这里面是……
建站时需准备什么材料
建一个什么样的网站,是能帮企业来获得成功?对于网站的搭建,这里面是……
提高营销型网站PR值的方法是什么?
就在制作网站时有一个工作重点,便是来快速提高网站的PR值。当然来做营……
静态网页设计的一些特点
网页可以分为静态页面与动态页面两种,但如想网站有很好的排名,也被搜……


ABOUT US

北京梦创义科技有限公司是中国网络新生代的杰出代表。
MCY是由从事多年互联网界研究的海外归国人员于2007年创办,由国内丰富经验的网络工程师与国内外的知名设计师组成,立足北京。

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设的logo

Copyright 2008 ASAweb company. All rights reserved.