黃曼瑩

（廣西經(jīng)濟管理干部學(xué)院，廣西 南寧 530007）

手繪在網(wǎng)頁設(shè)計中的應(yīng)用

黃曼瑩

（廣西經(jīng)濟管理干部學(xué)院，廣西 南寧 530007）

在網(wǎng)頁設(shè)計開始階段，沒有比手繪更直接簡單的表達(dá)方式了，手繪具有網(wǎng)頁設(shè)計軟件無法替代的藝術(shù)魅力。文章研究手繪對網(wǎng)頁設(shè)計的影響，從凸顯網(wǎng)頁個性、增強網(wǎng)頁趣味性、視覺藝術(shù)的表現(xiàn)、豐富網(wǎng)頁設(shè)計資源和獨特的用戶體現(xiàn)五個方面進(jìn)行分析，并對手繪網(wǎng)頁設(shè)計草圖、網(wǎng)站logo、banner、插圖等其他網(wǎng)頁元素的應(yīng)用進(jìn)行探討。

手繪；網(wǎng)頁布局；網(wǎng)頁設(shè)計

1 前言

早期的網(wǎng)頁由文本構(gòu)成，在網(wǎng)頁中羅列一些鏈接，不考慮布局，談不上藝術(shù)設(shè)計。隨著計算機技術(shù)的飛速發(fā)展，網(wǎng)頁設(shè)計也從最初的單一文本形式，邁向多元化的設(shè)計表現(xiàn)形式。手繪是一種藝術(shù)表達(dá)形式，最初的平面設(shè)計完全是依賴于手繪完成，網(wǎng)頁設(shè)計屬于平面設(shè)計的范疇，并且手繪能快速地表達(dá)設(shè)計內(nèi)容，把手繪的藝術(shù)表現(xiàn)融入網(wǎng)頁設(shè)計中，手繪的直觀性、形象性、藝術(shù)性將會給網(wǎng)頁設(shè)計帶來獨特生動的藝術(shù)效果。本文研究手繪在網(wǎng)頁設(shè)計中的應(yīng)用，從手繪對網(wǎng)頁設(shè)計的影響、手繪網(wǎng)頁元素的應(yīng)用兩方面來進(jìn)行探討。

2 手繪與網(wǎng)頁設(shè)計

在網(wǎng)頁設(shè)計開始階段，沒有比手繪更直接簡單的表達(dá)方式了，手繪具有網(wǎng)頁設(shè)計軟件無法替代的藝術(shù)魅力。手繪工具方便攜帶，隨時可以將網(wǎng)頁設(shè)計師瞬間的設(shè)計靈感記錄下來，因此手繪會使網(wǎng)頁設(shè)計更具有藝術(shù)性與創(chuàng)造力。手繪對網(wǎng)頁設(shè)計的影響體現(xiàn)在凸顯網(wǎng)頁個性、增強網(wǎng)頁趣味性、視覺藝術(shù)的表現(xiàn)、豐富網(wǎng)頁設(shè)計資源和獨特的用戶體驗五個方面[1]。

2.1凸顯網(wǎng)頁個性

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，網(wǎng)絡(luò)文化的個性表達(dá)方式也越來越受到人們的關(guān)注。當(dāng)前的網(wǎng)頁設(shè)計行業(yè)良莠不齊，網(wǎng)上大量充斥著重復(fù)性套用的網(wǎng)頁設(shè)計模板，抄襲之風(fēng)此起彼伏，網(wǎng)頁設(shè)計出現(xiàn)的同性化問題尤其嚴(yán)重，在網(wǎng)頁設(shè)計中融入手繪元素，無疑是突破這種局面的一種有效途徑。針對不同的網(wǎng)頁設(shè)計主題采用不同的手繪風(fēng)格，使網(wǎng)頁設(shè)計的表現(xiàn)形式具有原創(chuàng)性、不可替代性和高識別性，網(wǎng)頁設(shè)計方能彰顯出藝術(shù)化發(fā)展的魅力，凸顯網(wǎng)頁設(shè)計的個性化[2]。

2.2增強網(wǎng)頁的趣味性

天貓商城是目前比較火熱的電商，天貓商城的卡通貓形象深入人心，卡通貓可愛、生動的形象達(dá)到了吸引訪問者連續(xù)關(guān)注的作用。除了卡通畫以外，幽默、夸張的漫畫應(yīng)用也是提升網(wǎng)頁趣味性的一種常見手段，尤其是簡潔明了的敘事漫畫，更容易引起訪問者的共鳴，進(jìn)而為網(wǎng)站吸引更多的訪問者。需要注意的是，不要只是為了有趣而手繪一些與網(wǎng)頁內(nèi)容不符的卡通畫或者漫畫，應(yīng)該切合主題與網(wǎng)頁文字內(nèi)容設(shè)計相關(guān)的卡通畫或者漫畫作品。在網(wǎng)頁藝術(shù)設(shè)計中，手繪卡通畫及漫畫的使用增強了網(wǎng)頁的趣味性。

2.3視覺藝術(shù)的表現(xiàn)

近幾年，在充斥著重復(fù)性套用網(wǎng)頁設(shè)計模板的網(wǎng)絡(luò)中，網(wǎng)頁的藝術(shù)設(shè)計得到了人們更多的關(guān)注。網(wǎng)頁的視覺藝術(shù)表現(xiàn)在能夠給訪問者帶來美感，美感有來自于心靈震撼與共鳴的贊嘆，還來自于感官受到?jīng)_擊感受的視覺美，本文主要從視覺美感對網(wǎng)頁的藝術(shù)設(shè)計進(jìn)行探討。手繪元素在網(wǎng)頁設(shè)計中更能直觀、形象、生動、鮮明地表現(xiàn)主題，融入手繪技術(shù)、方法、風(fēng)格的網(wǎng)頁設(shè)計比傳統(tǒng)的網(wǎng)頁設(shè)計更具有藝術(shù)性。結(jié)合手繪元素的網(wǎng)頁藝術(shù)設(shè)計不僅需要強調(diào)藝術(shù)性，還需要注重網(wǎng)站的功能性，實現(xiàn)藝術(shù)與技術(shù)的無縫銜接。

2.4豐富網(wǎng)頁設(shè)計資源

手繪的工具是筆和紙，筆的種類也有很多，如鉛筆、炭筆、蠟筆 、水彩筆、馬克筆、排筆、勾線筆、針管筆等等，手繪的風(fēng)格有素描、水粉畫、水彩畫、油畫等，近幾年流行的手繪3d效果技巧的應(yīng)用更是令人贊嘆。網(wǎng)頁中手繪元素都是由各種線條構(gòu)成的，線條有直線、折線、斜線、曲線、弧線等。線條的粗細(xì)、疏密、深淺、長短、虛實賦予手繪作品不同的節(jié)奏感，使它產(chǎn)生不一樣的視覺效果，給網(wǎng)頁設(shè)計帶來了新的藝術(shù)設(shè)計表現(xiàn)形式。有的線條柔和，有的線條剛勁有力；有的精致逼真，有的粗糙真實；有的寥寥幾筆展現(xiàn)創(chuàng)意，有的千變?nèi)f化增添樂趣。因此豐富多彩的手繪素材也豐富了網(wǎng)頁設(shè)計的資源來源。

2.5獨特的用戶體驗

據(jù) 2015年 6月最新數(shù)據(jù)顯示，我國互聯(lián)網(wǎng)普及率為48.8%，網(wǎng)民規(guī)模更是高達(dá)6.68億。智能手機的普及，使互聯(lián)網(wǎng)對個人生活的影響范圍越來越廣，然而現(xiàn)代人的生活節(jié)奏越來越快，網(wǎng)絡(luò)中的網(wǎng)頁成千上萬，網(wǎng)民在瀏覽網(wǎng)頁的時候，往往不會有很大的耐性，因此在進(jìn)行網(wǎng)頁設(shè)計的時候，更需要充分考慮以用戶為中心的設(shè)計，除了注重訪問者通過瀏覽網(wǎng)頁獲取的有用信息以外，還要給訪問者提供一個輕松、親切、溫暖、可靠的瀏覽氛圍。網(wǎng)頁設(shè)計中融合應(yīng)用手繪元素，使網(wǎng)頁的信息傳遞顯得更加親切、真實，這種最樸素的藝術(shù)表現(xiàn)形式給訪問者帶來了獨特的用戶體驗。

3 手繪網(wǎng)頁元素的應(yīng)用

一個網(wǎng)站是由很多個相關(guān)聯(lián)的網(wǎng)頁組成的，大型的網(wǎng)站超過幾百個頁面，若是所有的網(wǎng)頁設(shè)計都采用手繪來完成，設(shè)計的工作量相對較大，因此，手繪部分網(wǎng)頁元素是實現(xiàn)提升網(wǎng)頁藝術(shù)表現(xiàn)的一種方式。除了手繪網(wǎng)頁設(shè)計草圖以外，網(wǎng)頁的其他元素如logo、banner、插圖等等都可以通過手繪來完成。

3.1手繪網(wǎng)頁設(shè)計草圖

手繪在網(wǎng)頁設(shè)計中最基本的應(yīng)用是網(wǎng)頁草圖的繪制。在網(wǎng)頁設(shè)計之初，必須先規(guī)劃網(wǎng)頁布局，可以說，好的布局是網(wǎng)頁設(shè)計成功的開始。手繪網(wǎng)頁設(shè)計草圖時，需充分考慮訪問者的最初視覺停留位置，還要考慮首先最能吸引訪問者的注意力的設(shè)計要素。手繪草圖相對簡單，首先需要簡單的線條把頁面進(jìn)行分割或示意，最基本的分割是 banner、導(dǎo)航、正文、頁腳，接著在這基礎(chǔ)之上手繪一些簡單的方形，確定網(wǎng)頁的布局，明晰網(wǎng)頁內(nèi)容的主次，關(guān)鍵的圖片雛形和重要的文字信息也可以通過手繪草圖體現(xiàn)出來。網(wǎng)頁設(shè)計草圖是在稿紙上進(jìn)行的簡單設(shè)計，手繪網(wǎng)頁設(shè)計草圖能幫助設(shè)計師充分考慮網(wǎng)頁功能性的同時，兼顧網(wǎng)頁設(shè)計的藝術(shù)表現(xiàn)性。

在一些大中型企業(yè)，網(wǎng)頁設(shè)計更為專業(yè)化，一般的網(wǎng)頁設(shè)計崗位細(xì)分為網(wǎng)頁設(shè)計師、交互設(shè)計師、視覺設(shè)計師，而一些小企業(yè)在相應(yīng)崗位設(shè)置上相對簡陋，基本上都是一個崗位完成所有設(shè)計工作。在進(jìn)行手繪網(wǎng)頁設(shè)計草圖的時候，需要在草圖上進(jìn)行必要的備注，尤其是在多人協(xié)作完成網(wǎng)頁設(shè)計的情況下，以便于最終實現(xiàn)網(wǎng)頁效果的時候作為參考。

網(wǎng)頁設(shè)計草圖中的圖片等元素，與最終的效果圖不一定一致，但網(wǎng)頁中大部分元素的應(yīng)用基本上遵循了草圖的設(shè)計。如某醫(yī)藥公司的網(wǎng)頁設(shè)計草圖，草圖中設(shè)計的圖片素材是實驗試管、試管架和酒精爐，真實網(wǎng)頁中使用的是實驗員拿著試管在做實驗的圖片素材，但是突出強調(diào)了試管；某網(wǎng)頁設(shè)計草圖畫的人物是一個火柴人，沒有任何備注，真實網(wǎng)頁中使用的是一個穿著時尚的模特，兩者在視覺感受上的差距比較大；某購物網(wǎng)站的首頁設(shè)計草圖手繪白云，備注藍(lán)天白云，真實網(wǎng)頁中使用了藍(lán)天白云+海鷗，最終網(wǎng)頁和草圖僅僅在細(xì)節(jié)上有點不同。

3.2手繪網(wǎng)站LOGO

LOGO作為網(wǎng)站的標(biāo)志性圖形，除了要加深訪問者對公司或者產(chǎn)品的印象以外，還傳達(dá)了一種企業(yè)文化的精神風(fēng)貌。LOGO一般是由文字、圖案或者是圖文混和的表現(xiàn)形式，無論是文字還是圖案，都能夠代表企業(yè)或者是產(chǎn)品的形象。計算機技術(shù)無孔不入之后，LOGO手繪在很長一段時間里僅僅是作為LOGO草圖設(shè)計使用，由于手繪對LOGO文字與圖形的設(shè)計更為生動形象，尤其是抽象化的表現(xiàn)方面，手繪網(wǎng)站LOGO對文字與圖形的抽象化地加工，在視覺表現(xiàn)上能體現(xiàn)出強烈、鮮明、獨特的形象。在倡導(dǎo)返璞歸真設(shè)計的今天，網(wǎng)站手繪LOGO還充分體現(xiàn)了現(xiàn)代與傳統(tǒng)相結(jié)合的優(yōu)勢[3]。

韓國某兒童教育網(wǎng)站的LOGO圖形是手繪的一個卡通的太陽形象，LOGO中明黃色的太陽裂開大嘴，伸出一只手向大家招手，手繪風(fēng)格LOGO生動、可愛的形象讓人印象深刻，擬人的太陽表現(xiàn)形式，使得LOGO看起來溫暖而親切，無形之中提升了企業(yè)的親和力。手繪100網(wǎng)LOGO的圖形是兩只手，圖形“手”恰到好處地揭示了網(wǎng)站的主題，手的用色是黃褐色，使得整個LOGO的造型顯得生動、幽默，很容易受到瀏覽者的關(guān)注。

純文字的網(wǎng)站LOGO設(shè)計，為了體現(xiàn)獨特的手繪風(fēng)格，通常采用加減法來進(jìn)行設(shè)計創(chuàng)作。加法是在網(wǎng)站LOGO所有的文字都添加相同的設(shè)計元素，如某網(wǎng)站LOGO每一個文字選擇一根豎線使用手繪的竹子來替代，以期尋求文字與文字之間在形態(tài)上的關(guān)聯(lián)性，同時手繪的竹子展現(xiàn)的紋路給人以一種鮮明的藝術(shù)感受。減法最常見的應(yīng)用是合二為一，文字和文字之間共用相同的筆畫或者文字的局部進(jìn)行共享，如某設(shè)計網(wǎng)站LOGO中的“設(shè)計”兩個字，就采取共享言字旁的設(shè)計方式，把設(shè)字手繪出水平翻轉(zhuǎn)效果，這樣的設(shè)計方式給人以一種全新的、不同的欣賞感受。

3.3手繪網(wǎng)頁banner

網(wǎng)頁中banner的主要作用是形象、鮮明地體現(xiàn)網(wǎng)頁的中心主題，banner一般放置在網(wǎng)頁的上方或者靠上方的位置，banner都是以吸引客戶為目的進(jìn)行設(shè)計和創(chuàng)作的。手繪banner的呈現(xiàn)方式，將會給瀏覽者不同的視覺感受，促進(jìn)客戶的瀏覽欲望，是實現(xiàn)吸引客戶的一種手段。

手繪網(wǎng)頁banner有時候是局部使用手繪風(fēng)格，如QQ網(wǎng)購網(wǎng)站，也可以全部使用手繪設(shè)計，如谷歌公司的節(jié)日手繪banner。谷歌公司的 banner手繪設(shè)計別具一格，每一次的節(jié)日慶典都以獨特的手繪風(fēng)格展現(xiàn)了谷歌公司對節(jié)日的美好祝愿。谷歌在2015年11月9日的首頁涂鴉主題是紀(jì)念海蒂·拉瑪，海蒂·拉瑪不僅是個美艷動人的明星，還是通訊基礎(chǔ)技術(shù)的發(fā)明家，這個紀(jì)念主題banner很快就能把瀏覽者和谷歌之間的距離拉近，提升了客戶對公司的認(rèn)知度。QQ網(wǎng)購在針對中國傳統(tǒng)節(jié)日七夕所設(shè)計的 banner，采用的手繪牛郎織女鵲橋相會圖，banner中融入手繪的中國神話故事，除了體現(xiàn)出網(wǎng)站的個性化以外，還會使訪問者自然而然產(chǎn)生出親切感，瀏覽的氣氛變得更為輕松、和諧[4]。

3.4手繪網(wǎng)頁插畫

插畫為網(wǎng)頁設(shè)計增添了豐富的素材元素，插畫風(fēng)格是網(wǎng)頁設(shè)計中獨特的藝術(shù)表現(xiàn)形式。網(wǎng)頁中手繪插畫的應(yīng)用，通常用于介紹產(chǎn)品特性、展示工作流程、塑造個人形象等。某公司在其公司網(wǎng)站上的使用四個便簽式的插畫來配合文字進(jìn)行公司產(chǎn)品特性介紹，深藍(lán)色背景之下，結(jié)合簡潔白色線條手繪的圖形，組成了生動活潑的插畫，這些插畫本身傳遞信息的同時，還提升了網(wǎng)頁瀏覽的趣味性。某網(wǎng)站在產(chǎn)品介紹中，圖文并茂地介紹了產(chǎn)品的操作流程，素描的插圖設(shè)計增加了網(wǎng)頁的可讀性，同時讓頁面變得生動有趣。某個人網(wǎng)站運用插畫來展示自己幽默風(fēng)趣的形象，人物輪廓線條選擇黑色，栗色的頭發(fā)，淺藍(lán)色的t恤，不同主題的頁面搭配不同夸張的表情和符號，既保證了個人網(wǎng)站的個性，又兼顧了網(wǎng)頁設(shè)計的整體性，讓人記憶猶新[5]。

4 結(jié)論

近年來，手繪又悄然在各種平面設(shè)計中復(fù)興，手繪元素的網(wǎng)頁藝術(shù)設(shè)計既強調(diào)了藝術(shù)表現(xiàn)性，還兼顧網(wǎng)站的功能性，實現(xiàn)藝術(shù)與技術(shù)的無縫銜接。手繪與網(wǎng)頁設(shè)計的融合應(yīng)用，使網(wǎng)頁設(shè)計的藝術(shù)視覺效果進(jìn)入了一個新的高度。本文從凸顯網(wǎng)頁個性、增強網(wǎng)頁趣味性、視覺藝術(shù)的表現(xiàn)、豐富網(wǎng)頁設(shè)計資源和獨特的用戶體現(xiàn)五個方面分析手繪對網(wǎng)頁設(shè)計的影響，并對手繪網(wǎng)頁設(shè)計草圖、網(wǎng)站logo、banner、插圖等其他網(wǎng)頁元素的應(yīng)用進(jìn)行探討。世界每天都在變化，網(wǎng)頁設(shè)計的不斷創(chuàng)新也會不斷產(chǎn)生新的元素，網(wǎng)頁設(shè)計師應(yīng)提升自身對新事物、新領(lǐng)域的敏感性，積極探索，努力創(chuàng)新，緊跟時代發(fā)展的步伐。

[1] 楊麗,陸婷.淺析手繪圖形藝術(shù)在平面設(shè)計中的應(yīng)用[J].職業(yè)教育,2003,(10):224-225.

[2] 楊璐.淺談網(wǎng)頁設(shè)計趨勢[J].科協(xié)論壇,2011,(12):108-109.

[3] 陳娜.手繪插畫在品牌形象設(shè)計中的應(yīng)用與研究[D].蘇州:蘇州大學(xué),2012.

[4] 鄭旻璐.手繪表現(xiàn)在網(wǎng)頁設(shè)計中的應(yīng)用[J].電腦知識與技術(shù),2013,(10):30-31.

[5] 郭燕龍.插畫藝術(shù)在平面設(shè)計中的視覺語言研究[D].內(nèi)蒙古:內(nèi)蒙古師范大學(xué),2014.

Application of hand drawing to web design

No presentation is more direct or simple than hand drawing at the beginning of web design since it has the artistic charm that is irreplaceable by web design software. Based on the analysis from highlighting webpage personality, enhancing webpage interest, expression of visual arts, enriching resource of webpage design and unique users’ experience, this article researched on the influence of hand drawing on web design, and discussed about the application of other webpage elements such as draft of hand drawing web design, website logo, banner and illustration, etc.

Hand drawing; webpage layout; web design

TP399

A

1008-1151(2015)12-0106-03

2015-11-12

2012 年新世紀(jì)廣西高等教育教改工程項目“基于TRIZ理論的工程技術(shù)人才培養(yǎng)模式與感知實踐教學(xué)研究”（2012JGB284）；2012 年廣西教改項目（2012JGZ202）。

黃曼瑩，廣西經(jīng)濟管理干部學(xué)院副教授，研究方向為計算機應(yīng)用。