基于用戶體驗的H5頁面設(shè)計原則與策略研究

張霞

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語

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