張霞

（南寧師范大學(xué) 計(jì)算機(jī)與信息工程學(xué)院，南寧 530023）

隨著移動(dòng)技術(shù)的發(fā)展、網(wǎng)絡(luò)速度的加快、移動(dòng)設(shè)備的普及，H5逐漸成為廣告設(shè)計(jì)、新聞報(bào)道、品牌宣傳的“新寵”，其豐富的媒體融合形式、多樣的人機(jī)交互手段和快捷的傳播途徑，給人以獨(dú)特的視聽和情感體驗(yàn)。那么，如何設(shè)計(jì)H5頁面才能更好地吸引觀眾？設(shè)計(jì)H5頁面需要遵循哪些原則？哪些設(shè)計(jì)策略可以提升H5頁面的感染力，使其獲得更為豐富的用戶體驗(yàn)?zāi)?？基于以上問題，本文針對部分經(jīng)典、熱門且點(diǎn)擊率高的H5作品進(jìn)行分析和研究，從提升用戶體驗(yàn)的角度，歸納總結(jié)了H5頁面的設(shè)計(jì)流程、設(shè)計(jì)原則和設(shè)計(jì)策略。

一、H5頁面的設(shè)計(jì)流程

為使H5頁面的開發(fā)更加系統(tǒng)化、規(guī)范化和結(jié)構(gòu)化，設(shè)計(jì)H5頁面需遵循一定的設(shè)計(jì)流程和步驟，本研究在綜合參考其他優(yōu)秀H5作品設(shè)計(jì)流程的基礎(chǔ)上，提出H5頁面的設(shè)計(jì)流程為“確定目標(biāo)→設(shè)計(jì)方案→原型設(shè)計(jì)→文案創(chuàng)作→整合開發(fā)”。

確定目標(biāo)：設(shè)計(jì)H5頁面之前必須了解用戶的需求，明確H5的使用目的和用途，是用于廣告設(shè)計(jì)、新聞報(bào)道還是品牌宣傳，是為了描述某種現(xiàn)象，傳達(dá)某種理念，還是為了抒發(fā)某種情感，解決某種問題；然后細(xì)化目標(biāo)，提煉核心觀點(diǎn)。

設(shè)計(jì)方案：根據(jù)H5頁面的達(dá)成目標(biāo)和核心觀點(diǎn)構(gòu)思H5的呈現(xiàn)方案，通過頭腦風(fēng)暴提出各種創(chuàng)意，并構(gòu)建H5頁面的層級(jí)架構(gòu)。在此過程中需確定H5頁面的敘事手段、表達(dá)形式、呈現(xiàn)節(jié)奏和采用的技術(shù)工具等，預(yù)估方案的實(shí)施可行性及可能出現(xiàn)的問題、解決方法等。

原型設(shè)計(jì)：根據(jù)設(shè)計(jì)方案，從視覺、動(dòng)效、聲效、節(jié)奏、交互等方面制作H5頁面的原型圖，初步呈現(xiàn)H5頁面完成后的初始效果，讓客戶及時(shí)了解方案是否滿足自身的目標(biāo)需求，并判斷各項(xiàng)設(shè)計(jì)的可實(shí)施性，以便及時(shí)調(diào)整設(shè)計(jì)方案。

文案創(chuàng)作：確定原型圖效果之后，需根據(jù)H5的核心觀點(diǎn)和表達(dá)形式，精簡文字內(nèi)容，并采用有趣、符合視覺氛圍和敘事節(jié)奏的語言風(fēng)格進(jìn)行文案創(chuàng)作。

整合開發(fā)：根據(jù)設(shè)計(jì)要求，收集圖片、文字、視頻、音頻、動(dòng)畫等相關(guān)素材，并采用H5各類開發(fā)工具進(jìn)行整合和開發(fā)。

二、基于用戶體驗(yàn)的H5頁面設(shè)計(jì)原則

通過對大量熱門H5作品的對比研究可知，能獲得良好用戶體驗(yàn)的H5作品往往在視聽體驗(yàn)、情感體驗(yàn)和互動(dòng)體驗(yàn)等方面均有良好設(shè)計(jì)，主要遵循三項(xiàng)設(shè)計(jì)原則：可視化原則、一致性原則、切身性原則。

可視化原則：H5頁面設(shè)計(jì)的可視化原則是指通過生動(dòng)有趣的圖片、圖形、視頻、動(dòng)畫等直觀形態(tài)元素，更好地將枯燥乏味的文字信息、數(shù)據(jù)信息等表達(dá)出來。進(jìn)行信息可視化處理，不僅有助于觀眾理解復(fù)雜信息，還能加快觀眾對信息的接收效率。在信息泛濫的輕悅讀時(shí)代，如果觀眾無法在短暫的碎片化時(shí)間內(nèi)收到H5傳達(dá)的核心思想和信息，就無法保證觀眾能在H5作品中獲得良好的用戶體驗(yàn)。

一致性原則：一致性原則貫穿在H5頁面設(shè)計(jì)的全過程，例如，在視覺設(shè)計(jì)上，H5所有頁面版式、文字字體、圖片圖形的顏色、風(fēng)格、色調(diào)等要基本統(tǒng)一和協(xié)調(diào)；在表現(xiàn)形式上，H5所有頁面的文案表述方法、動(dòng)效設(shè)置風(fēng)格需一致；在氣氛感染上，其聲效設(shè)置與H5作品的文字基調(diào)、畫面風(fēng)格和敘事節(jié)奏等要保持一致等。

切身性原則：為了擊中觀眾內(nèi)心深處的“動(dòng)情點(diǎn)”，必須從人們熟悉的生活和熱點(diǎn)事件中尋找“突破點(diǎn)”進(jìn)行內(nèi)容設(shè)計(jì)。能激發(fā)用戶良好情感體驗(yàn)的往往不是那些脫離實(shí)際、“高端大氣上檔次”卻與自己無關(guān)的內(nèi)容，而是那些源于生活、終于生活的“閃光點(diǎn)”。因此，在內(nèi)容設(shè)計(jì)上，必須選擇與生活息息相關(guān)的內(nèi)容，如果能讓觀眾將H5頁面?zhèn)鬟_(dá)的思想情感與自身先前經(jīng)驗(yàn)相聯(lián)系，就能激發(fā)觀眾與H5作品之間的情感共鳴，使其獲得更好的用戶體驗(yàn)。

三、基于用戶體驗(yàn)的H5頁面設(shè)計(jì)策略

除了遵循三項(xiàng)設(shè)計(jì)原則，在設(shè)計(jì)H5作品的角色、交互手段、節(jié)奏等方面時(shí)，還需要合理采用三項(xiàng)設(shè)計(jì)策略，才能更好地優(yōu)化H5作品的視聽體驗(yàn)、情感體驗(yàn)和互動(dòng)體驗(yàn)等用戶體驗(yàn)。

（一）借助“創(chuàng)意思維”打造個(gè)性化“角色”

在信息可視化設(shè)計(jì)中，為了獲得更加生動(dòng)有趣且令人“意想不到”的效果，在將文字內(nèi)容轉(zhuǎn)化成圖時(shí)，可借助聯(lián)想、擬人、夸張、借代等創(chuàng)意思維進(jìn)行個(gè)性化設(shè)計(jì)。

聯(lián)想是指“由于某人或某種事物而想起其他相關(guān)的人或事物”，可分為寫實(shí)聯(lián)想、類比聯(lián)想和跳躍聯(lián)想三種。在聯(lián)想過程中可圍繞內(nèi)容特征由表及里地發(fā)散思維，直接依照字面意思進(jìn)行寫實(shí)聯(lián)想，有助于形成對內(nèi)容的表征形象；理解字面意思本質(zhì)后進(jìn)行圖形代換的類比聯(lián)想，有助于加深對事物本質(zhì)的理解；而感性創(chuàng)意的想象則是跳躍聯(lián)想帶給我們的“驚喜”。借助聯(lián)想的可視化設(shè)計(jì)，是設(shè)計(jì)者對內(nèi)容本質(zhì)進(jìn)行理解和加工之后的“產(chǎn)物”，不僅能可視化地展現(xiàn)內(nèi)容本身，還能融入設(shè)計(jì)者的思想情感，是個(gè)性化角色生成過程中較為重要的一種手法。如《我們的精神角落》是由豆瓣出品的H5作品，目的是對豆瓣進(jìn)行品牌塑造與宣傳。作品通過聯(lián)想將一顆不斷成長的豆子作為豆瓣理念的傳達(dá)者和守衛(wèi)者，而作品每個(gè)版塊中具有不同感官的豆子則分別代表了豆瓣的每個(gè)模塊，較好地展現(xiàn)了豆瓣的宗旨，突顯了品牌形象。

擬人化設(shè)計(jì)是通過為某些物象元素添加表情、肢體、服飾、語言等人類特征，讓不具備人類特征的事物擁有人格化特征，從而讓角色活起來。通過擬人化設(shè)計(jì)，可以為物象角色賦予“精氣神”，使整個(gè)畫面基調(diào)更為活躍、生動(dòng)和有趣。如《一起來尋龍摸金，活蒸大粽子》H5中的粽子形象，便是為粽子添加了僵尸人的眼睛、獠牙和表情等人格化特征，設(shè)計(jì)出了不同顏色的“僵尸小粽子”形象，既突顯了H5的尋龍摸金主題，又映照了民間的端午節(jié)。

在可視化設(shè)計(jì)中采用夸張手法，“是對某事物的形象、特征、作用、程度等，有意做出夸大或縮小的處理。通過夸張的形象設(shè)計(jì)，可以快速抓住觀者的眼球，提高觀者的閱讀積極性；通過夸張的對比處理，可以突出某些角色的特質(zhì)，更好地傳達(dá)核心觀點(diǎn)?！比纭洞┰焦蕦m來見你》H5作品，通過夸張的手法塑造了一個(gè)戴墨鏡、愛自拍、玩QQ、逛朋友圈的“現(xiàn)代化皇帝”，然后讓皇帝采用說唱形式描述了與現(xiàn)代技術(shù)融合后的后宮生活，接著呈現(xiàn)大賽的廣告和主題。其新穎、夸張、有趣、嘻哈、無厘頭的設(shè)計(jì)，獲得了意想不到的傳播效果。

“借代是指借用一個(gè)物象來代替另一個(gè)物象”。通常采用與之相關(guān)且更能體現(xiàn)本質(zhì)特征的物象來替代原有物象，一方面既能保留原物象所要呈現(xiàn)的“精髓”內(nèi)容，另一方面又能引發(fā)觀眾的進(jìn)一步思考，達(dá)到引申的作用。如《夢幻H5》就是以兩只不同形象特質(zhì)的大狗作為“主角”，來代指文案稿本中的甲方和乙方，乙狗形象比較強(qiáng)壯和硬朗，戴有H形的金項(xiàng)鏈，代表服務(wù)方；甲狗形象看起來雖柔弱，但拿著金色骨頭，更能體現(xiàn)甲方的主導(dǎo)地位。正因?yàn)樵诜?wù)行業(yè)中大家喜歡用某種狗來稱呼自己，所以通過使用兩只不同氣質(zhì)的狗來代指服務(wù)行業(yè)中的甲方和乙方，更能增強(qiáng)同行間的認(rèn)同感，而這種含有自嘲意味的借代風(fēng)格，也為作品平添了不少樂趣。

（二）設(shè)計(jì)多樣化的交互手段，提升參與感

參與感是H5頁面區(qū)別于PPT和視頻等的關(guān)鍵要素，如果能讓用戶在H5頁面中獲得良好、真實(shí)且有意義的參與感，便能加深用戶對H5內(nèi)容的印象，提高信息獲取的效率；同時(shí)用戶在參與過程中所感受到的悲傷、快樂、恐懼、興奮、驚訝、好奇等情緒，也會(huì)伴隨著信息，一同烙刻在記憶的深處。通常具有參與感的H5作品會(huì)更容易受到用戶歡迎，更容易實(shí)現(xiàn)刷屏級(jí)效果。為了提升H5的參與感，可以運(yùn)用方向傳感、重力感應(yīng)、距離感應(yīng)、陀螺儀全景、VR/AR等多樣化的交互手段，模擬現(xiàn)實(shí)世界中的效果。用戶在交互過程中就仿佛親身經(jīng)歷一般，會(huì)獲得更為真實(shí)的情感體驗(yàn)。如2017年人民日報(bào)推出的《快看吶！這是我的軍裝》H5作品，采用人臉智能識(shí)別技術(shù)，通過讓用戶上傳照片，就能生成獨(dú)屬于用戶各年代的軍裝照，增強(qiáng)了體驗(yàn)的代入感和參與感，使用戶在瀏覽不同年代軍裝照的同時(shí)能回顧建軍節(jié)，銘記歷史。這類生成性的H5作品既有展示作用，又能引導(dǎo)用戶參與和創(chuàng)作，具有較強(qiáng)的用戶原創(chuàng)體驗(yàn)，深受用戶喜愛，上線后迅速獲得刷屏級(jí)效果。2016年騰訊閱讀推出的《盜墓筆記》則利用重力感應(yīng)、點(diǎn)擊操控、話筒感應(yīng)吹氣等多種交互方式，使用戶“身臨其境”，在墓穴中跟隨吳邪一起過險(xiǎn)橋、奪真金、吹塵土、開棺木，獲得了較好的多重交互體驗(yàn)。

（三）通過節(jié)奏調(diào)動(dòng)用戶情緒，增強(qiáng)情感共鳴

H5作品就好比一部電影、一個(gè)故事、一首歌，如果只是平鋪直敘，沒有起承轉(zhuǎn)合，則像一杯淡而無味的白開水，無法調(diào)動(dòng)觀眾的情緒。因此，一個(gè)具備良好用戶體驗(yàn)的H5作品必須有其特定的節(jié)奏，時(shí)而高潮時(shí)而低谷，時(shí)而急促時(shí)而悠緩，時(shí)而激蕩時(shí)而平靜。在進(jìn)行H5的文案創(chuàng)作、動(dòng)效設(shè)置、聲效設(shè)計(jì)時(shí)，便可將節(jié)奏融入其中。分屏的H5作品在敘事進(jìn)程中一般包含兩個(gè)高潮點(diǎn)，第一個(gè)高潮點(diǎn)設(shè)在第二屏，第二個(gè)高潮點(diǎn)設(shè)在倒數(shù)第二屏。依據(jù)高潮點(diǎn)的位置，在文案創(chuàng)作時(shí)，可在第一個(gè)高潮點(diǎn)設(shè)置沖突、矛盾、問題、懸念等引起觀者注意、思考的“刺激點(diǎn)”，在第二個(gè)高潮點(diǎn)則設(shè)置答案、結(jié)局等答疑解惑的解決方法。在設(shè)置動(dòng)效時(shí)，可在兩個(gè)高潮點(diǎn)分別設(shè)置兩種與眾不同的動(dòng)效，以區(qū)別于其余頁面的常規(guī)動(dòng)效，提醒用戶這兩處是重點(diǎn)。在設(shè)計(jì)聲效時(shí)，則應(yīng)該在兩個(gè)高潮點(diǎn)位置上采用背景配樂的高潮部分。通過同時(shí)對文案、動(dòng)效和聲效等進(jìn)行節(jié)奏控制，有助于調(diào)動(dòng)用戶情緒，在觀看中產(chǎn)生情感共鳴。如《羅斯·絕不凋謝》H5作品是在羅斯飽受質(zhì)疑，而以羅斯命名的第6代明星戰(zhàn)靴即將上市之時(shí)上線的作品，一方面為了宣傳產(chǎn)品，另一方面則為了激勵(lì)羅斯，回應(yīng)質(zhì)疑。文案表述上采用了類似講故事的手法，開場快速切換的消極性畫面，配合著人類嘈雜的質(zhì)疑聲，給人以情緒上的第一個(gè)刺激點(diǎn)；然后進(jìn)入緩和的敘事階段，以羅斯的角度描述自己經(jīng)歷的巔峰和低谷，緩和的人聲和環(huán)境聲配合著相應(yīng)畫面，故事節(jié)奏趨于緩和；最后在面對質(zhì)疑時(shí)，“羅斯明確表態(tài)決不放棄”成為作品的高潮，緊張快節(jié)奏的配樂、快閃的動(dòng)畫切換效果以及精簡的文案，則將觀眾的情緒帶向高潮，使觀者能隨同羅斯一起沖破質(zhì)疑，獲得“新生”。

四、結(jié)語

系統(tǒng)分析和歸納H5頁面的設(shè)計(jì)流程，并從用戶體驗(yàn)的角度提出設(shè)計(jì)原則和設(shè)計(jì)策略，可為以后H5頁面設(shè)計(jì)提供參考和借鑒，只有綜合運(yùn)用各項(xiàng)設(shè)計(jì)原則和設(shè)計(jì)策略，才能設(shè)計(jì)出符合用戶感受習(xí)慣、能帶來美好體驗(yàn)的H5作品。