蔡麗杰

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

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

檢 索：www.artdesign.org.cn

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

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

一、H5界面中的視覺傳達(dá)

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

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

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

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

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

四、給用戶一個(gè)“主動(dòng)打開、分享”的理由

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（四）色彩搭配

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

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

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

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

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

參考文獻(xiàn)：

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

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

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