基于iH5的城市形象互動廣告設計研究

郗彩蓮 王浩瑩

摘要：信息化時代的到來，新型的廣告形式層出不窮，在這其中iH5互動廣告深受追捧，文章旨在研究iH5的互動廣告在義烏城市形象傳播設計中的方案和設計思路。通過對iH5互動廣告在義烏城市形象的應用優(yōu)勢進行分析和研究。結合義烏總結出其視聽體驗、情感調(diào)動、視覺設計等要素的創(chuàng)新設計策略和方案。義烏城市形象傳播結合iH5互動廣告形式是非常適合的，其中抓住城市的特色、正確定位受眾群體、找到適合的廣告互動方式尤為重要。

關鍵詞：iH5互動廣告;?義烏城市形象?;交互體驗;?情感調(diào)動?;廣告感染力

中圖分類號：J524.3

文獻標識碼：A

文章編號：1003-0069（2020）08-0039-03

引言

信息化時代的到來，鋪天蓋地、各種各樣的廣告進入我們的視野，使得傳統(tǒng)的廣告形式越來越難吸引當代受眾。與此同時，新型的廣告形式也在悄悄崛起。在這其中，H5的互動廣告形式扮演者舉足輕重的角色，iH5互動大師平臺的零代碼、模塊化、易上手的優(yōu)點就使得其成為了設計師們常用的H5互動工具之一。再加，上新穎的創(chuàng)意豐富的感官和行為體驗、更能讓受眾主動參與并進行自發(fā)傳播，讓其成為了廣告設計中炙手可熱的香餑餑。義烏作為驚艷全世界的國際化小商品之都，傳統(tǒng)的廣告形式已不滿足其形象傳播需求，而運用iH5互動廣告形式可以讓受眾在有趣的交互過程中了解義烏、愛上義烏。

一、iH5互動廣告設計的發(fā)展現(xiàn)狀

“圍住神經(jīng)貓”的這款H5小游戲自2014年7月在微信朋友圈傳播開來，3天就突破了上億點擊量"。H5正在快速地進入大眾的視野、融入我們的生活。與此同時，像iH5這樣的無代碼制作I具漸漸變成了主流，原因很簡單，H5越來越商業(yè)化，H5互動廣告是H5的第一應用場景，iH5平臺提供無代碼的功能服務，也很適合零基礎想進入H5行業(yè)的人學習。iH5互動廣告的功能也越來越豐富和多樣化，比如全景、一鏡到底、時間軸動畫、數(shù)據(jù)庫做抽獎、砍價、多人互動、各類小游戲等。它的開發(fā)，能提供更快、更簡便的服務，代碼可高度重用，服務發(fā)布也很方便。在城市形象償還博中經(jīng)常會用到的大屏幕廣告片或是大屏幕交互，而傳統(tǒng)的大屏幕交互，是需要安裝龐大的軟件系統(tǒng)去管理和運營的，因此更新和維護就很不方便，而使用iH5來實現(xiàn)，既可以實時更新，又可以提高更新頻率，因此，iH5互動廣告市場發(fā)展前景甚好。

二、義烏城市形象iH5互動廣告的受眾群體分析

（一）受眾定位

對于iH5這樣的互動廣告平臺來說，受眾群體數(shù)量還是比較龐大的，畢竟只要有一部手機，掃描二維碼、或者打開鏈接等方式就可以方便地看到廣告內(nèi)容了，而且還可以進行互動。義烏，是國際化小商品之都，是享譽內(nèi)外的東方奇跡。對于義烏這樣的城市來說，其實它不僅僅是人們印象當中的小商品城市，更是一座富有商貿(mào)文化歷史的都市。義烏的城市形象傳播目的主要是為了吸引年輕人前來創(chuàng)業(yè)和就業(yè);吸弓更多的國內(nèi)外旅游愛好者來這里旅游，進而拉動旅游業(yè)的發(fā)展;還有吸引追求品質(zhì)生活的消費者前來購物和洽談生意、進行商貿(mào)交易等。由此可見，互動廣告受眾群體的定位就很清晰了：大學生群體、年輕人群體、國內(nèi)外旅游愛好者、追求品質(zhì)生活的消費者人群。接下來針對這些受眾人群進行心理和行為上的分析。

（二）受眾心理和行為分析

1.首先是大學生群體，大學生的特點是文化素質(zhì)較高、興趣廣泛喜愛新鮮事物、愛挑戰(zhàn)、勇敢無畏等，義烏有著很多的機遇和挑戰(zhàn)等大學生們?nèi)グl(fā)掘和探索，美麗的風景、怡人的氣候、深厚的文化底蘊和環(huán)境會滿足大學生發(fā)現(xiàn)新奇、探索未知的好奇心。

2.其次是年輕的創(chuàng)業(yè)就業(yè)群體，義烏以富有特色的開放、包容、多元化的就業(yè)、創(chuàng)業(yè)環(huán)境吸引有理想、有志向的青年才俊們，優(yōu)厚的鼓勵政策、良好的創(chuàng)業(yè)氛圍，使每一位前來義烏發(fā)展的年輕人都可以有自己的一片天地。

3.再次是國內(nèi)外的旅游愛好者，這個群體的特點是喜歡各地的風土人情情、好山好水、美麗的城市等，在去這個目的地之前一般會看當?shù)氐穆糜喂ヂ?，也會了解一些當?shù)氐慕煌肪€等信息，就需要有介紹搭配地圖路線等服務的綜合性互動廣告，使得他們的旅行更加方便、體驗更加舒適。

4.最后，追求消費品質(zhì)是當今社會的消費趨勢?，F(xiàn)在，很多消費者追求的是消費的品質(zhì)，而不是量，買到自己喜歡的，特別是買到符合自己身份和個性的商品，是當代追求品質(zhì)的消費者的主要觀念。信息化的發(fā)展使得很多人的時間變得碎片化了，這就要求我們在短時間之內(nèi)擁有便捷、高效的購物體驗。生活節(jié)奏加快，高負荷的精神和生活壓力，讓消費者不斷尋找在購物中的認知和認同感，這就孕育出了消費者的豐富購物需求。義烏的商品可謂是琳瑯滿目、應有盡有，無疑是這類消費群體的購物天堂，義烏便捷而發(fā)達的物流業(yè)更是為其錦上添花。

三、義烏城市形象iH5互動廣告的優(yōu)勢

（一）富有文化特色的視聽效果，可以增強廣告的感染力。

豐富的視聽效果，可以調(diào)動受眾情感，加深用戶印象。義烏的城市文化非常豐富，特別是自20世紀80年代開始，從一針一線的貨郎貿(mào)易到“海陸空”全面商貿(mào)道路的開通，是義烏人民的努力拼搏造就了今天的義烏。在經(jīng)濟騰飛的今天，義烏特有的孝義文化、兵文化、撥浪鼓文化等濃郁鮮明的城市形象;義烏人杰地靈，古今人才輩出：一代文宗駱賓王、《共產(chǎn)黨宣言》中文首譯者陳望道、近代明史大家吳晗、革命先輩馮雪峰等各時代風云人物，他們種下了文明的種子，詮釋了“勤耕好學、剛正勇為、誠信包容”的義烏精神，為義烏的年輕人做了優(yōu)秀的榜樣。義烏文化是其城市形象的一大亮點，是吸引大學生群體、國內(nèi)外旅游愛好者、追求品質(zhì)生活的消費者、青年創(chuàng)業(yè)者的重要條件之一，這些義烏的文化內(nèi)容，都值得植入互動廣告作品中，讓受眾更加立體、全方位的了解義烏，讓大家對這座城市含有崇尚之情，從而喜歡義烏、愛上義烏，可以吸弓更多的人到義烏創(chuàng)業(yè)、就業(yè)。

傳統(tǒng)的廣告形式有：平面廣告、廣播廣告、電視電影廣告等，其特點是無法讓受眾身臨其境的與廣告進行交互，使得廣告效果會受到時段、地點文化等的諸多影響！31。而且這樣的廣告讓受眾毫無參與感，往往會造成受眾視覺聽覺疲勞等現(xiàn)象。然而，互動式的廣告就可以很好地解決這個問題，聽一聽“雞毛換糖”的叫賣聲、見識“元宵舞龍燈、觀花燈、百家宴、清湖門市場”的盛景、富有地域民族特色的背景音樂結合各種傳統(tǒng)文化畫面、還有現(xiàn)代義烏科技與文化的發(fā)展內(nèi)容等的呈現(xiàn)，這些富有感染力的視聽體驗，可以讓交互更加富有趣味性，也可以讓受眾有身臨其境的體驗，增強H5互動廣告的感染力21。雖然語言有國界，但是情感無國界，對于國內(nèi)外旅游愛好者來說，這是非常好的互動方式，讓他們更加了解和喜愛義烏。

（二）通過多元化的互動形式，增強受眾的互動體驗感

H5互動廣告其實是基于HTML5技術而實現(xiàn)的移動端網(wǎng)頁廣告。在眾多的工具中，iH5強大的兼容性可以顯著地降低開發(fā)與運營成本，而且對于新手來說特別友好，容易上手、簡單易學、還有系統(tǒng)的教程教學，模塊化的操作界面使制作更加的高效。義烏的文化歷史悠久，迄今已有兩千兩百多年。風景秀美、物華天寶、文化教育昌盛，“雞毛換糖”的叫賣聲開啟了義烏商業(yè)的歷史篇章。義烏市場從上世紀70年代走街串巷、走南闖北的“雞毛換糖”起步，進而開辦專業(yè)市場，漸漸發(fā)展成了國際商貿(mào)城。走出了一條“無中生有”、“點石成金”的獨特成功道路。義烏市場的發(fā)展歷程，其實是中國改革開放發(fā)展的生動縮影，它的繁榮和美麗需要被更多的人認知、了解。

長頁面的交互形式是再合適不過的了。運用“容器”、“滑動時間軸”等工具來搭建，長頁面中的內(nèi)容就像講故事一樣講述了義烏的變化。作品的一開始就是“雞毛換糖”的畫面，一位母親帶著孩子來到商販這里用家里的雞毛來換取紅糖，點擊他們可以看到關于雞毛換糖的簡介，還會出現(xiàn)當時小商販的叫賣聲、寶寶的笑聲。一直往右滑動陸續(xù)會出現(xiàn)很多具有時代代表性的內(nèi)容，最后一部分是現(xiàn)代義烏的內(nèi)容，比如機場、國際商貿(mào)城、高鐵、立交橋、義烏港口等。沿著歷史的長河，用戶可以選擇性地觀看自己想看的部分，也可以按照從左到右的順序進行靈活的互動操作。

iH5互動廣告是不會受到時間和地點的限制，只要有網(wǎng)絡，也不會耗費多少流量就可以看到的廣告形式，而且不僅僅可以看，還可以聽、玩、傳播等。投入的成本也會比較低，而且傳播率很高，確實是不錯的廣告形式。義烏除了是小商品的海洋、購物者的天堂之外，鐵路口岸還是浙江省“一帶一路”的戰(zhàn)略支點，義烏歷史文化悠久、義烏文明光彩奪目，這些都需要多樣化的交互體驗來吸弓受眾。比如通過“滑動”翻閱長長的義烏發(fā)展歷史畫卷和放風箏、通過“點擊”想了解的義烏民間傳統(tǒng)文化和活動、“長按”屏幕指定位置可以讓飛馳的火車和港口的輪船鳴笛、“搖晃”手機來和廣告中的人物進行問答式互動或是模擬某些動作等的交互方式，讓受眾樂在其中。具體來講，比如“滑動”的交互方式在放風箏這部分里的應用是非常有趣的，用戶通過滑動手機屏幕可以左右控制風箏的方向，讓風箏穩(wěn)穩(wěn)地飛翔在天空中，天空中是不是會有飛鳥經(jīng)過，需要控制風箏的位置來躲避飛鳥，以免風箏降落或受損。這樣“放風箏”的互動活動就可以讓用戶擁有有趣的體驗。再比如左右“滑動”屏幕，拉動二胡的弦，與廣告中的人物合奏義烏著名而古老的說唱藝術“道情”，讓用戶的手、腦、眼、耳都有了豐富多彩的體驗，同時增加成就感，引導用戶想更進一步了解“道情”這個國家級非物質(zhì)文化遺產(chǎn)的民間藝術。因此，iH5互動廣告是非常適合義烏這樣的城市的形象傳播設計的，不但效果好、而且經(jīng)濟實惠。

城市形象宣傳廣告目的是為了刷新大眾對國際化義烏商貿(mào)文化的印象，提升義烏高品質(zhì)城市影響力、知名度和美譽度，推廣義烏這個城市所獨有的商貿(mào)文化，增強其在大眾心目中的品牌識別性。給大眾講述義烏的商貿(mào)文化，讓大家形成認同感;吸引青年創(chuàng)業(yè)與就業(yè)人才來到義烏、建設義烏。iH5平臺中比如3D世界、地圖、全景容器，以及為義烏設計的移動端電商平臺等，這些新的技術可以很好地方便受眾深入了解義烏。比如用戶可以在互動廣告中通過“地圖”的功能找到自己感興趣的具體地點，還可以找到最佳的交通路線;再比如用戶可以使用3D世界和全景容器更加身臨其境般的體驗義烏的城市繁華景象與人文情懷，只要拿著手機，隨時隨地都可以進行互動體驗。iH5新推出的ivx可以進一步將前端深化，把義烏的網(wǎng)店接入城市形象的互動端口，讓消費者們可以方便地購物。

四、義烏城市形象iH5互動廣告的視覺設計

視覺設計符合義烏城市形象特色，iH5互動廣告的視覺設計這部分一直都是重中之重，一個成功的互動廣告作品首先要做到的就是吸引受眾的眼球。但是并不僅僅所謂的“好看”就可以解決問題了，符合義烏城市形象特色的視覺設計才是最適合的互動廣告作品。

（一）原畫繪制

義烏是一座非常美麗的城市，這座城市的建筑、花草樹木、人文活動、一磚一瓦、天空、河流都運用國畫的濕介質(zhì)畫筆進行繪制和暈染。運用年畫的畫風來繪制它的風景是非常合適的。所有的畫面全部運用電腦手繪完成，先去查詢資料，包括場景、人物、道具、物品等，將需要表現(xiàn)的內(nèi)容進行篩選，以這些為原型進行草稿的繪制，再在繪畫軟件和數(shù)位板的配合下進行進一步繪畫，富有民族特色?？梢赃\用PS或SAI軟件進行繪制。義烏鐵路口岸是浙江省“一帶一路”的戰(zhàn)略支點，義烏.國際陸港城市多式聯(lián)運的新起點和鐵路國際集裝運輸?shù)闹匾?jié)點，全球最長的鐵路“義新歐”中歐班列從這里出發(fā)，貫穿歐洲經(jīng)濟圈，如圖1所示。

加入一些動效，可以引導用戶點擊或者拖動來進行交互。動效圖都是運用了gif格式的動圖來模擬移動的船舶、放飛的風箏、河流中跳躍的魚兒、飛馳的高鐵動車、起飛的飛機、人潮涌動的商業(yè)區(qū)、立交橋一上的汽車等內(nèi)容，用來豐富畫面、增加真實感、也增加了趣味性。廣告的城市畫面與人物的配色，可以適當運用明度高、純度低的顏色居多，冷暖色調(diào)的搭配讓畫面協(xié)調(diào)感一十足;背景大面積使用了高明度的冷色調(diào)，不會讓人有視覺疲勞之感;同時也是符合義烏這座城市的主色調(diào)的，晴朗的天空、湛藍的海平面，非常美麗的風景。人物使用到了中性色、暖色調(diào)較多，比較顯眼、也比較美觀4?？v向的空間感體現(xiàn)在色彩的近實遠虛，近景的色彩搭配比較鮮明，遠景的色彩純度偏低、明度偏低、飽和度偏低、色相也會比較接近一些。用戶進入廣告內(nèi)首先看到的會是加載頁面，加載頁面的存在是因為有時網(wǎng)絡需要緩沖的時候，用戶需要等候幾秒的時間，這個時間內(nèi)用戶的內(nèi)心或是焦急的、或是放空，這個“門面”的畫面和動效一定要做到位。運用幾張畫有義烏著名的小物件組成的郵票合集的不斷切換來表現(xiàn)，下面“走進義烏”四個字逐字出現(xiàn)，讓用戶在等待過程中可以對義烏有著初步的了解。這里使用到的是gif動態(tài)圖的形式，如圖2、3、4、5所示。

（二）UI界面設計

界面包括：開始界面、若干介紹分界面、結束界面?？紤]到用戶會在電腦或手機上進行交互和觀看，而且是國內(nèi)外的用戶都會看到，那么風格不要太花哨，簡約為主[5]。畢竟我們要打造義烏國際化大都市的形象，因此，無論是所用的字體還是界面的小元素都需要簡單、干凈、整潔，還需要易于識別，在保留藝術性的同時也要保證實用性。界面的設計首先就需要遵從用戶的閱讀習慣和方式6。最精彩的、最重要的信息最好放在比較靠屏幕中心的位置，比如義烏的城市風景線、風土民情的畫面都是吸引人的地方。其次是在手機這樣的小屏幕里，要保證文字可以看清楚，文字排版需要清晰、文字大小要適合、使用筆畫均勻的字體一比如微軟雅黑字體;標題與正文的字體大小、粗細、色彩可以有一定的區(qū)分。界面的排版設計風格比較簡潔，有梳有密，適當留白;小元素的繪制運用了傳統(tǒng)民間窗花等的設計。特別是一些簡介彈框界面、對話框界面、按鈕等設計，大量運用了義烏的民間文化視覺元素進行點綴。其中按鈕的設計要符合人體手指的大小，不能太小不好點，也不能太大影響畫面美觀。

1.開始界面的設計。開始界面是用戶進入廣告中第一眼可以看到的內(nèi)容，無論是配色還是排版都是需要抓住人眼球的，作為城市形象廣告式的互動設計作品，開始界面需要傳達的信息有義烏的最美的風景、主題文字、提示操作按鈕等內(nèi)容。截取原畫中的一部分進行處理然后作為背景圖，字體的設計采用硬朗的廣告體，與背景配色有一定區(qū)別來凸顯主題文字。右下角是提示用戶操作的按鈕，尺寸是符合人類手指點擊的。色彩也與背景區(qū)別開來，如圖6所示。

2.介紹分界面的設計。這部分界面指的是地名、文化元素、人物等的介紹界面，通過手指的點擊來打開，搭配旁白和音效的講解，聲情并茂，與背景的色彩區(qū)別較大，采用白色的底色來呈現(xiàn)，文字部分運用黑色，與背景形成鮮明對比，方便用戶觀看。界面的邊框設計采用當?shù)鼐哂写硇缘拇皯舻窕ǖ臉邮阶鳛樵?，富有地域特色。同時，界面的設計風格配合了背景原畫的年畫的畫風，鼠標與手繪板繪制結合的設計方法。界面位置在手機屏幕中央，并沒有占用所有的屏幕，而是采用局部顯示的方法。避免太大太滿用戶看了以后視覺疲勞，如圖7所示。

3.結束界面的設計。這個界面是最后的結尾頁的部分，內(nèi)容包括了“再玩一次”、“分享給好友”、“去義烏看看”三個按鈕?！霸偻嬉淮巍笔强梢宰層脩粼俅芜M入開始的界面重新進入互動作品中;“分享給好友”是有一個白色的小小的箭頭指引，讓用戶可以點擊右上角的按鈕進行分享這個廣告，但是由于小箭頭面積很小，如果對整個界面不進行降低明度的處理，小箭頭會凸顯不出來，所以，運用一個黑色的半透明矩形色塊將屏幕明度降低，突出分享小箭頭，再加一點動效，讓其更加醒目;“去義烏看看”按鈕則是鏈接了義烏市的官網(wǎng)，或是讓用戶長按義烏的二維碼進一步了解這座城市的點點滴滴。

結語

在這個信息化的大時代背景下，數(shù)字媒體藝術和技術已是主流，iH5互動廣告作為方便開發(fā)和制作新型廣告形式，正在受廣大用戶的喜愛，其有趣的交互體驗、較低的媒介成本、傳播的便捷性等特性都展示著它強大的競爭力。對于城市形象的互動設計和一般品牌企業(yè)的互動廣告設計還是有所區(qū)別的，本身這是一個龐大的綜合體系設計目標，包含的內(nèi)容很多，需要在這之中提取、凝練廣告精華是非常重要的[7]。成功的作品是能帶給用戶多元化的互動方式、調(diào)動起用戶的情感、震撼的視聽感受的。相信未來會有更多的、更好玩、更富有藝術和商業(yè)價值的iH5互動廣告被設計出來。

參考文獻

[1]張耿，項洋.移動端游戲互動式H5廣告設計研究[J].設計，2020（03）：131-133.

[2]姜霄，王艷敏，王以華城市智慧出行求助服務設計中用戶控制感研究——以杭州為例[J].設計，2019（24）：118-120.

[3]驢韜，方欽樸.交互設計要素情感研究[J].設計，2020（09）：103-105.

[4]趙曉玲，王瑾.平面廣“告中的互動性設計研究[J].設計，2020（07）：10-111.

[5]耿陽，趙煒濃.融合參與觀察的用戶界面設計方法研究[J].設計，2020（09）：44-46.

[6]劉浩然人機交互界面的平面視覺圖像色彩增強系統(tǒng)設計[J].現(xiàn)代電子技術，2019（08）：77-81.

[7]孫雅君H5技術支持下“魅力威?！蔽幕瘎?chuàng)意的設計與呈現(xiàn)研究[J].通訊世界，2020（01）：277-278.