浅谈“鲜逸农庄”网页界面的创新设计-毕业论文

北京化工大学北方学院NORTH COLLEGE OF BEIJING UNIVERSITY OF CHEMICAL TECHNOLOGY （ 20XX ）届本科生毕业设计（论文）中文题目： 浅谈“鲜逸农庄”网页界面的创新设计 英文题目： The innovation of the introduction to organic food web interface design 学院： 艺术学院 专业： 艺术设计（视觉传达） 学号： 姓名： 指导教师： 20XX年 X 月 XX 日北京化工大学北方学院毕业设计（论文）浅谈“鲜逸农庄”网页界面的创新设计 摘 要由于网络传播的广泛性和高速性，网站已成为公司及个人与大众交流的一个重要平台，挑战着设计者的创造力和想象力。而插画元素的运用对于企业和个人形象来说无疑是一种全方位的艺术提升，有助于企业树立好的社会形象，也能比其他传播媒体更直观的展示企业的产品和服务。随着时代的发展，各种文化群体的意识在插画的表现风格上色彩缤纷，但他们始终与人的审美需求联系在一起的，电脑的运用使插画设计实现以传统媒介不可能达到的效果。没有学科的限制，没有特定媒介的限制，插画拥有跟其他表现媒介相互交融的力量，只要符合商品风格的要求就没有什么不可能。数字技术的今天使插画家拥有多变的表现方式，通过对网站中的插画元素分析，我们欣喜的发现很多企业的网站已经达到艺术性和商业性的完美结合。个人网站的设计也标新立异，国内设计风格的多样性呈现出百花齐放的模式。插画艺术在网页设计中的运用丰富了视觉元素的表现力，优秀的网页设计始终与人们的审美需求和个性张扬联系在一起，因此插画艺术在网页环境下的运用中注定包括更多的心理感受和文化内涵。关键词：插画艺术 插画风格 网页设计Innovative design on freezing drinks Webpage interfaceAbstractBecause of the wide and rapid dissemination of network, the website has become an important platform for the company and personal communication with the public, challenges the designers creativity and imagination. While the use of illustration element for enterprises and personal image is undoubtedly an all-round promotion of art, to help enterprises to establish a good social image, but also than other media more intuitive display of corporate products and services.With the development of the times, various cultural groups consciousness in the illustration of the expressive style of colorful, but they are always with peoples aesthetic demand together, the use of computers to make the illustration design to achieve the traditional media can not achieve the effect. No subject limit, no specific media restrictions, illustration has with other media of expression blend of strength, as long as consistent with the commodity style requirements there is nothing impossible. Digital technology now Angel illustrator has variable expression, through the illustration elements on the site in the analysis, we found many of the web site has reached a perfect combination of art and commercial. The design of personal websites are unconventional, diversity of domestic design style, showing a flourishing mode. Use the illustration art in web design has enriched the visual elements of expressive force, excellent web design always and aesthetic needs of people and personality publicity together, so the illustration art in the use of web page environment doomed to include more psychological feelings and cultural connotation.Key words: The art of illustration Illustration style webpage design 目 录前 言1第1章 网页界面中手绘插画的设计概述2 第1.1节 网页界面概述2 第1.2节 手绘插画的概述4 第1.3节 手绘插画在网页界面设计中的应用现状7第2章 鲜逸农庄网页界面的创新设计9 第2.1节 鲜逸农庄网页界面设计的灵感来源与素材分析9 2.1.1鲜逸农庄网页界面设计的灵感来源9 2.1.2 鲜逸农庄网页界面设计素材分析9 第2.2节 鲜逸农庄网页设计中图形的创新设计10 第2.3节 鲜逸农庄网页设计中色彩的创新设计15 第2.4节 鲜逸农庄网页设计中界面的创新设计15 第2.5节 鲜逸农庄网页设计中交互设计的创新15 第2.6节 鲜逸农庄网页设计中用户体验的创新15 第2.7节 鲜逸农庄网页界面的展示效果及应用领域15 2.7.1鲜逸农庄网页界面的展示效果15 2.7.2鲜逸农庄网页界面的市场应用领域15结 论25附 录26参考文献30致 谢31IV前 言 由于互联网传播的高速性，网站已经成为品牌传播和大众交流的最佳平台。一个好的个性化网站，一定要有独特的想象力和创造力。插画元素的合理化运用对网站的美化是一种全方位的艺术提升，不但能更有效的建立品牌和个人形象，还有助于树立企业的社会形象。网页设计是一种建立在新型媒体之上的新型设计。它具有很强的视觉效果、互动性、互操作性、受众面广等其它媒体所不具有的特点，它是区别于报刊、影视的一个新媒体。它既拥有传统媒体的优点，同时又使传播变得更为直接、省力和有效；一个成功的网页设计，首先在观念上要确立动态的思维方式，其次，要有效地将图形引入网页设计之中，增加人们浏览网页的兴趣。第1章 网页界面中手绘插画的设计概述插画的定义每个人都有独特的见解，普遍被用于现代设计，其中文化活动、商业活动、影视文化涉及颇多。不管是深思熟虑的创作或者是随意的涂鸦，都算是插画形式的某一个范畴。在网页设计中运用插画是一种崭新的表现形式，其直观的形象性有很好的视觉传达效果，很容易增添网页的美感和感染力。 第1. 1节 网页界面概述伴随着网络的病毒式传播，插画设计逐渐深入人心，插画设计的多样化风格也步入了一个全新的设计领域。1.1.1网页界面的概念每个网站都会有一个主页来表现网站的定位，传递产品的特点。主页涵盖了该网站的标志和连接其他页面的链接。我们只要单击有指向性的标题或者图片就可以打开下一级的页面。我们可以把网页看成是组成网站的最基本的单元，这个单元由文字、图像、声音、链接等元素组成。1.1.2网页界面的风格表现简约风格：随着互联网的发展，我们进入了信息大爆炸时代，网页上繁杂的信息，多余排版，让人视觉疲劳。简约风格的页面设计缓解了这个痛处，几个简单的标志和清晰的排版，让浏览者更加直观清晰的了解内容（如图1.1简约风格）。图1.1简约风格图片来源：/show/9676060.html 网页界面的风格和时装界的流行趋势一样，随着时代在变迁，也在不断的变化，近些年风格的表现大体为夸张、精致、简约、复古，其中尤其以夸张表现的风格最为常见。巨大的logo或者不相上下大小的标头。整个屏幕会被标头占据，上面会有一个重要的信息，在不点击任何东西的情况下，只要向下滑动鼠标，大标头就会出现，但是它不会强迫你的用户点击任何东西。另外夸张风格中还包含肥厚的字体，一般是大写字母。以前设计师会避开这样的字体，因为以前标志和标头都比较小，现如今和巨大的标头组合在一起之后，浏览者自然会注意到肥厚的字体（如图1.2界面设计）。图1.2界面设计图片来源：/copy/view/34117.html1.1.3网页界面的设计原则网页设计要遵循一些自己特有的原则。想要定位一个网站，要先了解该网站用户的特点，同时也要了解不同的用户特性。每个网页的目的不同，所以设计方案也就不同。为了达到网页设计的目的，必须对其界面进行美化，让用户感受到更强烈的视觉冲击。千篇一律的网站，总是令人厌恶。于是打造个性化的网页成为重中之重，人们总是更倾向于富有创意的网页，然而想要创作一个有创意的网页，就要从网页创作的初衷下手，不管是哪种风格都要适合网页的需要。要做到和谐的网页界面，首先是构图，色调的选取，色彩与色彩之间的搭配。文字大小及颜色字体的安排，文字与构图之间的排版都对一页面的统一有着影响。第1.2节 手绘插画的概述手绘插画是插画最早的表现手法，运用最传统的绘画工具表现其独特性和创造性的艺术形式。简单纯朴的画面流露出创造者的真实情感，用最简单的线条勾勒和色彩运用这种最质朴的形式能激荡出最强烈的视觉冲击力。1.2.1手绘插画的特点手绘插画是插画艺术的一种，具备其独特的创造手法。因手绘插画的独特性，表现出越来越多的形式，无论通过哪种工具来表现，都可以达到人们对艺术的追求。手绘插画中更多的是设计者自己内心的想法，插画设计相比较来说比较自由，正是因为插画具有此特点，才表现出插画特有的韵味。在现代商业社会发展中，手绘插画得到了越来越多人的喜爱和推崇，这也反映出人们在物质追求下对传统文化和价值的认同。自由灵动的线条。手绘插画能够通过艺术手法，加入设计者的主观情感让作品更具独特性，每幅插画都是不可复制的。如英国著名时尚插画家David Downton在他的时装插画中将时尚与艺术融合，用线条描绘出女性的柔美（如图1.3插画）。图1.3插画图片来源：/style/discussion/1134014/手绘风格不同于其他艺术设计，强调手绘痕迹，及画面通过各种媒介的呈现出一定得肌理。粗糙的油画布让画面色彩感厚重，立体质感强，给人以稳重的艺术感受（如图1.4插画）；图1.4插画图片来源：http:/www.topit.me/album/101605/item/1539081疏松的水彩纸让人回归自然，放松心境（如图1.5插画）；干裂墙面涂鸦更具创造力，给人以粗犷、奔放的感受。 图1.5插画图片来源：/blog/?id=135753050 1.2.2手绘插画的创意表现无论是设计还是插画艺术都必须要有好创意，手绘插画要给人们在视觉上留下深刻印象。根据人们的审美观点,通过表现形式的多样、灵活的手法和新颖的立意,使浏览者的视觉感受与心灵共通。手绘插画表现语言多样化，可以是工笔也可以是水墨或者线条素描。一幅手绘插画可以把多种材料整理在一起,通过材质的综合运用达到令人惊喜的效果。如日裔美国插画名师Kawasaki擅长在木板上进行创作，木质的纹理依稀可见，其朴实的质感与其飘渺清逸的画风相得益彰，形成作者独特的风格（如图1.6插画）。 图1.6插画图片来源：/show/ZMTU4NTI=.html表现内容的写实性、夸张性（如图1.7插画）、拟人性、装饰性等都属于手绘插画的表现手法。图1.7插画图片来源：/blog/?id=121671729第1.3节 手绘插画在网页界面设计中的应用现状传统的网页界面设计已经深入人心，插画的运用，可以提高浏览者的兴趣，放松身心，如今插画设计正在一步步运用在网站设计中。1.3.1手绘插画在网页版式设计中的表现形式现在一些个人网站、儿童网站都已经在界面设计中运用到了插画设计，插画设计的应用在一定程度上影响了网页的版式设计，分为了几种风格，下面进行分析。复古拼接。有的网页设计中，为了增强品牌的表现力需要手绘插画来表现。例如匡威的中文官方网站，大量集结着各种风格迥异的手绘插画，同时具有复古、环保、流行、个性的多种风格，表达出匡威品牌代表年轻人年轻活力的特点。各种引导文字也用插画来表现，充满趣味（如图1.8复古拼接）。图1.8复古拼接图片来源：/index.htm?cid=sem0713bdkw000401.3.2手绘插画在网页图标中的表现形式大部分手绘都是通过纸张来表现，由于网络的发展，网页界面设计更多的运用了手绘方式，从而使网页界面具有个性。绘画主题和绘画风格不一样使得网页的表现形式不一样，为设计带来了更多的选择 。在一些网页中，找到了一些应用了手绘元素的网站（如图1.91.10创意插画界面设计）。图1.9创意插画界面设计图片来源：/article/20130607/508386.shtml图1.10创意插画界面设计图片来源：/article/20130607/508386.shtml1.3.3手绘插画在网页界面中的重要性网络的发展使网页变的多元化，也造成了视觉上的疲劳。想想看，怎样才可以提高人们的浏览兴趣呢？一方面，网页设计中的美是一种通过视觉符号、艺术形象去认识到的。另一方面，通过设计师的艺术化渲染，激发人们的浏览兴趣。在网页设计过程中，设计师首先要根据主题在脑中形成一种画面，然后通过具体的形象表达出网页的感情色彩，最后运用各种元素，把各种视觉符号融为一体，转化为可视性的网页，激起人们对网页浏览的兴趣。插画设计可以在整个界面设计中表现上显示特有的艺术魅力。它要求设计师具有多变的风格语言和高超的表现技能，并能在网页设计的限制中充分发挥个性和意象的魅力。 第2章 鲜逸农庄网页界面的创新设计 随着国内外插画设计的兴起，插画设计已经风靡全球被许多人所接受，它的出现顺应了时代的发展和科技的进步，这种设计风格也被设计师们应用到了各种设计领域。界面设计的最重要的目的就是吸引网络浏览者的浏览量，下面就围绕着鲜逸农庄的网页页面进行分析。 第2.1节 鲜逸农庄网页界面的灵感来源与素材分析当前插画设计成为当前设计的主流风格，它的应用领域也被设计师们应用到个个领域，而且受到广大用户的喜爱和好评，它的最大的特点是能激荡出最强烈的视觉冲击力，所以通过它这个特点使我想到了现在网页界面过于商业化，于是采用插画形式来表现网页从而做一套网页界面设计。2.1.1鲜逸农庄网页界面设计的灵感来源网页设计是一种新型的设计，所以网页界面的灵感来自于插画的特点，打破传统的商业网页模式，采用手绘插画的形式，对界面进行设计从而更直观明了的表现出网页的视觉效果，图案选择手绘，使主题更明确一目了然，界面颜色采用鲜亮的颜色，并且将背景的颜色与每种水果的颜色相一致使界面更统一，最后做成网页展示，从而使插画设计与网页设计完美结合，更能完美的展示给大家，增强大家浏览网页的兴趣。2.1.2鲜逸农庄网页界面设计素材分析每个界面的图形都是采用自然界中某种植物等等一些素材进行设计，整个界面运用最传统的绘画工具表现独特性和创造性，使界面具有更强的视觉效果，并且更直接明了的表达有机食品的特点。网页界面的图案中，以插画中线性进行重新创作，运用线条的表达方式来使得画面更加的丰富和有清新的视觉感，不在像以前的颜色比较单一，更加的强调了其形式感。有机食品作为食品的销售，最大的特色就是天然、健康，因此页面的设计需要纯净，自然的灵感。2.2鲜逸农庄网页设计中图形的创新设计将插画设计与有机食品界面设计相结合，把每个水果的特点用插画的形式表现出来做成一套界面设计，用网页的形式展示每个界面，从而使人们更简单明了的了解有机食品的特点，增加人们的浏览兴趣。2.3鲜逸农庄网页设计中色彩的创新设计这套界面设计采用了插画设计特有的色彩，界面的色彩不在像传统网页中那样的单调，在现在的社会人们比较忙碌的工作，闲暇之余更容易接受比较清新的色彩，所以以水果特有的颜色为主色，既不失本来的特色，又添加了比较清新的感觉。2.4鲜逸农庄网页设计中界面的创新设计2.5鲜逸农庄网页设计中交互设计的创新2.6鲜逸农庄网页设计中用户体验的创新 第2.7节 鲜逸农庄网页界面的展示效果及应用领域我们的创作要回归市场，市场是检验我们设计是否符合大众的一项重要的指标。我们一切的创作设计都是要满足人们不同需求的，我们要满足人们的需求才能有更好的生存空间和发展空间。鲜逸农庄网页界面整体视觉效果统一，界面风格一致采用插画设计风格，整体色调和谐，画面更简洁明了更能传达主题。2.7.1鲜逸农庄网页界面的展示效果设计的目的主要是在于产品信息的传送与销售，结合上面的网