形式美視角下H5廣告的版式設(shè)計(jì)分析

李娟

摘 要 隨著數(shù)字媒體和移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，越來(lái)越多的H5廣告出現(xiàn)在日常生活中。優(yōu)秀的H5廣告不僅在內(nèi)容和形式上要新穎，而且在版式設(shè)計(jì)方面也要符合大眾審美的需求。文章以形式美為切入點(diǎn)，在介紹H5廣告的版式設(shè)計(jì)重要性的基礎(chǔ)上，重點(diǎn)分析了版式設(shè)計(jì)與形式美相結(jié)合的特點(diǎn)和原則。

關(guān)鍵詞 H5廣告;形式美;版式設(shè)計(jì)

中圖分類(lèi)號(hào) G2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 2096-0360（2018）23-0052-02

數(shù)字媒體和移動(dòng)互聯(lián)網(wǎng)的發(fā)展改善了人們的生活，智能手機(jī)已成為人們最密切的媒介，廣告業(yè)逐漸從傳統(tǒng)領(lǐng)域向移動(dòng)營(yíng)銷(xiāo)領(lǐng)域變遷[1]。2014年，HTML5技術(shù)的出現(xiàn)，使廣告行業(yè)發(fā)生了巨大的變革。HTML5技術(shù)能兼容音頻、視頻、圖片等元素，能同時(shí)支持二維和三維效果，并十分適用于移動(dòng)互聯(lián)網(wǎng)的媒介。利用微信等網(wǎng)絡(luò)平臺(tái)，用戶(hù)在手機(jī)端就可以感受到H5廣告的魅力。由于H5廣告具有良好互動(dòng)性、能充分與受眾溝通等優(yōu)勢(shì)，使得許多創(chuàng)意十足、設(shè)計(jì)精良、個(gè)性鮮明的廣告作品在社交平臺(tái)上迅速傳播。H5廣告獨(dú)具一格的表現(xiàn)形式，充分展現(xiàn)了新媒體時(shí)代廣告產(chǎn)品的品牌傳播特點(diǎn)。

H5廣告的快速崛起，在繁榮廣告行業(yè)的同時(shí)也暴露出一些問(wèn)題，比如開(kāi)發(fā)泛濫、作品設(shè)計(jì)雷同、趨于低端化等現(xiàn)象。在版式設(shè)計(jì)方面，很多H5廣告投入很少，存在頁(yè)面設(shè)計(jì)創(chuàng)意不足、版面內(nèi)容過(guò)于擁擠、主題不明確等問(wèn)題。針對(duì)H5廣告板設(shè)計(jì)的相關(guān)問(wèn)題，本文以形式美作為切入點(diǎn)，對(duì)H5廣告的版式設(shè)計(jì)進(jìn)行剖析，力求提供更多更為豐富的表現(xiàn)形式。

1 版式設(shè)計(jì)中的形式美因素

形式美是客觀(guān)事物外觀(guān)形式的美，包括線(xiàn)、形、色、光、聲、質(zhì)等外形因素和將這些因素按一定規(guī)律組合起來(lái)，以表現(xiàn)內(nèi)容的結(jié)構(gòu)等[2]。設(shè)計(jì)過(guò)程的形式美因素決定了一項(xiàng)設(shè)計(jì)作品美的程度，是否會(huì)對(duì)受眾產(chǎn)生強(qiáng)烈的視覺(jué)沖擊力。版式設(shè)計(jì)是依據(jù)所要傳達(dá)的信息和審美規(guī)律，結(jié)合平面設(shè)計(jì)的特點(diǎn)，將圖形、文字、色彩等元素進(jìn)行編排組合的一種視覺(jué)傳達(dá)的設(shè)計(jì)形式[3]。與其他藝術(shù)形式相同，廣告設(shè)計(jì)需要遵循美的表達(dá)規(guī)律。形式美的法則有很多種，不同法則的特點(diǎn)和作用不同，但它們之間相互作用、相互關(guān)聯(lián)。深入理解版面設(shè)計(jì)的形式美法則及其內(nèi)涵，有助于版式設(shè)計(jì)師更好地將形式美因素融入到設(shè)計(jì)中，以傳達(dá)作品的美感。

1.1 秩序與變異

秩序和變異是形式美的兩種規(guī)律。其中，秩序美是起主導(dǎo)表現(xiàn)的作用，而變異則是打破常規(guī)的美，與秩序美相反。變異雖然不是主要的，但卻具有很好的新意，它是對(duì)舊秩序的一種革新。在版式設(shè)計(jì)中，秩序和變異是兩種截然不同的風(fēng)格形式。秩序美是版面設(shè)計(jì)的靈魂，它是采用相同或相近的基本形狀進(jìn)行排列組合，一樣的形狀、大小和方向可以產(chǎn)生整齊、穩(wěn)定的美感。另一方面，如果過(guò)多采用秩序美，也會(huì)使版式變得單調(diào)，缺少靈活性。相比之下，適當(dāng)采用變異，比如夸張、變形等會(huì)引發(fā)人們視覺(jué)上的緊張感和興奮感。因此，秩序和變異需要合理搭配，適當(dāng)?shù)淖儺悤?huì)讓版面在穩(wěn)定美的基礎(chǔ)上增添動(dòng)感和情趣。

1.2 對(duì)比與調(diào)和

將兩個(gè)完全不相同的東西并列在一起進(jìn)行比較，稱(chēng)為對(duì)比。通過(guò)鮮明的對(duì)照，兩個(gè)對(duì)象相互襯托，相互依賴(lài)，在使圖案在不失完整的前提下，能夠突出重點(diǎn)，主次分開(kāi)，同時(shí)整體又顯得生動(dòng)和活潑。調(diào)和是針對(duì)對(duì)比的因素所進(jìn)行的協(xié)調(diào)處理，在對(duì)比因素之間搭建起過(guò)渡的橋梁，讓它們慢慢接近，力求是版面達(dá)到柔和、協(xié)調(diào)的舒適感。對(duì)比與調(diào)和相輔相成，沒(méi)有對(duì)比就不存在調(diào)和，調(diào)和是為了更好地進(jìn)行對(duì)比。

對(duì)比突出強(qiáng)調(diào)差異性，兩種視覺(jué)相反的因素排列在一起，讓人感到強(qiáng)烈反差的同時(shí)，仍舊覺(jué)得這是一個(gè)整體的現(xiàn)象。對(duì)比是版面設(shè)計(jì)必不可少的元素，缺少對(duì)比就沒(méi)有活力。調(diào)和強(qiáng)調(diào)近似性或相似性，目的是讓不同的元素具有共同點(diǎn)，調(diào)和也是版式設(shè)計(jì)重要的一環(huán)，只有對(duì)比沒(méi)有調(diào)和，版面就會(huì)缺少穩(wěn)定和秩序的美感。

1.3 對(duì)稱(chēng)與平衡

對(duì)稱(chēng)與平衡是不同類(lèi)型的穩(wěn)定形式，它們是形式美感物體的兩個(gè)重要特征。不管是靜止的，還是出于運(yùn)動(dòng)狀態(tài)，美的事物通常都具有相對(duì)穩(wěn)定的形態(tài)，在物體外觀(guān)上達(dá)到視覺(jué)上的穩(wěn)定。對(duì)稱(chēng)和平衡時(shí)不同的，但二者也存在聯(lián)系。對(duì)稱(chēng)是平衡的一種，而平衡卻不屬于對(duì)稱(chēng)的范疇，版式設(shè)計(jì)通常以非對(duì)稱(chēng)來(lái)表現(xiàn)美感上的平衡。深入理解對(duì)稱(chēng)和平衡的內(nèi)涵，有助于設(shè)計(jì)師將形式美融入設(shè)計(jì)中，提升版式的美感。

平衡是指視覺(jué)上的穩(wěn)定狀態(tài)，其是通過(guò)視覺(jué)元素的色彩、大小和位置等之間的關(guān)系來(lái)展現(xiàn)。在版面編排中，對(duì)稱(chēng)本身具有平衡感，是最直觀(guān)的一種平衡。平衡一般指視覺(jué)上的平衡，并非絕對(duì)的對(duì)稱(chēng)。對(duì)稱(chēng)與平衡會(huì)使人們產(chǎn)生視覺(jué)上的和諧感和心理上的安寧感。

2 H5廣告的版式特點(diǎn)

H5廣告一般以手機(jī)或平板等移動(dòng)端作為傳播載體，載體屏幕比較小，這影響了受眾對(duì)信息的獲取效果，因此需要在版式設(shè)計(jì)上下功夫。優(yōu)秀的版式設(shè)計(jì)，不僅能在視覺(jué)上正確引導(dǎo)用戶(hù)，同時(shí)又能突出主題，明確主次關(guān)系，從而使信息達(dá)到最好的傳播。依據(jù)視覺(jué)習(xí)慣，將不同的圖文信息進(jìn)行合理組織，能起到視覺(jué)上的引導(dǎo)，通過(guò)利用形式美法則以及色彩、亮度等元素明確信息的主次關(guān)系，突出視覺(jué)主題元素。另外，交互性是H5廣告的重要特征之一，必須在設(shè)計(jì)時(shí)加以重點(diǎn)考慮。優(yōu)秀的版面設(shè)計(jì)可以增強(qiáng)引導(dǎo)性、突出主題，同時(shí)在視覺(jué)上輔助交互，增加點(diǎn)擊感。目前常見(jiàn)的H5廣告版面類(lèi)型包括直線(xiàn)型、斜線(xiàn)型、三角形類(lèi)型、圓形類(lèi)型等。

2.1 直線(xiàn)型

最為常見(jiàn)的直線(xiàn)型版面，簡(jiǎn)單的直線(xiàn)進(jìn)行界面的劃分，表現(xiàn)出沉穩(wěn)的頁(yè)面基調(diào)。用直線(xiàn)切分的界面，每塊的大小依據(jù)內(nèi)容需要而調(diào)整。直線(xiàn)型版面形式簡(jiǎn)單，讓人感覺(jué)到條理性和嚴(yán)肅性。直線(xiàn)型可以對(duì)明確劃分內(nèi)容，引導(dǎo)用戶(hù)進(jìn)行相應(yīng)的交互活動(dòng)。另一方面，直線(xiàn)型版面也往往顯得生硬和呆板，缺少活潑性。

2.2 斜線(xiàn)型

相對(duì)于直線(xiàn)的生硬，斜線(xiàn)型就顯得活潑，視覺(jué)上的沖擊力更強(qiáng)。斜線(xiàn)型也具有較好的引導(dǎo)性，而且增加了整體版面的動(dòng)感性。如果加上動(dòng)效，會(huì)給用戶(hù)帶來(lái)更大的視覺(jué)沖擊感，越多傾斜效果越好。斜線(xiàn)可以讓人感覺(jué)平面在延續(xù)，適用于多頁(yè)面和長(zhǎng)頁(yè)面的情況，特別是頁(yè)面的連續(xù)切換，用斜線(xiàn)版式可以增強(qiáng)引導(dǎo)性。

2.3 三角形類(lèi)型

三角形的優(yōu)點(diǎn)是具有良好的穩(wěn)定性，用在版面上可以起到良好的視覺(jué)引導(dǎo)效果。同時(shí)三角形也是尖銳的，適用于傳達(dá)刺激、快速、時(shí)尚的感覺(jué)。在視覺(jué)上，三角形往往會(huì)突出指向性，在多屏幕間滑動(dòng)切換時(shí)，可用來(lái)引導(dǎo)用戶(hù)進(jìn)行交互。

2.4 圓形類(lèi)型

在手機(jī)屏幕上使用圓形的版式，聚焦效果好，適用于主標(biāo)題、重要圖文信息的表達(dá)。在視覺(jué)上，圓形顯得更為光滑和飽滿(mǎn)，給人一種親近感。相比較其他版面類(lèi)型，圓形巧妙地分割了畫(huà)面內(nèi)容，視覺(jué)上具備更多的親和力，而且特別流暢。

3 形式美視角下的版式設(shè)計(jì)

H5廣告作品的版式設(shè)計(jì)要想具備更多的形式美感，就需要依據(jù)形式美法則，選用與傳播主題相匹配的圖形，選擇正確的字體，調(diào)和圖片的顏色，使作品具備強(qiáng)烈的視覺(jué)沖擊力，吸引受眾的注意。版式設(shè)計(jì)同時(shí)強(qiáng)調(diào)藝術(shù)性和實(shí)用性，是基于作品功能的前提下，以有效傳播為目的的視覺(jué)傳達(dá)藝術(shù)。設(shè)計(jì)過(guò)程中在遵循形式美法則的前提下，將設(shè)計(jì)內(nèi)容與設(shè)計(jì)形式有機(jī)的結(jié)合，期望作品在達(dá)到傳播目的的同時(shí)，又能夠給用戶(hù)以美的視覺(jué)感受。

3.1 強(qiáng)調(diào)主題

功能實(shí)用性是版式設(shè)計(jì)的出發(fā)點(diǎn)，其首要任務(wù)是根據(jù)品牌內(nèi)容和審美的需求，合理運(yùn)用形式美法則，將文字、圖形、色彩等加以編排，更好的引導(dǎo)用戶(hù)，從而使廣告信息達(dá)到有效的傳播。H5廣告在追求形式完美的同時(shí)，最核心的是要強(qiáng)調(diào)主題思想，其本質(zhì)就是為了更好地傳播主題信息。為了突出主題，應(yīng)該在有限的屏幕中設(shè)置核心元素，核心元素不要太多，關(guān)鍵是能突出重點(diǎn)。從應(yīng)用功能上來(lái)講，為達(dá)到設(shè)計(jì)的效果，必須明確把握主要矛盾。因此，版式設(shè)計(jì)的原則之一是突出重點(diǎn)、主次分明。

3.2 重視整體

圖形和文字是版式設(shè)計(jì)的最基本要素，二者的完美結(jié)合，使版面變得和諧統(tǒng)一，既可以讓受眾感受到視覺(jué)上的美感，又能使作品的閱讀性和觀(guān)賞性變得更佳。廣告的版式設(shè)計(jì)除了強(qiáng)調(diào)主題外，也要十分重視整體效果，即在編排版面時(shí)要整體考慮結(jié)構(gòu)、圖形、文字、色彩等要素。重視整體性原則，是為了增加版面要素的協(xié)調(diào)性和關(guān)聯(lián)性，特別是結(jié)構(gòu)和色彩方面的協(xié)調(diào)性。因此，設(shè)計(jì)師要合理運(yùn)用多種協(xié)調(diào)手段，對(duì)版面進(jìn)行整體的綜合考慮，使作品版面表現(xiàn)出條理美和秩序美，同時(shí)又能提升整體的視覺(jué)效果。

3.3 注重互動(dòng)

互動(dòng)性是H5廣告作品的重要特征之一。H5廣告在網(wǎng)絡(luò)平臺(tái)上傳播時(shí)，期望受眾能由旁觀(guān)者變成參與者，積極參與到廣告的交互體驗(yàn)中，讓受眾在互動(dòng)過(guò)程中感知樂(lè)趣，在享受中接受產(chǎn)品。與傳統(tǒng)的平面版式相比，互動(dòng)性的版式具有主動(dòng)性、相互性的特征，可以調(diào)動(dòng)用戶(hù)的情緒。因此，在設(shè)計(jì)時(shí)要加入合理的、足夠的互動(dòng)元素，把版式設(shè)計(jì)中互動(dòng)的創(chuàng)新和用戶(hù)體驗(yàn)的感受作為重點(diǎn)，加強(qiáng)互動(dòng)性的引導(dǎo)。利用互動(dòng)版面設(shè)計(jì)的優(yōu)勢(shì)，讓用戶(hù)和品牌之間產(chǎn)生互動(dòng)，摩擦出更多的火花，進(jìn)而使廣告作品得到更大范圍的傳播。對(duì)互動(dòng)版式的設(shè)計(jì)探索，是H5廣告可持續(xù)發(fā)展的需要，也是發(fā)展的趨勢(shì)方向。

4 結(jié)束語(yǔ)

新媒體時(shí)代H5廣告蓬勃發(fā)展的同時(shí)，競(jìng)爭(zhēng)也越發(fā)激烈。如何通過(guò)設(shè)計(jì)有效提升H5廣告的視覺(jué)效果，更好地吸引用戶(hù)，是版式設(shè)計(jì)師要考慮的重點(diǎn)問(wèn)題。版面中有良好的視覺(jué)引導(dǎo)就會(huì)具有更好的邏輯性，更加突出主題信息。合理的版式設(shè)計(jì)能引導(dǎo)用戶(hù)在最短的時(shí)間內(nèi)接收到有效信息，并增強(qiáng)用戶(hù)的互動(dòng)性。本文在闡述形式美的基礎(chǔ)上，討論了版式設(shè)計(jì)的重要性及特點(diǎn)，并概括分析了形式美視角下版式設(shè)計(jì)的原則性問(wèn)題。

參考文獻(xiàn)

[1]毓鑫，黃弘.基于移動(dòng)互聯(lián)網(wǎng)環(huán)境下的H5設(shè)計(jì)形式探究[J].設(shè)計(jì)，2016（23）：134-135.

[2]朱光潛.朱光潛談美[M].上海：華東師范大學(xué)出版社，2012.

[3]武禹男.數(shù)字媒體環(huán)境下行動(dòng)體驗(yàn)廣告交互設(shè)計(jì)初探[J].新媒體研究，2015（13）：44-46.

[4]杜蔚苗.移動(dòng)終端H5廣告互動(dòng)頁(yè)面設(shè)計(jì)研究[D].武漢：湖北工業(yè)大學(xué)，2017.

[5]鄭舒逸.從H5廣告設(shè)計(jì)看數(shù)字媒體時(shí)代虛擬美學(xué)[J].數(shù)碼設(shè)計(jì)，2017（6）：161-162.

基金項(xiàng)目：福建省教育廳2017年中青年教師教育科研項(xiàng)目“H5廣告的目標(biāo)消費(fèi)群心里與表現(xiàn)形式研究”（項(xiàng)目編號(hào)：JAS170359）。

作者簡(jiǎn)介：李 娟，閩江學(xué)院新聞傳播學(xué)院教師，研究方向?yàn)槠放菩蜗笤O(shè)計(jì)與傳播。