设计笔记 / 校正

光学校正:为什么对齐了仍然显得歪

坐标一致只是起点。圆形的四角没有面积,放在同高的方形旁可能显得更小;三角形左侧面积更集中,居中时可能显得偏左。本页通过原创对照说明如何做小幅修正,而不把视觉判断包装成统一公式。

方形与略扩大的圆形对照,三角形分别在几何中心和右移后的位置
本站原创图例 · 方形与略扩大的圆形对照,三角形分别在几何中心和右移后的位置

先看整体,再看坐标

打开参考线确认没有误操作后,暂时隐藏辅助线。把图标缩到使用大小,和相邻图形并排看。如果只有开启参考线时才觉得“对”,说明坐标检查还不能替代视觉检查。调整应尽量小,并且每次只动一个方向或尺寸。

原创例子:播放三角放进圆按钮

在本练习的24格按钮中,三角形顶点设为(8,5)、(8,19)、(19,12)。按包围盒居中时,左侧垂直边形成较大视觉重量。尝试向右移动0.5单位,与未移动版本交替比较。本例保留略右移版本;如果三角形形状或按钮边框变化,应重新判断,不能直接复用偏移量。

三轮校正法

第一轮检查大小:圆与方同排,微调圆的外径。第二轮检查方向:箭头、手柄和三角形是否偏向某边。第三轮检查组内节奏:按真实按钮间距排列,观察是否有一个符号明显跳出。每轮保留前后两版,避免连续微调后失去参照。

避免过度修正

单个图标在空白画布里看起来完美,放进按钮却可能不协调。图标左边有文字、右边有数字时,整个组件的视觉平衡也会变化。应在目标组件里校正,再记录为该图标内部的坐标例外,不要在每个页面额外增加不同的偏移样式。

如何写一条可交接的例外

写“播放三角相对初稿右移0.5单位,在24像素圆按钮内比较后保留”,同时附前后对照。不要只写“设计感觉更好”。记录用途、数值和参照,后续改版才知道这个偏移是否仍然成立。

本页问答

光学校正可以自动算出来吗?

可以计算几何位置,但视觉感受还受形状、背景和邻近元素影响。本练习通过并排比较作判断。

怎样判断自己是否越调越偏?

恢复基准版,隔一段时间再看,并请不了解修改方向的人描述哪一版更协调。不要提示对方应该选择哪边。