论数字图像的视觉性研究以网页界面设计为例 毕业论文.docx

盐 城 师 范 学 院 毕业论文 (设计) 论数字图像的视觉性研究以网页界面设计为例学生姓名： 学 院：美术学院专 业：平面设计班 级：10 （3）学 号：10173143指导教师： 2014年 4 月 21日数字图像的视觉性研究以网页界面设计为例摘要当下时代是一个信息化的时代，媒体的发达与网络的流行激发着网页设计这门学问的发展。本文主要通过研究各个成熟网站的视觉元素的特性来探索视觉元素在网页设计中的应用。阐述了色彩版面、图形图像、文字与字体等平面视觉元素适应网页界面设计发展的新特点。针对网页界面设计中的信息传达和视觉元素，提出了与平面视觉元素相结合的设计方法。【关键词】：数字图像；网页设计；视觉元素；信息传达th period is short. theyabstractmetabolic needs. many of the enzymes have special function and activity. endophytes can be separated from its host plants and grow independently. they can be cultured in the laboratory and the growth period is short. they are easy to survive and can be used to to obtain large amounts of target product through fermentation. key words saline reededophyte, morphological identification, pectinase cellulase 目录：（既是论文的提纲，也是论文组成部分的小标题，应标注相应页码。）1.网页界面设计：11.1.网页界面设计的重要性11.2.网页界面的六大类别” 1引 言（前言）在传统元素中，视觉元素展现的平台就是纸质媒体和印刷技术。设计能不能达到预期的效果与应刷紧密相连，印刷技术的好坏约束了视觉元素在平面设计中的传达，而数字图像通过电子显示屏幕直接传达到受众眼里，有着其显著的优势，其色彩形状等数据保存的是最完好的。21世纪，人类社会正经历着从原子时代向数字时代的转变，新世纪的互联网代表着新型的信息传达、交流方式，它使信息的传达突破了经济、政治、地域及文化的阻碍，使信息传达的速度、范围及效率都产生了巨大的变化。网页设计最为一门新的设计领域，即是平面设计在信息时代的延续，也是平面设计新的里程碑。网页界面作为数字图像的载体，从产生阶段就继承了平面设计的众多优势，从而为这种全新的大众媒体奠定了坚实的发展碑基。正文数字图像在我们生活中有着广泛的应用：电影、电视、动漫、图片、广告、摄影这些元素都可以以板块的模式呈现在网页中。网页作为数字图像的最大的媒介其中有很多学问值得我们去研究，视觉的传达主要依赖于二维空间的视觉元素和这些元素的组合构成方式。做好一个网页其视觉性元素的好坏起到关键性的作用，然而在国内大部分网页都是残缺品这不得不引起我们的反思如何设计出一个优秀的网页呢？我们必须从源头出发解决问题。1.网页界面设计：1.1.网页界面设计的重要性网页（webpage）是指一个公司或一个企业在全球信息网以html的格式给世界各地的的使用者提供最新信息，包括主界面和各子界面。它拥有目的性强、信息量大、准确度高、传播速度快的特点。如果希望信息很快传播的同时又要让使用者认可是非常难做到的的事，这需要经过设计者的精心布置。如果要做好这一点，必须要设计出一个可以让浏览者视觉感官及视觉习惯都能够适应的界面，这能让受众在第一时间内引起观看的欲望，并且长久的去关注，进一步采取相关行动，所以说主界面的设计好坏至关重要。1.2.网页界面的六大类别（1）搜索引擎类：搜索引擎类网页主要以功能及速度为主，注重页面分布的整洁性，不太使用过多的装饰元素，尽可能的提高搜索效率。因此其主要设计手法是将文字进行合理的排版。如：百度（2）大众媒体类：信息传达类网页主要以信息传达功能为主，因为其信息量比较大所以必须主次分明，以少量图片作为辅助信息传达的视觉性元素。如：新浪网新闻中心。（3）企业宣传推广类：从企业文化、理念的特有形象入手充分表现企业特征。如：nake。（4）电子商务类：其网站的特性就是为了让浏览者能够使购物轻松化便捷化，使浏览者在购物的同时能够将时间最大化利用，要求既要有效率的传达出实际的信息，又要抓住购买者的诉求点去设计。如：淘宝网。（5）交流平台类：其主要目的是为使用者提供一个能够交流的平台，注重实用性的同时又不能让人产生视觉疲惫的感受，设计偏简单化文字化。如：bbs论坛。（6）网络社区类：网络社区类是一种自由理念的网站，它不具有任何商业性质，设计风格完全取决于其地域、文化等特征，重视自由、愉快、舒适的理念。如：2.网页设计中的色彩的选择艺术设计工作者常常在告诉我们，不懂得欣赏艺术或不能注意艺术家所运用的各种色彩是件丢人的事。当然，这种说法在某种程度上来说是正确的，但是，他们光顾着欣赏自己的作品却没有考虑到受众的接受能力，即观看、看、注意和读解(seeing、looking、attending and reading)之间的区别，而所有的艺术却必须依靠这种区别。不是每一个人生下来就是艺术家，网页设计是服务大众的不是孤芳自赏，所以我们要从浏览者的角度出发设计作品。每一个人的视觉感受都是不同的，一百个人其中就有一百个哈姆雷特，作为艺术家、设计者应该从大方向掌握不同类型人群的视觉心理。比如：淘宝网站的浏览者其目的是为了购物浏览，他们需要的是信息量同时又能长时间的观看而不感觉到累。网页设计中的色彩视觉感受具有象征性、理想性、和谐性的特征。色彩视觉感受的理想性是指：设计师完全可以根据自己的意愿设置色彩，使固定的色彩模式加以变换，使形象条理化。当浏览者看到一个有色彩的网页时，其色彩作为刺激视觉感官的一种重要元素能激发出浏览者的直觉，使浏览者产生其主观的感情、感知。网页设计师首先应该是能把色彩要领运用自如的人，合理、巧妙的运用色彩能使网页设计的味觉、触觉、嗅觉，如冷热酸甜苦辣一样让受众能直观感受到。但需要注意的是网页的背景色对比不宜太强烈，这样容易使人产生视觉疲劳的感觉，在面对需要大面积的着色时应选用色彩纯度较低的，长时间的盯着艳丽的色彩时生理上不能接受。文字与背景应该协调背景是起到突出文字的作用，背景色不宜比文字颜色深，而且色差不能太小或者色彩不能太丰富，这样不利于文字的读取。不同性别、年龄、文化习惯的人对色彩的心里效应也会不一样，产生不同的心理感受。所以说网页设计者必须要抓住不同浏览者的不同色彩主观感受：2.1.主观色彩即个人主观的色彩认识，由于每个人、民族、国家的理解不一样，可能偏向于不同的色彩基调，必须考虑不同性别、年龄、文化、习惯、地区、民族的差异性色彩元素。2.2.客观色彩即多数人对色彩的普遍认识。例如，蓝色给人以冷的感觉但有同时又有肃静、规整之感；黄色和红色给人以温暖和热烈的感觉同时又有警告、提示的作用；金色、紫色给人以高贵的感觉同时又有浮夸之感；黑色给人以沉稳的感觉同时又有肃穆的感觉；灰色给人以干净朴素的感觉同时又有悲伤之感；彩色一般用于节日表示欢快兴奋的感觉但也可能是花哨的感觉。所以感情色彩也可以说是色彩感情，将其与网页页面设计想融合，使人们根据其认知、印象和习惯等进行联想，获得主观理解。2.3.各国色彩风格中国人喜欢红色、黄色、黄绿，不喜欢黑、白、灰三色，白色、灰色是的悲伤的色调，红色是喜庆的色调。在日本校服基本上都是蓝色、白色的，蓝色象征着年轻，象征着有活力。在葬礼上一般都要求穿戴黑色的衣服，以示对死者的尊敬。在办大寿或者是举行成人礼时一般穿戴红色的衣服。日本的神官和僧侣的衣物是白色的，在他们看来这样能给人带来洁净神圣之感，凸显他们的地位，而在中国则是运用金色或者紫色来衬托华贵的气质。2.3.网页设计中视觉色彩设计的应用分析色彩使人产生各种不同的心理感受，由于每个人的性别、年龄、文化、习惯等不同，对不同的色彩所产生的心理效应就不同，因此，网页版面的色彩设计要站从浏览者的色彩心理角度出发完成网页设计。2.3.1.电子商务类网站色彩设计电子商务类网站其页面设计风格偏简洁，注重信息的传达，要求其排版能够被浏览者更好的接受，是商家与客户的交流平台。其色彩的选择偏向于稳重的色调，不会使用太多的色彩。根据不同的产品、产品特性结合消费客户群进行色彩选择搭配，考虑产品性质、消费者的喜好。（如图2-1）淘宝网作为中国使用者最多的电子商务网站，因为它的商品种类较多，所以它在背景色的选择上偏向于干净整洁的白色，在看上去舒服整洁大方的同时又不让消费者产生视觉疲劳。以橙色作为主色调，使消费者产生温馨的感觉。因为电子商务网站的商品图片较多，选择橙色能够搭配更多的色彩而不会显得不协调，使整体版面看起来色泽丰满、视觉感受舒适化，这不得不得不佩服其设计的色彩选择能力。图片2-12.3.2时尚类网站色彩设计时尚类网站一般都选用偏向于简洁的色调，配合其高清晰度的图片进行精简的布局能够使整体看上去精简、时尚，这样做的好处是能够把页面中的高清图片最直接的显示在浏览者的眼中，给其留下深刻的印象。如图2-2国际品牌的bcbgmaxazria官方网站，该品牌的服装设计具有时尚、个性都市，能够博得很多消费者的青睐。网页的背景色彩运用了灰色与白色的搭配，体现出官方网站的稳重与庄重，版面的右侧有红色、深蓝色的图片，即遵守原有风格又通过增添了变化，增强了时尚感。图2-23.网页设计中的图形设计通过对诸多网站的了解我发现一个规律，大部分网站的图片信息多余文字信息，图片在网页一个网页中占据了很大一部分的版面，因为图片更容易被人们接受，特别是在中国，左脑是处理图片信息的，右脑是处理文字信息的，所以说图片的视觉接受能力是大于文字的。但这并不是意味着文字表现力与信息传达特征可以忽视，而是该让图片在视觉信息上辅助文字，帮助浏览者更直观的解读信息。因为图片能具体而直接地把所需要传达的信息高素质、高境界地传达给浏览者，使本来平淡无奇的事物变成强有力的综合信息，体现更强烈的表达性。图片在网页排版中能够起到吸引视觉的作用引导其阅读文字，这一点能够在新闻媒体类网站里很直观的感受到，好的标题好的插图往往更能提高点击量阅读量，图片不经能够吸引浏览者的目光还能起到辅助阅读的作用。网页页面设计的手法和平面设计有很多共同之处，在平面设计中的点、线、面的设计原理依旧适用于网页页面设计。语言的传递不能够跨越地域，即便是英文，而图片作为视觉的语言它的传递能够跨越种族、文化及地域的茶语有效的传递给每位浏览者。没有一个网页是能够说摒弃图片而存在的，有的网页甚至只有图形。图形具有引起人们的注意的能力，诱使浏览者去阅读，其原因就是图形不像文字那么枯燥，适当的应用图形穿插在网页设计之中，可以优化网页的视觉效果，提高其阅读质量、信息传达效率，吸引更多浏览者。3.1.网页设计中点的应用点作为版式设计中最小的单位，它能够被灵活的运用的各个地方，具有构图自由的特点，能够调节画面的整体效果活跃气氛。所有的造型依赖于点的构造，是视觉要素构成的基本元素。康定斯基说：“点本质上是最简洁的形”。在平面设计中点不仅存在大小和形状的差异，而且还拥有不同的组合方式。点还具有音乐的节奏和韵律感，它们通过连续、间隔及方向性来表现出时间感。(如图3-1)点通过不同的形式或组合方式能够产生不同的视觉效果。不难看出点在平面设计构成中占据着重要的作用。点除了圆形以外，还有方形、三角形、星形、自由形等形状。在视觉宏观角度上来看板块的组合就是点的排布。一般的平面设计中的点元素是静态的，网页页面设计中有时点是静态的，有时也可以是动态的。静态的点是指静止不动的点；动态的点是指通过多媒体技术让点在平面甚至是空间上动起来。因此网页设计中的点就能更加灵活多变，动态的点相对静态的点更能吸引浏览者的目光，因此点是网页设计中非常重要的元素，也是最基本的元素。在网页页面设计中，一方面可以运用点可以将事物传达的意念概括为点的结构，从而创造出各种各样的点造型，在画面中起到“点睛”的作用。另一方面也可以将点进行重复、渐变、密集的排列组合，产生不同的视觉形式。(如图32)相同大小、同一形式的点造型组成了曲折线结构，给人以律动感，清晰的表达了导航的概念，目光随着这些点的移动形成无形的线。从形式美的角度去重新认识网页设计中的点，合理的运用它的视觉特性，了解它的变幻规律是网页设计的基础，再在基础上结合人类视觉惯性和心理效应，用全新的设计模式与风格表现出来，才能创造出优秀的网页。3.2.网页设计中线的应用点的移动形成线，在现实生活中，随手画的一根线可以反映出你此时的心情，线是有性格的。在网页页面设计之中穿插各种优美的线条，或曲线、或直线又或者是折线，或粗、或细，能够使网页页面感情化，从而引起浏览者情感上的的共鸣。曲线具有婉转幽远的意境；直线简洁明了；折线曲折硬朗；虚线若影若现；细线温柔典雅。虚虚实实、曲折刚直的风格使得网页页面的感情浮现于浏览者的眼前。迈耶在视觉美学中写的一句话，“线条能产生一种视觉上的联系，并且是视觉艺术中各因素之间最为重要的沟通方式。”所以在设计网页时设计师更应注重作品中线条的运用。在网页设计中可以通过对不同性格的线或者不同类型的线进行组合能起到丰富网页视觉效果的作用。在今天线条更是被赋予了时代感，它在网页设计中起了举足轻重的作用。它除了塑造形象的作用以外还主要起分割页面空问布局的作用，线能将信息条理化，也可以将各个重要的信息连接起来，明晰地表达设计的脉络结构以便于浏览。3.3.网页设计中面的应用线的平移形成面，面分可分为平面和曲面两类。面是页面布局中不可缺少的元素，对面合理运用可以合理分配页面空间。“面形”的轮廓及其内部质感等因素使得面具有表意性。例如：面形的边框是虚线组成的时候就比实线边框的面显得柔软，这样具有缓冲视觉的效果。面的造型可用添加阴影方法来体现立体感，也可以通过改变其色彩、扭曲、透明度，这样就可以产生韵律、动态、透明和错觉的感觉。不同形状的面也能传达出某种意韵比如：矩形给人的感觉是工整，三角形象征着稳定，星形象征着闪亮或者能代表重点，圆形有着圆润生生不息的意境，六边形构图空间的完美利用，给人以科学、未来的感觉。网页设计中很多图形图像都采用方形，原因之一是网页制作时比较简便，方形属于直接、有效的设计元素。(如图44)学院进入页面设计，圆角方形的应用，使得页面感觉稳健大方，同时充满亲切和生命感。3.3.网页设计中图形的应用图形是网页设计的重要因素。“graphic”意译成中文就是图形， “design”的意思就是设计，“graphic design”翻译成中文就是“平面设计”，所以说平面设计就是对图形的设计。网页设计师可以通过对图形的设计的设计传达出一种理念，也就是说借助图形来传递设计者的思想，图形成为了设计师意念的载体，使图形成为信息传达的载体，并通过各种媒介传递到受众眼中，使其自主翻译成信息。在网页设计中合理的运用图形的信息传达功能，能够左右浏览者视觉流程，人类的视觉习惯是由左到右，可是适当的改变图形就能够影响这种视觉习惯。（如图4-6）如果图形的大小是一样的那么作为一般人的视觉流程是由左到右，可是改变了图形的大小及深浅，那么视觉不由自主的会由中心再到左边再到右边。这种非直接性的视觉语言更具有强烈的艺术魅力和个性色彩。4.网页设计中的文字编排文字在平面设计中主要表现为对信息的传达，根据信息传达和设计要求的不同也就要求对文字进行设汁。对文字的设计是研究文字的笔画、结构、字距、行间以及编排等艺术规律。字的设计不仅仅是为，求得形式上的美，形体与用色搭配的和谐，更重要的是应使每个字体形态都富有个性、明晰简练、易于识别，并表现每个词句的内涵与象征意义。(如图4-8)文字是信息传达中必不可缺的元素，在网页设计中文字部分通常占据不小的比例，其表现的好坏也影响到整个网页的视觉质量。网页设计的最大任务是在保证其功能性的基础上最大限度的提升视觉美感。现有不少网页设计者，缺乏对文字的理解和运用，未考虑文字编辑的整体效果，使其功能性与可视性背道而驰。刻意将板式放到第一位，忽视文字作为传达内容和表达信息的功能，导致页面繁杂凌乱，无法为浏览者提供清晰明确的视觉印象过多的装饰变化使人难认、难懂、难读。4.1. 网页设计中字体的选择文本的设计受到技术环境的影响很大，要想文本在所有计算机上都能正常显示，一般是采用计算机本身的字体，常用字体有黑体、宋体等，还有一种方法就是将文字图形化，但是这样会导致网页速度降低，所以不适合大面积使用。4.2. 网页设计中字号的选择网页版式中使用的字体应该要清晰明了，字体与版式的风格以及主题都该保持一致。一个版面中一般选择2-4种字体是比较适合的。版面的形象是受制于文字字号的大小，字号大的文字构成的版面就会给人留下自信、有力的印象，字号小的文字构图就会给人留下严谨、精致的感觉。文字设计风格要根据网页版式中信息内容的特点来设计的，不能脱离实际内容。例如政府部门网页的文字就应该庄严规范，字体造型有规有矩的；休闲娱乐类网站，字体应该轻快活泼，节奏感强。如图3，英国cupcake创意设计工作室，版式中对比强烈的文字衬托出工作室的前卫、创新、时尚。图35.视觉流程视觉流程是一个视觉传达过程是以人的生理和心理习惯的认知模式来进行的。视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。视觉心理的研究发现，人们在阅读一种信息时。视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。普遍的是由左至右，由上至下其注意值逐步递减，在此流动线上的个点，都会比流动线以外的任何点明显，这种流动线称为“视觉流程”。（如图4-12)视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。但有趣的是，视觉流程不是一成不变的，中国画中的“s”布局（如图4-12)与“计白当黑”的法则，会使界面空问形成“间离效果”与“极限”对比的尖锐化状态。心理学家葛斯泰在研究画面视觉规律时。结论为上侧的视觉诉求力强于下侧，左侧的视觉诉求力强于右侧。因此，界面的左上部或中上部称“最佳视域”。如图(412)空间的构成方面自然要注意对于最佳视域的正确选择与把握。网页中的多媒体动态元素会对人的视觉流程产生很大的影响。视觉流程在平面设计中有一定的规律可循，然而它是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。在网页设计中灵活而合理的运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确和有效性。6.网页设计中平面视觉元素的特性随着网络时代的发展，网页的应用已深入到人们生活的各个领域，同时它也通过其时效、精炼、速达的视觉语言达到信息设计交流和传递的目的。在网页界面设计中恰当地使用平面视觉元素语言较之其它语言来说，能收到更好的效果。作为一门全新设计领域的平面视觉语言它需要满足以下几个特性：6.1.注目性注目性是指页面形象要能引起浏览者视觉的注意。这种注意同视觉形象的结构、大小、方位、环境、色彩因素有关。现代社会环境，变化万千，信息流动性强，使浏览者的注意力不易集中，如果没有引起浏览者足够注意的因素，设计信息的传达就很难进行，于是加强注目性和视认度便成了网页界面设计师必须追求和注意的，因此在设计时往往采用概括简洁、生动鲜明的视觉语言，通过对图形或色彩的创意变化，将用文字或听觉语言都难以表达清楚的含义表达出来，这种表达方式利于吸引视线和注意力，可以产生事半功倍的效果。6.2.适应性作为信息社会中的视觉语言，要想达到信息传播的目的，就必须具有适应性特征。作为界面设计中的视觉语言，要非常重视现代社会的特点以及受传者的文化层次、生理、心理因素，从尊重浏览者的习惯心理和公认原则出发，体现出适应性特征，如果视觉语言运用中没有考虑到体现这一特征，就会出现页面形象和色彩设计的随意性，影响到信息浏览。6.3.记忆性所谓记忆性是指形象能长期地记忆于脑中，并能形成一定的条件反射。它充分利用各种构成因素，通过均衡、调和、动静对比、视觉诱导、结构比例等关系要素设计，使其成为强有力的图形构成。简洁、概括、通俗的视觉语言给受传者提供正确而印象深刻的视觉信号，并赋予网页界面作品新颖、醒目的艺术魅力，引起公众对视觉形象的注意和长久的记忆。6.4.确定性人的视觉、听觉等感官，都是人们心理活动的触发点。浏览者随着视觉信息的接受，总会产生一系列的心理活动，完成从兴趣到联想再到行动这一心理活动过程。视觉元素语言发挥作用亦是按照这一心理活动的规律，借助简洁的页面形象和色彩引导浏览者向一定的方向集中注意力从而产生正确的认识。所以，视觉元素语言立意都应明确、简洁、可靠，注意防止