欢迎光临散文网 会员登陆 & 注册

浅谈"点线面"在设计中的运用!

2023-03-12 23:15 作者:最爱楓林晚  | 我要投稿

每个设计领域都包含了许多的专业知识,但个人精力有限,很多时候都只专精自己的领域,在学习的过程中为了能够减少被事物复杂的表象所扰,找到一些底层核心的逻辑思维,我尝试使用美术中的一些非常简单的元素和理论知识来解析设计相关的表现!现在将其分享给大家,希望对大家有帮助!

起源

1,美术是一种情感表达,这句话大家应该很熟悉,显示器呈现出来的画面都可以理解为2D的美术表现,也就是我们在玩游戏的过程中游戏回馈的画面会给我们带来一种情绪上的体验——游戏带来的是体验,体验的结果是情绪!

注:体验来源有很多,大部分情况下以视觉体验为主!

问题

如何通过美术塑造情绪体验?在使用美术塑造情感体验的过程中是否有规则可循?不同职业的美术知识领域庞杂,是否有广泛且通用的极简化设计逻辑?

美术中的点线面

由于日常积累的美术知识越来越多,五花八门,渐渐开始习惯从最基本的元素“点、线、面”去理解美术,在2D美术领域有非常多关于“点、线、面”的基础理论知识,大多都以2D为出发点,其他领域很难理解或者运用,因此我从塑造情绪体验为出发点结合2D示例对“点,线,面”在设计中作用进行归纳总结。

1,点

  • 特性:聚焦与分散,轴点

2,线

线是密集的点

  • 直线/折线

  • 特性:引导性、分割,方向

引用:《Instruction: Composition- How To Make Pictures》
引用:https://www.artstation.com/artwork/3dqkBB

引用:

https://cdna.artstation.com/p/assets/images/images/036/171/824/large/lorenzo-lanfranconi-painting-san-donato-2-e-copia.jpg?1616931754


  • 曲线

  • 特性:柔性,张力,平衡性。

引用:https://www.artstation.com/artwork/oOL82B
https://courses.cs.washington.edu/courses/cse459/14au/assignments/assignment_3/
《为角色注入生命力4》

3,面

面是封闭或加粗的线,或是汇聚或放大的点。

  • 左图的山体的轮廓线构成了大块的封闭的面。

  • 右图树叶部分可以看作放大的点所形成的面,树干部分就是加粗的线,地面也是一个面但是视觉效果被弱化了。

                                          图一:  https://www.pinterest.com/pin/156077943329590517/                                         图二:https://www.pinterest.com/pin/156077943329590517/

综合运用范例:

https://www.pinterest.com/pin/232779874482374776/
https://www.pinterest.com/pin/9007267997739946/
https://www.pinterest.com/pin/685391637056568140/
https://www.muddycolors.com/2013/12/a-baroque-composition/
https://www.artstation.com/artwork/g9dJG
  • 大多数情况下面更容易被观测和感受到,仔细观察就会从面中发现线,这是观众的角度,如果从设计的角度往往从线开始。

  • 由于点线面之间存在共性,所以上述概述相对书本理论更为简化,方便理解和运用!

点线面与情绪塑造的关系

1,直线

稳定的,平稳,保守,威严,缺乏生命力!

2,垂线

庄严坚挺,有纵深感。

3,斜线

不稳定的,最具运动和方向感,体现活力和躁动

4,折线

紧张、焦虑、狂躁,平静和谐的破坏者,强烈的指示性,方向性、运动及刺激感.

5,曲线

优美,柔和,富有生命力

6,自由线

极富富有生命力,不受约束,表现力更加丰富自由。

情绪是生命的特征,生命富有力量,线条和力的结合会给人带来更好的体验!

  • 力,对比以及空间等设计元素是点线面结合后形成的次级表现。


2D示例

  • 图1画面中的岩石充当了垂直和横向的线,画面呈现会偏向庄严一些。

  • 图2的小路和树枝整体呈现折线的效果较为明显,且树枝密集,整体画面就会显的略有不安和躁动

  • 图3比较明显的曲线和直线垂线的结合纵深感比较明显,请注意其中还有点扩散画面空间的运用

  • 图4强调了垂线的作用,作者放出了制作迭代的过程,大家可以对作者一开始的想法和最终成品看看他在修改过程中画面线条中的变化(https://www.artstation.com/artwork/8lQZVQ)

枪械,科幻机甲由于充满了大量直线元素,缺乏曲线和生命力, 给人的感觉都会倾向杀戮机器,稍显冰冷!

https://www.artstation.com/artwork/vxW1a
  • 曲线的表现在人体上尤为明显,为何如此?我想大概率因为与我们的审美是以自身为出发点!我们自身很容易被定在审美的至高点!

  • 男性身体曲线较少,直线和折线较多显得更加有力一些,女性以曲线为主所以更加柔和一些这话好像大家可能都听腻了,滑稽.......)

https://www.deviantart.com/abdonjromero/art/CONSTRCTIVE-APROCHE-FOR-FEMALE-MODEL-411646671
https://www.pinterest.com/pin/232779874481584470/

当曲线成为主要元素时整体感受会偏温和,柔一些,力的表现不会太强烈。

  • 下图为画师muju的作品可以发现大量的曲线。

  • 图3图4曲线元素较弱,整体呈现出来的力更为明显。

  • 注意图1到图4曲线和直线的变化带来的不同感受                                                                (作者主页:https://www.deviantart.com/muju/gallery/all)

  • 点状,斜线、折线,割裂或破碎的元素占比越大越容易给人带来负面情绪

  • 观察下图中怪物的设计元素不同带来的不同感受

https://www.artstation.com/artwork/aGPJY0

动画示例

  • 曲线动画 更生动,有活力

  • 曲线幅度降低,力就越小,最终止于点


https://www.bilibili.com/video/BV15i4y1Q77g/?spm_id_from=333.788.recommend_more_video.14&;vd_source=13e02a731c395fdbcd83bb410bc49dab
  • 连续的曲线运动更优美更富有生命力!

  • 以武器为轴,整体运动轨迹以曲线为主,感觉会柔和一些!

  • 曲线和直接结合再配合适当的断点以及停顿就能将生命力,张力表现得更加明显

  • 图一的动作简化后可以看作曲线+点+直线,直线跟力的关系可以直观的感受。

  • 图2在连续曲线运动后增加直线的运动轨迹,整套动作更加凌厉!



突刺,简单粗暴的力,整个过程直线占据主要表现。


点与直线的结合呈现的表现方式。



可以看到下图斧头扭曲的运动轨迹,曲线的运用让只狼整的动作有了一种有别于常规写实动作的表现!


游戏

游戏名:《跳跃之王》

  • 以X轴为时间轴(1unit=10s),Y轴为关卡进度,对下方链接视频的前3分钟进行了数据采集,呈现出的曲线如下

  • 3分钟的游戏体验中线条出现了很多折线,大家根据前面的知识分析一些这3分钟的游戏体验带来的正向情绪多还是负面情绪比较多?

https://www.bilibili.com/video/BV1kS4y1v7TD/?spm_id_from=autoNext&;vd_source=13e02a731c395fdbcd83bb410bc49dab


音乐案例分析

音乐中的旋律更为丰富,由于非专业认识不深入讨论,即便如此我们也能感受到山川,河流,溪水之音平和安静,其旋律曲线波动较小,趋于平稳。富有冲击力的音乐往往曲调波动较大,跌宕起伏!其内在的旋律曲线亦有规律!

总结

  • 点线面解析复杂事物的关键在于找准关键因素!

有些领域由于感官上呈现出非常多的细节会导致难以捕捉到被掩盖的点线面的特征,

  • 点线面在设计中的运用其实非常复杂,文中仅选取了一些简单且特征性较强的案例进行解析

  • 用点线面解析设计有点类似计算机只识别0和1一样,虽然存在汇编语言,cpp.c等编程语言但是最终计算机只识别0和1


互动:

尝试使用点线面的知识制作一个让你感觉舒适的设计

尝试使用点线面的知识制作一个引起你负面情绪的设计

寻找一个让你感觉舒适的体验,找准影响体验的核心元素,观察元素变化所形成的曲线形态。

寻找一个让你感觉难受的体验,找准影响体验的核心元素,观察元素变化所形成的曲线形态。

结束语

文章内容和水平比较有限,如有不足之处还请见谅!

在此感谢观看!希望本文对你能有所帮助,有所启发!


浅谈"点线面"在设计中的运用!的评论 (共 条)

分享到微博请遵守国家法律