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

文章描述:ONE 视差滚动效果 Parallax Scrolling.

ONE 视差滚动效果 Parallax Scrolling

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

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

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

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

给它以重新定义

不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓。
其次,设计上要有非常严密的关联

视差滚动效果的主要特点:
1、直观的设计,快速的响应速度,更合适运用于单页面

2、差异滚动 分层视差

页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层
(是否可以让它更多呢?有没有办法在视觉上做到?)

差异滚动的实现规则:
背景层的滚动(最慢)
贴图层(内容层和背景层之间的元素)的滚动(次慢)
内容层的滚动(可以和页面的滚动速度一致)
我们让三个图层的滚动速度不一致,就做出了漂亮的差异滚动效果

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

1、运用大背景

这些背景图像一般是高分辨率,大图,覆盖整个网站。
高清照片是一个迅速抓住观众的好方式,可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

注意:

1. 1、背景图的色彩、内容在选择时要十分讲究,前提是不要破坏用户的体验,不然再漂亮的照片也是枉然。
图片类型最好选取趋向于一些比较柔和、略带透明的一类,不要影响到网站主体内容的阅读,识别,讲究协调。
1.2、以大量图片为特色的页面应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验.

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

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式
一个视差区间内颜色最好保持使用2到3种,我们可以调整颜色的透明度,来达到各种视觉效果

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


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

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

4、讲故事

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

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

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


故事2 红灯?绿灯?


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

数据的图形化来自于数据的可视化,这是一种将数据以有别于阅读的另外一种可以用眼睛去观看的方式进行的信息表达。
这种可视化的表达不应该只是提供一种解释,而是提供给所有读者以了解的普适性的结论方式。

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

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

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

时间: 2024-11-09 00:20:06

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

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

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

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

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

网页设计技巧:使用模糊的背景进行漂亮的网页设计

文章描述:网页设计中的模糊背景. 全尺寸背景在网页设计中已经越来越受欢迎,几年来,这一趋势的另一个变化是模糊的背景图像. 最近似乎有更多的模糊背景设计雨后春笋般冒出来,在使用某种类型的模糊图像的大背景下或者一个全尺寸的背景,不仅让整个网站下显得非常的人性化,烘托出网站所要给用户的氛围,也能更够突出产品或者人物本身特质,在配合新的CSS技术的情况下 更能到给用户舒适的用户体验! 有多种不同类型的网站使用这种方法,有许多非常好的的设计,这种风格,我们已经看到许多Web应用程序或iPhone应用程序.

jQuery视差滚动效果网页实现方法经验总结_jquery

本文总结分析了jQuery视差滚动效果网页实现方法.分享给大家供大家参考,具体如下: 首先说两个核心函数,当然是基于jQuery的: 1.$(document).scrollTop() ; 该函数主要是返回页面当前顶部距离页面顶部的像素值,是一个非负整数. 2.$(window).scroll(); 该事件是监控页面是否滚动,一旦滚动则触发其回调函数. 由此两个函数,我们得到下面的代码: $(window).scroll(function() { var top = $(document).sc

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

网页设计技巧:网页的平面构成排版能力

文章描述:什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面构成和排版了.刚开始接触网页设计的 什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面

网页设计对网站推广效果的影响

中介交易 SEO诊断 淘宝客 云主机 技术大厅 网页设计是一门很深奥的课程,而其对网站的推广.营销所产生的影响是毋庸置疑的.无论是网页布局.网页下载速度.导航系统的方便性.对用户的浏览效果会产生直接影响,从而影响网站在用户心目中的地位与形象,亦即网页设计效果直接影响网站的品牌形象与推广营销效果.下面就其网站设计的各个模块对网站推广效果的影响和分析作一总结:(部分内容一半段也说不清楚,会在以后的文章中逐个说明) 1. 网页框架结构对SEO用户的影响 许多网页设计人员为了简单.快速等原因而设计一些内