那么它们也看起来有相同的颜色了,在今天的译

日期:2019-10-16编辑作者:摄影

对齐 视觉权重

4.大写文字

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

图片 1

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

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

图片 2

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

作者:Luke Jones

所以,设计师需要不同于计算机的「非理性」的头脑去决定一个设计看起来是对还是错,因为只有我们才能理解设计中的前后关联,而电脑做不到这点——搞清楚这个问题的设计师才可谓是优秀的设计师。

颜色

通常,经过深思熟虑的设计并不会引起用户太大的注意,但明显错误的设计绝逼会引起用户的抱怨。让我们来看一系列常见的例子。

图片 3

2.颜色

图片 4

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

图片 5

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

尺寸

尺寸指的是我们的大脑所感知到的物体和文字的大小。假设有这么两组图形,一个 120×120 像素的矩形面积比一个 120×120 像素的圆要大。所以圆形必须再大一点才能看起来与矩形相匹配。

左侧的两个图形都是 120×120 像素,但圆形看起来要小一些。右侧的圆形是 126×126 像素,看起来和 120×120 像素的矩形差不多。

与其他的调整相比,它显得很微小。但这个微小的调整能使得整体设计看起来更好——通过一个像素一个像素的调整,直到感觉对了为止。

译注:接下来作者介绍了英文字母大小写放在一起时,如何调整视觉比例的方法。考虑到中文都是方块字,并不存在类似的问题,参考价值不大,故不作翻译,有兴趣的同学可以去阅读原文。

……

在进行界面设计时,每增加一处这类细微的设计调整,都会影响网站的整体感觉。这种关注细节的能力将造就伟大的设计。

当这些习惯养成之后,比如减少 2 像素文字,或者轻移三角形 10 个像素等,它将使得你的设计有可能做到真正的像素级完美。

计算机,乃至人工智能目前都无法理解设计中物体间的上下关联,所以它们不能做出像设计师那样的校准。在计算机能够解决这个问题之前,它仍然不能用于做复杂的设计决策。

此外,我们也不应该依靠计算机来思考所有的事情。我们应该信赖自己的眼睛与直觉。设计师在每天的工作中都在磨练自己的直觉,所以我们要信任设计师,哪怕计算机说这是「错误的」。


以上译文仅代表原作者观点。
原作者 Luke Jones
原文 Optical Adjustment
设计译言原创翻译,如需转载请先联系我,并注明出处『设计译言』及本文地址。
如对文章翻译版权有异议,请联系我。If you have any problem about the translation rights, please contact me.


欢迎关注 @设计译言 的微信公众号:shejiyiyan

设计译言微信公众号二维码

图片 6

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

对齐与视觉重量

计算机无法精准地计算出一个物体的中心在哪个位置,它只能够通过一些信息来做判断,例如宽、高,或者 x/y 坐标位置。作为设计师,我们需要通过我们的眼睛来辅助校准这个中心位置。

标准的播放图标里的三角形是居中对齐的吗?并不是。画一个辅助的矩形就知道了——这个三角形偏离了中心线。

左侧这个标准的播放按钮里的三角形,若画上一个辅助矩形后,可以看见它并不是完全居中的。

上图右侧这组完美居中的播放按钮,三角形看起来却是偏左的,而且偏得挺明显的,这是为什么呢?原因在于视觉重量。三角形的大部分质量分布它的左半部分,这造成了它偏左的假象。

为了解决这个问题,我们必须手动校准三角形的位置,直到它「看起来」是居中的。

面积是我们大脑感知物体的大小。如果我们用圆形和正方形来思考这个问题,一个120px长的正方形比一个120px半径的圆面积要大,如果要使他俩看起来一样大,圆的半径要稍微大一些才行。

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

当我还是个设计新手的时候,我依靠 Photoshop 或者 CSS 来判断一个设计是对还是错。举几个例子,假如两个图形通过 PS 的「对齐」功能校准了,那我就认为他们是对齐的。假如两个不同的形状是同样的尺寸,那我就认为他们是一样大的。假如两个颜色是同一个十六进制色值(译注:即 HEX,例如白色的十六进制色值为 #FFFFFF),那我就认为他们「看起来」是一样的。

这也是一个很细微的调整,但是这很有利于整体的设计。这是对元素非常轻微的调整,上下调整1像素,可能感觉就对了。

3.比例

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

图片 7

大小变化

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

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

图片 8

颜色

通过眼睛调整颜色则更加微妙。这也与物体的「重量」有关——即这个颜色出现的面积有多大。

简而言之,同一个绿色被用来填充图标和文字时,文字的绿色有可能看起来就要比图标显得更浅一些。

左侧的图标和文字组合使用的同一个 HEX 色值,右侧的组合则使用了两种不同的色值。

这很微妙,但你能看出来图标要比文字的颜色更「重」。为了解决这个问题,不论你是把图标的颜色调浅,或者把文字调深都可以——我的建议是选择一个符合 AA 可访问性指南的颜色即可(译注:AA 可访问性指南指的是 W3C 提出的方便有障碍人士访问网页的指南)。

我推荐使用 HSB / HSL 色值。它们允许设计师通过调整「L」或者「B」的值来迅速地改变一种颜色的明度。

图05

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

在产品设计的过程中,好的工具能提高我们的效率。但与此同时,工具因其自身的局限性也会引发一些问题。在今天的译文中,作者 Luke 分析了这些问题,然后给出了解决方案,并鼓励设计师要相信自己的眼睛和直觉。下面进入译文。

图片 9

1.视觉权重

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

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

图片 10

播放按钮

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

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


在字体设计上亦是如此。带有弯曲弯曲字母的上升或下降是在大写字高、基线等之上。如果你用garamond字体写了一行字,然后画一条基线,一条字高线,你可以看见弯曲的笔画时垂直于这些县的。如果没有超过, 单个字符会显得比旁边的字母要小。

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

因为这些软件的计算结果虽然「合理」,但它们并没有像人类那样去感知形状、颜色和尺寸。换句话说,这些软件无法像人类那样,通过一个参照物,去感知另一个物体,并理解两个相互关联的物体间的环境。

在Photoshop中,即使看起来非常科学的对齐、同样的形状大小和色值,也可能与我们现实中感受到的完全不一样。优秀的设计师应该感受到这些细微的差别,并且懂得去纠正它们,以今天这四个方面为例,以前没注意到的同学赶紧来涨个姿势 !

图片 11

上面的说法看似合乎逻辑,却是错误的工作方式。

计算机没有计算视觉权重的精确方式,他只能依赖某些确定的信息,比如长宽,x/y轴坐标。作为设计师,我们需要通过一些被称之为光学调整的东西来弥补这一点。

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

图04

软件是很理性的,但是软件不能把人类感知也加进影响计算的因素中——这就是说,软件并不能理解在上下文情境中的物体和物体之间的关系,在整体视觉语言的环境下和人类如何感知物体。

图片 12

图07

图02

实心的图标和文字用了相同的颜色填充,但是他们其中的一个颜色会看起来会淡一点。

以前笔者在做设计的时候,笔者靠Photoshop和Css区分对错:如果Photoshop显示两个图形对齐了,那么他们就是对齐了;如果两个不同形状的图形大小是一样的,那么他俩就是一样大的;如果两个颜色有同样的色值 ,那么他们看起来就是一样的颜色。

颜色的光学调整更细微。再一次重申,这是关于视觉权重和颜色何如展现。

电脑或者人工智能无法完全理解设计的上下文情境,所以他们不能做出准确的调整而设计师却可以。直到有计算机能对设计情境中分离出来的独立的组成部分做出合理的判断,我们都不能只是依赖计算机给予我们设 计的解决方案。我们不能依赖计算机告诉我们所有的想法,我们可以依赖我们的眼睛和我们的直觉。设计师在日常工作中磨练自己的直觉,所以我们信任我们的直觉,即使计算机告诉我们相反的答案。

注意Didot字体的上部下部的曲线是怎么变化的,在字高之上,落到基线之下。在这7个字母上都有体现。

大写文字

最后,有一个视觉调整是必要的:如何排放大写文字和普通的大小写文字。大写文字比普通的文字要突出的多,需要调整来达到视觉平衡。

图03

当在做大型项目的时候,每一个细节的设计会叠加起来影响整体的设计。好的设计需要我们对细节的关心。

图06

面积

除非目的是让大写的文字更佳突出,大写文字应该始终减少几个像素,例如16px减少到14px,或者12像素减少到11像素。

你可以发现图标的颜色细微的比文字要重,为了调整它,可以让图标颜色变浅一些,或者让文本变暗一些。

图片 13

左边的形状都是120 x 120 px,远看起来小一些。右边的圆是126x126px,面积和正方形差不多了,看起来差不多大。

一旦他们称为工作流程的一部分,文字大小减少2像素,或者轻移三角心10个像素让他去到合适的位置,就是这种细微的调整会让设计看起来更完美。

播放按钮的三角形是对其圆的中心吗?并不是。绘制一个辅助的长方形可以看出来,三角形的中心并不在圆形的中心。

图01

上面的大写文字似乎比旁边的普通文字要大,下面的大写文字调整了2像素,让他们看起来一样大。

左边的图标和文字使用了相同的色值,右边的组合用了不同的色值。

左边的按钮是中心对齐的,但是看起来却不在中间。

图片 14

人类非理性的思维会判断物体看起来是否视觉上正确,因为我们可以看到和理解上下文环境,而这正是计算机无法做到的。了解这些细微的差异,并且知道如何调整他们的设计师才是好的设计师。很少人会注意到, 大部分人会忽略。

下面让我们来看几个例子。

笔者建议在使用设计软件的时候,使用HSB色值代替RGB色值。好处就是可以调整颜色的明暗。

图片 15

这个方法看起来很理性,但是其实是错误的工作方法。

本文由必威平台发布于摄影,转载请注明出处:那么它们也看起来有相同的颜色了,在今天的译

关键词: 必威平台

所以都会用到PS来给照片进行一翻修饰和上妆处理

照片PS教程实例,PS给可爱的小女孩照片PS出非主流效果,人物磨皮及美白是照片处理中较常见的,最好能够自己掌握...

详细>>

利用PS给室内美女图片调出质感的效果,今天我们

PS人物美容教程实例,利用PS简单的给美女人像制作出健康性感的肤色,本教程介绍人物照片的一些后期处理技巧。人...

详细>>

我们需要分析一下照片偏色的部分,而是尽量去

PS偏色照片处理教程:打造美女白细水嫩的皮肤效果,素材图片偏暗偏色非常严重,不过作者调色真是非常出色。简单...

详细>>

photoshop给性感的模特美女加上绚白的彩妆效果,

最终效果 今天我们来学习一篇PS美女照片调色教程,PS给气质美女模特少女调出甜美橙绿色效果,橙绿色也是一组比较...

详细>>