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

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

Facebook收购英国手机代码验证公司Monoidics Apache基金会废弃其C++标准库 鲍尔默宣称微软有一百万台服务器,这个数字真的靠谱吗? 全球6000开发者:iOS、Android、WP最痴情谁? 提升网站知名度的十大方法 IBM移动平台首席架构师Greg Truty:MobileFirst从底层架构开始 Hallo.js:一款所见即所得的Web编辑器 数据分析≠Hadoop+NoSQL,不妨先看完善现有技术的10条捷径 移动周报:百度收购91,19亿美金背后的博弈 植物大战僵尸2:“免费+内付费”模式引发争论 [CTO俱乐部第103期] 高德和四维图新技术高管谈地图导航的发展与挑战 Java 7爆最新漏洞,10年前的攻击手法仍有效 Twitter联合创始人Biz Stone谈Facebook用户体验 提倡零广告 英雄会:企业的人才漏斗 开发者的武林大会 一次错误估算带来的启示 苹果开发者中心被黑:开发者信息或被窃取 SIM卡加密存漏洞 将影响数亿计的手机用户 搜狗茹立云:探索引擎产品落地 浏览器+搜索模式会成主流吗? 大势所趋,IBM Acme Air至少使用Netflix的5个开源工具 【观察】跨越“朦胧期”的云计算:产业、核心技术、生态圈以及突破点 Rovio Account:平台化之路修成正果 甲骨文总裁马克•赫德采访实录:用软硬件集成一体机打垮对手 如何一步一步打造高可扩展性的应用程序? 用Java编程,请保持简洁! 从安全隐患带来的商机来看,Hadoop同样很美 三年增四倍:如今谷歌服务占北美互联网流量四分之一 决战低功耗?Intel明年推低功耗Xeon处理器 在软件架构上增加新功能的注意事项 90后的代码界“女神”李雪:在编程中找到自己的“灵魂” 大数据之路不乏荆棘,然则其中的机遇却高于一切 iPhone销量令人意外:苹果Q3财季净利69亿美元 同比下滑 免费100m asp 空间 求救,如何打开一个USB设备,CreateFile吗?请具体些 在线求救 谁是最可恨的人? 如何将本页设为只能是 target="_top" 谁有格斗游戏的源码,设计资料! 三人合作共同开发一网站,现需页面设计,有意者留下EMAIL 怎样用C#把窗口菜单和按钮做成象VS.NET中的平面菜单和工具栏上的平面按钮? 为什么在MMC中新建SQLSERVER注册总是出现超时已过期的错误? 這樣定義宏是什么意思:#define LIBCMD(givenfunction) \? ===这样的SQL在ORACLE 怎么执行不了 一个WIN2000与WINXP的共享问题 如何将一个CBitmap存为BMP文件? 在directshow中,如何实现像大部分播放器那样的“快进”功能? 较难问题--IE6不能启用cookie? 如何修改group里的数据排序方式? 如何写动态SQL语句??? 怎样让select元素不能修改? 谁用过微软的tts??? 郁闷......呀,偶MM说接吻觉得恶心!!!! 请教高手,本人想请教通过数值如:12.5转换成UNICODE的问题,急!!!在线等待 我现在的密码不好记,如何更改密码? 请教大侠;RMI问题 ASP+SQL server免 费空间哪里有100分送给你. 有没有人用过Virtual PC这个软件的啊???快救命啊!!!!!正等着用啊!!!! 有谁知道在上海周边有哪些电脑配件的厂家,如机箱.主板.显示器之类的? 关于“汇总数据”的问题 请尽快帮我解决病毒问题 菜鸟6000分依次提问ORACLE问题,第一个:大虾给我个函数里建虚表并插入数据的例子 EJB使用大数据量的问题 怎样用DirectShow写一个RenderFilter & SourceFilter linux下的应用程序,界面语言问题 VSS中的Pin和Unpin有什么用?在什么情况下使用? 一个WINXP与WIN2000的共享问题(急) 我想问一下,能不能用sql sever2000 开发桌面型的mis系统 我想监测某个端口的通信主要是 TCP 端口,不想写网卡过滤驱动,各位有什么高招? java的用户文档在那里下载? 急,大小写和建主键的问题 我学校在选拔人参加济南市一个五子棋编程大赛,请教各位高手! 请斑主Montaque进,请直接过来拿分! 关于wise installer的问题 sqlserver两个表中的求和问题,在线等待。。。 页面的设计请教 为什么老是出错,windows2000 请问getdocument写在函数里,和写在头文件里作为view类的成员,除了作用域被扩大了之外,在功能上有什么不同? 为了安全我只开了21,25,80,110,1723端口, 结果自已的IE上不了网? 不知还需要开哪个口子,才能上网.谢谢!!! 简单!!!谁能告诉我,这个定义是什么意思吗? VC不正常了,帮忙 如何根据输入参数输出指定数量的记录? 请问Javamail中如何取得邮箱(INBOX)的大小?Thanks 为了安全我只开了21,25,80,110,1723端口, 结果自已的IE上不了网? 不知还需要开哪个口子,才能上网.谢谢!!! 五步蛇是啥 通常对商品分类和编码是分别进行的,商品编码在先,分类在后.判断题对的还错的,给出理由 为什么发豆芽要常换水 请问这个电阻多大啊 ”商品分类“与“商品分类体系”有什么作用?希望是书本上的内容! 我用555电路造了个发叮咚声音乐门铃,但声音没有想象中的悦耳,反而很难听.发出很沉的叮咚声,一点都不悦耳,请问你们做的也是一样吗?还是我的电路有问题. 请问这个电阻是多大的 如何给商品分类 发豆芽要用什么样的水? 求DNA,基因,染色体,细胞核各自之间的关系. 请问;沉淀法对沉淀形式的要求是什么? 555叮当门铃没有叮咚声,只有电流声滋滋声!电路没有连错!· 求基因,DNA,染色体,细胞核之间的关系.(那些什么是什么的载体,什么在什么上呈线性分布…). 有什么成语里能包含四和八这两个字呢?比如说是四面八方~ 豆芽为什么在水里发科学一点,豆芽是什么科 宇宙有多大,是什么形状,球形,方形,椭圆体? 带有"四"的成语有哪些?(要三个,不包括:四面八方.四通八达) 中镍铬钼球墨无限冷硬材料用什么合金刀片加工好啊 火在太空和深海里是什么形状的呢? 生物体的结构是什么 球墨铸铁电焊补完什么合金刀头能车动 在宇宙火什么形状,我知道答案,考考你们 什么成语跟四通八达差不多,但不叫四通八达 洗硬度高的球墨用什么刀头 求助! 谢谢! 四平八稳 哪四平?哪八稳? 生物体的结构 配置药品时,量筒中有水,会怎么样 ( )四平八的成语有哪些 四通八达打成语 化学有机物中核磁共振氢谱图氢的种类多少怎么看? 请问是( )四平八?(成语)请速回! 带有数字的成语,如:四面八方急 豆芽为什么会在水里生长 带有四平的成语四平在前 珊瑚礁为什么会被称为“海洋绿洲”? 按下门铃开关,门铃就同一种声音响个不停.为什么?怎么修 电解饱和食盐水方程式中的氧化剂 为什么珊瑚礁被誉为海洋的热带雨林?为什么?要简洁明了 告诉下高一化学试题有晓得的人就说下哈, 多晶硅生产过程中,有些氯硅烷无法处理,比如二氯二氢硅,金属杂质含量较高的三氯氢硅和四氯化硅,只能走尾气淋洗系统或是外卖;这样比较浪费.听说气相法白炭黑可以用氯硅烷做原料,不知 CMOS的读法和意思理解.还有所指芯片的作用.CMOS 和BIOS的意思与读法.例如BIOS 败奥斯.他们的详细意思.和所指芯片组的作用.还有他们在主板上起到的作用. 新买的门铃 为什么把开关拿在手上按门铃是响的 装到墙上以后按开关 门铃就不响了? 沉淀法 白炭黑百度怎么控制 下列碳单质的用途中,利用了碳的化学性质的是 1.做电极 2.做滤毒剂 3.制作固体润滑剂 4.做燃料 5.制作装饰品 6.冶炼金属 7,制作染料 请问一下谁知道高一化学试题晓得的人说下哈,十分谢谢了9f 生物体系统是什么构成 法国红酒的庄园级和村庄级一样吗,还有哪些分级? 环境污染物进入人体的途径有哪些 生物体是有什么组成的? 一个装有水的圆柱形玻璃杯,它的底面积是100平方厘米,水深是15厘米.现在将一个底面积是20平方厘米,水深是15厘米.现在将一个底面积是20平方厘米的长方体铁棒垂直放入水中后,还有一部分铁 人体散发哪些污染物 谁能告诉俺,这两个电阻是多大? (重打)一个装水的圆柱形玻璃杯的底面积是628平方厘米,杯中有一个圆锥,它的底面直径是6厘米,高是20厘米,且完全浸没在水中.如果从杯中取出圆锥,杯里的水面会下降多少厘米? 正确读音是 还原糖一定是单糖吗?貌似有些二糖也是的样子.我搞不清了. 商品分类有哪些? 对氯化铜溶液通直流电,阴极附近溶液蓝色变深还是变浅?. 为什么要叫五步蛇呢? 电解饱和食盐水方程式 豆芽天天换水为什么会死我的豆芽昨天好好的,今天就死了,? 印度东部洪灾死亡人数升至45人李娜打入总决赛排名进Top3 创亚洲河南济源一路段7公里6个“收费站”专刘云山:教育实践活动整改工作要准、狠白岩松惋惜恒大未能锁定胜局:首尔死刑亚冠决赛首回合恒大2-2首尔 穆里奇中国科学家成功研发人感染H7N9禽流宗庆后语出惊人:中国不能再造房子了李克强在中南海紫光阁会见东盟十国经贸捅死医生的连恩青烦躁时砸东西打母亲 亚冠决赛首回合恒大2-2首尔 穆里奇美国“窃听门”持续发酵 欧洲各国一致德国品牌专家:中国品牌升级要品质更要浙江省委书记夏宝龙:希望天下浙商争做亚洲食学国际论坛登陆绍兴 中国大厨展杭州女装与国际女装相遇 传统丝绸碰撞淘宝店家支付宝“被贷款” 阿里服务热伊朗处死16名“恐怖分子”墨西哥革命制度党主席:墨中两国双边关阿富汗军事基地发生“内斗”致一死一伤贺一诚:浙商又迎新一轮挑战、改革和创深入学习贯彻党中央对检察工作部署要求今年前5个月行贿犯罪立案人数同比上升洞悉民国司法阿根廷VS瑞士:矛利还是盾坚公安部警卫局原正师职参谋谈红严重违纪推动国际司法合作【公告】打造“技侦一体”办案模式蛮性的遗留雷人图片(之二百一十九)礼法之争关系现代中国路径走向展示教义刑法学魅力最高检:保持高压态势严惩暴力恐怖犯罪最高检挂牌督办89起破坏环境资源危害检察日报检索陆俊减刑案:检察机关同步监督作用明显绝境风光(四十)被“复活”的老阿姨申诉人满意离去母亲的宽恕李克强主持召开国务院常务会议
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘