海報設計中的編程與交互

張慧怡，蔣克巖

（天津師范大學，天津，300387）

0 引 言

電影海報、文化海報、商業海報、學術報告型海報、公益類海報等各類海報的目的和需求是不同的。各種類型的海報設計總是肩負著一定的責任，從目的出發梳理思路，無論是產品宣傳、視覺符號創建還是企業形象展示，都要從目標群體的閱讀習慣出發，將視覺象征這一在海報設計中扮演著重要角色的要素，以簡單的形式、明了的字體傳達那些或簡或繁的信息。

在信息化時代快速發展的背景下,設計漸漸超越了其原有的范疇，不斷地與多學科交叉融合。海報也從以往的平面化、靜態化向動態化、趣味性和交互性等綜合方向轉變。在此情境下，動態海報應運而生，伴隨著新媒體技術的產生而發展。動態海報的出現迎合了時代發展的潮流和趨勢，使其傳播形式變得多樣化，拓寬了海報設計的應用領域。其清晰的視覺流程更符合現代信息接收的習慣，動態的多元化視覺效果具有更強的視覺表現力和沖擊力。其構圖本身所造成的視覺更迭，在畫面構圖形式充分變化的同時會形成多層的畫面節奏感，滿足不同人的審美需求。相對于靜態海報來說，它還有著技術賦能這一獨特的優勢。將聲音、載體、動勢，甚至是交互融于海報中，視覺效果多元，表達主旨清晰，意境妙趣橫生，實現了文化價值與審美價值的有機統一，促進主題的傳承和創新，增加作品的趣味性和代入感。

1 海報設計與動效

動態海報是科學與藝術的結合，二者相互融合、互相滲透，科技為藝術提供更廣闊的平臺，藝術為科技注入靈魂與生機。在這個多樣化、多元化的信息化時代，動態海報的設計不是隨意而為，而是經過綜合考量之后慎重做出的選擇。智能化、人性化的平臺軟件，將真的科學與美的藝術合而為一，讓平面的海報動起來，大大拓寬了藝術的創造空間，可以更加細膩生動地表達藝術的美感?？茖W技術實現了動態海報中圖像文字的變換、音樂節奏的渲染、色彩質感的塑造等極具感染力的視覺效果。設計者借助這些友好的平臺，將豐富的創意以更鮮活的方式呈現，準確、生動地傳遞信息，讓美學精神得到綻放，讓科技理念貫穿其中。

動態海報最明顯的特征是連接性和互動性，一個作品連接著設計者、觀者及其本身，與普通的海報相比進一步加強了觀者與信息的連接，更能喚起觀者的觀賞興趣直至高度交互。這樣便使觀者也成為設計的一部分，在與作品的互動中悄無聲息地完成了信息的接收和精神的傳遞。通過這些多元的互動，讓信息的傳達更符合審美要求，更具感染力。

動態海報是多感官交互的，其視覺形象融入各自獨特的動感，不受時空的限制。流暢的視覺節奏、舒心的聽覺感受、簡單的觸覺配合等都是通過感官實現的交互。不僅如此，動態海報中各個較為活躍的要素也豐富了設計的故事性，展現了更加豐富多彩的視覺效果，使觀者身臨其境，沉醉其中，引發其深刻的思考和無限的遐想。

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編程的海報設計

海報是從廣告中衍生出來的一種平面設計形式與傳達工具?？萍蓟ヂ摼W的發展與時代的進步為海報設計帶來了無限可能。新型動態海報宣傳也變得更加個性化和多樣化，所以從動態海報入手，能更生動地展現中心思想，讓人們在愉悅的狀態下接受文化的洗禮。

在這個瞬息萬變的時代，社會的物質文明日益豐富，而我們又置身于經過漫長歷史凝練后的中華文化長河之中。這時優秀的傳統文化就成了人們不可或缺的精神食糧和支柱。我國又是一個多民族、擁有悠久歷史文明的國家，所以便確定以中國傳統節日為主題，以端午、中秋和春節為代表，蘊藏著難以表達的意義和情感，保留著最原始的狀態和傳統文化最深的根源。每一內容都有其各自的特色，通過圖形、色彩、文字、音樂的相互融合，來傳播中國傳統文化，傳遞中華文化自信。其色彩與圖形的設計更要具有獨特性和簡潔性，符合本民族人民對其認知的習慣。

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為他們開拓一條全新的設計之路，在這個表情同一、眾生疲憊的時代，重新找回現代人漸漸遺失的激情與活力。對于專業的設計者來說，它為無形的思想理念構建一個有形的情感化形態，他們往往游刃有余，通過縝密的思考，精心的制作編排，為海報賦予新的價值，嘗試與觀者進行多感官的交流互動，不只在眼里更在心里，經久不散。