阿赛·游梦鱼·郭言赛·阿赛工作室
全站技术源码素材

一淘:视觉滚动效果和图形化在网页中的呈现-创造设计

  •  字体:
  • 大家小时候是否玩过红白机或小霸王上面的游戏?这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了……目前这种视差滚动效果被越来越多的国外网站所应用,成为网页设计的热点趋势给它以重新定义不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓。其次,设计上要有非常严密的关联视
  • 大家小时候是否玩过红白机或小霸王上面的游戏?

    这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果

    所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了……

    目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势

    给它以重新定义

    不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓。

    其次,设计上要有非常严密的关联

    视差滚动效果的主要特点:

    1、直观的设计,快速的响应速度,更合适运用于单页面

    2、差异滚动 分层视差

    页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层

    (是否可以让它更多呢?有没有办法在视觉上做到?)

    差异滚动的实现规则:

    背景层的滚动(最慢)

    贴图层(内容层和背景层之间的元素)的滚动(次慢)

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

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

    作为设计师,你可以………

    1、运用大背景

    这些背景图像一般是高分辨率,大图,覆盖整个网站。

    高清照片是一个迅速抓住观众的好方式,可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

    注意:

    1. 1、背景图的色彩、内容在选择时要十分讲究,前提是不要破坏用户的体验,不然再漂亮的照片也是枉然。

    图片类型最好选取趋向于一些比较柔和、略带透明的一类,不要影响到网站主体内容的阅读,识别,讲究协调。

    1.2、以大量图片为特色的页面应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验。

    2、你也可以用简单的配色方案

    没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式

    一个视差区间内颜色最好保持使用2到3种,我们可以调整颜色的透明度,来达到各种视觉效果

    3、定位好背景层,贴图层和内容层之间的关系


    MapSiteMapRssGoTop