海報設(shè)計中的編程與交互

張慧怡，蔣克巖

（天津師范大學(xué)，天津，300387）

0 引 言

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

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

1 海報設(shè)計與動效

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

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

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

2 基于海報設(shè)計發(fā)展的動效技術(shù)

在新媒體時代，人們獲取信息的途徑由單一的紙媒向多渠道多路徑發(fā)展。對于動態(tài)海報設(shè)計的技術(shù)也是仁者見仁智者見智，設(shè)計師通常會根據(jù)個人的喜好和接受程度決定選用哪款軟件。

PS和AE都是以圖像處理為主的軟件。PS是設(shè)計工作者人手必備的軟件之一，它方便快捷，也可以制作出簡單的動態(tài)效果。AE不僅可以處理圖形圖像，還是后期合成軟件中的佼佼者，它有著良好的兼容性，其高效的視頻處理系統(tǒng)可實現(xiàn)讓人耳目一新的動態(tài)和視覺創(chuàng)意效果。Android Studio和Ulead GIF Animator都是專業(yè)的編程軟件。Android Studio是一款專業(yè)性極強的軟件，其設(shè)計功能強大、應(yīng)用領(lǐng)域廣泛，設(shè)計者可以通過它將自己的設(shè)計理念和創(chuàng)意充分表現(xiàn)出來。Ulead GIF Animator是一款便捷高效、功能豐富的GIF動畫制作軟件，以簡單靈活而著稱，可以產(chǎn)生多種動態(tài)效果，在提高使用者工作效率的同時為其帶來更多的創(chuàng)意樂趣。

而Processing技術(shù)融合了藝術(shù)性與科學(xué)性，以數(shù)字藝術(shù)為背景，通過可視化的方式進(jìn)行編程。它為廣大設(shè)計者以及那些想以編程方式實現(xiàn)繪畫、動畫和交互的人提供一個有效的途徑。人們不再囿于工具和技術(shù)的限制，可以充分發(fā)揮自己的創(chuàng)意和想象，將設(shè)計理念通過代碼轉(zhuǎn)化為可視的、具有交互意義的動態(tài)海報，取得相得益彰、意想不到的效果。

首先，Processing作為一款編程軟件，非常適合初學(xué)者入門創(chuàng)意編程的學(xué)習(xí)。其成本低、易上手、視覺表現(xiàn)力強的優(yōu)點受到眾多設(shè)計者的青睞。如果你擁有撰寫計算機(jī)語言的基礎(chǔ)能力，憑借其簡單易用的特性，就可以在短時間內(nèi)恰如其分地實現(xiàn)腦海里的杰作。這樣不僅僅是作品本身，就連所運用到的工具、創(chuàng)作形式和創(chuàng)作過程都是一樁藝術(shù)。很多不了解編程或Processing的人都會有一個誤區(qū)：代碼的運行取決于理性思維和數(shù)學(xué)邏輯，與藝術(shù)和美感無關(guān)。而這一軟件就打破了傳統(tǒng)流程，改變了底層思維。只要是學(xué)習(xí)了簡單的程序語言，就可以和它溝通，設(shè)計者的任何想法都可以在自己的全盤掌控下精確表現(xiàn)。再者，寫代碼本身也是一門藝術(shù)，如何將代碼寫得簡潔明了，這其中蘊藏著巨大的學(xué)問。如何用理性的思維來表現(xiàn)感性的內(nèi)容，也是一個值得深入探索的內(nèi)容。

其次，Processing還將多學(xué)科融合。興趣是最好的老師，是讓我們堅持下去的內(nèi)在動力，在不經(jīng)意間帶給你正能量，時不時給你帶來意外之喜。設(shè)計者通過寫代碼繪制出想要設(shè)計的內(nèi)容，將枯燥的數(shù)字轉(zhuǎn)化為可視互動的作品時，帶給人們的不只是視覺的沖擊，還有心靈的震撼與慰藉。即使是一個小小的參數(shù)變化，也能帶來大不相同的效果，從而激發(fā)人們學(xué)習(xí)編程的興趣。此外，Processing不僅融合了電子藝術(shù)和視覺交互設(shè)計，還涵蓋了美學(xué)、構(gòu)成、色彩、文學(xué)、設(shè)計學(xué)等，在很大程度上增加了社群的互動性與學(xué)習(xí)效率，可以與更多的領(lǐng)域快速對接。

在眾多可以實現(xiàn)動態(tài)海報設(shè)計的技術(shù)中，上述技術(shù)是設(shè)計軟件中備受設(shè)計師們喜愛的中堅力量。對于一些可以實現(xiàn)設(shè)計動效的軟件來說，對比PS、AE等繪圖軟件，Processing將理性與感性相結(jié)合，通過代碼的敲擊，完善設(shè)計內(nèi)容，連接大量硬件。通過鼠標(biāo)鍵盤的互動，增強趣味性。而相較于Android Studio、Ulead GIF Animator等編程軟件，Processing更加人性化，更適合于大多數(shù)設(shè)計者，而不是局限于專業(yè)人士，拓寬了設(shè)計者的創(chuàng)作手段和渠道，為其設(shè)計的每個作品注入靈魂和生機(jī)。

3 基于Processing編程的海報設(shè)計

海報是從廣告中衍生出來的一種平面設(shè)計形式與傳達(dá)工具?？萍蓟ヂ?lián)網(wǎng)的發(fā)展與時代的進(jìn)步為海報設(shè)計帶來了無限可能。新型動態(tài)海報宣傳也變得更加個性化和多樣化，所以從動態(tài)海報入手，能更生動地展現(xiàn)中心思想，讓人們在愉悅的狀態(tài)下接受文化的洗禮。

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

3.1 程序編譯前的圖形創(chuàng)意

首先，圖形是可以彌合差異的語言，簡單直接而且易于掌握，讓人們一眼就能辨認(rèn)出來，并且沒有任何干擾。它是來源于群眾的藝術(shù)，也是深入群眾最便利的法門。那些逐步形成獨具文化內(nèi)涵的圖形紋飾（包括人物、植物、動物和幾何符號等形式在內(nèi)的圖像），例如古代太極圖中的陰陽回轉(zhuǎn)，青銅器紋飾的抽象多義，國畫中的寫意虛實相生無不透出這種思維方式的精髓。它是最日常、最普通的美學(xué)，攜帶著最簡約的信息，擁有最容易被記憶的屬性。

人的生理本能就是懶惰，懶于記憶任何復(fù)雜的東西，討厭寓意復(fù)雜的東西，喜歡能看見對自己有用的東西，即使是短暫的精神愉悅。所以通過分析人們對動態(tài)海報所產(chǎn)生的視覺心理與知覺聯(lián)想，利用其關(guān)聯(lián)性，歸納總結(jié)出設(shè)計方案。在系列動態(tài)海報設(shè)計中，將中國文化傳統(tǒng)中的視覺符號和價值系統(tǒng)加以改造，主要以矩形、三角形和圓形為基本形態(tài)進(jìn)行表現(xiàn)，這些符號變成有利于時代變遷的種子，根植于國人心中，使其保持文化認(rèn)同，如圖1所示。因此，形式與內(nèi)容已不是重點，更重要的是抓住中國傳統(tǒng)視覺符號所蘊含的精神表達(dá)與審美內(nèi)涵，讓觀者在短時間內(nèi)直接聚焦到海報的中心思想。同時提取了具有較強識別性的視覺元素，如龍舟、玉兔和中國結(jié)等，將它們凝練在一起，表達(dá)具有中國傳統(tǒng)文化特征的設(shè)計語言。

圖1 圖形表現(xiàn)

3.2 運動中的圖形圖像

要在動態(tài)海報中實現(xiàn)圖形的動態(tài)效果，平移是最基本的移動。但需要其在合適的位置停下或原路返回，也需要一定的設(shè)計和變量的控制。比如將三角形一個點的橫縱坐標(biāo)設(shè)為變量，要正方向移動便+，反之則-，速度數(shù)值從零開始遞增，越來越快。當(dāng)它要停在某處，用if條件語句實現(xiàn)，橫/縱坐標(biāo)到達(dá)那個點時，變量便停在該處或反方向運動。這樣便實現(xiàn)了龍舟的滑行軌跡和月亮陰晴圓缺的變化。

除了簡單的平移，圖形的旋轉(zhuǎn)也可以增強海報的視覺效果。比如中秋整體以“圓”的形態(tài)表達(dá)。而如何將8個小圓有序地排列組合成一個大圓，間隔相同并實現(xiàn)旋轉(zhuǎn)，這是一個值得探究的問題，如圖2所示。我們將它的旋轉(zhuǎn)中心定在了畫面的中心，通過for循環(huán)與數(shù)學(xué)中過原點圓的參數(shù)方程=*cos;=*sin相結(jié)合，為變量，用（≤2*pai;+=pai/4）每次旋轉(zhuǎn)45度，來實現(xiàn)等距且圍成一圈的8個小圓，并圍繞畫面中心點translate()旋轉(zhuǎn)，然后通過設(shè)置變量，減少透明度達(dá)到漸變消失的效果。

圖2 圓形等距旋轉(zhuǎn)+圓形等距旋轉(zhuǎn)代碼

其次，在版式設(shè)計中，任何想法和創(chuàng)意設(shè)計都要遵循先繁后簡的原則。很多時候人們都傾情于復(fù)雜的表達(dá)，因為做減法比加法要艱難，要甄別提煉出一個最合適的想法，這種能力就是平庸和優(yōu)秀的分水嶺。擯棄形形色色、繁雜絢麗的裝飾設(shè)計，用大塊面的幾何圖形進(jìn)行切割，疏密結(jié)合有度，動態(tài)大開大合，不隨意也不拘謹(jǐn)，如圖3所示。

圖3 版式設(shè)計

動態(tài)海報會產(chǎn)生交替的空間關(guān)系和時間暗示。動態(tài)會影響到視線的集中并對其有一定的限制，它所產(chǎn)生畫面的內(nèi)在和心理的感覺節(jié)奏，可直接影響畫面的連貫性。所以節(jié)奏感的把握尤為重要，此外還要考慮動態(tài)效果的銜接關(guān)聯(lián)性，這就要求在寫代碼時精確其坐標(biāo)、大小、時間關(guān)系等。為了在海報動態(tài)的每一秒中保證其畫面的完整性，在此設(shè)計一個相隔秒便執(zhí)行的計時器，而函數(shù)millis()是最佳選擇，它以微秒為單位。在啟動時保存時間，將其命名為savedTime。計算耗時的方法是用當(dāng)前時間減去savedTime，將它另存為passedTime。再通過if(passedtime＞totalTime){}計算是否已經(jīng)過去相應(yīng)秒數(shù)，從而執(zhí)行下一個命令，以此來實現(xiàn)各圖形間動態(tài)的銜接和前后出場的順序。這樣便實現(xiàn)了粽子與龍舟的交錯出現(xiàn)，月亮不同狀態(tài)的體現(xiàn)，花瓣的競相開放，配合適宜的音樂，營造不同的氛圍。計時器代碼為：

3.3 視聽效果的設(shè)計

在增強視效和提高心理感受方面，以最為明亮和純凈的色彩進(jìn)行設(shè)計，更容易刺激眼球。明快的檸檬黃鮮亮，火紅總是令人著迷。人要是想舒緩下來，必定會轉(zhuǎn)向藍(lán)色或綠色。而敏感的心靈只有通過聯(lián)想機(jī)制才能引起相應(yīng)的反應(yīng)。比如紅色可能會引起類似紅火的感覺，讓人不經(jīng)意識思維就能產(chǎn)生直接聯(lián)想，并做出反應(yīng)的機(jī)制。黃、橙、紅寓意“歡樂和豐饒”，將這些顏色運用到春節(jié)的海報設(shè)計中，與內(nèi)容相輔相成。用堅韌的中綠代表奮斗團(tuán)結(jié)的精神，用靜謐的深藍(lán)襯托明月，寄托美好的團(tuán)圓之意。用低飽和的紅黃藍(lán)綠，表達(dá)最純粹的理念并自然地轉(zhuǎn)化到海報的設(shè)計之中，巧妙地將傳統(tǒng)文化符號與色彩相結(jié)合，轉(zhuǎn)化為現(xiàn)代視覺語言。

色彩的融合性，重點突出傳承，用簡練的詞語表述理念，這無形中也是與觀者溝通的一條隱形渠道。在自己的能力范圍內(nèi)，打造美好有趣、有溫度的海報設(shè)計。如果這時有適當(dāng)?shù)囊魳芳尤?，便如畫龍點睛，不僅從視覺，也從聽覺上為觀者帶來多層次的享受。在添加音樂之前，要先下載好所需的庫，將音樂保存在Libraries中才可播放。先聲明提取你的庫，再創(chuàng)建音樂，將所需音樂提前準(zhǔn)備好放在data文件中，play（）就可以播放了，但如果需要重復(fù)播放，使用loop（）即可。這三個內(nèi)容的動態(tài)海報雖各自有其深意，但整體風(fēng)格形式相似，有邏輯有計劃地展示出來，故成體系。因為有合適的音樂加持，所以免去了鼠標(biāo)與鍵盤的交互，避免重復(fù)與繁雜，讓人們靜心欣賞，用心聆聽與感受。

最后，大腦不喜歡繞彎子的信息，簡單直接的對話才能增加信息的吸收度。當(dāng)你想動嘴巴說時，就先想想怎么聽。會說話能傳播的好文案，才是可以調(diào)動世界能量的指揮棒。所以用人們最為熟知的詩句表達(dá)中心思想，大小標(biāo)題區(qū)分明確，使整體節(jié)奏感更強，如圖4所示。從另一方面來說，字體不僅可以傳達(dá)中心思想，而且還有增強版面完整度的作用。如果在字體上加入適當(dāng)?shù)膭討B(tài)效果，也可增添活躍的氛圍，更好地區(qū)別于大塊面的圖形。用if條件語句，改變字符串的顏色，將兩種顏色來回切換，其速度快慢可以通過調(diào)節(jié)（%29≤14）中的數(shù)字來實現(xiàn)，達(dá)到閃爍的效果。

總之，用Processing做一張完整的動態(tài)海報設(shè)計，不僅要考慮前期的構(gòu)思、草圖、動態(tài)、色彩、圖形和文字等，還要注重系列海報的關(guān)聯(lián)性，更重要的一點是在寫代碼時要有克服困難、解決問題的積極態(tài)度。也許你并不是因興趣而接觸這一領(lǐng)域，但卻要以熱愛和真心去探索和發(fā)現(xiàn)，這樣才有動力在陌生的領(lǐng)域克難攻堅，最后呈現(xiàn)出差強人意的動態(tài)海報設(shè)計。相信這并不是結(jié)束，而是一個開始，開始用新的、有趣的、理性的代碼去完成更多有溫度的感性作品。不要擔(dān)心自己走得比別人慢，不要停下腳步，只要認(rèn)真計劃一件事情，并且努力堅持，往往會取得意想不到的成功與收獲。

圖4 字體設(shè)計

4 結(jié) 論

說起Processing，很多人都覺得這個詞離自己很遠(yuǎn)，但殊不知，它可能就隱藏在我們所看到的、聽到的或熟知的一些設(shè)計作品中。它與人產(chǎn)生交互，增加交流，區(qū)別于靜態(tài)的設(shè)計，在無形中吸引更多的人。一幅看似簡單的動態(tài)海報，也許其中蘊藏著許許多多的知識與能量。也許你不了解作品背后的人與事，但你可以借助一張動態(tài)海報感同身受，海報本身的故事，設(shè)計者的故事，作品的展示與觀者的“溝通”也是一個故事，在這里你將收獲很多故事與其背后鮮為人知的情感。

對于初學(xué)者來說，Processing為他們開拓一條全新的設(shè)計之路，在這個表情同一、眾生疲憊的時代，重新找回現(xiàn)代人漸漸遺失的激情與活力。對于專業(yè)的設(shè)計者來說，它為無形的思想理念構(gòu)建一個有形的情感化形態(tài)，他們往往游刃有余，通過縝密的思考，精心的制作編排，為海報賦予新的價值，嘗試與觀者進(jìn)行多感官的交流互動，不只在眼里更在心里，經(jīng)久不散。