海报设计中的编程与交互

张慧怡，蒋克岩

（天津师范大学，天津，300387）

0 引 言

电影海报、文化海报、商业海报、学术报告型海报、公益类海报等各类海报的目的和需求是不同的。各种类型的海报设计总是肩负着一定的责任，从目的出发梳理思路，无论是产品宣传、视觉符号创建还是企业形象展示，都要从目标群体的阅读习惯出发，将视觉象征这一在海报设计中扮演着重要角色的要素，以简单的形式、明了的字体传达那些或简或繁的信息。

在信息化时代快速发展的背景下,设计渐渐超越了其原有的范畴，不断地与多学科交叉融合。海报也从以往的平面化、静态化向动态化、趣味性和交互性等综合方向转变。在此情境下，动态海报应运而生，伴随着新媒体技术的产生而发展。动态海报的出现迎合了时代发展的潮流和趋势，使其传播形式变得多样化，拓宽了海报设计的应用领域。其清晰的视觉流程更符合现代信息接收的习惯，动态的多元化视觉效果具有更强的视觉表现力和冲击力。其构图本身所造成的视觉更迭，在画面构图形式充分变化的同时会形成多层的画面节奏感，满足不同人的审美需求。相对于静态海报来说，它还有着技术赋能这一独特的优势。将声音、载体、动势，甚至是交互融于海报中，视觉效果多元，表达主旨清晰，意境妙趣横生，实现了文化价值与审美价值的有机统一，促进主题的传承和创新，增加作品的趣味性和代入感。

1 海报设计与动效

动态海报是科学与艺术的结合，二者相互融合、互相渗透，科技为艺术提供更广阔的平台，艺术为科技注入灵魂与生机。在这个多样化、多元化的信息化时代，动态海报的设计不是随意而为，而是经过综合考量之后慎重做出的选择。智能化、人性化的平台软件，将真的科学与美的艺术合而为一，让平面的海报动起来，大大拓宽了艺术的创造空间，可以更加细腻生动地表达艺术的美感。科学技术实现了动态海报中图像文字的变换、音乐节奏的渲染、色彩质感的塑造等极具感染力的视觉效果。设计者借助这些友好的平台，将丰富的创意以更鲜活的方式呈现，准确、生动地传递信息，让美学精神得到绽放，让科技理念贯穿其中。

动态海报最明显的特征是连接性和互动性，一个作品连接着设计者、观者及其本身，与普通的海报相比进一步加强了观者与信息的连接，更能唤起观者的观赏兴趣直至高度交互。这样便使观者也成为设计的一部分，在与作品的互动中悄无声息地完成了信息的接收和精神的传递。通过这些多元的互动，让信息的传达更符合审美要求，更具感染力。

动态海报是多感官交互的，其视觉形象融入各自独特的动感，不受时空的限制。流畅的视觉节奏、舒心的听觉感受、简单的触觉配合等都是通过感官实现的交互。不仅如此，动态海报中各个较为活跃的要素也丰富了设计的故事性，展现了更加丰富多彩的视觉效果，使观者身临其境，沉醉其中，引发其深刻的思考和无限的遐想。

2 基于海报设计发展的动效技术

在新媒体时代，人们获取信息的途径由单一的纸媒向多渠道多路径发展。对于动态海报设计的技术也是仁者见仁智者见智，设计师通常会根据个人的喜好和接受程度决定选用哪款软件。

PS和AE都是以图像处理为主的软件。PS是设计工作者人手必备的软件之一，它方便快捷，也可以制作出简单的动态效果。AE不仅可以处理图形图像，还是后期合成软件中的佼佼者，它有着良好的兼容性，其高效的视频处理系统可实现让人耳目一新的动态和视觉创意效果。Android Studio和Ulead GIF Animator都是专业的编程软件。Android Studio是一款专业性极强的软件，其设计功能强大、应用领域广泛，设计者可以通过它将自己的设计理念和创意充分表现出来。Ulead GIF Animator是一款便捷高效、功能丰富的GIF动画制作软件，以简单灵活而著称，可以产生多种动态效果，在提高使用者工作效率的同时为其带来更多的创意乐趣。

而Processing技术融合了艺术性与科学性，以数字艺术为背景，通过可视化的方式进行编程。它为广大设计者以及那些想以编程方式实现绘画、动画和交互的人提供一个有效的途径。人们不再囿于工具和技术的限制，可以充分发挥自己的创意和想象，将设计理念通过代码转化为可视的、具有交互意义的动态海报，取得相得益彰、意想不到的效果。

首先，Processing作为一款编程软件，非常适合初学者入门创意编程的学习。其成本低、易上手、视觉表现力强的优点受到众多设计者的青睐。如果你拥有撰写计算机语言的基础能力，凭借其简单易用的特性，就可以在短时间内恰如其分地实现脑海里的杰作。这样不仅仅是作品本身，就连所运用到的工具、创作形式和创作过程都是一桩艺术。很多不了解编程或Processing的人都会有一个误区：代码的运行取决于理性思维和数学逻辑，与艺术和美感无关。而这一软件就打破了传统流程，改变了底层思维。只要是学习了简单的程序语言，就可以和它沟通，设计者的任何想法都可以在自己的全盘掌控下精确表现。再者，写代码本身也是一门艺术，如何将代码写得简洁明了，这其中蕴藏着巨大的学问。如何用理性的思维来表现感性的内容，也是一个值得深入探索的内容。

其次，Processing还将多学科融合。兴趣是最好的老师，是让我们坚持下去的内在动力，在不经意间带给你正能量，时不时给你带来意外之喜。设计者通过写代码绘制出想要设计的内容，将枯燥的数字转化为可视互动的作品时，带给人们的不只是视觉的冲击，还有心灵的震撼与慰藉。即使是一个小小的参数变化，也能带来大不相同的效果，从而激发人们学习编程的兴趣。此外，Processing不仅融合了电子艺术和视觉交互设计，还涵盖了美学、构成、色彩、文学、设计学等，在很大程度上增加了社群的互动性与学习效率，可以与更多的领域快速对接。

在众多可以实现动态海报设计的技术中，上述技术是设计软件中备受设计师们喜爱的中坚力量。对于一些可以实现设计动效的软件来说，对比PS、AE等绘图软件，Processing将理性与感性相结合，通过代码的敲击，完善设计内容，连接大量硬件。通过鼠标键盘的互动，增强趣味性。而相较于Android Studio、Ulead GIF Animator等编程软件，Processing更加人性化，更适合于大多数设计者，而不是局限于专业人士，拓宽了设计者的创作手段和渠道，为其设计的每个作品注入灵魂和生机。

3 基于Processing编程的海报设计

海报是从广告中衍生出来的一种平面设计形式与传达工具。科技互联网的发展与时代的进步为海报设计带来了无限可能。新型动态海报宣传也变得更加个性化和多样化，所以从动态海报入手，能更生动地展现中心思想，让人们在愉悦的状态下接受文化的洗礼。

在这个瞬息万变的时代，社会的物质文明日益丰富，而我们又置身于经过漫长历史凝练后的中华文化长河之中。这时优秀的传统文化就成了人们不可或缺的精神食粮和支柱。我国又是一个多民族、拥有悠久历史文明的国家，所以便确定以中国传统节日为主题，以端午、中秋和春节为代表，蕴藏着难以表达的意义和情感，保留着最原始的状态和传统文化最深的根源。每一内容都有其各自的特色，通过图形、色彩、文字、音乐的相互融合，来传播中国传统文化，传递中华文化自信。其色彩与图形的设计更要具有独特性和简洁性，符合本民族人民对其认知的习惯。

3.1 程序编译前的图形创意

首先，图形是可以弥合差异的语言，简单直接而且易于掌握，让人们一眼就能辨认出来，并且没有任何干扰。它是来源于群众的艺术，也是深入群众最便利的法门。那些逐步形成独具文化内涵的图形纹饰（包括人物、植物、动物和几何符号等形式在内的图像），例如古代太极图中的阴阳回转，青铜器纹饰的抽象多义，国画中的写意虚实相生无不透出这种思维方式的精髓。它是最日常、最普通的美学，携带着最简约的信息，拥有最容易被记忆的属性。

人的生理本能就是懒惰，懒于记忆任何复杂的东西，讨厌寓意复杂的东西，喜欢能看见对自己有用的东西，即使是短暂的精神愉悦。所以通过分析人们对动态海报所产生的视觉心理与知觉联想，利用其关联性，归纳总结出设计方案。在系列动态海报设计中，将中国文化传统中的视觉符号和价值系统加以改造，主要以矩形、三角形和圆形为基本形态进行表现，这些符号变成有利于时代变迁的种子，根植于国人心中，使其保持文化认同，如图1所示。因此，形式与内容已不是重点，更重要的是抓住中国传统视觉符号所蕴含的精神表达与审美内涵，让观者在短时间内直接聚焦到海报的中心思想。同时提取了具有较强识别性的视觉元素，如龙舟、玉兔和中国结等，将它们凝练在一起，表达具有中国传统文化特征的设计语言。

图1 图形表现

3.2 运动中的图形图像

要在动态海报中实现图形的动态效果，平移是最基本的移动。但需要其在合适的位置停下或原路返回，也需要一定的设计和变量的控制。比如将三角形一个点的横纵坐标设为变量，要正方向移动便+，反之则-，速度数值从零开始递增，越来越快。当它要停在某处，用if条件语句实现，横/纵坐标到达那个点时，变量便停在该处或反方向运动。这样便实现了龙舟的滑行轨迹和月亮阴晴圆缺的变化。

除了简单的平移，图形的旋转也可以增强海报的视觉效果。比如中秋整体以“圆”的形态表达。而如何将8个小圆有序地排列组合成一个大圆，间隔相同并实现旋转，这是一个值得探究的问题，如图2所示。我们将它的旋转中心定在了画面的中心，通过for循环与数学中过原点圆的参数方程=*cos;=*sin相结合，为变量，用（≤2*pai;+=pai/4）每次旋转45度，来实现等距且围成一圈的8个小圆，并围绕画面中心点translate()旋转，然后通过设置变量，减少透明度达到渐变消失的效果。

图2 圆形等距旋转+圆形等距旋转代码

其次，在版式设计中，任何想法和创意设计都要遵循先繁后简的原则。很多时候人们都倾情于复杂的表达，因为做减法比加法要艰难，要甄别提炼出一个最合适的想法，这种能力就是平庸和优秀的分水岭。摈弃形形色色、繁杂绚丽的装饰设计，用大块面的几何图形进行切割，疏密结合有度，动态大开大合，不随意也不拘谨，如图3所示。

图3 版式设计

动态海报会产生交替的空间关系和时间暗示。动态会影响到视线的集中并对其有一定的限制，它所产生画面的内在和心理的感觉节奏，可直接影响画面的连贯性。所以节奏感的把握尤为重要，此外还要考虑动态效果的衔接关联性，这就要求在写代码时精确其坐标、大小、时间关系等。为了在海报动态的每一秒中保证其画面的完整性，在此设计一个相隔秒便执行的计时器，而函数millis()是最佳选择，它以微秒为单位。在启动时保存时间，将其命名为savedTime。计算耗时的方法是用当前时间减去savedTime，将它另存为passedTime。再通过if(passedtime＞totalTime){}计算是否已经过去相应秒数，从而执行下一个命令，以此来实现各图形间动态的衔接和前后出场的顺序。这样便实现了粽子与龙舟的交错出现，月亮不同状态的体现，花瓣的竞相开放，配合适宜的音乐，营造不同的氛围。计时器代码为：

3.3 视听效果的设计

在增强视效和提高心理感受方面，以最为明亮和纯净的色彩进行设计，更容易刺激眼球。明快的柠檬黄鲜亮，火红总是令人着迷。人要是想舒缓下来，必定会转向蓝色或绿色。而敏感的心灵只有通过联想机制才能引起相应的反应。比如红色可能会引起类似红火的感觉，让人不经意识思维就能产生直接联想，并做出反应的机制。黄、橙、红寓意“欢乐和丰饶”，将这些颜色运用到春节的海报设计中，与内容相辅相成。用坚韧的中绿代表奋斗团结的精神，用静谧的深蓝衬托明月，寄托美好的团圆之意。用低饱和的红黄蓝绿，表达最纯粹的理念并自然地转化到海报的设计之中，巧妙地将传统文化符号与色彩相结合，转化为现代视觉语言。

色彩的融合性，重点突出传承，用简练的词语表述理念，这无形中也是与观者沟通的一条隐形渠道。在自己的能力范围内，打造美好有趣、有温度的海报设计。如果这时有适当的音乐加入，便如画龙点睛，不仅从视觉，也从听觉上为观者带来多层次的享受。在添加音乐之前，要先下载好所需的库，将音乐保存在Libraries中才可播放。先声明提取你的库，再创建音乐，将所需音乐提前准备好放在data文件中，play（）就可以播放了，但如果需要重复播放，使用loop（）即可。这三个内容的动态海报虽各自有其深意，但整体风格形式相似，有逻辑有计划地展示出来，故成体系。因为有合适的音乐加持，所以免去了鼠标与键盘的交互，避免重复与繁杂，让人们静心欣赏，用心聆听与感受。

最后，大脑不喜欢绕弯子的信息，简单直接的对话才能增加信息的吸收度。当你想动嘴巴说时，就先想想怎么听。会说话能传播的好文案，才是可以调动世界能量的指挥棒。所以用人们最为熟知的诗句表达中心思想，大小标题区分明确，使整体节奏感更强，如图4所示。从另一方面来说，字体不仅可以传达中心思想，而且还有增强版面完整度的作用。如果在字体上加入适当的动态效果，也可增添活跃的氛围，更好地区别于大块面的图形。用if条件语句，改变字符串的颜色，将两种颜色来回切换，其速度快慢可以通过调节（%29≤14）中的数字来实现，达到闪烁的效果。

总之，用Processing做一张完整的动态海报设计，不仅要考虑前期的构思、草图、动态、色彩、图形和文字等，还要注重系列海报的关联性，更重要的一点是在写代码时要有克服困难、解决问题的积极态度。也许你并不是因兴趣而接触这一领域，但却要以热爱和真心去探索和发现，这样才有动力在陌生的领域克难攻坚，最后呈现出差强人意的动态海报设计。相信这并不是结束，而是一个开始，开始用新的、有趣的、理性的代码去完成更多有温度的感性作品。不要担心自己走得比别人慢，不要停下脚步，只要认真计划一件事情，并且努力坚持，往往会取得意想不到的成功与收获。

图4 字体设计

4 结 论

说起Processing，很多人都觉得这个词离自己很远，但殊不知，它可能就隐藏在我们所看到的、听到的或熟知的一些设计作品中。它与人产生交互，增加交流，区别于静态的设计，在无形中吸引更多的人。一幅看似简单的动态海报，也许其中蕴藏着许许多多的知识与能量。也许你不了解作品背后的人与事，但你可以借助一张动态海报感同身受，海报本身的故事，设计者的故事，作品的展示与观者的“沟通”也是一个故事，在这里你将收获很多故事与其背后鲜为人知的情感。

对于初学者来说，Processing为他们开拓一条全新的设计之路，在这个表情同一、众生疲惫的时代，重新找回现代人渐渐遗失的激情与活力。对于专业的设计者来说，它为无形的思想理念构建一个有形的情感化形态，他们往往游刃有余，通过缜密的思考，精心的制作编排，为海报赋予新的价值，尝试与观者进行多感官的交流互动，不只在眼里更在心里，经久不散。