⼲货：UI设计中那些不易察觉的视觉误差！ui设计师资格证怎么考
视觉误差会对UI造成什么样的影响，业界内流⾏的解决⽅案⼜有哪些，本⽂将以超过五⼗个例⼦为你讲解。希望思缘的朋友通过这篇⽂章可以解决这个问题。
俗话说眼见为实，但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息，然后经过⼀次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产⽣偏差。这⼀点对图形化操作界⾯的设计⾮常影响。既然⽆法绕过，设计师就要学会如何去「适配」⼈类的视觉惯性画出“正确”的界⾯。
⼀. 物理尺⼨与视觉尺⼨
长宽 400px 的正⽅形与长宽 400px 的圆形哪⼀个更⼤?假如这样问你的话，那么答案当然是⼀样⼤。但是来看看下⾯这张图，长宽各 400px 的两个图形看起来并不⼀样⼤。你的眼睛告诉你 400px 的正⽅形⽐ 400px 的圆形更⼤⼀些。物体的物理尺⼨是⼀样的，但视觉尺⼨却有可能不⼀样。
为了更加准确地证明这个现象的存在，下⾯这张图给出辅助线，⼤家好好看看。
我们改变⼀下圆形的尺⼨，看看现在这两个图形的视觉尺⼨有没有更接近⼀些?
每个⼈的感官可能都不⼀样，但对于我来说，调整尺⼨后的两个图形看起来才是⼀样⼤的，⾄少也不会像图⼀⼀样，让⼈第⼀眼就认为正⽅形⽐较⼤。为什么会这样?因为我将圆的直径增加了 50px。
现在我们将图形都叠起来看，看看为什么会产⽣这种那么明显的误差。400px 的两个图形叠在⼀起，你会发现整个圆形都被包裹在了正⽅形之内，⽽正⽅形多出的四个⾯积巨⼤的 a 区域就是造成这种视觉误差的原因。再将 400px 的正⽅形与 450px 的圆形叠在⼀起，正⽅形⽆法将整个圆形包裹在内了，圆形超出的四个 b 区域⼜与正⽅形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正⽅形在视觉尺⼨上更接近，也就是我们常说的“⼀样⼤”。
不仅是圆与⽅，所有的图形都能够造成这样的偏差。当我们追求“看起来⼀样⼤”这个⽬标的时候，某些形状的物理尺⼨应该更⼤⼀些。
这个现象对于界⾯造成的影响会有哪些呢?譬如说，当绘制⼀套 icon 的时候，我们当然是追求每个 icon 都看起来⼀样⼤。但假如我们只通过物理尺⼨来进⾏量度的画，画出来的 icon 必然会个⼤个⼩，乌七⼋糟，更糟糕的是，这种问题经常发⽣，⼿机⾥随便打开个 app 都能发现这样的问题。
在画 icon 的时候，⼀定要把视觉尺⼨这个⽆法⽤数字进⾏衡量的维度考虑进去。视觉重量⼩的元素要放⼤，视觉重量⼤的元素要缩⼩。建议⼤家可以去下载 HIG 的标注 icon 与 Material Design 的标准 icon 看看，数百个图标每⼀个的物理尺⼨都不尽相同，但看起来全部都是⼀样⼤的，这是⾼⽔平的表现，值得细细学习与参详。
抽出⼏个当做例⼦，⼤家看看。
加个粉⾊等⼤的边框，或许你会看得更加清楚。
不是每个⼈都会有空给每个图标加个框来测量视觉尺⼨的平衡，这⾥教个⼤家⼀个⽼司机才会的办法，搞个⾼斯模糊，如果⾼斯模糊之下每个图标看起来都差不多⼤，那么就可以说⼤致达成了视觉尺⼨相等。
⾯对那些不需要由我们画的 icon，⽐如分享到 Twitter、分享到 Instagram ，官⽅已有提供的 icon，⽤起来也要注意。
下⾯举个例⼦，Facebook 和 Instagram 的 icon 是正⽅形的，⽽ Twitter 和 Pinterest 的 icon ⼀个是不规则图形，⼀个是圆形，所以为了达到视觉尺⼨上的相等，当它们⼀起出现的时候，我们要放⼤ Twitter 和 Pinterest 的 icon，实际效果如图所⽰。
另外⼀个达不到视觉尺⼨相等的重灾区就是表单配按钮这种常见的组合。通常是长⽅形的表单如果和直径相等的圆形按钮摆在⼀起，必然也会出现圆形按钮看起来⽐较⼩的问题。
处理⽅法相信⼤家也都知道了，略微放⼤按钮，这样整个表单和按钮才能达到视觉平衡，视觉尺⼨才能相等。
对于这个现象的处理⽅法并没有那么简单，就拿上⾯那个例⼦来讲，有没有除了放⼤按钮以外的其他处理⼿法呢，当然是有的。条件允许的话我们可以对按钮添加⼀些颜⾊，让它看起来的视觉重量更重，这也能达成视觉尺⼨相等。
记住这些点
物体有物理尺⼨，但是⼈眼所见，并对⾯积或体积⾃⾏加以理解后所认知的视觉尺⼨并不会与物体的物理尺⼨完全相等。
正⽅形的视觉重量是最重的，越接近正⽅形的 icon 看起来也会更重，更⼤，反之更轻更⼩。
规范建议绘制 icon 的安全区域主要就是为了解决视觉尺⼨对等问题，留给设计师的操作空间。
⼆. 视觉对齐与形状
视觉对齐可以说是视觉尺⼨这种现象的⼀种逻辑上的延伸。还是跟上半部分⼀样，来看张简单的图，这两个东西对齐了吗?

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。