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

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)、两条线的交集、如果没有这两者,谁都无法创建出视差特效。

屏蔽GitHub是互联网时代的“闭关锁国”吗? 巧妙利用空白设计案例分享(多图) 用友发布2013/新三年业务策略 力推UAP/CSP云平台 AWS集群计算新增内存分析EC2实例 手游:鼓足力气,掰弯传统3D游戏大作 LBA兴起:未来移动广告将基于地理位置 苹果发布2013财年Q1财报:iPhone销量及营收低于预期 不再被墙后 一个全新GitHub到来 与乔布斯并肩作战的日子 Google抛弃Exchange ActiveSync WP用户获DAV支持 Facebook真的要做“Facebook Phone”? 程序员,都去写一写前端代码吧 清除山寨和广告应用,“豌豆洗白白”服务上线 谷歌另类“开源” 程度仍不及Facebook和Twitter 想在云中分一份蛋糕? 不妨试试“山寨” 为何乔布斯脾气怪糟 却能让一群最优秀的人为他卖命? 单页Web设计案例+技巧攻略(多图) IE10里的捕捉模式和响应式设计 在“亚马逊商店”出售自己:产品经理这么找工作 【CTO俱乐部第92期】大规模存储与电商架构演化实战分享 刘黎明:PaaS是非主流业务,要与IaaS融合 个人手机游戏开发者之死 为什么苹果的应用审核是个笑话? 程序员性格怪癖是才华横溢的表现,还是危险分子的征兆? JavaScript Source Map详解 8条学习编程的可靠建议 一周消息树:亲爱的GitHub,我们怎么访问不了你? [回顾] 2012年几大编程语言就业趋势分析 研发周报:微软无视W3C 拒绝遵循WebRTC标准 移动周报:夫妻档闯江湖 事业爱情双丰收 当服务器遇见锤子:第六届AWS全球创业大赛落幕 重新开机时常常变成"大图标",怎样设置使WIN2K所有磁盘(c,d,e盘)上的所有文件夹和文件以"列表"显示,就是让"查看"->"列表"固定? oracle9i的安装文件都有什么?望高之!急! 哪位有没有SCJP培训的录音或其他教学的好东西阿 MSComm控件在设计时运行没问题,但打包后装到别的机子老是出现“没有注册类”,求救? delphi 做的数据库应用程序如何移植?? copysign怎么用啊? 如何将一个网页的所有链接均自动加为绝对链接? 技术与数学的问题 本人写了一个设置纸张方向和大小的函数,其中MyDevMode.dmPaperSize = psize '若vbPRPSA3 设置纸大小为A3,但在VB对象库中找不A2张对应值 tomcat4.1.24中的sevlet问题 我下载了linux的iso文件,可怎么安装啊!! 我想问一下,有关于计数器的相关的信息? 救急:是否可以在两个页面(两个单独打开得ie浏览器页面)传递参数,如何实现啊? JDBC相关的两个问题 Oracle8.1.6怎样连接SQL SERVER2000 ?(在线等待) inserted表问题 急!!!关于FileSystemObject问题,在线等 dll 编译问题 请教 请教关于iterator与container? 谁有mixerAPI的中文资料,如(mixerGetLineInfo)我需要弄懂原理(不需要MSDN) 请问“怎么样才能修改以有的flash文件”,拜托,在线等待 如何使相同的子窗口显示一个? ?请教高手有关Align的问题。 高手帮我谢谢注释~~高分相赠~~~~谢谢高手~~~~ 各位大牛们,小弟想请教大家对FlowMIS这个平台有多少了解,用此平台进行二次开发(企业信息系统)好不好。 SQL SERVER2000 怎样连接Oracle8.1.6(在线等待) C语言程序设计 如何在英文字符集的客户端访问服务器为中文的数据库? 那4M是不是让诺基亚给偷了?! 如何调用ResetPrinter函数设置默认打印机 listview使用的问题 delphi的打包问题 请大家推荐一个短信网关 调查:当你身边响起神圣的国歌时,你会不会不由自主站起来,手放到胸前,跟着节奏一起唱起来?(有感而发) 请问如何调用.chm的帮助文件? 如何调用系统默认打印机的属性! 请教新手问题~~~麻烦哪为大侠给解释解释~谢~ 如何用struts实现阴阳色列表? 怎么用vb建立一个数据库呀?注意,不是一个表,是一个数据库! 如何调用系统默认打印机的属性! 一个很老很过时的数码相机。 郁闷,超级简单题目 初学ASP,请教学习心得 我的机器怎么老死机?? 两级表单动态联接?急,急,急!!!!!????? ---见了鬼了,Jre不好用!!!--- 寻求把中文字符串转换为十六进制的串的ORACLE函数? 电力学院惊魂 一條語句 數據庫日誌就寫滿了 怎样获得系统的字体!急!谢谢了! 谁有用java做的聊天系统程序(当作业)分不够可再给 redistribute connected什么意思 求出自论语的成语集合 求100个或以上,不用注释神马的,出自论语的就行了 有5盒糖,乙有4盒糕,值44元.如果甲、乙两人对换一盒,每人所有物品的价值相等.一盒糖、一盒糕值多少元 connected什么意思 求氨基酸缩写与R基对照表如题文字的更好,省的我抄了谢谢 收集保护环境的句子我要求限时到6点,现在是3月3日 17:36计时开始6点到,555,我的要求没达到 Matlab2008,拟合自定义的曲线方程以下是怎么得到的,打开曲线拟合工具箱,选择拟合横纵坐标,输入新的曲线拟合形式:a/(1+(a/37000-1)*exp(-b*x))得到结果如下:General model:f(x) = a/(1+(a/37000-1)*exp(-b*x))Co Stamps这个单词是什么意思 一辆汽车绕一棵大树不停的开,且使车子与大树之间保持有20m的距离 司机应该怎样确定开车的路线 先进个人材料怎么写啊 Component是什么意思 物理题一汽车行驶时遇到紧急情况,驾驶员迅速正确地使用制动器在最短距离内将车停住,称为紧急制动.设一汽车行驶时遇到紧急情况,驾驶员迅速正确地使用制动器在最短距离内将车停住,称 先进个人材料 怎么写? vhdl中COMPONENT是什么意思谢谢 谁的胳膊比腿长(动物) 个人先进材料怎么写? component repository是什么意思 动物生出来 有没有却胳膊少腿的? 个人先进材料怎么写啊?要写些什么内容啊?年底了,公司突然把我评为先进,叫我写分材料,这个到底怎么写啊,要写些什么内容啊? For nearly a day they waited for an answer,only____to cime again next day.A.to be toldB.being told 哪些动物有胳臂 民族团结个人先进材料怎么写 屋顶上的鸽子在"咕咕"的叫着.改成拟人句提前声明:前面有三个例题:::::小鸟在树林里唱歌;蟋蟀们在这里弹琴;蚊子在到处吹着喇叭. pig-headed 的 英文释义 谁知道一些初中数学的简便公式例如算一个数的约数个数的简便公式是把指数加1再相乘不要这乱七八糟拷贝的文章,自己知道的,一条也好啊 为什么我安装东西安装了一半总是出现destination component 下午放学回家,小明做作业,开始时看见钟面上分针略超过时针,完成作业时,发现分针与时针恰好互换位置,那么小明做作业用了多少时间? 建筑中檐高、跨度指的是什么? 建筑物的体积规模是哪一个词语的意思啊 “艰难困苦,玉汝于成”解释 飞行最远的是什么鸟? gssg是什么氨基酸的缩写或者什么肽键什么的 某人家有两个旧钟,一个每天快20分钟,另一个每天慢30分钟.现在将两个钟同时调到标准时间,问至少经过多少天两个钟同时显示标准时间? 外滩Bund应怎样发音?是发短a的音,还是u的音? 小学数学教科书的公式,只要是由什么方法得到的 艰难困苦,玉汝于成 Bund前用什么介词, 甲有5盒糖,乙有4盒糕,如果甲乙两人互换一盒,则每人所有物品价值相等.一盒糕,一盒糖值多少元?列出算式 时钟的指针在四点和五点之间,何时成直角?(我会列示但是不知道意思,必有重谢!)得的得数是分数,看表看不出来! 求初中数学奥林匹克竞赛定理最好是全的!例如:梅涅劳斯定理,塞瓦定理,相交弦定理,切割弦定理,蝴蝶定理,托勒密定理,欧拉线,正弦定理,余弦定理等等及它们的逆定理………韦达定理等著名定 怎样在PPT的模板中加入公司的log?导入的步骤是什么? 这是什么动物,腿还挺长的,说的仔细一点他吃什么 Spring注解是什么啊 not only is a stupid women,but also is a stupid pig 艰难困苦 玉汝于成阅读答案 JAVA Spring一段注解求解释 怎么在ppt中弄企业log? 一面钟的时针长15厘米,分针长18厘米,一昼夜分针与时针的尖端所走路程比是多少? 精尽人亡是什么意思啊? Forever stupid pig ,this is my loue 9.“艰难困苦,玉汝于成”这句话告诉我们的道理是   A.要想取得成功,就应主动去寻找困难和挫折   B 求《论语》全篇翻译 深圳靠近海的地方哪里好玩? 艰难困苦,玉汝于成 是什么意思 internally connected和externally connected分别是什么意思啊 建筑体型组合有哪几种组合方式 为什么靠近海的地方温度差异很大 not connected是什么意思? 怎么快速而长久牢固的记忆20个氨基酸的3字母缩写? 三路车和六路车的数学问题金城路是3路车和6路车的起点站,3路车每隔5分钟发一次车,6路车每隔3分钟发一次车.两路汽车同时发车后,至少再过多长时间又同时发车? 巴基斯坦西南部发生爆炸袭击 造成至少全球十佳旅游城市排名揭晓 上海第六巴日美拟明年将普天间空中加油机转往岩国中国“北斗”即将在泰国落地使用宁夏“10·14”灭门杀人案犯罪嫌疑中组部:干部离退休3年内不得到原管辖杭州一大妈在城市空地种2000余株罂中国网络媒体论坛宣言“让网络清朗”中航工业否认为2.7万名员工配备iP世界关注中国“关键性会议” 将为长远内罗毕火车与公交车相撞死伤数十人韩国议员呼吁韩朝积极合作解决开城问题印度长途巴士失火事故造成至少40人死刘延东会见美国英特尔公司首席执行官十八届三中全会将于11月9日至12日全国人大常委会五年立法规划公布 立法国际观察:监听丑闻凸显美国网络信息“美国国家情报总监暗示奥巴马绝对知道监美国情报总监称白宫早知晓监听 政府内李源潮会见欧洲客人李源潮会见欧洲客人我们遥远神秘的“别处”是他们深沉热爱英国将不许留学生打工?北京将整治382处三轮车非法上路地区手机预装软件,不能让厂商说了算任天堂第四任社长55岁早逝奥运冠军现身业余大赛《十年:我和香港》着眼世预赛 新人出场难权相佑霍建华相约喝酒成好友一晴方觉夏深张稀哲未定 克莱伯定了媒体:“全面放开二孩”要有紧迫感狂风吹倒简易楼当你“老”了“它的味道非常好”曼联今夏第四签齐心协力孙杨返京备战世锦赛葡超前锋加盟国安顶替埃尔顿 张稀哲回虽非罢赛 也得挨罚为了杜兰特 高薪留坎特
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘