移動終端H5廣告互動頁面設計的思考

陳國鑫+姚銘昊+李立杰

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

關鍵詞：智能移動終端；HTML5廣告；互動頁面；廣告展現方式

前言：

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

一、操作區域設計

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

二、關鍵信息設計

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

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

三、交互功能的設計

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

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

結論：

綜上所述，H5廣告互動頁面在進行設計時，設計者應當考慮廣告頁面所需要傳達的重要信息，進而根據用戶使用習慣和觀看習慣進行豐富的用戶引導，最終完成信息的傳遞。在設計當中，利用交互內容進行與用戶的互動是目前H5廣告設計所主要采用的設計手段，其不但能夠拉近與用戶的距離，還可以將關鍵信息進行重點展現。

參考文獻：

[1]李晨.新媒體時代下的 HTML5 廣告傳播模式研究[J/OL].藝術科技，：（2017-11-06）.

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