手繪在網頁設計中的應用

黃曼瑩

（廣西經濟管理干部學院，廣西 南寧 530007）

手繪在網頁設計中的應用

黃曼瑩

（廣西經濟管理干部學院，廣西 南寧 530007）

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

手繪；網頁布局；網頁設計

1 前言

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

2 手繪與網頁設計

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

2.1凸顯網頁個性

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

2.2增強網頁的趣味性

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

2.3視覺藝術的表現

近幾年，在充斥著重復性套用網頁設計模板的網絡中，網頁的藝術設計得到了人們更多的關注。網頁的視覺藝術表現在能夠給訪問者帶來美感，美感有來自于心靈震撼與共鳴的贊嘆，還來自于感官受到沖擊感受的視覺美，本文主要從視覺美感對網頁的藝術設計進行探討。手繪元素在網頁設計中更能直觀、形象、生動、鮮明地表現主題，融入手繪技術、方法、風格的網頁設計比傳統的網頁設計更具有藝術性。結合手繪元素的網頁藝術設計不僅需要強調藝術性，還需要注重網站的功能性，實現藝術與技術的無縫銜接。

2.4豐富網頁設計資源

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

2.5獨特的用戶體驗

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

3 手繪網頁元素的應用

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

3.1手繪網頁設計草圖

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

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

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

3.2手繪網站LOGO

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

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

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

3.3手繪網頁banner

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

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

3.4手繪網頁插畫

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

4 結論

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

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

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

[3] 陳娜.手繪插畫在品牌形象設計中的應用與研究[D].蘇州:蘇州大學,2012.

[4] 鄭旻璐.手繪表現在網頁設計中的應用[J].電腦知識與技術,2013,(10):30-31.

[5] 郭燕龍.插畫藝術在平面設計中的視覺語言研究[D].內蒙古:內蒙古師范大學,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 年新世紀廣西高等教育教改工程項目“基于TRIZ理論的工程技術人才培養模式與感知實踐教學研究”（2012JGB284）；2012 年廣西教改項目（2012JGZ202）。

黃曼瑩，廣西經濟管理干部學院副教授，研究方向為計算機應用。