移動(dòng)終端H5廣告互動(dòng)頁(yè)面設(shè)計(jì)的思考

陳國(guó)鑫+姚銘昊+李立杰

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

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

前言：

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

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

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

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

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

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

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

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

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

結(jié)論：

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

參考文獻(xiàn)：

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

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