同样一个三角形,位置不同,差别极大。本文总结了6个有趣的视觉设计基础技巧,高级设计师都在学,一起来看看!

重力

重力适用于物体和形状,同样也应用在视觉传达中。这里说的重力并不像生活中理解的那样将平面物体向下拉。

但是,引力的概念深深地扎根于我们对现实的感知中,以至于它甚至可以转换为页面上的二维物体。

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 顶部的物体好像随时会坠落一样,应该会感到有点不舒服

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 这张图视觉重力与上图相反

这种构图形式,看上去不像是要掉落的物体,而更像一个物体停留在页面底部。

通过这个例子能说明什么呢?当你在规划页面时,顶部的视觉压力可能会造成不安,可以有意识地尝试其他版式 (除非你就是要传达这种感觉)。

阅读方向

通常情况下,我们的阅读顺序是从左到右,从上到下。这种习惯应用到界面上,很自然的理解成左侧的对象为进入,而右侧的对象为离开。

超有趣!高级设计师必知的6个视觉设计基础技巧

△左边的物体像是刚进入了画面。在下方,圆圈感觉像是在退出

超有趣!高级设计师必知的6个视觉设计基础技巧

△ 右侧边的物体像是要离开画面

你也可以使用它来传达某些情绪。例如,想让一个物体看起来像在偷窥吗?

超有趣!高级设计师必知的6个视觉设计基础技巧

△ 看,我在左下角偷窥你

或者要传达要逃跑的物体。当画面元素丰富时,还可以建立更直观的场景。

超有趣!高级设计师必知的6个视觉设计基础技巧

△有内鬼,开遛~

阅读优先

因为我们从左到右从上到下阅读,所以我们自然会先看到左上角的对象,然后我们的眼睛自然会移到右下角,然后再看那里的东西。这一点很重要,因为如果你尝试创建视觉层次结构(比如你希望用户先看到标题,然后再看到内容),即使它们的形状、颜色、大小相同,也可以使它们放置在此处有所不同。

超有趣!高级设计师必知的6个视觉设计基础技巧

这里扩展一下,有一个著名的法则,古腾堡图。

古腾堡图,又叫对角线平衡法则。由 14 世纪西方活字印刷术的发明人约翰古腾堡提出。它揭示了一个实用的视觉轨迹规律:阅读引力是从上到下,从左到右。

超有趣!高级设计师必知的6个视觉设计基础技巧

从图中可以看出,用户视线很自然的会从第一视觉区开始,逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域,除非有特别的视觉强调,否则中间的段落则很少被关注到。

遵循古腾堡原则把关键信息放在左上角、中间和右下角,能够更好的体现元素的重要性。例如:我们平时所看到的页面弹窗、各种证明文件和合同文件等等。

* 这个规律只适用于习惯文字以从左到右水平形式书写的读者,若是以古代中国人的阅读习惯可能就不适用了。

视觉张力(Visual Tension)

不知道视觉张力什么意思?举个例子,尝试把手机放在桌面边缘处(例子而已,别真放),悬空的部分越多越好,是不是感觉手机要跌落出去了,但还没真的跌落。你总能感受到物体的动势,往相同(或不同)方向运动。通常情况下,视觉张力只是无意识的。设计师没有意识到他们不小心将形状彼此相邻,不知不觉中产生了张力。这可能是无意造成的。

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 定睛一看,这是啥?艺术???

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 上图突出显示的所有张力点

其实你可以利用视觉张力,使用视觉张力吸引用户的视线并强化重点。也许你正在设计夸张形式的海报,或者你想将某人的注意力集中在某物上。

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 相同的构图,其中的张力集中在特定的位置,并且有意将其放在特定的位置

动态与静态

静态的构图经常会让人感到无聊、呆板。改变它的捷径只需简单地倾斜地平线。

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 一张感觉平静的静态图像

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 倾斜地平线后,城市景观看起来有趣了不少

为了使构图更具动感和刺激性,你可以结合画面边缘并让形状出血的形式来实现。

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧ 3 点透视构图

负空间

你可以使用带有指向性的形状来创造负空间,以此暗示某一画面区域。

超有趣!高级设计师必知的6个视觉设计基础技巧

⇧倾斜的三角形,可以引导你的视线向上和向右移动(形状微小时不会有这种视觉引导)

但有一个问题,当你视线到达页面右上角时,你的注意力可能会消失。你的眼睛移过对象,但是那里的空间太大,而来自三角形物体的方向不再指使着视线继续移动,你的视线会从这部分区域移开,该区域没有焦点了。

超有趣!高级设计师必知的6个视觉设计基础技巧

但是,通过裁剪/缩放的方式,让指向性形状再次出现视野中,指向关系得到强化。整个画面的空间,看起来既有意又很有趣。

通过这个例子,我们可以得到什么启发呢?如果你要移动某人的视线到目的处,有两个办法可以选择。第一种,在画面中增加带有负空间的指向性物体,指向目的处,这样视线就被引导着移动。第二种,从起始点到目标处,可能要经历很长一段距离,但注意别丢失引导性的指示,否则视线会分神。