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

張霞

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

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

一、H5頁面的設計流程

為使H5頁面的開發更加系統化、規范化和結構化，設計H5頁面需遵循一定的設計流程和步驟，本研究在綜合參考其他優秀H5作品設計流程的基礎上，提出H5頁面的設計流程為“確定目標→設計方案→原型設計→文案創作→整合開發”。

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

設計方案：根據H5頁面的達成目標和核心觀點構思H5的呈現方案，通過頭腦風暴提出各種創意，并構建H5頁面的層級架構。在此過程中需確定H5頁面的敘事手段、表達形式、呈現節奏和采用的技術工具等，預估方案的實施可行性及可能出現的問題、解決方法等。

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

文案創作：確定原型圖效果之后，需根據H5的核心觀點和表達形式，精簡文字內容，并采用有趣、符合視覺氛圍和敘事節奏的語言風格進行文案創作。

整合開發：根據設計要求，收集圖片、文字、視頻、音頻、動畫等相關素材，并采用H5各類開發工具進行整合和開發。

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

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

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

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

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

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

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

（一）借助“創意思維”打造個性化“角色”

在信息可視化設計中，為了獲得更加生動有趣且令人“意想不到”的效果，在將文字內容轉化成圖時，可借助聯想、擬人、夸張、借代等創意思維進行個性化設計。

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

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

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

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

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

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

（三）通過節奏調動用戶情緒，增強情感共鳴

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

四、結語

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