基础理论学起来!设计师必须掌握的6大视觉设计原理

Date 2026-01-18 22:25:07

大家好,我是彩云。视觉设计的基本原理往往具有很高的可重用性。即使你工作多年,这些原理仍然可以使用,不会过时。当我帮你看作品时,我会发现很多基本问题。事实上,这些都是可以避免的。

基础理论要深入骨髓,融入自己的日常设计。我们来看看下面的文章。

译文:

当我在大学学习视觉设计时,我痴迷于设计师的魔力。他们可以用设计让人们以某种方式思考、感知和行动。

作为一名用户体验设计师,在过去的十年里,我帮助许多产品发展到数百万用户和收入。我仍然使用我在大学一年级学到的许多基本知识——观察形状和布局,以及什么样的信息安排会影响我的产品的使用。

我们都知道图形、线条等视觉设计元素,我们也把比较、重心、节奏等术语植入我们的大脑中。作为一名受过训练的平面设计师,我将分享一些我学到的和仍在使用的微妙知识点。它们不是经常谈论的真相,而是一些实用的技巧。我只是希望通过分享,整个设计圈的力量水平能达到更高的水平!

1. 重力

重力的概念经常用于物体和图形,包括视觉设计。这可能听起来很奇怪,但它不是现实生活中的物理重力,也不能拉下二维物体。但在我们的潜意识中,重力的概念已经非常根深蒂固,所以我们也把它转化为二维物体。以下图为例,球让人们觉得随时都有可能从上面着陆,有点紧张。

基础理论学起来!设计师必须掌握的6大视觉设计原理

现在看下图中相反的图像

基础理论学起来!设计师必须掌握的6大视觉设计原理

这种结构的球不应该让人觉得它会掉下来,而应该更像是在页面底部稳稳地停下来。让人看起来很放心。

经验总结:当你面对视觉上有重物感的设计时,把它设计在顶部会让人感到压抑和不安(当然,除非你是故意的)

2. 阅读顺序

在大多数情况下,人们的阅读顺序是从左到右,从上到下。正因为如此,左边的物体通常被认为是进入图片,而右边的物体被认为是离开。

基础理论学起来!设计师必须掌握的6大视觉设计原理

上图左侧有一个圆。因为受我们阅读顺序的影响,这个圆看起来像是要进入这个画面。下图中的圆感觉像要出去了。

基础理论学起来!设计师必须掌握的6大视觉设计原理

你也可以用同样的方式传达一些特定的情绪。例如,如何让一个物体看起来像是在偷偷看?您可以将图片设计成下图:

基础理论学起来!设计师必须掌握的6大视觉设计原理

相反,你想传达一个物体(或角色)逃跑的感觉吗?(彩云注:这个概念可以用于一些情感设计页面,如空页面、卡片设计与品牌形象等。)

基础理论学起来!设计师必须掌握的6大视觉设计原理

3. 阅读优先级

由于阅读顺序的影响,我们自然会先注意左上角的物体,然后视线会移动到右下角和其他东西。即使所有的东西在形状、颜色或大小上都是一样的,它们的重要性也会根据物体的位置而有所不同(也许你想让用户先看到标题,然后是内容)。

让我们来看看下面的例子:

基础理论学起来!设计师必须掌握的6大视觉设计原理

假如你从小长大的环境是从左到右,从上到下的阅读顺序,那么你很可能会先看到左上角的圆,然后再看到右下角。

(彩云注:根据阅读习惯安排重要内容,转化效果更好)

4. 视觉紧张感

我曾经把这种感觉描述为对身体紧张状态的诠释和扩展。就像你看到桌子边缘有一杯液体。

视觉紧张往往是随意的,设计师并不是故意把不同的形状聚集在一起来营造一种紧张的氛围。这通常是由草率引起的。让我们来看看下面的图片:

基础理论学起来!设计师必须掌握的6大视觉设计原理

你觉得不舒服吗?所有的紧张都标记在这里。

基础理论学起来!设计师必须掌握的6大视觉设计原理

故意使用这种视觉紧张可以吸引别人的注意,并创造一种焦虑的氛围。也许你设计了一张游行示威海报,或者你想吸引人们对某些事情的注意。在这种情况下,确保这些紧张是故意的,而不是看起来像一个错误。

在同样的构图下,这种设计有意地将紧张集中在一个特殊的位置。

基础理论学起来!设计师必须掌握的6大视觉设计原理

5. 动态 vs. 静态

静态构图经常让人感到无聊。一种简单的优化方法是倾斜其水平线,使构图看起来更加生动。下图显示了一个有点愤怒的静态图:

基础理论学起来!设计师必须掌握的6大视觉设计原理

现在它的水平线倾斜后,整个城市的风景看起来更有活力。

基础理论学起来!设计师必须掌握的6大视觉设计原理

如果你想让构图更有活力,你可以利用物体的边缘特征将图形延伸到图片之外。参考以下角度透视构图:

基础理论学起来!设计师必须掌握的6大视觉设计原理

更多让画面动感的小技巧:

6. 充分利用负空间

你可以用方向形状将负空间激活到一个特定的点。如果方向力太小,负空间之间的效果就不会太大。下图是一个图形例子,吸引你的注意力到右边。

基础理论学起来!设计师必须掌握的6大视觉设计原理

但问题是,当你的视线到达页面的右上角时,你的注意力几乎结束了。右上角的空间没有足够的吸引力来冻结你的眼睛。这个空间仍然是静态的。但如果你试图切割图片的大小或按比例重新排版:

基础理论学起来!设计师必须掌握的6大视觉设计原理

图像周围的空间立刻变得有意义和复活。关键点!如果你想让人们的视线在图片上游动,请注意静态负空间的内容。一个简单的方法是用你的手指指着物体,把它改变到你的视线自然会移动到活动范围内。试着调整你的排版 ( 也许是图形或边缘线 ) 让负空间活跃起来。

作为设计师,不要局限于CSS, 约束HTML或任何其他技术工具。它们不应该是你理想中完美构图的绊脚石。这些视觉原理适用于任何载体, 就像印刷、数字、网页等等。它们简单而清晰地反映了我们的大脑和眼睛是如何以任何形式感知视觉信息的。

欢迎关注译者微信微信官方账号:「彩云译设计」

基础理论学起来!设计师必须掌握的6大视觉设计原理