转自：http://www.shejidaren.com/ui-shi-jie-wu-cha.html

1. 物理尺寸与视觉尺寸

长宽 400px 的正方形与长宽 400px 的圆形哪一个更大？假如这样问你的话，那么正确答案当然是一样大。但是来看看下面这张图，长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的，但视觉尺寸却有可能不一样的。

为了更加准确地证明这个现象的存在，下面这张图给出辅助线，大家好好看看。

我们改变一下圆形的尺寸，看看现在这两个图形的视觉尺寸有没有更接近一些？

每个人的感官可能都不一样，但对于我来说，调整尺寸的后的两个图形看起来才是一样大的，至少也不会像图一一样，让人第一眼就认为正方形比较大。为啥会这样？因为我将圆的直径增加了 50px。

现在我们将图形都叠起来看，看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起，你会发现整个圆形都被包裹在了正方形之内，而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近，也就是我们常说的“一样大”。

不仅是圆与方，所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候，某些形状的物理尺寸应该更大一些。

这个现象对于界面造成的设计会有哪一些呢？譬如说，当绘制一套 icon 的时候，我们当然是追求每个 icon 都看起来一样大对吧？但假如我们只通过物理尺寸来进行量度的画，画出来的 icon 必然会个大个小，乌七八糟，更伤的是，这种问题经常发生，手机里随便打开个 app 都能发现这样的问题。

原文作者：网易UEDC / 吴良

一、设计规范有什么用？

设计规范能为团队解决不少问题，并提升工作效率，主要体现在以下三个方面：

1、解决多人协作时控件混乱问题

一个大型项目的视觉稿，往往会有几十个甚至是上百个页面。对于第一次做这种大项目的设计师，如果在视觉风格成型后没有做规范的话，哪怕自己一手包办全部页面，恐怕也很难统一视觉样式。在创作阶段设计其他页面时，如果没有规范来指导，设计过程中很容易产生细微的出入，导致每个控件都会有细微的差别，经常会做着做着就出现控件不一致的问题，比如A页面的按钮是4PX圆角，B页面的按钮又做成了6PX圆角，再后来做的C页面的按钮又做成了2PX圆角。如果一直埋头苦干赶页面，没检查出这些问题，页面做的越多错误就越多，到时候几十个页面的控件都要修改，那可真是苦不堪言啊。