分享

打破呆板印象之倾斜构图

 滿世界的謊言 2017-12-14




以下是图文版:

在编排版面时如果过度规范就会造成沉闷感而缺少变化性,避免这种呆板印象的方法之一就是添加倾斜的动态元素。根据形式追随内容的设计理念,在需要表现严肃正式的情境时严谨规范的版面其实并没有什么问题,但对于需要表现轻松或动态印象的情境就会显得不伦不类了。那么倾斜构图具有哪些特点呢?这其中又有哪些需要注意的事项呢?接下来我们一起来学习今天的内容吧!









这种编排风格会传递出一种轻松的印象,与常规的垂直水平风格相比,倾斜的构图会更加灵动不会显得刻板。当人们看惯了垂直水平,这种倾斜版面就会更吸引眼球。










倾斜的画面会产生不稳定的视觉感受,在观看上方的画面时,元素自身的方向性会与倾斜一同左右我们的视觉印象,如飞机的头部向上倾斜会有上升的感觉,让人感觉到飞机平稳又很安全的在航行。下方的汽车因为倾斜的加入速度感得到了加强,车头部分加上倾斜的角度,给人向下落的感觉。






在摄像和摄影艺术中,追求水平垂直可以说是非常基础的要求,但根据场景的不同也需要配合相应的构图手法。Dutch Angle 指斜角镜头,这个词因为三、四十年代的德国电影的大量运用而成为术语,也称“德式镜头”(国内误译成了“荷兰式”)


《战斗列车》中就用了倾斜镜头来暗示“冯上校”最后心理防线的瓦解,以及纳粹势力渐行渐弱的趋势。迈克尔的演唱会则是通过倾斜的动作来达到让人耳目一新的舞台效果。





在影视作品中我们也经常能够见到这种倾斜的镜头手法,画面中角度的变化会让画面失去平衡感,产生相当强的主观意向,通常用来表现不安、暴力、惊险、紧张等情景。




在电影海报中也多有体现,倾斜的画面充满了不确定性,具有主观的动态感受,倾斜的构图与画面搭配后会给人一种即将来临的心理感受,让人感到焦虑紧张。










它是包豪斯创始人格罗披乌斯培养出的第一批学员,是二十世纪世界现代设计史重要的代表人物之一。38岁时离开德国赴美,培养出了美国第一代设计大师(纽约设计派)保罗兰德和索尔巴斯。


其在作品中多次尝试倾斜的版式构成,明显受到荷兰风格派影响,善于运用线条来细分空间,统一多样元素。






维尔·孔兹1970年定居美国,在他的著作   《 Typography: Macro-+Micro- Aesthetics 》一书中记录下了自己作品中的思路与想法。上图是书中的案例之一,第一层是由细线构成的文字肌理。第二层是变化角度的矩形色块,起到打破平衡的作用。第三层则由文字信息组成,其中小字经过慎重考虑的角度加上信息层级清晰的划分这些都更有助于信息的阅读。






大卫卡森师从国际著名设计师汉斯·鲁道夫·鲁兹,拥有社会学博士学位,同时也是一个冲浪手,心理学、经济学和世界史等课程的教师。他在设计中打破了国际主义风格那公式般精准的排列组合,将所有的元素解构重组,创造出了一种新的字体和页面的设计方法。是美国平面设计界的先锋式人物。


从表面看凌乱的版面,实际上却是协调统一、灵动而充满节奏感,正是这些“不规则”的处理方式,才带来了前所未有的视觉体验。他的设计美学也鼓舞了万千渴望“变革”的年轻设计者。





画面转到近代,服部一成深受大卫卡森的影响,同时也继承了包豪斯的设计理念,着迷于将既有的物体创造出新鲜的风格,他善于抓住那些瞬间感觉,崇尚直觉性的设计风格。在其作品中经常会出现倾斜的构成,但倾斜角度通常是不规则的。






聂永真在台湾接受纽约派的设计教育,其作品风格简洁现代,也是国际平面设计师联盟(AGI)的会员。设计领域多为音乐唱片和书籍装帧。他在设计中经常会运用倾斜的元素构成形式,自称非常喜欢不规则的物体并以大卫卡森作为学生时代的偶像,在其作品中经常可以见到不规则的图形和非垂直水平的编排形式。










接下来我们来看在版式编排中都有哪些方向的对比,在垂直水平的矩形的版面中,文字的出现形式有两种方向即横排与竖排。




为了让版面中元素间的变化更丰富,会在其中加入方向上的对比。也就是说在一个版面中可以同时出现横排文字与竖排文字,而这种方向上的对比在倾斜的版面中同样适用。




我们看这张图除了运用了方向对比外,还有治疗颈椎病的效果...是不是很神奇呀?如果我们的文字都编排成这种角度,客户没准会高兴的送你一张轮椅。


当人们看到倾斜到几乎垂直的文字时,自然会下意识的歪着头去观看,这便会对信息的阅读增加难度,那么怎样的倾斜幅度才会满足良好的阅读呢?










接下来我们一起做个测试,去分析文字在不同角度下的阅读体验并得出结论,评判标准分为“良好”“可接受”以及“糟糕”。以下测试图中只会标注图标,所以在这里统一进行解释。




因为是功能性上的分析,所以这里我们抛开主观感受去看,当文字的倾斜角度在15°-30°时,横排文字的阅读体验更流畅,竖排相对来说基本很难阅读。




当文字倾斜到45°时,横排与竖排的都是可以认读的,但只是在可接受范围内,这种角度下做文字的方向对比是非常有意思的。当角度到达60°时,我们可以明显看出,横排文字的阅读下已经变得糟糕起来了,与之相对的是竖排文字的阅读性得到了良好的提升。




当角度到达75°-90°时,基本上横排文字就已经阵亡了,在这个角度下,竖排文字的阅读性是最佳的。






其实我们并不需要去记住什么角度下应该用横排还是竖排文字,只需要理解文字的视觉重心即可,即尽可能保证文字的方向接近垂直状态,可以从右侧的图中看出文字在不同角度下的变化规律,类似“不倒翁”的文字始终在接近垂直的角度下才会更容易认读。









网格系统即是规范页面的一种思维辅助工具,元素倾斜之后,网格也自然随之倾斜,但最基本的规律还是不变的。成组、对齐、比例,这些都在约束着版面中的元素。


但并不是所有的版面都需要采用这种网格系统,对于那些自由式的版面来说,它们会独立采用针对性的规范方式甚至仅靠直觉,而这一切都是非常灵活的,千万不要把理论知识刻板的死记硬背。








这个版面即采用了倾斜式的网格系统,所有的元素包括照片和文字全都采用45°的倾斜角度。横排与竖排产生了一种方向的对比,包括图片的朝向也都是不同的。但因为倾斜角度的统一,版面依然会传递出秩序性,同时大小不一的层级也形成了节奏感。





除将整个版面全都做倾斜处理外,也可以采用水平与倾斜结合的方式。在上图的复合网格中,所有元素都共用一条垂直线,仅在横向网格上做倾斜处理,除顶部的标题文字和底部的一些小元素外,其他元素均采用倾斜的构成形式。





这个案例中依然运用了垂直于倾斜的复合网格,大部分元素都安排在水平垂直的图格中,为了打破刻板的印象,将中间部分的文字组合统一做倾斜处理,于上一个案例不同的地方是,这里的倾斜并没有与垂直网格共用对齐轴线,而是独立倾斜的。





这个版面中,顶部色块部分采用了黄金比例来规范,并以此延展出网格系统,所有的元素倾斜角度均为横向图格最右侧到最左侧的连接距离。统一角度作为基本规则进行余下文字的编排。













相对于文字和或图形来说,使用图像作为主画面似乎更适合这个案例,因为这种记实为主的影片本身需要的就是身临其境。那么我们应该选择什么样的照片呢?


或许可以从主题名称中寻找到一丝线索,《企鹅特工队》特工队从含义来说应该是一组精英小队,这就可以排除掉那种成群或单一的企鹅照片了,那么顶部中间的这个画面应该是比较适合的,它特殊的拍摄角度也会给人一种“间谍偷拍”的印象,当然帝企鹅也是影片中三大企鹅品种之一。





首先第一步要做的便是将选好的照片置入到版面中,但由于照片本身是横版的尺寸与画布不符,这就需要用到图片的裁切技巧了,关于这方面的知识,我们订阅号中也有相关文章,感兴趣的朋友可以去看一下。这里将照片中琐碎的部分裁切掉,仅保留画面中的这组企鹅,初步确定好在版面中的比例关系。




为了营造紧张的氛围,将画面逆时针旋转15°,相较于之前的画面来说,加入动势后的画面似乎有种特工的既视感了吧~那么接下来修复一下天空与版面之间的衔接部分。吸取天空中较浅的蓝色部分作为底色,这是为了保证接下来编排文字后的辨识性。




将底色填充后,接下来便是编排文字的阶段了,影片毕竟是英国BBC引进到国内的版本,为了展现国际化的印象,版面中标题设计以英文为主中文为辅的形式编排。为了让主标题趣味性,我们替换字母“I”,让其变成企鹅的剪影来进一步点明主题。最后为了配合画面中的倾斜角度,主标题也进行倾斜的放置。





接下来在版面顶部添加标志与其余介绍性文字,形成水平与倾斜的方向对比,网格划分根则是据其余元素的倾斜角度延伸出来的,水平元素的加入填补了顶部的空白区域,同时也起到了稳定版面的作用。





在版面中下部分的空白区域添加中文标题,词汇经过拆解后添加色块装饰,让其更倾斜符号化的处理。接下来添加其余文字信息,这个版面就基本完成了。整体版面大致可以划分成三个区域,其中标题与图像之间右侧企鹅的头部起到了链接的作用,通过元素组合之间的大量留白来加以区分,使内容的层次更加明显。





接下来我们看一下倾斜网格在这个版面中起到了哪些作用,网格的倾斜角度与版面内部元素一致,大小限定在了左右对角线处,形成了整个倾斜部分的基础骨骼框架。











倾斜构图能够带来动感,在各个领域中都被广泛的运用。采用倾斜构图能够传达出一种轻松活泼的印象,搭配相应的画面更能烘托不同的心理感受。当需要涉及到文字的倾斜时,根据文字的视觉重心变化横竖排就能够带来良好的阅读性。我们也为大家解析了不同版面中倾斜网格的规范方法,也希望这些专业知识能够给你带来帮助,那么本期的分享内容就到这里我们下期见!



———— 研习设团队





案例素材下载请复制本链接:

https://pan.baidu.com/s/1hrWiRcC

跟着文章的案例演示步骤进行操作练习。







本期的内容学会了吗?下面为大家提供了几道测试题来检验自己的学习成果哦!


















    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多