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