视觉偏差

html-css014

视觉偏差,第1张

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS网页布局的意义体现在如下方面: 一、使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 二、降低流量费用 页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。 说了这么多CSS网页布局的意义与优点,同时也不能轻视CSS网页布局的副作用: 一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。