蔡麗杰

摘 要：移動互聯(lián)的悄然襲來改變著我們的生活方式，同時給用戶帶來了一場盛大的視覺體驗之旅。在資訊移動化的趨勢下，HTML5技術(shù)的移動Web頁面（以下簡稱H5頁面）成為當(dāng)下最受關(guān)注的頁面視覺形態(tài)。文章以提高用戶體驗為主線，以視覺傳達設(shè)計為切入點，從設(shè)計思維、用戶體驗可視化及內(nèi)容排版等方面，分析了設(shè)計師在追求完美界面設(shè)計的同時如何給用戶帶來一場令人難忘的視覺體驗。

關(guān)鍵詞：用戶體驗；H5頁面；界面設(shè)計；視覺傳達

檢 索：www.artdesign.org.cn

中圖分類號：TB482 文獻標(biāo)志碼：A 文章編號：1008-2832（2016）07-0054-03

A Research on H5 Interface Designs of Wechat

CAI Li-jie（ Tianjin Polytechnic University，Tianjin 300387，China ）

Abstract ：Our life is unconsciously influenced by mobile internet， which brings about a journey tremendous visual experiences toward its audiences. Under the tendency of information mobility， the mobile web interface baced on HTML5 technology （hereafter referred to as a H5） has turned into the visual modality which attains the most extensive attentions of the time. This article focuses on how to improve UE with a pointcut of visual communication design. It analysizes how designers deliver an impressive teast of eyes to their users while pursuing an impeccable interface design in respects of design thinking， the vivalization of UE the layout of content and so on.

Key words ：user experience； H5 page； interfacial design； visual communication

Internet ：www.artdesign.org.cn

我相信，現(xiàn)在“扁平化設(shè)計”對于大家并不陌生，而隨著人們審美的提高，越來越多的人卻陷入了一個誤區(qū)，在做設(shè)計時，你是否不自覺的將自己的目光集中到那些具有強大視覺沖擊力的圖片上，你是否還在為一個頁面的排版而大費周章，當(dāng)然，這些一定是一個設(shè)計師要做的內(nèi)容，可你是否想過，“刻意的這樣做”真正給用戶傳達了什么呢？這種頁面形式能真正被他們理解嗎？答案是否定的！好設(shè)計應(yīng)該是易于消化的，用戶需要的是通過體驗頁面快速的得到他們想要的信息。而作為設(shè)計師的我們就是要抓住用戶的心理，將其轉(zhuǎn)化為潛在用戶。

“H5”，這個由HTML5簡化而來的詞匯，在微信這個移動社交平臺，快速走進了更多人的視野。H5界面與過往簡單的廣告圖片不同，如今的宣傳頁面需要更強的互動、更好的質(zhì)量、花費低的設(shè)計來促成用戶分享傳播。好的產(chǎn)品依托H5讓用戶發(fā)現(xiàn)并體驗，H5交互頁面憑借著精美的設(shè)計風(fēng)格、新鮮的交互體驗使用戶產(chǎn)生極強的分享驅(qū)動力，在移動社交環(huán)境中得到傳播。

一、H5界面中的視覺傳達

H5廣告要求在有限的手機屏上使傳播效益達到最大化，這得益于頁面的表現(xiàn)。傳統(tǒng)平面設(shè)計上更多的是為品牌形象、產(chǎn)品格調(diào)服務(wù)，而在H5廣告的設(shè)計則盡量保持視覺主體的單純性。傳統(tǒng)印刷通常使用CMYK模式的色板，但基于互聯(lián)網(wǎng)傳播的色板模式逐漸演變成HSB模式，它具有更加純凈明亮的特性。

二、互聯(lián)網(wǎng)時代，設(shè)計思維的轉(zhuǎn)變

設(shè)計思維是一種思維方式，不是憑空而來的。設(shè)計思維強調(diào)設(shè)身處地地去體驗客戶需求，想其所想，及其所及，換種方式說它是一種設(shè)計態(tài)度、思維和與人溝通的方法。對于現(xiàn)階段鋪天蓋地的H5而言，整個頁面都充滿了互動性，它需要用戶不斷的進行人機交互，互相響應(yīng)，這樣的設(shè)計需要多維度發(fā)散性思維的設(shè)計師來完成。

三、適合品牌調(diào)性的頁面風(fēng)格——“充滿個性”

不同品牌調(diào)性可根據(jù)產(chǎn)品定位選擇最為恰當(dāng)?shù)捻撁骘L(fēng)格，同時也要注重整體感和產(chǎn)品個性的表達。以岡本品牌為例，看它如何通過頁面展示對自己的產(chǎn)品進行塑造和表現(xiàn)的，如圖所示，該品牌結(jié)合時事節(jié)點創(chuàng)造好內(nèi)容，有趣創(chuàng)造有效，時效創(chuàng)造實效，頁面選擇契合主題的顏色烘托場景氛圍，營造出一種傳統(tǒng)的新年氛圍、喜慶、熱鬧，界面視覺表達的形式統(tǒng)一，gif動圖提升畫面亮點。毫不夸張的說，岡本把避孕套上升到了一個新的高度，廣告內(nèi)容詼諧但不低俗，情趣但不惡趣，露骨但不露點。

四、給用戶一個“主動打開、分享”的理由

H5傳播途徑很多，常見的是微信文章推送、朋友圈轉(zhuǎn)發(fā)和H5廣告投放，據(jù)統(tǒng)計，每個用戶的微信服務(wù)號及訂閱號的個數(shù)基本不低于50個，有的高達100個，那么每天推送一條消息，主動打開的幾率很小，這也會直接影響到分享朋友圈的幾率，而往往H5就“隱藏”在這些微信文章里，所以微信文章標(biāo)題、主圖、內(nèi)容的質(zhì)量也制約著H5傳播。從廣告的投放產(chǎn)出比上來說，H5通常是效益比較低的設(shè)計產(chǎn)物。如何在有限的手持移動端屏幕上吸引更多的用戶自發(fā)傳播，這需要較高的設(shè)計表現(xiàn)水準(zhǔn)。H5本身首先創(chuàng)意新穎，具有品牌感，抓住用戶的心理，要懂得與用戶在短短幾頁的H5里面進行交流，利用文字、圖片、按鈕、色彩等元素吸引用戶參與其中。簡言之，要具有參與感、吸引力、炫耀感。

五、H5界面的設(shè)計法則

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

在設(shè)計中突出重點是第一要務(wù)，把多余的、拖沓的、無用的元素刪除掉，保持視覺畫面的單純性，尋求加與減、形與意之間的完美平衡。

由減而簡，添之以飾；自內(nèi)而外，顯之以形。“簡”為減法，“飾”為加法；“形”為外在，“意”為內(nèi)涵。通過對設(shè)計的形做減法，對設(shè)計的理念做加法，來達到設(shè)計的平衡。而這一過程，往往是相互制約、相輔相成的關(guān)系。

設(shè)計界面的第一步，就是要“簡形”。首先，建立信息框架，始終把重點要素放在第一位置，時刻提醒自己任何其他的輔助信息不要超越主要內(nèi)容，以避免喧賓奪主；其次，主要內(nèi)容本身更是要精簡，多余的元素不要！說白了就是一句話能說明白的不要用三句話來說。另外就是“飾意”，巧妙的點綴，使得頁面產(chǎn)生節(jié)奏感和視線引導(dǎo)上的變化，小元素影響整體的氛圍，達到畫龍點睛的效果。

（二）文案設(shè)計具有足夠吸引力

文案寫作也是設(shè)計內(nèi)容的一部分，因為它影響著用戶閱讀，一個好文案既要有品質(zhì)，又容易被理解。構(gòu)思一款H5，除了好的畫面以外，另外一點就是H5文案了。這里的文案除了H5本身的內(nèi)容之外，還有很重要很重要的：標(biāo)題、描述。你和一款傳播百萬的H5的距離，可能只差一個標(biāo)題。當(dāng)我們第一次見到一個新鮮的H5時，能吸引我們打開的一個可能就是，標(biāo)題足夠吸引。

（三）版式設(shè)計的突破性及原則

移動端最簡單的版式設(shè)計大家都知道是“主題元素居中突出”，重點表達核心思想才是最重要的。用正三角形、圓形、方形等穩(wěn)定的幾何圖形，配以傾斜、不規(guī)則圖形等不穩(wěn)定圖形進行構(gòu)圖，能夠給人以活躍、動感的視覺感受。也可以嘗試特殊的邊緣化構(gòu)圖，使設(shè)計更加“吸睛”。豐富多樣的設(shè)計構(gòu)圖可能會讓你的H5與眾不同，但同時也要注意畫面勿亂，版式設(shè)計的原則還是要遵守的，因為這直接關(guān)系著用戶的體驗。

在版式上，首先來說一下信息的排布，其實根據(jù)文字內(nèi)容，掌握方法就可以讓用戶直觀感受到重要信息了。人的閱讀視線規(guī)律通常是從左上方向右下方移動，因此決定了設(shè)計界面中文字的排版一般采用左對齊或居中對齊。如果界面中有表單元素，一般采用右對齊的方式。這里的文字排版切忌兩大問題：一是切忌不要不規(guī)律的去排布多重復(fù)雜文本，這會使文字的可讀性大大降低；二是切忌不要丟失重點，主次突出才能讓用戶更容易找到設(shè)計想要傳達的意圖。在信息的排布中，可以多采用相近信息分類、歸組、成隊的方式，使復(fù)雜信息“組團”。用這樣的設(shè)計方法，可以使復(fù)雜信息在視覺上簡單化。

可讀性是設(shè)計師必須考慮的一個重要因素，良好的可讀性會使用戶減輕閱讀負擔(dān)。圖形化是使文字變得易讀的有效方式之一。采用鮮明的、趣味的、簡約的圖形來表達文字，會使用戶更容易接收信息。當(dāng)今互聯(lián)網(wǎng)帶給我們的是“讀圖時代”，可視化的圖形語言遠遠比冗長復(fù)雜的文字更容易被接納的多。

信息排布上的另一法則是留白。所有的白都是“有目的的留白”，它是構(gòu)成頁面排版必不可少的因素，并帶有明確的目的來控制頁面的空間構(gòu)成。留白并不是白色填充，它來源于中國畫，也傳達的是國畫意境。它指的是在平面上營造出的廣闊空間感，這樣的平面設(shè)計會呼吸、能透氣。

通過留白來減輕頁面帶給用戶的負擔(dān)。畫面中過多的內(nèi)容無疑會使觀者產(chǎn)生厭煩感、壓迫感。從視覺上說，主要是畫面太狹窄所導(dǎo)致的。適當(dāng)?shù)牧舭捉o觀者的視覺以休息放松的空間，在形式美感的構(gòu)成上，也增加了節(jié)奏感和韻律感。

（四）色彩搭配

在H5移動端頁面中，色彩往往非常豐富，不同的顏色可以帶給用戶不同的感覺，不同的色系代表著不同的傳達情感。H5作品中想表達的氣氛，或喜或感或動或靜，都離不開對色彩的依賴。

色彩往往是感性的，但在理性基礎(chǔ)之上的感性才是最棒的。關(guān)于色彩的規(guī)律要牢記色彩的黃金法則6：3：1，一個合格的設(shè)計需要有60%的主色，30%的輔助色，加上10%的點綴色，所謂畫龍點睛，這10%就是激活畫面，提升設(shè)計層次的。色調(diào)也是另一重要因素，統(tǒng)一的色調(diào)強調(diào)的是品牌調(diào)性，能夠強化品牌辨識度和歸屬感，例如騰訊的藍色調(diào)、網(wǎng)易的紅色調(diào)等。

（五）沒有設(shè)計的設(shè)計

什么是最美的設(shè)計？原研哉說：“虛無”。這種虛無的境界，在界面設(shè)計中同樣適用。如何去設(shè)計化、如何讓用戶感受不到刻意的設(shè)計，是業(yè)內(nèi)設(shè)計師都在追尋的答案。界面中的每個元素都是基于設(shè)計法則、用戶習(xí)慣等設(shè)計的，刻意的裝飾毫無意義。因為界面設(shè)計師要傳達的是內(nèi)容主體，而非視覺感受。形式只是輔助內(nèi)容傳播的工具，它不能超越內(nèi)容本身的重要性。

無論H5是基于企業(yè)宣傳、生活娛樂還是游戲互動，無論它以任何形式傳播，都要落到用戶身上，所以，品牌如果想要和自己的潛在用戶一起玩耍，就必須注重用戶體驗。做好H5界面，需要以人為本，以用戶為本。好的設(shè)計師應(yīng)該是能讓用戶更準(zhǔn)確、更高效、更便捷的獲得傳達的內(nèi)容，用戶的情感、習(xí)慣、價值等都是設(shè)計師要參考的設(shè)計因素。設(shè)計師的追求應(yīng)該是使設(shè)計在功能完備的前提下實現(xiàn)藝術(shù)價值和商業(yè)價值。

參考文獻：

[1] 任婕，傅小貞，張穎鋆. 騰訊網(wǎng)UED體驗設(shè)計之旅[M]. 北京：電子工業(yè)出版社，2015.4.

[2] justinlam. 移動端界面中的版式設(shè)計原理（上） [EB/OL].[2015-10-19]. http：//zhuanlan.zhihu.com/p/20282820？refer=justinlam

[3] 任倩慧，王坤茜. 基于用戶體驗的產(chǎn)品界面設(shè)計研究[J]. 陜西科技大學(xué)學(xué)報（自然科學(xué)版），2011，29（4）：129-132.