视觉感知在UI设计中的应用

这样的圆角在传统几何形圆角的基础上有一块额外的区域，来确保直线和曲线交界的地方不会那么明显。

尽可能体验一下两种不同处理方式的区别吧，看下图。

现在可以将这种方法应用到圆形的按钮中了。 

相信你已经注意到右边一列的按钮看上去有更顺滑的圆角，而且视觉效果更好。

APP的icon同理。我们不会简单的直接使用默认的几何圆角就能得到完美的结果。在深入讨论这个问题之前，让我们看一下两种不同的圆角形状：

第一个是在Sketch中创建的圆角矩形，第二个则是"超椭圆"，也被叫做Lame曲线。是被一个叫做Gabriel Lamé的法国数学家基于数学公式从一个类四角星的形状变化而来的，看上去更圆。

Marc Edwards使用Lame的曲线创造除了一个顺滑的视觉效果完美的形状。从IOS7开始的ICON就是基于这个形状。

后来这个形状加上了黄金比例和网格，来指导设计师设计新的ICON。

使用超椭圆的好处是能看上去更加的圆润。另一方面，这些非标准的形状要应用在实际的屏幕中是比较麻烦的。一方面要结合各种SVGs文件，一方面也需要加载一些公式和脚本或者是像APPLE处理APP ICON一样用PNG蒙版的方式。

对于设计过程本身来说，有一个简单的处理方法。只需要双击进入可调整贝塞尔曲线的状态，手动将两个圆角的控制杆拉近一点即可。 

这样的效果在尖锐的角上会更明显，这在画线路或者是地铁路的时候很重要。

ps：几何圆角看上去很生硬是因为人能轻易的分辨出直线和曲线交界的地方；

          视觉效果完美的圆角需要特殊的公式或者手动调整一些细节

有时候一个不是完全准确的方形看上去会更"方"一点。你可能会觉得这有点胡说八道。所以你觉得下面哪个方形更"方"？

 如果你选择左边的形状，那你可能完全相信自己的视觉感知能力。

惊讶于人的视觉系统对物体的高度的感知敏感度会强于对宽度的敏感度。这就解释了为什么基于几何形状的字体，字母"O"通常会比实际的几何形状要宽，字母"H"的垂直高度通常比实际几何形状的要细。

参考文献

巴里·史密斯（Barry Smith），" 格式塔理论：哲学论文 "，1988年。对格式塔理论的起源和哲学方面的深入研究。

史蒂文·莱哈尔（Steven Lehar），" 头脑中的世界：意识意识机制的格式塔观 "，2002年。这本书解释说，我们看到的不是现实世界，而是大脑中的反映。

詹姆斯·吉布森（James J. Gibson），《视觉世界的感知》，1950年（扫描副本，有些图像质量低下）。这本书展示了大脑中的物理过程如何影响我们看待世界的方式。

詹姆斯·吉布森（James J. Gibson），" 视觉感知的生态方法 "，1979年。（有关关键思想的文章，可在线获得。）

George Boeree，" 格式塔心理学 "。格式塔思想的简要历史。

格式塔心理学创始人的传记：Max Wertheimer，Kurt Koffka和WolfgangKöhler。

Slava Shestopalov

原文链接： https://medium.muz.li/optical-effects-9fca82b4cd9a。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/