网页设计 » 视觉设计 » 6个高级的视觉设计原则

6个高级的视觉设计原则

发表于: 视觉设计. 评论
Sponsor

前言:也许你听说过一些如点、线、面的平面设计原则,或者看过是对比、重复、对称、对齐之类的排版技巧。而今天我们分享些鲜为人知的,可以提高视觉的设计原则。也希望你能通过这些原则来提升设计水平。

6个高级的视觉设计原则

6个高级的视觉设计原则:

1、重力

重力不但适用于物体,也适用于形状。在视觉传达中,这听起来可能很奇怪,原因是这里的重力并不是现实生活中那样的,它并不是一种真正的向下拉动二维物体的力。

由于引力对我们感知的影响是如此根深蒂固,也影响到我们对页面上的二维物体的感受。以下图为例,你会觉得有点不舒服,就好像你在等待顶端的圆圈随时掉下来一样。(比如设计的头重脚轻)

6个高级的视觉设计原则

现在看看下面这张与之相反的图:

6个高级的视觉设计原则

这样的构图就不会让人觉得像一个即将落下的球,而更像是一个物体在页面底部休息。给人的感受是安全的,平静的。

所以,当你在设计顶部视觉上很重的东西时,要意识到这一点,这样做可能会让人感到不舒服和焦虑(当然,除非你想要传达的是这种感觉)。

2、阅读方向

在西方社会,我们从左到右,从上到下地阅读。因此,左边的物体被认为是进入,右边的物体被认为是离开。

比如左边的这个圆,因为我们从左到右阅读,所以圆圈感觉就像是在进入构图。而下面的这张图,圆圈感觉像是在退出。

6个高级的视觉设计原则

你也可以用它来传达某些情感。例如,如何让一个对象有窥视的感觉?你就可以像下面这样创建一个构图:

6个高级的视觉设计原则

或者反过来,想要传达一个物体(或角色)逃跑?

6个高级的视觉设计原则

3、阅读优先级

因为我们从左到右从上到下阅读,我们自然会先看到左上角的物体,然后我们的眼睛自然会移动到右下角,看那里的东西。

这一点很重要,因为如果你试图创建视觉层次结构,比如你想让用户先看到标题,然后是内容,你放置东西的地方,即使它们是相同的形状/颜色/大小,效果也会有不同。

举个例子:

6个高级的视觉设计原则

如果你从小读的是从左上角到右下角的书,你很可能会先看左上角,然后再看右下角。

4、视觉张力

我曾经把这描述为身体紧张的翻译和放大,就像是当你看到一个装满液体的杯子坐在桌子边上时的感觉。

视觉上的紧张感通常是无意识的——设计师没有意识到他们无意中把形状相邻地放置在一起,在不知不觉中产生了紧张感。这可能会显得草率。看看下面的图片:

6个高级的视觉设计原则

感觉到不舒服了吗?下面我把所有的紧张点突出表示了出来。

6个高级的视觉设计原则

并不是禁止这么做,你可以使用视觉张力来吸引用户的眼球并强调。比如当你正在为一个抗议活动设计海报,或者你想要吸引某人的注意力的时候,在这些情况下,让设计有张力和冲突是有意的,而不是一个错误。

下图是同样的构图,将紧张感集中在一个特定的位置。

6个高级的视觉设计原则

5、动态与静态组合

静态组合通常会让人觉得无聊。一有个简单的方法就是倾斜地平线,可以让它变得更有趣。下面是一个让人感觉陈旧的静态图像的例子。

6个高级的视觉设计原则

现在,将地平线倾斜,突然之间,城市景观看起来令人兴奋了。

6个高级的视觉设计原则

为了使构图更加有活力和令人兴奋,你可以使用边界,让形状在它外面发散。比如这个透视构图:

6个高级的视觉设计原则

6、激活负空间

你可以使用定向形状来激活负空间到一个点。但如果方向力太小,负空间就不会活跃。下图是一个能吸引你注意力的形状,然后让你的眼睛向上和向右移动。

6个高级的视觉设计原则

但是,当你到达页面右上角时,你的注意力可能已经消失了。你的眼睛掠过物体,但那里的空间太大,而让你的视线从物体上落下的方向力太少,空间仍然不活跃。然而,通过一些剪切/缩放:

6个高级的视觉设计原则

如此一来,形状周围的空间显得有意思而活跃起来。

明白了吗?如果你试图移动别人的视线,想让他们意识到不活跃的空间。

一个简单的技巧就是用手指着物体,让视线沿着自然的方向移动,然后注意你的注意力自然消失的位置。如果它是在你想要的位置之前,你就需要调整你的布局,无论是形状或边界的布局,以保持负空间活动状态。

感谢阅读!

作者:Chris Lee,公众号:设计达人(ID:shejidaren888)
来源:https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }