说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

Web设计中对视差设计的误区

HTML文档下载 WORD文档下载 PDF文档下载
视差设计作为一种非常流行的Web设计技术,被越来越多的网站所应用。英国设计师、创意总监Rob Palmer告诉大家,真正的视差设计并不是一些花俏的滚动特效和阴影,必须具备:观察者视图、背景视图还需要有中间参照物。

【编者按】视差设计作为一种非常流行的Web设计技术,被越来越多的网站所应用。而有些网站为了追随潮流,彰显时代气息,在未真正理解什么是视差设计的前提下就把它应用到网站设计上。这不仅影响用户体验,还会对用户真正理解视差设计产生误导。

英国设计师、创意总监Rob Palmer就此在Medium发表了一篇《 The Troublesome Misconception of Parallax in Web Design》他告诉大家,真正的视差设计并不是一些花俏的滚动特效和阴影,必须具备:观察者视图、背景视图还需要有中间参照物。下面是对原文的摘译:

最近浏览了一篇“视差效果最好的前40名网站”,发现里面的观点存在误导性、并且有些应用程序也不属于视差设计。

下面就Web设计中的视差设计技术发点牢骚,我们常常会在一些网站上看到一些流行的视差设计示例等内容,而其中很多示例并没真正采用视差设计技术,这有可能是因为:

  • 创造者(设计师、开发者、企业)可能并未真正理解视差是什么,也可能是因为他们没能力能够很好地实行视差效果、也可能是因为……
  • 一直宣传使用视差特效的网站,因为网站上面运用了一些花俏的滚动特效就把它当做“视差滚动网站”;
  • 用户被这些花俏的效果和一些错误的文章所忽悠,误以为他们正在体验的就是视差特效。

目前,大量的网站会滥用各种特效,人们在浏览网站时,甚至会把这些特效看成是一种标准。

本文将对这些观点进行纠正,对视差特效概念做出具体的阐述,并且告诉大家如何应用它们。

视差是什么?

首先让我们来明确“视差”的具体定义。

视差,就是位移或一个物体在不同的光线下查看,所表现出来的位置区别。

这里可以从两方面来强调这个光线:首先是沿着不同的光线。视线需要一个初始参考点,并且从这头到终点处能有一个清晰的视觉。其次需要强调的是“物体的明显位置”。

物体的明显位置,请大家记住这一点:这两种线的结合才是视差与一些花俏的滚动特效的核心不同之处。

这句话告诉我们,要实现真正的视差,必须要有下面两点:a)物体或位置聚焦;b)一个物体在一个给定移动空间必须有明显的位置。本质上来讲,建立一种深度知觉或立体观测。

对于立体观测,我们不会太深入地探讨,我们会讨论与之相关且有趣的话题,如光线和不正常的双眼视觉,但从文章角度来看,无论人类的视觉如何,正常还是双目视觉(binocular vision),都是有能力去查看和使用立体观测的。它允许人们制定两个独立的场景,人们的大脑可以在一个单独的视觉场景中计算深度,人们试图在Web设计中复制这样的效果,而这就是视差特效。

下面来看一些示例,大家可以边看边判断,它们是否是真正的视差网站。


www.nytimes.com/projects/2012/snow-fall/


http://journey.lifeofpimovie.com/


http://shibui.me/web/scroll/


http://brokentwill.co.uk/


http://www.bettybetty.de/


http://www.theqcamera.com/


http://scytale.pt/


http://www.madebyblock.com/

以上这些例子均摘自“一些令人惊讶的视差列表”等文章,事实上却没有一个与视差有关。为什么这么说,回到开头关于视差的定义,对象(object)、两条线的交集、如果没有这两者,谁都无法创建出视差特效。

振奋人心!iOS和Android版BBM应用首日下载量冲破1000万次 十款开源的数据库管理工具 360联合多家IDC成立“安全防黑联盟” 国内百万网站受益 腾讯云如何玩转手游数据分析 成都站免费抢票 直接拿来用!10款实用Android UI工具 第14届英特尔投资全球峰会 新投16个项目逐一看 2013中国Linux内核开发者大会亮点汇总 UnitedStack:用社区的方式做IT 手游狂潮:小团队如何提高游戏数据化运营效率? 2012年全美CEO收入榜:扎克伯格第一、库克第五、Marc Benioff第九 专访:InMobi全球CEO Naveen Tewari MDCC 2013精彩专题论坛之产品与设计 中关村大型IT人才招聘会举办 现场火爆 [简讯]新代码编辑器Lime发布 号称Sublime Text的开源实现 从真实案例出发:如何在协作开发中避免误解! Google工程师谈程序员的自我修养 依然很强大:微软第一财季净利润同比增17% MDCC 2013垂直行业应用与O2O专题论坛透露劲爆话题 专访豌豆荚产品设计团队:Design Hackathon是绞尽脑汁之后的海阔天空 首日报名爆满超300 向C++大师Lippman提问征集 做华为合伙人:华为开发者联盟沙龙(北京站)即将开幕 Windows XP发行12周年 我仍年轻而你已垂暮 2013浏览器市场份额:Chrome领衔,Firefox、IE相去甚远 人人网陈弢:从RecSys2013看大数据和移动给推荐系统带来的挑战 继续紧逼Oracle:在占领谷歌等公司之后,MariaDB迈向企业端 移动周报:十款最实用的Android UI设计工具 阿里巴巴CTO王坚:开发者精神是云计算与移动互联网的“信仰” 黑客老鹰:安全软件同样需要用户体验 六届中国大数据技术大会PPT精粹(二) 专访百度蒋凡:从RecSys2013大会看推荐系统发展新趋势 Hike副总裁杜中强:携手阿里云OS,拥抱云时代 怎样判断再三个表中同一字段的数据是否重复?????? 请问有哪些工具可以远程控制oracle数据库? 哪里有正版操作系统等软件下载? JAVA程序编译时,有时会提示你要用try...catch...,JAVA怎么知道我要用try,有个标准吗? 关于unix下的双机热备问题。急!!! 靠,用classwizard时为什么只有ctoolbarctr而没有ctoolbar? 高分求救:在word中有没有自动插入行号的功能????? 报表问题 Access97 中取几位小数用哪个函数,round不能用?或着有什么其他的方法,谢谢 h---e---l---p????flash播放插件 sql 的问题,??????? 一个类中包含一个结构数组,但数组长度可变,不用Next串连,用什么方法? 用水晶报表可以连接远程数据库吗?如何做到? 我要使用Realplay控件,放网上和本地文件,谁有实例?我给50分 哪里有扫描程序的源代码, 请问哪里有介绍Borland或Delphi历史的文章﹗ overload operator ++,which is right? 哪里有vb.net 相关的中文电子书? 我用的是API函数ShellAboutA来显示windows式的关于窗口,但却不能显示出来? 如有赐教,不胜感激.请问我如何在pb中获得某个文件的路径,如sqlldr.exe,注册表apppaths中没有? 这样行吗?望大哥们帮忙 如何做DELPHI的帮助 哪位高手知道哪里可以找到pkzip口令压缩的源代码 请指教,我是新手,我搞不清下面的语句什么意思?特别是coords起什么作用 重金诚聘:pb师父。人数不限,报酬300/week,要求:能经常在线。愿者签名。此贴常年有效//偶是牛虻,极有分 请用过jakarta-ant-1.4.1这个编译软件。 如何实现该功能 【Java------能解决这个问题吗???】 VFP的串行通讯 winNT/2000/XP的密码系统到底安不安全? What is the _int64 mean int g721_encoder( int sl,int in_coding,struct g72x_state *state_ptr)这个函数有人...... 请问具备哪些能力,工资可以在8k+,再具备哪些能力,就可以10k+,... horizon_tj,货已经收到,暂时还没有看,先结帐。 在jbuilder5中编译ejb时出错(weblogic6.0)请指教!!! picturebox 如何加上滚动条,是发送什么消息加上的?谢了,晚上我来加分(发言就有分)。 介绍UNIX学习网站 如何在ANIMATE控件上加入鼠标的点击事件 DBChat的小问题,请进 我的3D撞球在csdn发布了,以前下不了的请来试试。 如何用keybd_event模拟:和\的输入? 请教关于操作符“++”重载的问题,欢迎发言! 如何排版??? 奇怪,VC学这么长时间了,居然这么个小问题不知怎么解决? 急,请帮忙介绍学习UNIX的网站,急 Application的用法问题,小妹试了很长时间了,还没有解决,快帮帮忙啊! 关于variant类型的问题? 注册表问题,急急急!!! mysql中怎样设定远程访问权限啊 【Java--------能解决吗???】 有哪位大虾知道ACCESS2000的表支持的最大字段数? 在实际教学中如何体现《幼儿园教师的师德规范》 电机星三角启动正反转,正反点动电路图还有个人经验,加的电路短路保护,继电器之累的 如果圆柱体和长方体体积相等,那么圆柱体和长方体可能( ) 圆柱体=直径是21.3厘米.长是51.4厘米.密度是7.86 请问是多重 怎样计算长方体的容积和圆柱体的体积 给锅炉做保温算一下用多长保温材料 下面的长方体和圆柱体那个体积大?(单位;厘米)圆柱的周长是25.12平方厘米,高是6厘米(竖着的) 长方体竖着的;高是6厘米,长宽都是8 我有一圆柱体,直径2.2米,高度4米,油的密度为1:1,装满油的重量? 有一个圆,黄瓜占25%,青菜占60%.1、茄子有1.2千克,黄瓜有2千克,青菜有4.8千克.那么.茄子占总圆的百分之几 大小两个水池都未注满水 若从小池抽水将大池注满 则小池剩5吨水 若从大池抽水将小池注满 则大池剩30吨水 知大池容量是小池的1.5倍,两池中工友多少吨水? 一个长方体的水池,长八点五米,宽四米,深二米,如果每小时可以放进八立方米水,要放满这一池水需要多少小时? 如何准确评价教师的教学水平 大小2池未注满水小池抽水注满大小剩5吨大抽水注满小大剩30吨大容量是小1.5被大小共几吨水写方程 某菜市场运来西红柿和茄子共385千克.西红柿卖出3分之2,茄子卖出5分之3后,剩下3.某菜市场运来西红柿和茄子共385千克.西红柿买出2/3[分子.分母],茄子卖出3/5[分子.分母],剩下的这两种菜重量相 通过老师的教育,我认识到错误.这句话对吗 茄子5%黄瓜35%青菜60%,茄子有96kg,茄子千克数约占黄瓜的( )%,约占青菜的( )% 叔叔运来西红柿和茄子共385千克,西红柿卖出5/2,茄子卖出5/3后,剩下的两种菜的重量相等.求西红柿和茄子各多少千克? 这两个老师在教学上有怎样的共同点?作者是怎样具体表现的?请结合语句说说你的看法 一个长方体和一个圆柱体的体积相等,如长方体的底面积是圆柱体底面积的5分之2,那么长方体的高是圆柱体的? 农贸市场上,一个个体菜贩运来西红柿和茄子共312千克.西红柿卖掉三分之一,茄子卖掉五分之三后,剩下的两种菜质量相等.求运来西红柿和茄子各多少千克?我只要算式 把干电池“2节”,小灯泡L,电阻R及多档电键S连接成如图所示电路,就制成了简易的调光小电灯,如果小灯泡L的电阻RL=10欧,定值电阻R=5欧,电源电压为3伏.问:①多档电键S有什么作用?②当多档电 一个长方体,一个圆柱体和一个圆锥体,它们的底面积和体积分别相等,那么圆柱体的高和长方体的高( ),圆锥的高是长方体高的( ). 某菜市场运来西红柿和茄子共385千克.西红柿卖出三分之二,茄子卖出五分之三后,剩下的这两种菜重量相等.运来西红柿和茄子各多少千克?要算术方法解答,理解. 标有“6V 3W”的小灯泡L与额定功率为4W的电阻R按如图所示的电路连接,闭合开关S时,灯L正常发光,且...标有“6V 3W”的小灯泡L与额定功率为4W的电阻R按如图所示的电路连接,闭合开关S时,灯L正常 长方体和圆柱体的体积相等,长方体的底面积是圆柱体底面积的2/5,那么长方体的高是圆柱体高的( ) 西红柿和茄子共385千克,西红柿卖掉2/3茄子卖掉3/5后,剩下两种菜重量相等,求西红柿.茄子各多少千克? 将一个灯泡连在电路中,灯泡正常工作且功率是40W,串联一个电阻R,电阻功率是3.6W设电源电压不变,灯的电阻不随温度而改变且灯的电阻小于R,此时灯的电功率为多少?请注意了,是灯的电阻比R小 圆锥体圆柱体和长方体各一个,它们的底面积和体积相等,圆柱体的高是长方体的高(),圆锥体的高是长方体的高的(). 求一个45号钢材圆柱体,是实心的,高是55毫米,直径是300毫米,求重量? 一个容积是30立方米的水池,它的进水管1.5小时能装进水7.5立方米,放满这些水要几个小时用比例解 如何组织语文的有效课堂教学 黄瓜,茄子,萝卜,哪个比较好用?懂得的人来回答噢~它们各有什么好处? 一个圆柱体白银直径38毫米,高度3毫米,这个圆柱体重量多少克? 一个水池装有一根进水管,它5/6小时注入3立方米水,平均每小时可注入()立方米水? 如何进行小学课堂教学评课? Y一个圆柱体白银直径48毫米、高度3毫米.这枚圆柱体的重量是多少克? 一个长方体和圆柱体容积,长方体和圆柱底面积的比是3:2(从容器里面量),长方体容器中有1260升,水深6分米,现将一部分水倒入圆柱容器,使得水的深度一样,这时容器中水的深度是多少? 计算圆柱体的重量长19米,直径250毫米的铝柱,重量是多少千克,急求! 茄子和黄瓜的区别是什么? 一个长方体和圆柱体容器,长方体和圆柱底面积的比是3:2(从里面量),长方体容器中有1260升,水深6分米现将一部分水倒入容器,使得水的深度一样,这是容器中水的深度是多少? 教师如何评好课 用黄瓜舒服还是茄子 食堂有3种蔬菜共136千克,黄瓜比茄子多3千克,青菜比茄子多4千克,每种蔬菜几千克? 圆柱体的体积怎么算啊 茄子 黄瓜 你想到了什么如题 有一个装满水的容积为350立方米的水池,水池每小时涌出泉水40立方米,现用9台抽水机,每台每小时可抽水10立方米⑴水池内水量 y(立方米)与抽水时间x(时)之间的函数关系式,并说出x的取值 无水碳酸钠能不能用烘箱来烘干呀 圆柱体高17.5米,直径40厘米,求体积算法 怎么算的写出来 有甲、乙两个水池共贮水40立方米.如果甲水池在注入水4立方米,乙水池放出水8立方米,那么甲乙水池的注水量相等.问两个水池原来哥注水多少立方米? 用无水碳酸钠标定盐酸时,没有马弗炉也没有烘箱,用电炉子可以么 圆柱体高65厘米直径40厘米体积是多少 语文课堂教学中如何运用激励性评价 在实际教学中该如何体现幼儿园教师的师德规范 如何进行现代课堂教学评价 语文教学评价语言(低年级) 现代教师应具备怎样的师德---对教师师德内涵的思考 绘制三相电机星—三角转换启动的主回路电路图. 初中语文课堂教学中如何运用激励性评价 如何在教学中体现《幼儿园教师的师德规范》 怎样进行小学数学课堂教学评价 长方体的体积与圆柱体的体积有什么关系
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn