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

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

硬件天堂深圳行:从Seeed Studio、Knewone到柴火创客空间 消费应用开发难赚钱?做个企业app store吧 开发开源软件的智慧:够简单,很好用 历届中国云计算大会PPT集萃(终章):架构到实践的全面解析 透过现象看本质:详谈数据可视化 专家观点:HTML5无法彻底抹杀Native应用 Google地图工程主管Raj Shah跳槽至微软在线服务部门 微软证实Windows 8.1引入类“开始”按钮 系统6月26日开放下载 PHP开发者意向调查:移动开发+云服务成为焦点 研发周报:16种折磨开发者的方式 移动周报:Jolla和Sailfish OS,那些你应该知道的事儿 优化技巧分享:把内存消耗降低至原来的1/20 85后程序员:独自一人,完成一个HTML5开源图形库 关于Waze的前世今生,你所不知道的事 代码审查——提高代码质量的终极武器 值得开发者关注的8个HTML5 API 最初设计方案大公开!LINE STAMP 贴图诞生记 安全宝联合华为成立抗D联盟 储备防御带宽达110G 专访中科院贾海鹏:给异构开发者的六个建议 我们死后的遗留数据将会如何处理? 传微软考虑重大重组 或势在必行 云适配CEO陈本峰:8年磨一剑 Splashtop企业应用:SplashApp让办公移动起来 时空旅行+内付费“植物大战僵尸2”下月18日全球同步发行! 中移动推网络电话Jego 后来者能否居上? 防止数据泄露:BYOD下的管理员5大妙招 咕咚副总裁司建铭谈移动时代的“软硬整合” 未来的物联网结点:可穿戴设备 应用开发的4个技巧,让程序能真正为用户使用 Google早期的10个API:它们现在在哪? 为啥微软开发产品总是慢半拍? 请问在VC++中怎样把JPG图片转换为BMP图片? 有那位老兄知道《Delphi技巧集》这个软件? mostar-什么是INI文件,它的作用和TEXT文本文件是否相同?[]这对符号有什么特殊意义吗? 我想知道用coreguide来进行JAVA编程好不好,他的优点是什么,并简单的说说他的用法 关于SQL SERVER的一个问提 listview内拖动问题 一个简单的问题??? sql server的SERVER端效率问题 VB6如何实现换肤功能 如何用对话之外的其它按钮控制对话框的关闭和打开 ! 关于picture的问题 算法与数据结构 寻找关于Dsound,Dplay方成的书籍或方档!! 如何在xsl中使用setTimeout()而得到渐显的效果? 在外面工作,做底层有钱途吗? 关于form的简单问题 搞过用TurboC开发图像,不知道转VC困不困难 有谁知<<终极杀阵>>游戏(Project IGI)第四回合怎玩的? 不知是否荒唐,大虾请 如果大家有问题告诉我(anjie@zj.soim.com) 如果大家有问题告诉我(anjie@zj.soim.com)一起讨论吗 想跟我交朋友anjie@zj.soim.com tc++3.0如何编写读鼠标程序(急) 都进来看看,程序员的下场... 各位高手,小弟问一个傻问题:怎么在播放一个AVI的时候用自定风格的滑块控制? 我上次在CSDN 上看到有人发贴子说自己写操作系统,我现在有个朋友也在写,想和他联系,但是我现在找不到那个贴子了, 有谁记得那个人的名字或贴子的位置请说.谢谢. 求助:打开网上邻居很慢为什么? 问一个蠢问题:控件何时获得焦点 请问一下哪里再收购软件呢? 请问一下在哪里可以找到收购软件的公司呢? 想作一个DOS程序,实现多台电脑间通过网卡传输文件. 辞职信 application.initialize完成了什么 高手来帮忙啊~ 看看java的魅力 如何通过自制程序的编辑框向现有一般应用程序编辑框传送内容? 窗口执行顺序问题,请多帮助,谢谢 如何自动取得server的日期和时间 怎样让文件指针指到文件末尾,必须skipline一行一行跳吗? 我想在菜单前添加图标,使用Bitmap属性但是为何只能载入*.bmp文件而不能使用*.ico文件,我只有*.ico的图标,请问该如何解决。 有新建一个文本文件并给其命名的函数吗,怎么用 我还真不懂呀? 这个COLTYPE是怎么用的呀?你说它怎么得到表中字段的类型呀? 有关存储器(ram,rom)的编址问题。以及32位或更多位芯片的问题。 一些汇编问题。想来问bcb的兄弟{bcb里好象有不少汇编高手} 救命:在安装了sco openserver之后,系统不能启动,先前安装的win98和win2k也不能。 请问如何进行URL译码??? 请问怎样截取一个string中的一段? 请问delphi做的exe最小可以到多少?怎么做? 我想请问一下WINGATE的具体怎样在WIN2000服务器版中进行设置。 ASP的同志们,能不能留一下QQ号码? 请问何处有破解ACCESS2000的程序或源代码呢? ABCD是平行四边形,BC=8厘米,CE=7厘米,阴影部分的面积比△EFG大12平方厘米,求平行四边形的面积.EA G F D B C 连接AD AB BC DC EGB EFC 再在ABG 和 FDC 上涂上阴影。 小圆的直径是8厘米,大圆的半径是8厘米,小圆面积是大圆面积的多少 如图,AB与AC是两条互相垂直的直线,圆O的半径是15厘米,弧AEB是以C为圆心,AC为半径的圆弧,求阴影面积. 如图,ABCD是平行四边形,BC长8厘米,CE长7厘米,涂色部分的面积比△EFG的面积大12平方厘米.求平行四边形的面积. 一个环形铁皮的内半径为8厘米,外半径为12厘米,求这个环形铁片的面积? 在以O为圆心,以半径为4厘米的圆O内,以4为直径画四条半圆弧,求团中阴影部部分的面积 如图,ABCD是平行四边形,BC=8cm,CE=7cm,涂色部分面积比三角形EFG面积大12平方厘米,求平行四边形的面积 一块环形铁片,内圆直径8厘米,环形宽2厘米.环形铁片面积是多少 如图16,AB与CD是两条垂直的直径,圆O的半径为15厘米弧度AEB是以C为圆心,AC为半径的圆弧,求阴影部分面积用小学的方法算 如图ABCD是平行四边形,BC长8厘米,CE长7厘米,涂色部分的面积比三角形EFG的面积大12平方厘米,求平行四边 一个环形铁片,外圆直径是20厘米,圆内半径是8厘米,这个铁片面积是(),外圆与直径的比值是() 如图,两个四分之一圆弧的半径分别是2和4,ABCD是长方形.求:两块阴影面积的差.追加分TUT 如图,已知圆的面积和长方形的面积相等.求阴影部分面积的列示为:A πr² B 四分之一πr² C 四分之一πr²B 应该是四分之三πr² 一个环形铁片,内圆直径8厘米,外圆半径是10厘米.这个环行铁片面积是多少? 如图,将半径为4cm的圆形纸片折叠后,圆弧恰好经过圆心O,折痕为AB,则图中阴影部分的面积为 如下图,圆的面积与长方形的面积相等,如果圆的半径是4厘米,求阴影部分的面积.急快. 一个环形,内圆直径8厘米,环宽2厘米,环形面积( )平方厘米 以三角形的三个顶点为圆心,以一厘米为半径在三角性内画圆弧,那么图中阴影部分的面积总共为多少? 已知圆拼成长方形的周长,怎样求圆的面积 已知圆拼成长方形的周长,怎样求圆的面积 一个环形零件 ,它的外直径是26厘米,这个零件环宽8厘米,这个环形零件的面积是多少? 四个半径都是8cm的圆的位置如图所示,你能求出阴影部分的面积吗?上面俩圆下面俩圆然后四边连起来不是连成正方形半径相连就行除了四个圆其它的都是阴影部分 请问:一个半径是2.5cm的圆与一个长方形的周长相等.已知这个长方形的长是4.5cm.这个长方形的面积是多少? 一个环形零件的外圆的直径是40厘米内圆的半径是8厘米这个零件的面积是多少平方厘米 长为8cm,宽为6cm的长方形内,分别以长和宽为半径画1/4圆,如下图所示,求阴影部分面积? 在长方形中有两个大小相等的圆.已知圆的半径为7cm,长方形的周长是多少? 一个环形,外圆半径是8厘米,内圆直径是10厘米,环形的面积是多少平方厘米? 图中圆的半径为5厘米,求阴影部分的面积. 在一个长方形中,有三个大小相等的圆,这个长方形的周长是24厘米,求每个圆的半径. 一个圆环,内圆直径是3厘米,环宽8厘米,圆环的面积是多少?算式 图中圆的半径为5厘米,求阴影部分面积. 把一个圆转化成一个近似的长方形,已知长方形的周长比圆多4厘米,请你试着画这个圆,并求出他的周长 一圆环的外圆直径是8厘米,内圆环半径是3厘米,此圆环的面积为多少平方米 如图,最大圆的半径为5厘米,试求阴影部分的面积和要求写清过程 , 这是七年级第一学期的数学. 下图中圆O的周长是16.4厘米,圆的面积与长方形的面积正好相等,图中阴影部分的周长是多少? 一个圆环内半径为8厘米,环宽6厘米,这个环形的面积是多少平方厘米?大圆半径比小圆半径大6厘米,小圆直径与大圆直径的比是1:4,则大圆的面积比小圆面积大多少平方厘米? 图中,每个圆的半径是5厘米,求阴影部分的面积. 下图中圆的面积等于长方形的面积,已知圆的周长是36厘米,那么图中阴影部分的周长是多少厘米 一张圆形纸片的半径是8厘米,在它的中间剪下半径是3厘米的圆,纸片剩下的一个部分是一个圆环.圆环面积? 三个半径为1的等圆两两外切,那么图中阴影部分的面积为 下面是半圆,三角形ABC是直角三角形.已知AB等于10厘米,AC等于6厘米,BC等于8厘米.求阴影部分的面积. 圆的半径为R,圆的面积与长方形的面积相等,则图中阴影部分的周长是多少 一个圆环,外圆半径是8厘米,内圆半径是5厘米,圆环面积是多少平方厘米要快!圆环面积是( )平方厘米? 如图三角形ABC是直角三角形如图,阴影1的面积比阴影2小14.88平方厘米,直径AB长8厘米,求BC的长. 阴影部分面积是3平方厘米,是大圆面积的8分之1,是小圆面积的5分之1.求空白面积是多少平方厘米? 一个环形铁片,内直径是8厘米,外直径10厘米.求面积? 图中BC=10厘米,EC=8厘米,且阴影部分面积比三角形EFG的面积大10平方厘米.求平行四边形的面积. 阴影部分面积是3平方厘米,是大圆面积的8/1,是小圆面积的5/1,问:空白部分面积一共是多少平方厘米? 一个环形,外圆半径是8厘米,内圆半径是5厘米,环宽是多少厘米,环形的面积是多少平方厘米? 图中bc长8cm ab长10cm 阴影部分的面积比三角形ade面积大8平方厘米 求平行四边形的面积 如图,阴影部分面积是3平方厘米,是大圆面积的1/8,是小圆面积的1/5.求图中空白部分面积是多少平方厘米? 一个环形,外圆的半径是8厘米,内圆的半径是5厘米,环形的面积是? 如图,已知长方形ABCD中,AB=8厘米,BC=10厘米,在边CD上取一点E,将三角形ADE折叠,使点D恰好落在BC边上的F点,求CE的长 阴影部分是5平方厘米,是大圆面积的九分之一,是小圆面积的六分之一.空白部分面积空白部分面积是多少平方厘米?回答对了再加5分 一个环形外圆的半径是8厘米,内圆的半径是5厘米,环形的面积是()平方厘米 如图ABCD是直角梯形,其中AD=12厘米,AB=8厘米,BC=15厘米,且三角形ADE、四边形DEBF、三角形CDF面积相等三角形EDF(阴影部分)的面积是多少平方厘米? 下图中阴影部分面积是3平方厘米,是大圆面积的7分之1,是小圆面积的4分之一,空白面积是多少? 一个环形,外圆半径是8厘米.内圆半径是5厘米,这个环形的面积是多少 ABCD是平行四边形,BC长8厘米CE长7厘米,涂色部分的面积比三角形EFG的面积大12平方厘米 平行四边形的面积 一个大圆的半径等于小圆的直径,阴影部分面积是大圆面积的多少? 一个环形,内圆直径8厘米,外圆半径5厘米,环形面积是多少平方厘米?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn