黃曼瑩

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

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

黃曼瑩

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

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

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

1 前言

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

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

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

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

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

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

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

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

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

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

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

2.5獨(dú)特的用戶體驗(yàn)

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

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

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

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

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

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

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

3.2手繪網(wǎng)站LOGO

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

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

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

3.3手繪網(wǎng)頁banner

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

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

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

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

4 結(jié)論

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

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

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

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

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

[5] 郭燕龍.插畫藝術(shù)在平面設(shè)計(jì)中的視覺語言研究[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ì)廣西高等教育教改工程項(xiàng)目“基于TRIZ理論的工程技術(shù)人才培養(yǎng)模式與感知實(shí)踐教學(xué)研究”（2012JGB284）；2012 年廣西教改項(xiàng)目（2012JGZ202）。

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