滚动视差设计指南.pdfVIP

滚动视差设计指南 作为未来网页设计的热点趋势之一的 滚动视差“ ”在近年来被越来越多网站所采用，特殊新颖的展示 模式也让许多用户眼前一亮。网络上也如雨后春笋一般出 现了很多像《 30 个让人兴奋的视差滚动 网站》、《 60 个视差滚动网站赏析》 …… 等一系列的视差滚动的文章，不过赏析的居多，真正指导 设计师如何去设计，如 何去实现的实用型文章却很少。于是萌发了自己写一篇的想法，与感兴趣的 人共同交流下滚动视察设计时的一些心得。 什么是滚动视差？ 视差滚动（ Parallax Scrolling ）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非 常出色的视觉体验。 视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近 的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有 在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点 就是网页内的元素 在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导 致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品 商用视差滚动 效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。 看似复杂其实这个早就不是什么新鲜事儿，这种设计思路早在 80年代的小霸王学习机上就见过。 在这个画面里通过人物马里奥、前景、背景着三个部分的移动速率的不同来实现立体效果。类比网 页也是如此。一个滚动视察的网站至少会有以下几层 ：背景层，内容层，贴图层。 背景层的滚动 (最慢 ) 贴图层 ( 内容层和背景层之间的元素 ) 的滚动 (次慢 )； 按照现实生活的经验，越远的景物移动越慢。 内容层的滚动 (可以和页面的滚动速度一致 ) 。 我们让三个图层的滚动速度不一致，就做出了简单的差异滚动效果。 当然这只是实现了简单的滚动视差效果，距离一个好的滚动视察网站还不够。 我们来分析一些国外的例子看看他们是怎么做的。 .au/gamesites/mariokartwii/ 来看看这个马里奥赛车的网站： 在这个网站里 ○1是背景层，是一条赛道，在整个网站中贯穿整站起到线索的作用，让上一个画面与 下一个画面之间有所关联。视差滚动也是沿着这条公路进 行的。 ○2、○3是贴图层，在画面中起到 渲染氛围的作用，一个是远景一个是近境，滚动时速率也不一样，从而让人有一种此时不是在浏览 网页，而是在赛道上驰 骋的代入感。 ○4是内容层，网站有趣的同时不忘内容的呈现。 ○5是所在位 置的导航，往往滚动视差的网站都很长有很多屏，所以导航是必不可少的。让用户知道 自己到了哪 儿还剩多少，这很重要，并且也起到一个导航的作用便于用户返回看之前的内容。 再来看看 /index_start.php 这个网站。 这个网站以一开始加载完成之后会跳转到页面的最底部，火箭为载体，以遨游太空为故事背景。随 着火箭的升空页面逐渐向上滚动，随之以场景化的手段，形象的讲述了 intacto 从2001 年到 2012 年 10年的历程。很是生动有趣。 还有类似的这个网站 /atlantis/ 这个网站巧妙的将网页的向下滚动转化为了一次奇妙的深海遨游。导航化为深度标尺，随着网页的 滚动小人逐渐向深海下沉，也逐渐在深海种看到了众多不同的 景观“ ”，很是有趣。 这三个例子是因为他们有共通性，代表了一类的滚动视差网站的手法。 这类网站将原有枯燥的内容进行重新整理，将其故事化场景化。这就需要设计者有一个清晰的讲故 事的逻辑。 需要有一个视觉引导元素贯穿整站，就像马里奥的赛道， intacto 的宇宙飞船，潜水的管道以及小人 。这个视觉引导会让你在场景种有个代入感。仿佛你就随着这个引导元素来体验整个故事。 在对设计稿分层时，设计者要定位好背景层，贴图层和内容层之间的关