欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
作为设计师,怎么可能被视错觉玩弄?
来源:南京网站制作 时间:2017-11-09 13:17:03

 在做产品设计师的这些年,我经常遇到一些让我或目瞪口呆或惊喜或不可思议的视觉现象。

 
不知道大家有没有注意,当我们在设计界面,logo或插画时,遇到的很多简单的手法其实都是视错觉!如果你一开始没意识到,而且这些视觉陷阱又让你感到不知所措,希望这篇文章能帮助你了解背后的原理。
 
闲话少说,这里有11个视觉设计中常见的视错觉。
 
三角形分割错觉:
 
任意选择一个点

依靠质心调整三角形
 
图标有时候具有欺骗性,尤其是一些带有复杂的几何形状和古怪比例的。我们总不能奢求所有的图标都对称、拥有完美的像素、保持固定的纵横比吧!因此有些图标的设计就十分“特殊化”,比如磨人的播放按钮!
 
将一个三角形放在一个圆角或直角矩形里,会产生三角形位置不协调的视觉感受,这就是所谓的三角形等分错觉。三角形的质心是根据它的最小边界框来计算的。如果以等边三角形的高线的中点为参照,有半边看起来远远超过一半!

哪个版本用上了几何中心?
 
关于这个错觉的两个说法:
 
•不固定的缩放比例
 
这个错觉跟透视有些关系,想象一个等边三角形被放在向远方延伸的有透视的公路上,顶点是无限远的一个点,底边是公路上离我们近的这一头。
 
•质心/中心
 
如果一个观测者被要求找到中点,他们一般最终会找到质心,将两边划分出看上去差不多相等的区域的点。而重心低于中点,也有数据表明观察者会在两点之间做出折衷选择。
 
为了找到这个特殊的三角形的视觉中心,你可以通过连接三角形三条中线的交点来确定一个三角形的质心,来,就是下面这个公式:

哈哈别当真,这不是一篇关于几何公式的文章(但这个公式是正确的)。
 
质心位于每个边到相反顶点的距离的三分之一,此方法同样应用于许多其他形状。

垂直水平错觉:
 
它是一个平面?长方形?还是正方形?

正方形是任何设计系统中的基本组成部分。Material Design卡片,Facebook的帖子,Pinterest的pin和Dribbble的shots……
 
在Sketch里面拖出一个正方形,有时你可能会特意看看两条边是否均等,然后就总神经质地以为垂直边比水平边长,明明是长方形!实际上它是一个不折不扣的1:1的正方形,这就是垂直水平错觉。

真正有意思的是不同的文化和性别对这种错觉的感知度不同。居住在发达城市的人往往比住在农村地区的人表现得更加敏感,因为在农村地区的人往往习惯于生活在圆形房屋里。
 
马赫带:
 
如果一个虚假的影子落在一个表面上,会投射出一个错觉吗?

在平面设计领域,使用近似色再常见不过。互相对比观察,会感觉到边缘出现了虚幻的阴影,这就是马赫带错觉。其实根本没有什么阴影,只是我们眼睛感知色彩存在的方式而已!

这种现象可用侧抑制来解释,用通俗的话解释就是,暗的会更暗,亮的会更亮。
 
马赫带效应在视觉设计领域中相当微妙,但对牙科医生造成的障碍不容小觑。比如当他们拿着你的牙齿的X光片找你牙齿的问题的时候,这个错觉会非常干扰他们的判断……
 
黑林错觉:
 
很有活力!

你有没有遇到有很多圆点或纤细的线条的背景图片或logo,当你鼠标滚动的时候,总感觉他们在动?或者类似电视屏幕上晃动的波浪线?这些都是一种名为莫尔条纹的混叠效应,两种网格图案互相重叠,通过不断刷新我们的视觉,制造出对方正在运动的错觉。
 
这种效果很酷,与其说是错觉,也可看做一种干扰模式。上图中Sono的logo可以说是莫尔条纹、黑林错觉和运动错觉的结,这种感官技术在欧普艺术中颇受欢迎。
 
赫尔曼栅格错觉:
 
有还是没有,这是个问题。

赫尔曼栅格错觉一度相当热门,看看上面这个放在高对比度背景下的一些黑色正方形组成的网格,直视正方形会感觉网格交叉点跳动着鬼畜的斑点。但直视交叉口斑点就会消失不见。

这种效应依然可以用侧抑制来解释。复杂粗暴的说,就是我们某个神经元受到刺激产生兴奋后,刺激相近的神经元,后者所发生的兴奋对它产生的抑制作用。
 
同时对比错觉:
 
两个独立的方块亮度相同吗?

把两个相同颜色的物体放在不同的对比色背景下,会使两个物体看起来好像是不同的颜色,这就是同时对比错觉,效果因人而异。

不幸的是,虽然有很多关于它的研究,但没有一个站得住脚的理论可以解释为什么会出现这种错觉,侧抑制算是其中一部分原因。
 
怀特错觉:
 
我的眼睛欺骗了我吗?

这种错觉相当微妙,但也很有意思!看上面的动图,左边的紫色色块看起来比右边的色块浅。但它们实际上是一样的。

你问我怀特错觉的产生原因?没错,你猜对了,还是侧抑制。
 
水彩错觉:
 
色彩欺骗!

当我给一个东西描边时,突然会想,“哎我什么时候把背景色也改了?”细看会以为白色区域边上产生了基于描边色的浅色阴影,可实际上还是白色的!
 
这种视觉现象被称为水彩错觉,它依赖于轮廓线的亮度和颜色对比,来产生色彩扩散效果。

我承认这种错觉让我困惑了好几次,我总是神经质地用取色器来确认一遍!
 
贾斯特罗错觉:
 
尺寸真的重要吗?

设计插图和logo,有时会需要对不同形状进行切割。贾斯特罗错觉发生在弧形物体上。两个元素看上去大小不同,但实际上还是完全相同!不可思议吧?

怎么可能?可惜对于贾斯特罗错觉,依然没有一个明确的理论支撑。有种解释是我们的大脑被半径差异迷惑了,短边使长边看上去更长,长边使短边看上去更短。
 
康士维错觉:
 
一个同样很不可思议的错觉!

除了同时对比和马赫带错觉,康士维错觉也使用了渐变,利用中线来制造一边比另外一边暗的效果。实际上,当我们把它平行放置,还是一样的!

这种错觉跟前面提到的两种错觉效果相似,但有两个重要区别:
 
・在马赫带错觉示例中,效果只出现在靠近边界的区域,而康士维错觉强调对整体的影响。
・康士维错觉中,亮的更亮,暗的更暗。与通常的对比效果相反。
 
缪勒-莱尔错觉:
 
文字游戏

这个错觉告诉我们的印刷商,制作一个字体需要更多地依靠你的设计直觉而不是逻辑思维。就算利用参考线对字母进行准确的几何定位,整体也会出现不协调的情况。一种常见的解决办法在力学中称为超调。简单地说,超调是调整个别字符实现视觉平衡的过程。

看看上面这些著名的logo,有些字母不与参考线齐平。印刷商必须手动视觉调整每个字符到它最佳的位置。
 
但我们为什么要调字体?
 
为什么超调被需要?来源于一个在全世界都很受欢迎的错觉,缪勒-莱尔错觉。这种视觉现象表明,两条原本等长的线条因两端箭头的朝向不同而看起来箭头朝内的线条比箭头朝外的线条要短些。这种经典错觉再次证明了人类感知的缺陷。很有意思吧?
 
结语
 
如果你对视觉感知感兴趣或想提高视觉设计技能,建议你多阅读格式塔心理学。会有很多你可能感兴趣的错觉:
 
Kanizsa三角形错觉、艾宾浩斯错觉、埃伦施泰因错觉、霓虹颜色扩散效应、棋盘阴影错觉、诱发运动1、诱发运动2……

 


本文地址:http://www.njanyou.cn/web/1038.html
Tag: 设计师
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 如何撰写博文标题来驱动搜索流量
下一篇: 创业公司成功SEO的10个措施
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
确保网站可访问性的 7 个重要步骤
电子学习中的微交互:通过小设计细节提高用户参与度
iGaming的设计趋势:平衡美学和功能
如何在 2024 年重新设计您的电子商务业务网站?
如何在 2024 年为您的网站创建徽标
无缝过渡:在设计驱动型开发中表现出色
社交媒体受欢迎程度背后的心理学
超越点击和点赞:释放数字营销的力量
最后更新
超越点击和点赞:释放数字营销的力量 社交媒体受欢迎程度背后的心理学 无缝过渡:在设计驱动型开发中表现出色 如何在 2024 年为您的网站创建徽标 如何在 2024 年重新设计您的电子商务业务网站? iGaming的设计趋势:平衡美学和功能 电子学习中的微交互:通过小设计细节提高用户参与度 确保网站可访问性的 7 个重要步骤
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例