视觉设计的6个基础知识整理好啦,快来看看吧!

视觉设计的6个基础知识整理好啦,快来看看吧!


本文授权转载自:花火设计(ID:huahuoyuanzhuo

作者:Chris Lee


视觉设计的6个基础知识整理好啦,快来看看吧!


当我在大学学习视觉传达设计时,我被设计师能够让人们以某种方式思考、感受和行动等方面所拥有的力量所吸引。


在作为产品与用户体验设计师,帮助产品规模化到数百万用户和收益的十年后,我仍然能用到我在第一年学到的许多基本课程——研究模型、布局,并思考通过视觉如何影响使用我产品的人。


我们都听说过形状、线条等视觉设计元素,我们也曾将对比、强调、节奏等原则深入脑海。我会分享一些更细微的、不常被提及的原则,这些原则是我被培养成平面设计师时学到的——我至今仍在使用。你可以说它们先进,说它们鲜为人知,但我希望可以通过分享它们,提升设计界的水平!



01

重力


重力适用于物体和模型,即使在视觉传达中也一样。这听起来可能很奇怪——这里的重力并不像在现实生活中那样是一种真实的力量,将二维物体向下拉。


只是,重力已经深深地融入我们对现实的认知中,它甚至可以转化为页面上的二维物体。以下面的图片为例。它会让你感到有些不舒服,好像顶部的圆圈随时会掉下来。


视觉设计的6个基础知识整理好啦,快来看看吧!


现在看下面这张图——恰恰相反。


视觉设计的6个基础知识整理好啦,快来看看吧!


这种构图的感觉不像是一个即将落下的球——而更像是一个物体仅仅停留在页面的底部,接地气且和谐的。


学到了吗?当你在设计的时候,要有意识地认知到,视觉上很重的物体放在顶部会让人觉得不舒服,感觉很焦虑(当然,除非这是你想传达的情感)。



02

阅读方向


在西方社会(和我们以前相反),我们从左到右,从上到下读。正因为如此,左边的物体被认为是进入,右边的物体被认为是离开。



视觉设计的6个基础知识整理好啦,快来看看吧!


这是左边的一个圆圈。同样,因为我们从左往右读,圆圈感觉像是进入了构图。下面这张,圆圈感觉是在退出。


视觉设计的6个基础知识整理好啦,快来看看吧!


你也可以用这个方法来表达某些情绪。比如,想让一个物体有隐现的感觉?你可以创建一个像下面这样的构图:


视觉设计的6个基础知识整理好啦,快来看看吧!


或者反过来说,想表达一个对象(或人物)逃跑?


视觉设计的6个基础知识整理好啦,快来看看吧!



03

阅读优先级


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


这一点很重要,因为如果你想创造视觉层次(也许你想让你的用户先看到标题,然后再看到后面的内容),你把东西放在哪里,即使它们是相同的形状/颜色/大小,也会有区别。拿下面这个例子来说:


视觉设计的6个基础知识整理好啦,快来看看吧!


很有可能的是,如果你从小看英语书是从左上到右下,你会先看左上角的圈,再看右下角的圈。



04

视觉张力效果


所谓视觉张力,我曾经把这种感觉描述为视觉样式所呈现的扩张和收缩。当你看到一杯装满水的杯子立在桌子边缘时,你会有这种感觉。


这种视觉张力往往是无意识的–设计师自己也没有意识到,他们不小心把形状放在了彼此相邻的地方,不知不觉地制造了紧张气氛。这可能会让人觉得草率,看看下面的图片:


视觉设计的6个基础知识整理好啦,快来看看吧!


是否有感到不舒服? 以下红圈是制造画面视觉的紧张点。


视觉设计的6个基础知识整理好啦,快来看看吧!


如果你是有意为之,你可以使用视觉张力来吸引用户的眼球并创建强调。也许你正在为一个抗议活动设计一个海报,或者你想把某人的注意力集中在某件事情上。在这些情况下,确保海报的紧张点是刻意的。


这是同样的构图,画面紧张感不要太分散,多集中在一个特定的点,让画面充满力量,如下图:


视觉设计的6个基础知识整理好啦,快来看看吧!



05

动态vs静态


静态构图常常会让人感到乏味。我有一个简单的方法来增添图片的情趣,使它营造出富有流动感的构图,就是简单将地平线倾斜。这里有一个静态图像的例子,感觉很平凡。


视觉设计的6个基础知识整理好啦,快来看看吧!


现在倾斜的地平线,突然之间,让城市景观看起来更加有张力。


视觉设计的6个基础知识整理好啦,快来看看吧!


为了使构图更加动感,你可以从边界外向内流动,让画面赋予一种纵深感,看看这个3点透视图:


视觉设计的6个基础知识整理好啦,快来看看吧!



06

留白空间


在某种程度上你可以使用简单的小形状来留有想象空间。留白空间仍处于静止状态。但左边有一个吸引你注意力的黑色形状,在向上向右移动你的眼睛注视着整个画面。有什么感觉?


视觉设计的6个基础知识整理好啦,快来看看吧!


问题来了,当你到达页面右上角的时候,你的注意力可能已经死了。你的眼睛再次返回原来的对象,但太多的留白空间,你会发现我们并没有凌驾于整个画面之上,仅仅是这个被观察的世界中的一个可忽略不计的组成部分而已。而这个空间仍然处于非活动状态,只要通过一些裁剪/缩放的手法:


视觉设计的6个基础知识整理好啦,快来看看吧!


你会突然发现,这个形状周围的空间看起来有意识且活跃。如果你试图移动别人的眼睛,注意下周围不活跃的空间。一个简单的技巧就是用你的手指指向一个物体,顺着你眼睛自然移动的方向移动,然后注意你的注意力自然下降的位置。如果这是你想要的方式,你需要调整位置,无论是形状还是边界,都要保持空间活跃,让页面不显得空。


这些视觉原理将适用于任何媒介-印刷,数字,网络,随便您如何命名。它们只是我们的大脑和眼睛如何连接以感知视觉信息的方式,可能是任何形式!



文章来源:花火设计,版权归原作者所有

原文链接:

https://mp.weixin.qq.com/s/2UzGSPDTH3qRhgA9_ur0uA

文章链接:https://uxplanet.org/6-visual-design-fundamentals-that-ux-designers-should-consider-1fc2a950102e

版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。

联系微信:Meia_11

联系电话:18102296160

联系邮箱:service@meia.me

终审 | 苏菁

编排 | 孙瑶

?推荐关注IXDC视频号?




视觉设计的6个基础知识整理好啦,快来看看吧!
视觉设计的6个基础知识整理好啦,快来看看吧!
视觉设计的6个基础知识整理好啦,快来看看吧!
视觉设计的6个基础知识整理好啦,快来看看吧!


视觉设计的6个基础知识整理好啦,快来看看吧!视觉设计的6个基础知识整理好啦,快来看看吧!

视觉设计的6个基础知识整理好啦,快来看看吧!

视觉设计的6个基础知识整理好啦,快来看看吧!


点这里,一键进入IXDC·2022国际体验设计大会!
?

本篇文章来源于微信公众号: IXDC

UI/UX

8个心理学——让你设计出更好的产品

2022-2-11 8:25:02

UI/UX

B端产品设计总结

2022-2-11 9:00:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索