视觉错误会对UI产生什么样的影响，业界流行的解决方案有哪些？这篇文章将用50多个例子向你解释 希望思源的朋友可以通过这篇文章解决这个问题 俗话说，眼见为实，但事实上我们的眼睛经常欺骗我们 眼睛通过光的反射接收信息，然后经过“大脑补充”，我们最终形成我们所说的“视觉”图像 大脑补充的过程会因为各种原因导致我们对“看”东西的理解产生偏差 这对图形操作界面的设计有很大的影响 既然不能绕过，设计师就要学会如何“适应”人类的视觉惯性，画出“正确”的界面 1.物理尺寸和视觉尺寸:长宽为400px的正方形和长宽为400px的圆形哪个大？如果这样问你，答案当然是一样大 但是我们来看看下图。这两个400像素长、宽的图形看起来大小不一样 你的眼睛告诉你一个400像素的正方形比一个400像素的圆大 物体的物理尺寸相同，但视觉尺寸可能不同 为了更准确的证明这种现象的存在，下图给出了辅助线，大家好好看看 让我们改变圆圈的大小，看看这两个图形的视觉尺寸现在是否更接近。每个人的感官可能不一样，但对我来说，调整大小后的两个数字看起来大小一样，至少不像图1，让人一看就觉得正方形更大 为什么会这样？因为我把圆的直径增加了50px 现在让我们把图形折叠起来，看看为什么会有这么明显的错误 400px的两个图形叠加在一起，你会发现整个圆都包裹在一个正方形里，正方形多出来的四个A区就是这个视觉误差的原因 然后把400px的正方形和450px的圆叠在一起。正方形包不住整个圆。圆圈外的四个B区在视觉上与正方形外的A区相互抵消，所以450px的圆圈在视觉大小上更接近400px的正方形，也就是我们常说的“大小相同” 不仅仅是圆形和正方形，所有的图形都会产生这样的偏差 当我们追求“看起来一样大”的目标时，有些形状的物理尺寸应该更大 这种现象对界面有什么影响？例如，当绘制一组图标时，我们当然会追求每个图标看起来大小相同 但是如果只以实物大小来衡量画作，画出来的图标必然是大大小小的，更糟糕的是，这种问题经常发生。在手机上打开一个app就能发现这样的问题。 在绘制图标时，我们必须考虑视觉尺寸，这不能用数字来衡量 视觉权重小的元素要放大，视觉权重大的元素要缩小 建议你可以下载HIG的标签图标和材料设计的标准图标。数百个图标中的每一个都有不同的物理尺寸，但似乎都是相同的尺寸。这是高水平的表现，值得研究和认真学习。 举几个例子，让我们来看看 加个粉色之类的大边框，也许会看的更清楚 不是每个人都会有空在每个图标上添加一个框来衡量视觉大小的平衡。在这里，我教你一个老司机能做到的方法，做一个高斯模糊。如果每个图标在高斯模糊下看起来大小差不多，那么可以说视觉大小大致相等。 面对不需要我们画的图标，比如分享到Twitter，分享到Instagram，官方提供的图标在使用的时候也要注意 比如脸书和Instagram的图标是正方形，Twitter和Pinterest的图标是不规则的，另一个是圆形。所以为了达到视觉大小相等，当他们一起出现的时候，就要放大Twitter和Pinterest的图标。实际效果如图。 另一个无法实现相同视觉尺寸的重难点型是带有按钮的表单的常见组合 如果把一个矩形的窗体和一个直径相同的圆形按钮放在一起，不可避免会出现圆形按钮看起来更小的问题 相信大家都知道处理方法。稍微放大按钮，使整个窗体和按钮达到视觉平衡，视觉大小相等 对这种现象的处理并没有那么简单。就拿上面的例子来说，除了放大按钮还有其他处理吗？当然有 如果条件允许，我们可以给按钮添加一些颜色，使其在视觉上看起来更重，这也可以实现相等的视觉大小 记住，这些点状物体是有物理维度的，但是人眼看到的，通过自身对面积或体积的理解所理解的视觉维度，并不完全等于物体的物理维度 正方形的视觉重量最重，越靠近正方形的图标看起来越重越大，反之亦然 规范建议绘制图标的安全区域主要是解决视觉尺寸等效的问题，留给设计师操作空 2.视觉对齐和形状视觉对齐可以说是视觉大小现象的逻辑延伸 我们来看一个和前半部分一样的简单图片。这两个东西对齐了吗？从物理尺寸的角度来看，它们是绝对对齐的，因为两个条带的长度相同 但是从视觉上看，上面的看起来是不是比下面的长一点？让我们修改长度，然后再看 试着增加下板条的长度 让下面的长条多20px，然后它们看起来对齐，实现视觉对齐 让我们来看看一些常见的风格 相信大家都做过以下丝带式的图。为了使整个画面看起来平衡和整洁，有必要利用这一现象，有意识地加长需要加长的部分，以实现对齐 让我们看看另一个实验性的例子，如何将文本与背景对齐 此时，应该根据背景颜色的深度来决定对齐方法 如果是浅色背景，我们不需要改变文字长度，直接添加背景。浅色背景不会因为其较轻的视觉重量而造成任何不良影响 如果是黑暗背景，做法就不一样了 如图所示，我们应该将黑色背景与文本对齐，放置在黑色背景内部的文本应该有一定程度的缩进，以达到视觉对齐的效果 与浅色背景不同，深色背景本身的视觉权重更重。如果你想让文本看起来更完整，你必须这样做 否则醒目的背景会过于突出，对齐的感觉会消失 这种现象和排列原则最常用于按钮和输入框 左侧灯光背景输入框体将不会与标签文本对齐，框中的文本将与标签对齐 右边有深色边框的输入框的边框应该与标签文本对齐，但边框内容不需要与标签文本对齐 再看看发送按钮。左边的发送按钮和浅色背景的输入框特意做得稍微短一点，以实现视觉对齐。右边的发送按钮也特意做得长一点，因为它的形状可以实现视觉对齐 它看起来很简单，但仍然有许多细节只是一个对齐 现在让我们拿出一个按钮，挖掘更多的细节 看看下面的按钮，你会发现里面的文字完全居中，对吗 他们看似在中心对齐，其实不然。右侧箭头形按钮中的文本在中间没有物理对齐，并且其左右边距不同。此形状中的按钮文本必须保持对齐。 之后的横中竖中还有很多细节需要注意 在这里，我告诉你一件事。对于大多数操作系统或更成熟的设计语言，垂直居中必须从按钮文本的第一个大写字母的高度开始，但在Sketch中，默认情况下所有文本都是隔开的。所以在制作文字按钮时，无论是中文还是英文，一定要注意调整行距，这样才能达到你需要的垂直居中。 二阶排列的原则基本上是让文本的上下边距(从第一个大写字母开始计算)相等 大家之所以这么做，是因为在英语中，有上升部分的字母(大写字母的高度和上升部分的高度差不多)(l，t，d，b，k，h)比有下降部分的字母(y，j，g，p)多 虽然我们不常使用英语，但知道更多的常识并没有坏处 谈完文字按钮，再来谈图标按钮。相信你也经常看到这个问题。 看下图，哪个按钮看起来对齐很好？好的，我希望你能看到左边的按钮有问题。其实我画这个按钮的时候确实是指对齐的，但是为什么还是不对呢？就像文本按钮对齐一样，对齐方式是错误的 一般来说，我们会默认将平面对齐为正方形，但由于图形的形状，这将是错误的，这会导致图标向左太远 右边的按钮好像是对的。面对这种特殊的角形，必须保证每个角与按钮边缘的距离相同，这种对齐方式不能再把图标当成正方形。 这不能依靠草图的对齐工具，你必须画一个圆作为对齐的参考线 如下图所示，播放按钮也有三个角，所以要注意它的对齐工作 左边的按钮是直接点对齐的产物。看起来很奇怪，不是吗？请记住，确保图标与角对齐的唯一方法是确保从三个角到相应边的距离相等 请记住，在这些点的边缘有角的图形需要加长，以便在视觉上与正方形边缘的长度对齐 制作文本按钮时，请记住调整行距 角度图标的对齐方法是确保每个角度到边缘的距离相等 3.视觉圆角也有细节？设置不好吗？当然不是。简单的鱼片也有很多细节 就像我们之前说的，你不能相信你用眼睛看到的。我们来看看下面的五个圆，试着回答一下哪个最圆 我问过很多人，大部分答案都是3和4是圆的 第一圈有点瘦，第五圈有点胖，都不是很圆 或者学习上面用的套路，让我们折叠3和4 其实3号是一个完美的圆，而4号有点胖，不是完美的圆，但正因为如此，很多人会认为4号是一个完美的圆 这里有个现象。稍加修饰(变胖)后的圆，在肉眼看来会更像一个完美的圆，而不是完美的圆。这句话有点别扭，但就是这个原因 请看下图。左手边的圆是正圆，右手边的圆是修改过的圆。你有这种感觉吗 那么如何利用这种不可避免的错觉呢？利用这一点最常见的地方是圆角，最著名的例子当然是iOS中最常见的圆角 我们常用的几个设计软件，Sketch，PS，Ai提供了一个非常直接的计算，就是用一个物理的完美圆来计算你想要的圆角。就像我们上面说的，人眼不会认为完美圆就是完美圆，所以这也是你不能在Sketch中直接画iOS圆角的最大原因。 打开这些软件，试着做一个鱼片。人眼对直线在某一点变成曲线非常敏感。该软件确实使用了一个完美的圆形来制作鱼片，但它给人的感觉是僵硬和不自然的 让我们比较一下视觉上的完美圆来手工制作一个圆角 生硬的过渡瞬间消失，用不完美的圆圈画出的圆角非常丝滑 因为这个非完美圆稍微胖一点，多余的点只是给出了一定的过渡，使得从直线到曲线的变化更加平滑 这也是一种更接近iOS圆角的圆角制作方法 让我们一起比较两个圆角 圆形按钮也适用 你的眼睛一定能察觉到右手边那组按钮的圆角看起来更圆、更自然、更悦目 这种技术也广泛应用于App icon 空的制作中。在深入分析之前，让我们来看看下面两个图标 左边的草图是直圆的，直出的，右边的手工制作的图标不是直圆的 很明显，右边的图标更像iOS，看起来很赏心悦目，很舒服 在业内，画出这种圆角的曲线也被称为拉梅曲线，它是由法国数学家加布里埃尔·拉梅发现并命名的 这条曲线的方程式如下。从iOS7开始，iPhone的所有图标都是基于此设计的 除了blingbling的细节，除了这个说法，还说是一堆爪形曲线拼出来的 IOS还有很多这些深刻的细节，不得不感叹用户界面设计真的是一门高深的学问 上面说的参考线这里都有科普:“新手科普！在完成了每一个设计师都应该理解的参考线手册之后，人们根据黄金分割理论，添加了一些必要的参考线，最终形成了iOS App图标的设计规范 请记住，这些点的完美圆所画的圆角会因为钝的过渡而有非常明显的不自然的感觉 iOS的圆角矩形需要手工操作才能做出高端圆角