发布时间：2019-5-2 分类： 行业资讯
为什么一个简单的界面在你做完之后感觉不够精致，可能是因为你错过了一些容易忽视的设计细节。本文作者教您如何通过案例研究改进您的设计，并一起学习！
我已经阅读了很多自己的感受：我不能依赖于数学的精确实施。我仍然要相信我的眼睛。我使用心理感知作为帮助优化设计的标准。最终结果是给用户的。也许这是最好的。
每当你看到一个界面，你的大脑实际上是在欺骗你。无论你怎么努力使事情看起来一致 - ——旁观者的眼睛经常不同意，因为在现实生活中我们用大脑来感知物体。因此，作为设计师，我们唯一的选择是扭转用户大脑的“欺骗”（译者注：视觉上）。
在本文中，我将向您展示设计组件需要改进的位置。我们来看看这个弹出的例子。
△7已经调整
△无需调整
尝试比较调整前后的视觉感受。直接比较可能会让人很难看出差异，所以我制作了一个GIF来帮助大家比较。
首先，调整重心
现实世界中的任何物体都会受到重力的影响，这意味着如果没有支撑它会掉落。我们的大脑会自动将现实世界的期望应用于界面的元素，并假设屏幕上的任何对象都“试图”关闭。即使物体完全静止，我们的大脑仍然认为它会向下移动（物体上方的空间会增加，下面的空间会减小）并在视觉上调整它。
当在实践中看到时，完美垂直的中心物体将是低的。为了使物体在视觉上保持一致，我们必须抵消重力的“期望”并稍微向上移动物体。
如下图所示：
物体越大，它越“重”，“下降”越快。所以我们需要为更大的物体补偿更多，而较小的物体补偿较少。
粉红色显示容器拿着“较小”按钮：
其次，调整圆角按钮的边距
将圆形按钮稍微移动一点也是个好主意。
否则，按钮将被视为略微错位，在视觉上“向内凹陷”。同时，如果按钮圆角很小，它看起来像边缘的直线，因此不需要视觉补偿。
第三，调整标题边距
同样的原则适用于标题，特别是较大的标题。随着字体大小的增加，每个字母周围的空白区域变大，破坏了左边框的视觉感知。
为了改变这种情况，我做了一个小的负左边距：
当然，将它应用于设计中的每个标题都需要付出很多努力，因为它需要手动调整过程，但是对于更突出的标题（例如，在登录页面上）是值得的。
第四，调整文本块的右边框
使用左对齐文本时，文本块的右边缘变为“不整齐”，文本内容似乎偏移。与圆形按钮的情况类似，我将整个文本块稍微向右移动，使其在视觉上居中。
因此，右边缘更接近右侧隐含的垂直对齐规则。如果我们不对此进行调整，则会出现明显的感知差异。
五，调整颜色
颜色的感知根据填充区域而不同。应用于白色背景的文本颜色将显示为比放置在相同颜色的同一大块上的文本更亮。相反，如果我们将彩色文本放在深色背景上，颜色会显得更暗。
背景“吸收”文本颜色并始终使其在视觉上转换为背景颜色。为了适应这个事实，当我在浅色背景上使用文字时，我会稍微减轻颜色并在深色背景上点亮颜色。
字体大小和重量越小，您需要的补偿越多：
六，调整灰度
这是颜色调整的特例。我尝试使用100％黑色并修改其不透明度以创建灰色文本，而不是直接设置颜色值。
这样，当您使背景变暗时，您的灰色将不会“不可见”。
半透明黑色有助于实现可读结果，而无需创建许多不同的样式。半透明白色也是深层背景的选择。
7.调整投影密度
我使用的不同阴影浓度取决于阴影对象的颜色。对于较暗的物体，阴影应该更强，而对于更亮的物体，阴影应该更薄。
如果没有这种技术，假设两个阴影具有相同的不透明度，较亮物体的阴影将在较暗物体的阴影旁边看起来较暗。
八，总结
当然，并非每个项目都需要额外的视觉调整时间，但如果您正在开发的界面需要特别注意并且需要脱颖而出，使用上述所有技术将导致更加和谐的结果。
原作者：Anton Lovchikov
原文链接：https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0
翻译：clouds Sky
翻译链接：http://www.ui.cn/detail/353512.html
本文由@彩云Sky授权，未经作者许可不得转载
该地图来自Unsplash，基于CC0协议
