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

  大家小时候是否玩过红白机或小霸王上面的游戏?


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


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

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


  给它以重新定义


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

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

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

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


  2、差异滚动 分层视差


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

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

  差异滚动的实现规则:

  背景层的滚动(最慢)

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

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

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

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


  1、运用大背景

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

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

  注意:

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

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

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

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


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

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

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


  根据页面自身的功能来定义是否需要贴图层

  贴图层的存在是为了更有效的传达视觉效果,但如果它成为了干扰,就会违背了我们使用的初衷


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

  4、讲故事


  有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话:内容是王道,技术只是实现内容的一种工具。当你能够成功地把有力的信息和漂亮的执行力结合起来,你就能创造出人们喜欢并且享受其中的体验。

  ————Wieden+Kennedy

  TWO 数据可视化——信息图形设计

  故事1 传统水银体温计和大字母水银体温计


  故事2 红灯?绿灯?


  这些都是图形设计在日常生活中的简单应用,图形设计是信息可视化的一种表达方式

  数据的图形化来自于数据的可视化,这是一种将数据以有别于阅读的另外一种可以用眼睛去观看的方式进行的信息表达。

  这种可视化的表达不应该只是提供一种解释,而是提供给所有读者以了解的普适性的结论方式。


  在今天,可视化表达已经远远比简单的饼状图或者条形图更加的亮眼,让信息的传播更加的充满着趣味,它们包含着设计的趋势,有创意的再创新。

  图形化和视觉差在产品中应用时的设计过程


  后记:这是之前做的一个分享内容,最近又有同学在做视觉差时碰到一些问题,问我要这个分享,所以把这个发出来,希望能对大家在做类似设计时有所帮助

时间: 2024-10-30 19:48:33

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

网页设计技巧:视差滚动效果和图形化在网页中的呈现

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

改良=创造设计 视差滚动效果和图形化在网页中的呈现

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 ONE 视差滚动效果 Parallax Scrolling 大家小时候是否玩过红白机或小霸王上面的游戏? 这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果 所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了-- 目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势 给它以重新定义 不过这类效

淘宝网图形化搜索引擎"图想imagine"试用与感触

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 笔者今天闲着无聊,打开淘宝网主页,无意中发现前段时间还在内部测试的图想功能上线.于是点进去,试用了一下,感觉此功能一定会受到网购爱好者的喜爱. 图想,即淘宝网开发的图形化搜索引擎,网友可以通过上传图片,搜索到相同或者类似的图片.此功能谷歌与百度都已经开发出来,不过淘宝将此功能定位于商品搜索,可谓独辟蹊径.淘宝把此功能描述为"以图搜图

js特效无缝文本图片向上连续滚动效果

1.中国WEB第一站? ,JS无缝垂直图片滚动,效果非常不错...图片特效 >>> JS无缝垂直图片滚动,效果非常不错 JS无缝垂直图片滚动,效果非常不错 2.网页制作教程? 从右向左滚动JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续...图片特效向上无缝滚动的图片效果使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠 3.为什么要建立网站标准?什么是网站标准? 我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚

二款jquery 上下滚动效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte

jQuery实现的多张图无缝滚动效果【测试可用】_jquery

本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <style> *{ padding: 0; margin: 0; } li{ list-style-type: none; }

jquery焦点图插件实现图片轮播滚动效果

先看效果图   1.下载JQuery.slideBox和jquery插件,并引用  代码如下 复制代码 <link href="css/jquery.slideBox.css" rel="stylesheet" /> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.slideBox.min.js"

jquery防百度百科/淘宝/页面滚动效果

例1 ,防百度百科页面滚动效果    代码如下 复制代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jquery防百度百科页面滚动效果</title> <link rel="stylesheet" type="text/css" href="css/main.css" /&

霓虹效果广告图制作

  刚开始学设计时,师傅对我说,你要练就炉火纯青的地步,那就是看到任何广告图都能马上知道在PS里如何实现.这不是技术分析,慢慢它会变成设计师的一种本能,好像嗅觉一样.于是,我常常在逛街的时候留意各种海报,各种图形.的确,在设计这条路上,和软件相处融洽,自己的创意才能发挥得更完全. 好了,说完技术含量的表达,我依然坚持己见,那就是技术永远不可能排在第一位.灵感才是第一位的.今天,我们学习的这个教程就是关于如何在PS中做出霓虹效果的文字.也许有很多人以前看过这方面的教程了,但我要说的是,绝对不是每个