专栏名称: 腾讯设计族
凝聚设计团队,整合优质设计资源。
目录
相关文章推荐
庞门正道  ·  这蛙儿长这么好看,不知道味道咋样? ·  2 天前  
字体设计  ·  黄颜色作为点缀色如何运用? ·  3 天前  
优秀网页设计  ·  ①6款潮流英文字体下载②Runway现已支持 ... ·  3 天前  
程序员鱼皮  ·  程序员如何找 logo 图标和插画?(建议收藏) ·  5 天前  
程序员鱼皮  ·  程序员如何找 logo 图标和插画?(建议收藏) ·  5 天前  
51好读  ›  专栏  ›  腾讯设计族

浅谈透视:从纸面到界面

腾讯设计族  · 公众号  · 美术 设计  · 2024-11-29 11:30

正文


Sharing
人类的美术创作经历了从纸面的二维走向三维、从“模仿自然”到遵从主观意识自由表达的历程,人机界面设计也经历了拟物、扁平以及更多的设计风格的迭代演化。是什么推动着艺术家和设计师们不断探索规则、学习规则,进而挑战规则?在拆解手脚架的过程中,我们将愈加贴近创作的本质。
    
                 
本期提纲:
从平面到三维:几何透视的建立
• 从理性到感性:反常规透视的兴起
• 从纸面到界面:ui 设计风格的变革
• 写在最后
1
从平面到三维:几何透视的建立
人类最早开始美术创作之时,没有“透视”的概念。

在古埃及的绘画作品中,我们看到的通常是和肉眼看到不一样的人体,侧面的头、正面的身体和侧面的脚,这种绘画方式被后世定义为“正面律”。之所以会出现这样统一而怪异的绘画方式,是因为古埃及艺术大多服务于权力和宗教,绘画常用于墓葬之中。那时的人们相信灵魂永生,亡灵在通过冥界的考验之后会重新与身体结合从而转世,这就要求绘画精准记录人体各个部分的样貌。画家为每个部位挑选最能呈现它完整特征的角度,用这个角度将这部分人体完整地呈现在平面上,这有利于转世时的复刻。
▲ 图 1 : 古埃及《亡灵书》

这时,画家作画不依赖于真实世界的观察,而是画他们脑中“知道”而不是眼睛“看到”的形象。

到了古希腊和古罗马时期,绘画作品开始转向遵从视觉规律。

有一种说法是:透视法的初步探索起源于古希腊的戏剧布景,艺术家们发现在布景中用近大远小的方式可以使平面布景有真实场景的纵深感。

同时,当时的社会思想环境也是滋养透视法探索的肥沃土壤。亚里士多德提出艺术是一种「制作的知识和技能」,于是人们将艺术与制造技术等同,开始了符合实际的数理研究。苏格拉底和柏拉图认为绘画和雕塑之类的艺术是「对自然的模仿」,绘画作品的表现力求于自然一致。

希腊红绘陶瓶《辞行出征的勇者》中出现了人物一正一侧的脚,正面脚的刻画相对侧面脚要缩短了许多。这种在画面中将纵向物体以适当的比例缩短,以符合实际视觉效果的方式,叫做“短缩法”。至此,意味着绘画中空间透视的雏形已经产生。
▲ 图 2 : 希腊红绘陶瓶《辞行出征的勇者》

然而历史进行到中世纪,绘画的透视技法似乎出现了倒车现象。在中世纪的一些壁画中,存在变形的物品、拉长的身体和不平的地面。

这是因为中世纪的艺术服务于宗教神权,本质上是宗教体验而不是人的真实体验,所以中世纪早期的绘画常常是重要的神最大,其他人物逐渐缩小。与此同时,由于宗教需要广泛而快速的传播,扁平、模版化、忽略细节的绘画就更加快速易得。透视法和现实主义在中世纪是与画家的创作目的相违背的,画家也就没有了继续探索如何还原真实世界的动力,这与古埃及艺术相似。

中世纪后开始文艺复兴,社会开始恢复古希腊人本主义、崇尚自然科学,而艺术则重新开始遵从科学的、真实的世界。

乔托师承中世纪画家契马布埃,却不愿临摹老师的作品,他更喜欢观察身边的世界、描绘真实的自然。宗教画从乔托开始出现对透视的探索,比较 3 幅圣母图可以看出,乔托《宝座上的圣母》明显更具有立体空间效果。画中的人物用重叠关系来表示远近,宝座的线条走向也具有透视的效果。
▲ 图 3 : 左:契马布埃《圣母》,中:杜乔《圣母》,右:乔托《圣母》

而如今广泛使用的几何透视法,它的正式发明要归功于意大利建筑师布鲁内莱斯基。布鲁内莱斯基一手持洗礼堂的素描稿,一手持镜子,透过小孔比对镜子中自己的素描图与真实建筑,从而确定自己稿中的透视关系是否正确。

布鲁内莱斯基指导他的朋友马萨乔完成的《圣三位一体》教堂壁画。这幅画巧妙运用了一点透视原理,将画面的消失点与站在壁画前观看者的视平线重合,视觉得以向画面更深处拓展。观看者驻足观赏,会感到面前不是一面墙,而是一个逼真深邃的空间。
 图 4 : 马萨乔《圣三位一体》

从此之后,文艺复兴的画家们开始不断地运用并优化绘画的透视法。达芬奇在几何线性透视的基础上,进而提出了隐没透视和空气透视。隐没透视与物体的清晰度有关,越远的物体,明度和清晰度越低,看上去会越模糊。空气透视与色彩有关,因为有色物体的光线通过空气介质传到人类的眼睛,那么越近的物体色彩的饱和度就越高,对比度也更强烈。相反较远的物体色相就会越来越模糊,饱和度和对比度都会减弱,并且因为天空环境色的影响,色调上会偏向青蓝紫等冷灰色调。达芬奇的画作《岩间圣母》和《蒙娜丽莎》都可以看到,远景轮廓模糊且偏向于蓝灰色调,让观赏者仿佛能感受到画中的空气和环境的纵深。
▲ 图 5 : 左:达芬奇《岩间圣母》,右:达芬奇《蒙娜丽莎》

文艺复兴时期学院派画家们格外强调透视,精准的透视关系让写实主义达到了巅峰。自此,艺术家们拥有了将三维世界搬运到二维纸面的方法,艺术模仿自然的理想得以实现。
2
从理性到感性:反常规透视的兴起

时间进行到十七世纪,社会的思想开始发生转变。笛卡尔「我思故我在」、黑格尔「美是理念的感性显现」观点的提出开启了人们对客观世界以外的自我意识的关注,艺术家们开始转向表达真实世界的客观存在加上精神世界的感受。

十九世纪工业革命带来了生产方式的巨大变革,文学艺术的革新也应运而生。一批年轻的艺术家开始质疑古典主义单纯复刻自然的千篇一律,尝试以自己的感受出发去描绘世界,例如印象派代表作大多突出对色光和空气氛围的描绘而弱化形象的描绘。

后印象派艺术家塞尚,质疑谨遵透视法的画作并不是人类双眼真实所看见的,被认为是“第一位用双眼作画的艺术家”。

塞尚主张人们观察世界万物时,使用两只眼睛看到的画面是不同的,只是最终人脑将二者合二为一成为了一幅画。另一方面,人们看一个物品通常不会静止不动地观察它,而是左右转转或是伸出头去细细观察,不断变换动作去寻找合适的观察角度。那么,单一静止的视角作画就违背了生活中人们观察世界的真实感受。

塞尚的多幅静物作品都有类似的特征,例如水罐的身体部分是平视的角度,而罐口则是俯视时的样子。塞尚认为,这两个角度分别是观察这两部分最合适的角度。又例如塞尚作品的桌面通常不符合水平面的透视,看起来已经倾斜到桌上的物品快要掉下来。塞尚认为这样更适合于展示桌面上所有物品的全貌,他期望将画中物体的信息最大化传递给观众。这一表达方式也意味着绘画创作由模仿自然转向艺术家主观意识下世界的的样貌。
▲ 图 6 : 塞尚《有苹果和桃子的静物》

塞尚作为传统透视法的学习者与挑战者,在前人建立的理性透视世界中打破秩序、更加遵从主观视觉感受,倡导多视角和整体视觉信息传达最大化,成为从现实主义、印象派迈向立体主义和抽象派的桥梁。

其后立体主义、抽象主义和超现实主义的艺术家们都受到塞尚主张的深远影响。像是毕加索《三个舞者》中那不成比例的巨大手掌,正是反映了舞者舞动的双手吸引人们目光的真实感受。而达利《十字架上的圣约翰基督》中同时存在“两点透视的人间海滩“和“三点透视的基督”,画家想要传达观者身处人间的平视感受,和超越神明高度去俯视基督独特角度。
▲ 图 7 : 左:毕加索《三个舞者》,右:达利《十字架上的圣约翰基督》

而后到了抽象主义,最后一点「模仿自然」从历史舞台中退出,绘画变为艺术家用色彩和符号表达意识的自由创作。

有人评价塞尚是“带着枷锁艰难探索着自然、世界和艺术本身”。自他之后,艺术创作从“真实地再现自然”进阶到“无需再现自然,而是代表自然”,艺术家们开始追求更加符合心理观察的视觉效果。
3
从纸面到界面:ui 设计风格的变革
不止在纸面,透视在人机界面中也经历过一系列发展与变革。早期计算机的界面设计受制于当时的屏幕分辨率,只能使用一些扁平化的界面和和图标。

屏幕显示技术快速发展后,留给设计的发挥空间也变大。苹果在 iOS 6 推出拟物风格的界面设计,模拟现实世界物品的纹理、阴影、高光等,致力于复刻现实世界的透视体验。这一设计风格大大降低了使用者的学习成本,精美的视觉表现也风靡一时。

随着电子产品承载信息的需求越来越大、更新速度越来越快,人们对于界面中仿物理世界的装饰元素开始有所质疑。首先是精美繁复的拟物化设计过于吸引眼球,使得用户的视觉焦点变得分散,不能专注于信息的传达。其次是细节满满的拟物化设计风格成本过高,应对高速发展的互联网需要一个更加高效简洁的设计风格。2013 年苹果发布的 iOS 7 系统使用了全新的扁平化设计,去掉了纹理、阴影等 3D 元素,达到信息优先、效率优先的目的。
▲ 图 8 : 左:iOS 7 界面,右:iOS 6 界面
在不久之后的 2014 年,Google 发布的 Material Design 借鉴了纸张和墨水,在完全抽象扁平的基础上增加了灯光、投影、加速度等隐喻元素,让界面一定程度上模拟物理世界的纸张。Material Design 中最特色的 z 轴设计规范,在扁平化的界面里创造了立体空间,从而将界面分出不同层级。在 z 轴的空间中,主要通过投影来表达不同元素之间的相对位置,通过相对位置拉开平面与卡片、弹窗和不同级别按钮之间的层次,增强了界面的可读性,让用户对内容的划分一目了然。
▲ 图 9 : Google Material Design

每一种设计风格的诞生和发展常与社会、思潮、技术的发展密不可分。而现下的界面设计更多展现出拟物、扁平以及不同程度融合的方式。

例如现有相机 app 的界面设计,就有极致拟物和极致扁平两种方向。当下流行的一些仿胶片、拍立得等实体相机拍照效果的 app,采用了模拟真实相机的拟物化界面设计。极致仿真纹理、光影,甚至操作的震动反馈和模拟拍立得和胶片机延迟出片的效果,都致力于给用户使用真实相机的体验。这类 app 通常功能比较简单,界面不需要容纳大量的信息和操作,所以采用拟物化的设计并无不妥。而拟物元素的运用也恰好满足了此类用户想要模拟使用机械相机的情感需求。

与之相反的是我们日常更频繁使用的手机原生相机,这些 app 使用几乎全扁平的界面设计,无任何非必要元素的干扰。这类相机 app 的应用场景通常是日常快速拍照记录,或是相对更依赖参数调整的拍摄黑暗环境、灯光复杂环境等等场景。这时就需要一个能承载更多信息和操作、简洁易懂的界面,那么扁平的设计是这类场景最适合的方式。
▲ 图 10 : 上:Nomo CAM ,下:iOS 相机

拟物、扁平以及更多的设计风格,应社会、思想、技术的发展而生,各有优劣、各司其职。在追求效率、信息之上的场景,扁平无疑给繁杂的信息腾出了空间和人力成本;而拟物的设计则带给用户更丰富的情感体验。交互界面的边界和可能性,是更加包容和多样化的。如同绘画风格的发展历程,技法和风格在发展成熟后,灵活的组合选用和主观感性的调整让创作和设计更灵动出彩。
4
写在最后

从纸面到界面、再到三维透视的物理世界,古往今来的艺术家和设计师们不断探索规则、学习规则,然后开始挑战规则、变革规则。透视法仅仅是众多绘画技法中的一种,它们是给予帮助的工具而非束住手脚的重重障碍。

如果说绘画技法和设计风格是建筑高楼的手脚架,那么我们在依赖它将基础结构完工后,就应当抛弃手脚架,开始因地制宜的设计或是遵从感官的创作。创作应当是赏心悦目的、信手捏来的,手中的工具越多,施展起来应会更加自信和自由。
参考文献:
  • 《The History of Perspective》
    https://www.essentialvermeer.com/technique/perspective/history.html#:~:text=Cone%20of%20Vision%20(COV):,is%20from%20the%20picture%20plane.
  • 《Op Art History Part I: A History of Perspective in Art》

    http://op-art.co.uk/history/perspective/
  • 《模仿、抽象与仿真》

    https://www.cuhk.edu.hk/ics/21c/media/articles/c058-200003020.pdf
  • 《几何的观看与心理的观看:“反透视”中隐藏的艺术秘密》

    https://epaper.gmw.cn/zhdsb/html/2022-02/16/nw.D110000zhdsb_20220216_1-18.htm
  • 《苹果:人类精神的醒目标志》

    https://www.zgnfys.com/m/a/nfms-36025.shtml
  • 《Why Flat Design is not Anti-skeuomorphism》

    https://teoyusiang.medium.com/why-flat-design-is-not-anti-skeuomorphism-cd9055a83f09
  • 网站: Material Design
    https://m2.material.io/design/environment/elevation.html
—  The end  —
*
本文仅代表作者观点
如需转载,请注明来自 WeDesign
baorui
🫏巡逻天和地



原创设计团队:We-Design


We-Design,微信官方设计团队,负责各平台微信客户端及相关产品设计。







推  阅
荐  读

设计无障碍语音控制体验

当设计一致性有害时

做可持续的 UI 设计

扁平化设计终结?新趋势来了?

QQ音乐|2023年度听歌报告设计总结