视觉偏差


在早些时期,我还是作为一名设计师的时候,依靠photoshop和css(层叠式样式表)来告诉我设计中的对与错。例如,如果photoshop表明两种形状分别对齐了,那么它们看起来就是对齐了;如果两种颜色具有相同的十六进制值,那么它们也看起来有相同的颜色了。

这其实不是一种正确的工作方式,尽管它可能看起来这么的合乎逻辑。

在我们工作的计算机中,它们是理性的,但是正因为如此也就会忽视人类感知形状、颜色和大小,也就意味着它们无法结合上下文中的对象,进行相互理解,也代表着一个整体视觉中,由于上下语言和对象无法理解,而无法完成这种整体性。

在视觉偏差中是否正确与否,这是由一个人非理性情感决定的,正是因为如此计算机也就无法做出正确的判断了。当我们了解到这种细微差别之后,并知道如何调整,那么才能算的上一名更加优秀的设计师,相信这点很少有人会注意到吧!

现在让我们来看看实际例子吧!

1.视觉权重

设计软件无法精确的推测出有重量的物体,它们只能依靠例如:宽度、高度或者是x/y轴位置,作为设计师,就需要进行一些视觉偏差的调整来弥补这方面的缺失。

例如在下面播放器图标上,三角形是否居中对齐到外围的圆环,事实上并没有。现在我们在播放器上绘制矩形,可以看到是偏离中心的。


播放按钮


虽然右边的图标中三角形没有偏离中心,但是我们看到第四个就会明显感觉到不是一点点的偏差,这是就是视觉重量造成的,因为三角形的重量集中于左侧,就是产生重心偏移,即使这不是一种错觉。

为了解决上面的问题,只需要动手微微向右移动三角形,直到视觉上看,位于中心。

2.颜色



例如,上面同一绿色可能用于实心图标或者是文字,其中一个看起来就显得稍微“轻”。



这是一种潜移默化的,可以看到:图标比文字更重。要做一些调整,使图标的颜色变浅,文字的颜色变的暗一些,可以使用HSB模式,能够非常方便直观。

3.比例

我们的大脑是如何感知形状和文字大小的呢?答案是比例。如果我们考虑下面圆形和方形:一个是120px120px的正方形,和一个120px120px的圆,可以看到正方形比较大些。


大小变化


其他的调整也会是潜移默化的,经过这种微调有助于整体设计看起来更加完美,因此这种调整非常的细微上下轻微1像素左右。

例如下面例子中,在那些弯曲的字母下降或上升中,存在一个基准,如果写Garamond字体,就会发现一行字母和绘制的一条基线与高度设置,而如果那些没有超过中间线的字母就会显得偏小,因此会向上偏移1-2像素,从而整体上更加稳定,而不会显得太小不太搭配了。



4.大写文字

接下来我们看看设置大写字母时的情况,对其进行一些视觉偏差的调整是非常有必要的,由于大写字母比标准情况下的字母要更加突出,因此需要进行调整。



当然除非我们的设计目标就是要突出大写的字母。例子中的大写减小两个像素就可以看到和标准一样大小。

在对一个接口进行设计时,每个细微的设计细节加起来,都将会影响网站的整体感觉,因此细节对于设计有着很重要的地位。而一旦它变成工作流程的一部分,对于那些一两像素的变化,将会让设计变得更加完美。



由于相关的设计软件无法理解一个设计作品的背景状况,就会导致不能正确的调整,而对于这些,设计师是可以做到的。另外也说明设计中不能完全依赖于计算机,这需要我们自身的经验积累的感觉,设计师由此就需要时刻训练自己的直觉。

作者:Luke Jones

https://medium.com/@lukejonesme/optical-adjustment-b55492a1165c#.rmqa0cer3

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容