基于用戶體驗的微信H5界面設計研究

◇李昱嬌

“H5”是由HTML5簡化而來的詞匯，借助微信這一移動社交平臺，更快地進入大眾視線。相較于過去簡單的廣告圖片界面而言，H5界面的先進性顯然更高，在互動性、品質性還有成本耗費方面都更具優越性，使用者分享和傳播的效果也更為優越。以H5為根基，一大批好的產品被使用者挖掘并體驗，H5交互界面之所以讓使用者擁有更為強大的分享欲望，更有效地推動其在移動互聯大環境中的傳播，原因就在于其精巧的設計風格和嶄新的交互體驗。

一、基于使用者感官體驗的H5視覺設計

H5是互聯網營銷的一種全新手段，不論何種存在形式，核心聚焦點都在于使用者，如此一來，就需要設計人員對使用者真正需要的交互體驗進行更深層次的挖掘和探究，打好基礎，最終實現使用者傳播效率的提升，使品牌功能性形象深入人心。

（一）視覺頁面的完美平衡

就設計而言，一定要格外注重關鍵點的突出化處理，將一些無用的、拖拉的、冗雜的要素適當刪除，盡可能維持頁面的純凈度，找尋形和意、加和減這二者彼此間的完美平衡?！昂啞奔醋鰷p法，“飾”即做加法；“形”是外在，“意”是內在。借助對設計的形“簡”，對設計的理念“飾”，來尋求設計的最大化平衡。但上述過程，通常是彼此限制但又彼此扶持的一種聯系。

頁面設計的初始步驟就在于“簡形”。第一步要創建信息框架，將關鍵要素一直維持在最重要的位置，每時每刻都要警醒自己，輔助數據的地位一定不能越過核心內容，盡可能避免反客為主。核心內容更要盡可能簡潔化，冗雜內容該刪就刪，一句話能講清楚的，就不要用三句話。此外，借助“飾意”能讓界面具有一些視線引領和節奏感層面的小變動，對全局氛圍能起到一定的提升作用，不可小視。

（二）文案設計具有強大吸引力

作為設計內容的一個組成部分，文案寫作對于使用者閱讀而言，存在一定影響力，一個優良的文案品質要高，但也要通俗易懂。設計一款H5，不但要有優良的畫質，還要注重文案的品質。此處的文案不但涵蓋H5自身的內容，最關鍵的還在于另外兩點：一是描述，二是標題。你研發的H5和百萬傳播量的H5之間或許只存在一個標題的距離。對于首次遇到的一個全新的H5而言，足夠吸引眼球的，或許只是一個吸睛的標題而已。

（三）版式設計的突破性及原則

為大眾所熟知的移動端最基礎的版式設計即“主題元素居中突出”，最關鍵的點在于核心思想的著重闡釋。在構圖層面，運用一些穩定程度很高的幾何圖形，如方形、圓形還有正三角形等，輔以一些穩定程度略低的圖形，如不規則圖形、傾斜圖形等進行構圖設計，往往會給人一種動態的、活躍的視覺體驗。也可以設計一些特別的邊緣化構圖，提升設計的“吸睛”程度。種類多元的設計構圖往往會讓你的H5獨樹一幟，但同時也要關注頁面的整潔度，不能亂，版式設計規范要嚴格遵循，畢竟這事關使用者的體驗。

就版式而言，首先要關注數據的排布，若想讓使用者直觀地感知到重點信息，只需從文字內容出發，注重相應的方式方法即可。常規而言，人在閱讀時往往會將視線先行匯聚到左上方，隨后緩慢挪移到右下方，所以設計頁面中文字的排版也往往是左對齊亦或居中對齊的樣式。倘若頁面中存在表單要素，那么往往選取右對齊的樣式。對于設計人員而言，可讀性是其一定要著重思考的一個問題，優良的可讀性會讓使用者的閱讀負擔大大減少。若想有效提升文字的可讀性，手段之一在于讓文字圖形化。在文字表達方面，選取一些簡約的、有趣的且鮮明的圖形，會大大提升使用者對于信息的接納度?，F階段互聯網帶領大眾進入“讀圖時代”，相較于繁雜冗長的文字而言，可視化圖形的接受度顯然更高。

留白則是信息排布的另一種方法。全部的白均為“有目的的留白”，其是頁面排版中一個不可缺少的要素，目的性明確，且能對界面空間構成起到一定的管控作用。留白并非白色填充，而是起源于中國畫，傳達的也是國畫意境。即基于平面塑造出一種廣袤的空間感，這樣的平面設計是會呼吸、可透氣的設計。

借助留白來降低界面給使用者造成的負擔。界面中要素過多，難免會讓使用者產生一種壓迫感和煩躁感。就視覺層面而言，核心原因在于畫面太過狹窄。適度的留白能給使用者帶來一定的喘息空間，就形式美感的構成而言，也會增添一定的韻律感和節奏感。

（四）色彩搭配

就H5移動端界面而言，色調是十分多元的，多元的色調能為使用者帶來多元的感覺，色調的差異性代表著情感傳遞的差異性。H5作品中需要傳達的氛圍，亦動亦靜，亦喜亦悲，統統離不開色調的輔助。色調常常是感性的，感性若想發揮實效，則要立足于理性。談及色調規律，一定要基準色調的黃金法則，即6∶3∶1，一個完美的設計中，主色要占到六成，輔助色要占到三成，點綴色要占到一成，點綴色即錦上添花的存在，能夠起到激活畫面且提升設計層次的作用。色調作為另一種關鍵要素，一致的色調需要著重突出品牌調性，可以提升品牌辨識度和歸屬度，像網易的紅色調還有騰訊的藍色調等。

二、基于使用者情感化體驗的H5設計剖析

（一）注重人性體驗

一個優良的H5荷載的信息一定是摻雜了情感、足夠生動且趣味性十足的?；有缘腍5會讓使用者更愿意主動分享，H5的精髓在于一個對使用者而言魅力十足的好故事，借助故事，使用者會對該H5的印象十分深刻，將品牌理念、價值與故事深度融合，借機實現品牌效用的傳達；具備一定溫度的H5會將多元化的使用者群體作為切入點，緊抓用戶痛點，進行匯總精煉，隨后借助品牌力量給予使用者一定的溫暖和關懷，讓使用者感知品牌力量，進而提升使用者對品牌的歸屬度和信任度；對情懷格外關注的H5要緊抓使用者內心最脆弱的部分，借助情懷打動使用者，使二者之間產生一種共鳴。

（二）關注技術性手段體驗

現階段H5已然超越了最初的屏幕瀏覽限制，多元化的技術手段也隨之產生，涵蓋但不限于3D交互、重力感應、搖一搖、屏幕擦除還有圖像繪制等。借助上述技術手段，使用者能夠從很多方面進行一定的感知，如觸覺、心理還有感官等，進而和H5產生更加直觀的交融感，這樣的操作往往會給使用者留下較為深刻的印象。但就新鮮技術所呈現的效果而言，多數使用者第一印象關注的往往是酷炫的交互技術，第二印象才是界面自身的內容，所以對于形式的過度追捧，對于交互手段的過分關注，會導致一種舍本逐末的狀況出現，使內容的吸引力弱于形式，品牌的傳播效果也會大打折扣。因此H5在設計的時候，一定要科學地應用技術手段，給使用者提供一些流暢度十足且溫情滿滿的H5。

（三）強化互動性參與體驗

H5種類多元，涵蓋但不限于賀卡、邀請函、小測試還有小游戲等，上述H5最大的優越性在于緊抓使用者對多元事物的多元心理。最原始的H5涵蓋了電子請柬、禮品還有賀卡等，部分企業緊抓使用者喜歡小禮物的心理，研發了一系列形式多樣的電子請柬、禮品還有電子賀卡等，借此實現對使用者心理層面的俘獲，以此提升使用者對品牌的忠實程度。還有一些評分測試類型的H5，緊抓使用者的好奇心和攀比心，引導使用者逐步翻閱到最終測試結果，像朋友圈排名就是利用使用者攀比心理的絕佳例子。但上述手段對于品牌形象提升的影響力并不是很高，使用者大多數的專注力在于測試題還有朋友圈排名。很多小游戲類型的H5，借助挑戰記錄的分享，促進使用者滿足感的達成。借助趣味十足的游戲參與環節，可強化品牌聯想力，生成品牌情感認同。小游戲類H5的競技性強，操作簡單，所以大多會在短時間內火爆整個朋友圈。但鑒于創新層面的欠缺，游戲環節過分簡潔，使用者對其熱情度難以得到長時間的維系。設計人員的創意大多用于提升使用者對產品的接納度。一旦游戲情節和品牌情懷達到一致的高度，游戲型H5便能借機實現使用者對品牌自主評價的目的。所以，縱使H5的類型十分多元化，但最關鍵的還是將使用者的需求作為切入點，多考量能夠俘獲使用者眼球的頁面設計要素，緊抓使用者的趨同心理，進而實現品牌傳播效用的提升和品牌形象的創建。

三、結語

借助互聯網平臺還有不斷升級的技術水平，H5廣告的優越性日益明顯，日后品牌戰略的發展趨向無疑是互聯網方向?；诂F階段一切向好的發展趨勢，設計人員要基于使用者切入點進行更多考量，從人性化的角度出發，切實提升使用者吸引力，從情懷角度提升使用者體驗，留住使用者的心，如此一來，方能達成產品傳播的最強有效性和品牌服務的最大價值性，進而破解品牌傳播中產生的一系列問題。日后借助微信H5渠道實現品牌價值的提升，也會變成一種主流方式，筆者堅信，這一行業日后定會給使用者帶來更加多元化的驚喜。