手绘在网页设计中的应用

黄曼莹

（广西经济管理干部学院，广西 南宁 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）。

黄曼莹，广西经济管理干部学院副教授，研究方向为计算机应用。