陳國鑫+姚銘昊+李立杰

摘要：H5廣告是目前智能移動終端最常見的廣告形式之一，人們在使用智能移動終端設(shè)備時，會根據(jù)移動終端的顯示特點來選擇觀看H5廣告內(nèi)容。本文在對目前階段H5廣告進行傳播特點分析時，對其所具有的人機交互的互動性給予了高度肯定，并以此為出發(fā)點進行了友善、親切、富有趣味性的廣告頁面設(shè)計，力求使廣告內(nèi)容更加生動形象，更容易被用戶接受。

關(guān)鍵詞：智能移動終端；HTML5廣告；互動頁面；廣告展現(xiàn)方式

前言：

H5廣告全程為HTML5廣告，是基于HTML5頁面所進行的廣告展示。與一般常見的flash廣告和web廣告等廣告頁面不同，HTML5廣告由于其利用html進行程序編寫，具有極強的共性和兼容性，同時瀏覽起來更加方便，因此擁有十分廣闊的市場空間。目前以微信為主的智能移動終端APP，都存有內(nèi)置的H5廣告界面。H5廣告是現(xiàn)階段人們接觸較多的一種廣告形式。

一、操作區(qū)域設(shè)計

H5廣告的載體為普通的智能移動終端設(shè)備，其應(yīng)用的方向是用戶所利用的碎片化時間，因此在進行廣告頁面設(shè)計時，首先應(yīng)當(dāng)考慮到頁面觀看者的觀看場景。一般情況下，智能移動終端設(shè)備的使用者在使用過程中更加習(xí)慣單手操作，單手操作的特點使得屏幕顯示的內(nèi)容容量和內(nèi)容排布位置都需要隨閱讀習(xí)慣而發(fā)生改變。一個好的H5廣告設(shè)計，是需要迎合用戶的使用習(xí)慣，使其在觀看廣告頁面時感受舒心。因此在進行H5廣告頁面設(shè)計時，應(yīng)當(dāng)遵循兩個方面。其一是尊重智能移動終端內(nèi)置系統(tǒng)的操作邏輯，以蘋果手機為例，蘋果手機IOS系統(tǒng)的內(nèi)置操作交互邏輯當(dāng)中，操作者在手機頁面進行向右滑動時頁面直接進入手機后臺，基于這一特點，H5廣告為了避免造成手機用戶的誤操作，需要慎用手機內(nèi)置系統(tǒng)的交互邏輯[1]，從而帶給用戶良好體驗；其二是注重頁面布局，目前的智能移動終端設(shè)備的屏幕尺寸普遍在5英寸以上，單手操作相對困難，H5廣告頁面在進行功能按鈕布局時應(yīng)當(dāng)根據(jù)用戶手指觸碰的區(qū)域進行設(shè)計，例如為了方便操作同時保障頁面顯示完整，可以將按鈕設(shè)計遠(yuǎn)離手機屏幕底部。

二、關(guān)鍵信息設(shè)計

H5廣告交互頁面其本質(zhì)上是廣告推送，目的在于通過推送到用戶的廣告內(nèi)容使用戶能夠?qū)V告所表達(dá)的產(chǎn)品信息進行了解，因此在進行頁面設(shè)計時，需要具有主次之分，使主要內(nèi)容或關(guān)鍵信息能夠在頁面當(dāng)中被強調(diào)。目前智能移動終端的軟件APP設(shè)計逐漸人性化，通常會根據(jù)用戶的使用習(xí)慣對用戶進行定制化的推送。例如“今日頭條”APP，作為重要的新聞客戶端，其內(nèi)置的算法能夠根據(jù)用戶日常閱讀新聞的頻次和感興趣的新聞內(nèi)容為用戶定制符合其需要的新聞頁面，用戶通過觀看新聞頁面可以很輕松地尋找到需要的內(nèi)容，提升了用戶的使用好感和使用親密度。H5廣告頁面由于其編程特征的限制無法達(dá)到這一要求，但是仍然可以根據(jù)普通人的閱讀習(xí)慣進行頁面布局的設(shè)計。例如在視覺心理學(xué)的研究當(dāng)中，研究者發(fā)現(xiàn)，人們在閱讀過程中，閱讀的重點排布在左側(cè)或上方的時候，能夠帶給人輕松愉悅之感，并在大腦中形成對所觀看內(nèi)容的簡潔印象。而當(dāng)重點排布內(nèi)容居于頁面的右側(cè)或者下方，則會使用戶感受到沉重、壓抑。

因此在設(shè)計過程中，廣告交互頁面的設(shè)計人員就可以根據(jù)這一特點和用戶心理特征進行頁面的排版布局。例如將頁面所想要表達(dá)的關(guān)鍵信息放置在頁面當(dāng)中對用戶視覺影像強烈的地方，不但會增加用戶的好感度，同時還能夠?qū)㈥P(guān)鍵信息進行重點突出，增強用戶的印象。而在與用戶交互的過程中，頁面表現(xiàn)關(guān)鍵信息時的邏輯和條理就顯得十分重要，在設(shè)計過程中，設(shè)計師可以采用色彩、光線的明暗變化來進行用戶行為的引導(dǎo)。例如在豆瓣網(wǎng)上線使用的H5廣告頁面“我們的精神角落”中，通過多頁面交迭的方式一步步引導(dǎo)用戶通過點擊和交互來解鎖下一頁面，用戶根據(jù)頁面提示進行屏幕操作，獲取“鑰匙”，從而打開下一頁面。在這一過程中，用戶的好奇心得到了滿足，同時也使得頁面當(dāng)中的重點內(nèi)容凸顯了出來，增強了用戶的印象。

三、交互功能的設(shè)計

前文所提到的豆瓣網(wǎng)“我們的精神角落”在進行關(guān)鍵信息和頁面整體布局的過程中，使用到的技術(shù)手段正是頁面交互。頁面交互的使用使得廣告頁面的內(nèi)容和特點更加豐富，也使得與用戶之間的距離得以拉近。目前在進行H5廣告頁面交互設(shè)計時通常使用到的技術(shù)有動態(tài)元素和超鏈接。動態(tài)元素能夠使頁面當(dāng)中所表現(xiàn)的文字和圖畫信息以動態(tài)的效果呈現(xiàn)出來，增強了頁面的展示能力，一般應(yīng)用于觸感效果和視覺效果的使用中。例如國外經(jīng)典的H5廣告In space we trust[2]當(dāng)中，設(shè)計者將頁面當(dāng)中所需要展示的內(nèi)容通過時間軸的方式進行表現(xiàn)，用戶在與時間軸進行交互的過程中，通過頁面當(dāng)中的動態(tài)元素進行觸控操作，頁面在操作時以數(shù)據(jù)和事件為線索逐漸展開，從而形成了其所表現(xiàn)的“宇宙探索”全過程。在頁面的畫面當(dāng)中，為了能夠增強視覺表現(xiàn)力，設(shè)計者還加入了光線的明暗變化，并通過暗紅、暗紫、暗黑三種顏色表現(xiàn)“宇宙”正在跟隨探索者發(fā)生變化和移動。用戶通過點按屏幕上的“太空小人”，即可以控制小人向前奔跑，給人身臨其境之感。

超鏈接主要應(yīng)用于文字信息過于繁瑣，內(nèi)容復(fù)雜的情況下，設(shè)計者為了能夠使頁面簡潔明朗，帶給用戶優(yōu)質(zhì)體驗，會選擇使用超鏈接的方式將不必要在頁面當(dāng)中第一層次進行展示的內(nèi)容進行隱藏。用戶根據(jù)自身需求，通過鏈接按鈕的方式點擊查看，從而避免因臃腫的條目使用戶喪失瀏覽的興趣。在進行超鏈接轉(zhuǎn)換的過程中，為了實現(xiàn)快速轉(zhuǎn)換，設(shè)計者可以在轉(zhuǎn)換過程中加入動畫過程，從而使轉(zhuǎn)換更加自然。例如在一些H5廣告頁面的設(shè)計上，設(shè)計者選用藍(lán)色閃動的球體進行主要元素的轉(zhuǎn)變，在帶給用戶豐富的視覺色彩沖擊后，也使得轉(zhuǎn)換過程變得流暢自然。

結(jié)論：

綜上所述，H5廣告互動頁面在進行設(shè)計時，設(shè)計者應(yīng)當(dāng)考慮廣告頁面所需要傳達(dá)的重要信息，進而根據(jù)用戶使用習(xí)慣和觀看習(xí)慣進行豐富的用戶引導(dǎo)，最終完成信息的傳遞。在設(shè)計當(dāng)中，利用交互內(nèi)容進行與用戶的互動是目前H5廣告設(shè)計所主要采用的設(shè)計手段，其不但能夠拉近與用戶的距離，還可以將關(guān)鍵信息進行重點展現(xiàn)。

參考文獻(xiàn)：

[1]李晨.新媒體時代下的 HTML5 廣告?zhèn)鞑ツＪ窖芯縖J/OL].藝術(shù)科技，：（2017-11-06）.

[2]胡曉林，馬振龍.基于H5技術(shù)的微信交互式廣告在交互設(shè)計方面的“優(yōu)勢整合”創(chuàng)新思考[J].包裝工程，2016，37（24）：124-129.endprint