设计师必看｜眼见“不一定”为实

文章来源：淘宝设计

俗话说“耳听为虚，眼见为实”，但….有时候眼睛也会欺骗大脑。

先看点有意思东西吧，下图是网络上一张引起强烈争议的gif图像，这两个圆圈到底是不是在移动？

赫林错觉

赫尔曼栅格错觉

缪勒-里尔幻觉

同时对比错

贾斯特罗幻觉

01 原理与应用

轮廓&延续感

在下图中，观察者会首先辨认出一条斑点狗，而不是首先认出它的头、腿、耳、嘴等细节部位之后再在脑中组合成一条狗的样子。

一只正在溜达的狗子

与之类似，当用户的目光沿着一系列物体移动时，脑中会形成一个逐渐增强的“定势”。下图中，观察者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。在视觉感知中，目光的延续性已经超过了颜色造成的差异。

交错的直线和曲线

卡片结构常常在任务型表单设计中被使用，它能带给用户更清晰的步骤感知，并快速识别每个模块的信息类型。

经典的T形结构被广泛运用于导航、菜单类设计，对于复杂信息归类有很好的效果。

T形构图

平衡错觉

如下图当三角形质心与容器中心相重合的时候看起来会更“居中”。

三角形分割错觉

在进行排版或者字体设计的时候，往往更多的会依赖于直觉，而不是参数和逻辑，如果仅仅是从尺寸数值上保持一致，也会使一个整体当中的不同个体显得不一样大，因此我们需要对同一整体下的个体尺寸进行调整，已经达到光学平衡。

如下图中在没有对个体进行单独调整时所有字母看上去并不平衡。

视觉平衡调整

淘宝图标在设计时会将图形形态定义出一个相对模糊的范，然后进行尺寸、位置的微调，确保图形的“质心”相对于容器居中，从而让所有图标在同等尺寸下视觉感受一致。

淘宝图标设计基础规则

视觉补全

我们的大脑往往会在接收到碎片化信息之后会自动把缺失的部分进行补全。下图中的图形在事实上是不完整的，但并不妨碍我们看到一个球体和一个柱状体。

事实“缺失”的图形

Logo案例

Federal Express的标志如今仍然被认为是最经典的logo设计之一，发现里面的“负形”空间了么？

Federal Express Logo

著名的WWF（世界自然基金会）熊猫徽标。

WWF logo

配合故事演绎，可以产生更具内涵的意境。

广告案例

KFC将产品与对应的行为进行了巧妙地结合。

KFC广告

Koleston Naturals是以“天然染色”为推广定位的染发剂产品。设计师将女性的长发发和五官镂空，通过镂空处可以看到海和天际线，随着日出日落可以看到长发颜色随自然而变。巧妙的将产品的“天然染色”诉求和大自然结合。

Koleston Naturals染发剂广告

与视频的丰富表现性相比，静态海报对于展现更深层次意境的时候比较局限，利用负形空间表现藏于表面之下的含义是一个比较不错的手法。

多重含义海报

火爆网红打卡界的成都太古里裸眼3D大屏。

放进去的红酒居然消失了。

Pinetti Wine Rack

就算移动观察角度，也还是会一直被这只小恐龙注视。

裸眼3D小恐龙

当盛有调料的时会出现立体效果的味碟，满满的惊喜。

what should cialis cost

曾经风靡一时的手机小游戏，充分利用了视错觉构建的矛盾世界。

纪念碑谷游戏截图

Museum of Illusions 幻觉艺术博物馆短短3年时间风靡全球19个国家在纽约、柏林、迪拜等多个城市排名TOP5的“明星博物馆”，据说上海也有开哦~

Museum of lllusions 幻觉艺术博物馆