平面视觉元素在网页设计中的运用研究.pdf

保密等级保密年限保密等级保密年限 单位代码：单位代码：1041810418 硕硕 士士 学学 位位 论论 文文 论文题目论文题目 平面视觉元素在网页设计中的运用研究平面视觉元素在网页设计中的运用研究 作者姓名作者姓名 公茂兰公茂兰 指导教师指导教师 田辉龙田辉龙 学科学科(专业专业)美术学美术学 所在学院所在学院 美术学院美术学院 提交日期提交日期 2013.4.17 2013.4.17 独创性声明独创性声明 本人声明所呈交的学位论文是本人在导师指导下进行的研究工作及取得的研究成果。除了文中特别加以标注和致谢的地方外，论文中不包含其他人已经发表或撰写过的研究成果，也不包含为获得赣南师范学院或其他教育机构的学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示谢意。学位论文作者签名：签字日期：年 月 日 学位论文版学位论文版权使用授权书权使用授权书 本学位论文作者完全了解赣南师范学院有关保留、使用学位论文的规定，有权保留并向国家有关部门或机构送交论文的复印件和磁盘，允许论文被查阅和借阅。本人授权赣南师范学院可以将学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存、汇编学位论文。（保密的学位论文在解密后适用本授权书）学位论文作者签名：导师签名：签字日期：年 月 日 签字日期：年 月 日 I 摘 要 随着科技的发展和计算机的普及，网络已成为我们日常生活的重要一部分，网页设计也越来越显得尤为重要。网页作为一种信息载体，为设计者提供了新的设计领域和设计课题。网页综合了文字、图形、声音等多种信息载体，具有视觉传递功能。与传统的平面设计有着很多相似之处，是平面设计的发展和延伸。网页设计中强烈的视觉表现力和丰富审美情感是不可或缺的。目前我国的网页设计多为后台性研究，对网页设计技术制作研究比较深入，但是对前台性研究不足，缺乏从平面视觉元素角度进行的研究，不利于网页设计的长远发展。本论文从网页设计发展概况入手，到平面视觉元素的分析，再到情感因素在网页设计中的重要作用，最后到网页平面视觉元素的创新运用，用实际案例加以论证，理论结合实际，围绕这条主线进行探讨，主要研究平面视觉元素在网页设计中的运用和如何创新的问题。我国的网页设计和国外相比，还有很多差距，存在着很多不足，尽管已经有所突破，但是还远远不够，如何缩小这种差距，让我们的研究水平更上一层楼，是我们所要思考的问题。现代社会信息高度发达，知识更新换代较快，这就促使我国的网页设计必须顺应国际化的发展潮流，但同时必须具有中国地域特色的设计元素。关键关键词：平面视觉元素；网页设计；情感；运用词：平面视觉元素；网页设计；情感；运用 II Abstract With the development of science and technology and the popularity of computer,network has become an important part of our daily life,web page design is becoming more and more important.The web as an information carrier,offers a new design for designers and design topics.Web combines text,graphics,sound and so on the many kinds of information carrier,has the function of visual transmission.Has many similarities with the traditional plane design,is a development and extension of graphic design.Strong visual expression and rich aesthetic emotion is indispensable.Current web design for the background research,more in-depth research on web design technology production,but the front desk research is insufficient,lack of research,from the viewpoint of plane visual elements for web design,put the cart before the horse,not conducive to the long-term development of the web design.Profile from the web page design,this paper to the analysis of plane visual elements,to the emotional factors play an important role in web design,and finally into the web plane using the visual elements of the innovation,and then with the actual case to demonstrate,theory combined with practice,carried on the discussion around the main line,the main research plane visual elements in web design and how to innovate the application problem.Compared to web design in China and abroad,there are many gap,there are many deficiencies,although have a breakthrough,but still not enough,to narrow the gap,let us study level to the next level,is what were thinking about.In todays highly developed information,knowledge update faster era,this causes our countrys web design must comply with the international development trend,but at the same time must have a Chinese design elements of the regional characteristic.Key words:plane visual elements;Web page design;The Internet；emotion；apply III 目 录 第 1 章 绪论.1 1.1 课题研究背景.1 1.2.课题研究内容.2 1.3.课题研究的意义.2 1.4.研究的方法与思考.2 第 2 章 网页设计发展概况.4 2.1 什么是网页.4 2.2 互联网对网页设计的影响.4 2.3 网页设计的产生、发展及其特点.5 2.4 网页设计中平面视觉元素表达的需求.6 第 3 章 网页设计中的平面视觉元素.7 3.1 平面视觉元素的概念和内容.7 3.2 网页文字.7 3.2.1 网页文字的作用.7 3.2.2 网页文字排版.8 3.2 图形设计.9 3.2.1 视觉传达效果.9 3.2.2 网页图形艺术界面设计的合理布局.10 3.3 网页色彩设计.12 3.3.1 网页色彩分析.12 3.3.2 网页色彩用色注意事项.错误错误!未定义书签。未定义书签。3.4 网页版式设计.16 3.4.1 网页版式设计类型.17 3.4.2 网页版式设计的基本内容.18 第 4 章网页设计中平面视觉元素对人产生的情感因素.19 4.1 网页设计如何引发情感.19 4.2 网页设计所蕴含的情感因素.19 4.2.1 人对平面视觉元素的生理及心理反应.19 4.2.2 网页界面中文字设计对人产生的情感影响.20 4.2.3 网页界面中图形设计对人产生的情感影响.20 IV 4.2.4 网页界面中色彩搭配对人产生的情感影响.20 4.2.5 网页界面中版式设计对人产生的情感影响.21 4.3 设计师如何在网页设计中运用情感因素.22 第 5 章 平面视觉元素在网页设计中的运用及创新.23 5.1 目前平面视觉元素在网页设计运用中存在的问题.23 5.1.1 视觉元素的堆砌和信息内容的缺失.23 5.1.2 商业利益带来的干扰.23 5.1.3 千篇一律的模仿丧失了独立创造性.23 5.1.4 动态交互网页设计中的界面友好性问题.错误错误!未定义书签。未定义书签。5.1.5 技术因素带来的视觉尴尬.错误错误!未定义书签。未定义书签。5.2 网页设计对传统平面构成方式的运用.23 5.3 平面视觉因素适应网页设计发展的新特点.24 5.4 平面视觉元素互动设计的要求.23 5.5 平面视觉因素在网页设计中的创新运用.错误错误!未定义书签。未定义书签。5.5.1 文字的创新运用.错误错误!未定义书签。未定义书签。5.5.2 色彩的创新运用.错误错误!未定义书签。未定义书签。5.6 人性化设计与绿色设计.错误错误!未定义书签。未定义书签。第 6 章 网页设计实例.27 6.1 橡菲服装网页视觉设计.27 6.1.1 设计前的调研.27 6.1.2 给自己的店铺做一个诊断：.27 6.1.3 如果是一个新店？.30 6.1.4 建立品牌调性.30 6.1.5 橡菲理念及作品.30 6.2 Zippo 打火机奇胜专营店活动首页.34 6.2.1 背景文化：.34 6.2.2 首页设计过程.35 结语.40 参考资料：.42 赣南师范学院硕士学位论文 1 第 1 章 绪论 1.1 课题研究背景 国内状况：我国是发展中国家，处在一个全面发展的阶段，对于我们来说，很多领域都是全新甚至是空白的，同时，发展水平和创造力水平也是飞速的，网页设计也不例外。我国的网页设计具有以下几个特点：首先，起步较晚，网页设计水平低，技术含量不高。很多网页设计师思维禁锢，对网页设计原则及视觉元素的应用考虑欠缺，对软件操作生疏，在拼凑中完成对网页的设计。没有完善的网页设计师培训系统，不经培训上岗，出现各种设计问题。其次，商业气息严重，首页中放入过多的内容和广告，使整个网页版面杂乱无章。存在着外行指导内行的行为，客户为了满足卖货的心理需求，迫使设计师加入很多商业产品元素，违背了设计的初衷。再次，色彩传统化、地方化和平庸化。色彩作为网页平面视觉元素之一，在网页中的作用是举足轻重的。打开各类网站，我们能看到各种形形色色的网页，不久便产生视觉疲劳感。优秀的网页使我们感到舒适、具有美的视觉享受。我国的网页设计大多色彩单一庸俗，很少网页能吸引访问者的眼球。最后，网页设计模仿、抄袭严重，缺乏创造性。如果在看到两个相仿的网页，我们不会感到惊奇，这是司空见惯的。国内模仿国外，大公司模仿国外公司，小公司模仿大公司，对网页设计的创造性不足。造成这种状况的原因有：第一，对设计师的把关不严，专业技能不高。知识结构比较单一，不了解行业特点，对于网页设计新手，没有进行系统的培训。进行招聘时，有许多招聘人员以精通程序设计为主，这就使得很多网络公司都用程序员兼了网页设计的职务，但这并不能解决根本问题，也不利于国内网页设计的发展壮大。我们必须充分利用资源，引进先进的设计理念，取其精华，去其糟粕，达到资源的共享和利用。第二，网页设计和网页制作区分不明确。很少有人能分得清其中的区别，往往混为一谈。思想和技术侧重点不同，我们必须掌握好、利用好。第三，网页设计师不能兼顾信息结构的规划。网站建设策划对网页设计师来说至关重要，是关乎全局的工作。这无疑会加重设计师的负担，也是目前我国网页设计师所欠缺的，需要不断进取。国外状况：网页设计在国外的发展已经比较成熟，我们的设计风格有时要受它影响，因此，我们必须有师夷长技以制夷的精神，改变我国的网页设计现状。下面，我们来分析一下国外的发展状况：有自身的特点，已形成本国的网页设计风格。例如欧美用户：简洁、平淡而严谨。不喜欢花哨、色彩艳丽的颜色和设计风格；网页设计对行业的区分明确。不同的行业具有不同的特点，相互之间既有联系又有区别；功能全面。网页设计具有实用性和便利性。注重细节设计，更加人性化，从方便访问者的角度出发；重视对网页设计的投入和研究。国外的研究赣南师范学院硕士学位论文 2 著作非常成熟，我们的研究要借鉴和吸收。对于这些优点，我们要学习借鉴，不断创新，不断成长。1.2.课题研究内容 首先研究分析网页设计中的平面视觉元素。分别对平面视觉元素中的文字、图形、色彩和版式进行深入分析研究，结合图片图表加以论证，理论联系实际。其次，进行优秀的设计作品分析，发现其优点和不足，从视觉传达角度出发，归纳出其艺术价值，以及它是如何运用和创新的。最后针对具体的网站进行实例设计，在对平面视觉元素研究的基础上，提出具体的实用思路，遵循网页设计规范和原则，使平面视觉元素在网页中的应用研究更有实际价值和意义。1.3.课题研究的意义 网页设计在当今的社会发展中具有重要的作用，它是艺术与技术的高度统一，是艺术设计的继承和延伸。我国的网页设计处在发展提高阶段，和国外的还有很大差距，我国的网页设计研究著作基本上都是零散的，没有统一全面的著作研究。常见的网页设计论著多是从网页制作技术和制作软件应用这两方面入手，多为后台性研究，其中很少涉及到设计层面。缺乏从视觉传达角度入手对网页设计进行系统研究的论著。正是因为这样，我们迫切需要那些有实用意义和实用价值的理论研究。本文通过网页设计平面视觉要素的形成和发展过程的研究，从认知心理学的角度进行剖析，探讨网页设计中的情感因素，以浏览者为中心，研究视觉元素如何创新运用的问题。网页设计是平面设计的发展和延伸，不仅从自身出发，还吸收借鉴其它视觉传达领域的优势，相互学习和借鉴。综合了其它学科知识，离不开计算机和信息技术的发展。本课题就是从一个艺术设计者的角度，研究网页设计中多种平面视觉元素的综合运用与创新，是一个非常值得研究的课题。1.4.研究的方法与思考 案例分析法：运用国内外一些做的比较成功的经典案例，还有平时实践中参与的一些作品进行综合分析，网页设计师要把自己的设计理念和客户需求相结合，遵循网页设计规范和原则，创作出不同风格的网页界面。文献分析法：查阅大量有关网页设计的文献资料，对网页设计的审美需求和各种视觉构成元素进行分析；结合人们在浏览信息时的视觉习惯，探索网页视觉信息如何传达得更为有效，更为合理。让设计者充分认识网络，了解网络的特征，使设计更加适合于网络上的传播。对比分析法：网页设计与传统平面设计进行对比分析研究，使其更加清晰明了。调查法：课题研究旨在服务于网页设计的发展，把研究工作与实际的网页制赣南师范学院硕士学位论文 3 作紧密结合起来，在研究中总结，在实践中发现问题。可行性分析：第一，课题将定期召开课题研讨会，通过导师的指导、学生调查、问题探讨等措施；有计划、分步骤地推进本课题的研究进程。第二，依托网络技术环境，网页设计在网络高速发展的今天已经成为重要的设计门类，不仅是对平面视觉传达设计美学的一种继承和延伸，更是艺术与技术的高度统一。第三、理论和实践相结合，将研究工作与具体公司的技术创新相结合，进行实证研究，在实践中丰富和完善，研究出具有科学性和实用性的成果。创新点：在浩瀚的网页海洋里，如何让网页设计脱颖而出，吸引人的眼球呢？一个好的网页设计就具有此功能。网页就像人一样，第一印象很重要，往往访问者在上面停留的时间并不长，在这短短的几秒钟，要让访问者牢牢记住，并吸引更进一步的点击。而大多数的网页出现千篇一律，行业设计不明的问题，不能体现企业精神。这就需要网页设计师好好研究视觉元素。本论文就是从平面视觉元素出发，打破其传统的套用化、平庸化。创新是设计的灵魂。本文还大力提倡人性化设计和绿色设计，将有利于网页设计更好地传播。遵循网页设计原则以及平面视觉元素在网页设计中的应用与创新，针对具体网站自行创作了网页实例，这是对理论的最好应用。赣南师范学院硕士学位论文 4 第 2 章 网页设计发展概况 2.1 什么是网页 2网页通常含有文字资料、图像文件、可以在网页内执行的子程序、链接等元素，网页需要通过网页浏览器来阅读。网页的集合就是网站，网站的起始页为首页。网页可是任何一种形式，但通用标准是超文本标记语言（HyperText Markup Language,缩写为 HTML）。这种语言可用于创建辅助图像、声音、动画和链接的格式化文本，即网页。一个万维网网页由一个 HTML 文以及相关的图像和命令程序组成。万维网设计称为网页设计。它是对网页的编辑、排版等设计行为。这是平面设计的一个全新设计类型。另一种比较流行的语言为 XML,是 HTML 的衍生语言。它是一种元语言，可以自定义文档标签。当使用 HTML 制作静态网页不能满足网站的需要时，还可以使用如CGI,JavaScript 和 PHP 等技术，建立动态网页。网页服务器可以借助 CGI 调用外部程序，而不是简单地返回静态文本。JavaScript 和 PHP 这两种语言可以直接嵌入到 HTML 文档中，但使用方法不尽相同，JavaScript 主要用于客户端脚本，PHP 则主要用于数据库的访问。若要将网页发布到万维网，必须将网页文件上传到网站服务器中。2.2 互联网对网页设计的影响 在当今社会，网络技术迅速发展，给网页设计带来了新的表现空间。技术在信息发展中起着至关重要的作用，设计随着技术的发展而变化。浏览器的出现，起着在网页设计中连接信息技术和思想交流的作用，网页设计也在这个时候开始萌芽。互联网其实可以理解为两个用户之间的抽象界面，这其中网站是一种新的信息传播工具。网站是一种信息传播途径，比起传统传播来，相对较新。网络信息传播综合了声、像、图、文，视听、互动等特点，是多媒体信息技术。在未来的网页设计发展中，网页设计师必须掌握信息技术，灵活把握视觉新语汇的表达。未来的竞争是眼球的吸引，现代网页设计师代表着网络新文化的产生，他们必须对网络图文进行整合，设计出赏心悦目的网页界面，传播网路文化，具有强烈的视觉冲击和吸引人们的眼球。互联网将是设计者的新舞台，其信息资源无限、图文互动、高速高效的特点对传统设计媒体有着巨大的冲击，网络经济也对设计行业带来深远的影响。网页具有印刷物所不具备的独特优势。首先，网页的成本非常便宜。在这个提倡环保的年代，纸张越来越昂贵，网页显示出了它的优点。网页是一种电子读物，不需要打印出来，因此不需要纸张。它可以随时随地修改，不受地域、成本的限制，对一些相关的行业带来极大便利，例如电影、戏剧工作者。其次，网页的另一个优点是读者面广。对于免费的资源，大家都有多充分利用的想法。对于好的网页，每天的浏览量、转载量都达到几万、几十万。其影响也赣南师范学院硕士学位论文 5 就可想而知了。读者可以常看常新，随时追踪事件的发展。电子读物具有书籍、报纸所无法比拟的特点，它只需要放到网上去，而出版物需要编辑、排版、印刷到发行，效率明显更高。这里有所不同的是，出版物要送到读者的手上，而网页需要浏览者自己去取。最后，网页和电子出版物的最大不同点应该在于反馈。网页具有互动的特点，浏览者和作者以及浏览者之间可以进行相互交流，及时提出反馈信息，以便及时修改和得知有效信息。而印刷出版物由于各种条件限制，得到反馈信息相对比较难。因此，网络越来越受到广大用户的青睐。2.3 网页设计的产生、发展及其特点 3除了自然界的信息之外，我们能接触到的文字和图形信息资源已经相当丰富庞杂了。在计算机技术用于平面设计以前，从平面视觉传达方式得分看，这些信息承载于书籍、报刊、杂志、摄影、广告、邮件、建筑平面、标识导视系统等传统的平面设计模式中。从动态的视觉传达方式来看，我们所获取到的声响和影像信息，所依靠的传媒仅限于电视录像、电影、广播、电信等传统媒体。这些平面、影视媒体构成了传统的视觉媒介体系。但近十年来，继纸届媒介（报纸、书刊、杂志、广播、电视）后，第四媒体网络的出现，在 21 世纪的人类文明进程中产生了巨大的作用，Internet 互联网成为平面设计新的舞台，其信息资源无限、图文互动、高速高效的特点对印刷媒体带来巨大的冲击，网络经济对平面设计带来了一次变革。作为新型平面设计的网页页面设计，数字化界面运用了和物化界面相同的视觉构成元素。文字、图形、色彩等元素所表达出的丰富含义内容，同样在网页中达到信息传达和审美的目的。新的大众媒介数字化的传播手段网站，为我们承载了以前诸多媒体综合起来都难以承载的信息量，它以时效性、交互性、更新及时、不受时间、地域的限制、信息反馈及时、准确的特点，带领我们进入了信息化的时代，也为我们带来了全新的视觉阅读体验。随着信息技术的发展，网络化程度的不断提高，网络已经成为一种重要的传播技术工具，同时也成为我们的一种生活空间与方式，给我们的工作 75.、学习以及生活带来了更多的方便。根据网页视觉元素的不同表现，网页视觉表现成为网络信息表现与信息的传递中的重要部分。我国目前的设计走向问题，己经成为设计师们研究的焦点，无论是平面设计、建筑设计或者网页设计都同样会遇到这样的问题。在未来，网页设计呈现 5 大趋势：具备市场销售意识，且掌握扎实技术的专业网站策划人才成抢手货。在未来，网站策划复合性人才成为各大品牌公司竞争的人力资源。当下处在技术人才转型时期，网站竞争实力不高，正逐渐向市场销售人才转型，网站策划逐步走向专业化；人机工程学思想将大行其道。人机工程学是一门让技术更加人性化的科学。任何设计都要围绕人的需求展开，使网页设计的色彩、性能等更好地适应和满足人的需求，使人们的工作提供更加舒适、便赣南师范学院硕士学位论文 6 捷，提高效率；文化理念全面渗透网站策划实战。文化作为设计的最高层面，将是未来发展的趋势，从过去的技术竞争到平台竞，以及现在的销售竞争，正逐步转化；系统网站策划理论在五年内产生网站策划，是一门有趣的学问。它涉及多个学科，包括心理学、美学、人机工程学、工程技术、网络知识等，在未来 5年国内将有这方面的理论书诞生，我们更加期待有这样的专业团队出现，将实践经验上升为理论知识，推动网页设计的转型；在网站策划的专业化导致网站设计风格整合：简约与个性成主流。在未来的网页设计发展中，资源进行整合，将出现简约与个性两个风格。极至简约风格：指以最简约的方式，分配、表现页面内容，以引导客户直抵目标内容，避免了因内容过多而产生的焦点分散问题。许多大型及专业的网站一般采取此风格。个性十足风格：指以多样化的表现方式，设计网站。一般是针对一些娱乐性质的网站，丰富的图片，跳跃的文字，吸引眼球，具有强烈的视觉冲击力。2.4 网页设计中平面视觉元素表达的需求 4进入 21 世纪，随着国际互联网络的不断普及与发展，网络正在成为信息传播的重要渠道和交流方式，越来越成为人们日常生活不可缺少的一部分。互连网的发展已经深入到社会生活的方方面面。从网页数量的增长速度可以看出，网页不仅仅作为互联网上信息传递的一个载体，而且产生了巨大的社会影响。人们通过网页去获取新闻、天气和体育信息，看电影、听音乐和玩游戏，聊天和讨论问题，收发 E-MAIL（电子邮件），传输文件，网上教育，网上看产品及购物等等。对于社会经济而言，互联网能够大幅度降低交易成本，改变了传统意义上依靠信息传送进行经营的经济活动。在金融服务业，信息化进程早已展开：在娱乐、政府和教育等其他信息密集型的行业中，互联网发挥了很大的作用。互联网还能够在公司内部和公司之间改善合作，同时使公司能够与客户直接接触，从而大大提高了经营效率，促进了经济的发展。网页是构成互联网的基本元素，是通过视觉元素吸引受众并进而实现信息内容的传达,为了使网页获得最大的视觉传达功能，使网页真正成为可读强性而且新颖的互联网载体，网页的设计必须适应人们视觉流程的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，在网页信息的表达上，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，准确的利用各个视觉元素的功能与形式美法则，将其有序地理顺，各司其职、各尽其意，使平面视觉元素的组构有大小、主次、强弱、虚实的秩序与条理，充满张力的视觉中心，明确清晰的视觉导向以及均衡合理的空间布局。从而达到信息传达的准确与有效性。赣南师范学院硕士学位论文 7 第 3 章 网页设计中的平面视觉元素 3.1 平面视觉元素的概念和内容 相同的形式元素是艺术规律的共性。点、线、面是网页设计和印刷类平面设计中共同拥有的基本形式元素，在利用点、线、面进行设计时都具有相同的艺术规律。在网页设计中这些元素相辅相成，最终合理搭配才能形成一个完美的界面。其中最为基本的平面视觉元素就是文字、图形图像、色彩、版式。3.2 网页文字 3.2.1 网页文字的作用 网页设计师首先要对所要设计的网站进行全面的了解，包括企业文化、发展史、产品特点、受众信息等，然后进行综合分析，对网站的整体风格进行准确把握，以及对技术的精确掌握和对艺术的表达及创新。营造出与网站风格相适应的氛围，不同的主题网站有着不同的设计思路，引起思想、情感、形式等各方面的不同。使文字在整体环境的衬托下有效地传达信息。随着科技的发展，图片、视频、动画等虽然扮演着越来越重要的角色，但文字是不可替代的，特别是在一些新闻、科技、信息类的网站中，大量的文字信息更是不可缺少的组成部分。文字在网页中起着举足轻重的作用，是记录语言的符号，网站信息基本上是由文字组成的，它的作用是其它任何元素都代替不了的，文字设计的好坏直接影响到整个网站的视觉传达效果。网页中的文字具实现字意与语义的功能和美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。图1-1 新浪微博在2013新年来临之际做的一个送红包的活动页面，让红包飞这个主题就是运用了文字图形化的形式，结合中国传统元素剪纸，与整个页面交相呼应，营造了浓浓的新年氛围，生动形象。赣南师范学院硕士学位论文 8 图1-2 汤臣倍健保健品公司以“让爱先回家”为主题，以2013新年为背景，做了以上的新年活动网页，主题也是采用了文字图形化的形式。主要以“回”字做变形，心形充斥到字里行间，给人以回家的温暖感觉，整个页面喜气洋洋，年味十足！3.2.2 网页文字排版 网页文字字号大小一般用磅(Point)或像素(Pixel)两种方式来计算。12磅左右最适合网页文字的显示大小，在这个范围内看起来最清晰，有时候网页中的文字较多，这时候一般使用9磅的字号。文中的标题或者其它要强调的地方通常用较大的字体，页脚和一些辅助信息可以用小一点的字体。大字号可读性较强，小字号容易产生整体感和精致感。网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。一般页面字体不超过三种，因为字体种类过多，给人以凌乱的感觉。有些确有必要使用特殊字体的地方，可以制成图像，插入页面。行距的变化在网页设计中影响文本的可读性。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是因为：适当的行距会形成一条水平空白带，引导浏览者的目光，行距过宽，影响文本的延续性。行距的变化本身具有很强的装饰性，有时候为了美化页面，有意识地拉大和缩小行距，体现独特的审美情趣。如图1-5 文字的整体编排。页面中的文字要遵循统一的原则，正文中的文字一般是由几种单个文字组成的群体，要把握住它在整体中的布局作用。在网页设计中，文字的处理与色彩、图形等设计元素一样关键，从某种意义上来讲，所有的设计元赣南师范学院硕士学位论文 9 素都可以理解为图形。图1-3 图1-4 图1-5 设计师的意图：头像与名称的顶端对齐，微群等级图标与微群名称底部对齐。页面构建工程师的分析过程：因为微群等级图标的尺寸是16x16，高于文字本身的高度，为了在各浏览器下都保证这个对齐效果，我们采用了这样一种思路。3.2 图形设计 3.2.1 视觉传达效果 网页设计图形艺术需要一定的艺术感染力，网络中的网页成千上万，数不胜数，如何在这网页的海洋里给人留下深刻的印象，是值得每一个网页设计师值得思考的问题。网页设计图形艺术设计中页面元素的构成、板式布局、色彩搭配、空间表现等都要符合受众的审美心理。使受众拥有强烈的视觉冲击和艺术美感。网页设计中的图形拥有重要的导向和链接功能，具有很强的可操作性，如页面中的连接，点击它们则可以进入到其它的页面和站点，这些链接可以是文字也可以是图片按钮，它们的位置安排不仅影响到整个页面的布局，还影响到人们浏览是否方便。赣南师范学院硕士学位论文 10 3.2.2 网页图形艺术界面设计的合理布局 在浏览网页时，人们的视线通常垂直地落在计算机屏幕的中心，然后再向四周游动，网页设计师应考虑将重要信息或视觉流程的停留点安排在注目价值高的最佳视域，使整个网页的设计主题一目了然。在界面中，不同的视域给人浏览的感觉是不同的。网页设计师应根据视觉流程图合理安排适度的位置，突出重心，提高视觉表现力。我们应把握住以下几点：第一，符合人的视觉习惯；第二，避免产生视觉疲劳；第三，强化页面的主从关系；第四；合理安排视觉流程；第五，注重清晰的导航。为了使网站的信息、说明和文件更加清晰地呈现在浏览者眼前，而不是模糊看不清，就需要建立导航系统来引导访问者的视觉流程。网站的导航系统应该运用简短、易于理解的方式来呈现网站的诸多视觉方向。一个好的网站设计应该让其导航看起来简单自然、明确清晰、新颖别致，通过站点的某个地方跳转到其它层次的页面。图1-6 图1-7 赣南师范学院硕士学位论文 11 图1-8 图1-9 图1-10 赣南师范学院硕士学位论文 12 3.3 网页色彩设计 3.3.1 网页色彩分析 一个好的网页设计会给用户带来记忆深刻，好用易用的体验。从网页设计的版式、信息层级、图片、色彩等视觉方面的运用，直接影响到用户对网站的最初感觉，而在这些内容中，色彩的配色方案是至关重要的，网站整体的定位、风格调性都需要通过颜色，给用户带来感官上的刺激，从而产生共鸣。色彩是平面设计中不可缺少的视觉元素。颜色的感觉依靠眼的功能，是生理现象，同时通过感觉的冲击对心理起作用。每一种颜色都代表不同的含义。例如：暖色，如红色代表温暖、激动和刺激；冷色,如绿色和蓝色表示平静和满意感;黑色可使物体变得感觉较为沉重;而浅色可使物体变得更加轻盈；当黑色意味处于麻烦状态时，黄色则可能反映烦恼的对立状态。当然，并不是对所有人来说颜色都意味着相同和固定的含义，每一个人都有自己的理解和认识。黄色可能意味廉价，绿色可能意味金钱和贪欲，黑色则可能意味高雅或死亡。颜色的合理使用已经成为一门科学，它将是区分自己产品和他人产品的重要标识之一。从色彩研究的方向来看，色彩分为色调、饱和度、明度三方面，颜色的运用是纯色之间的关系，以及它们混合在一起的效果。我们可以从当前众多的网络应用中的实例，找到色彩运用的一些广泛的色彩关系和配色方案，通过这些色彩的关系，可以作为实际工作学习中配色的指南。图 2-1 单色 图 2-2 近似色 图 2-3 互补色 图 2-4 分割互补色 赣南师范学院硕士学位论文 13 图 2-5 三分色阶 图 2-6 双互补色 图 2-7 近似互补色 图 2-8 中间色 图 2-9 突出色 图 2-10 暖色 图 2-11 冷色 不需要描述性的文字，颜色就能赋予网站以意义。无论你是否打算为他们加上某种意义，颜色本身就有许多特定的印象。下面是一些大公司的网站，它们的颜色设计都代表一定的寓意，来看一下它们是怎样运用的。赣南师范学院硕士学位论文 14 图 3-1 耐克常常更新他们的网站，但通常还是黑色和灰色的色调，它通常是暗。黑色象征着他们产品中的力量，给消费者以销售优质产品的印象。图3-2 道奇的网站大多是黑色系，能让网站上的图片凸显出来。他们使用一种鲜艳的红色作为强调色。黑色给网站带来力量感，在一种精致与阳刚的氛围下展示他们的产品。黑色是一种不错的颜色，它能使产品看起来珍贵、有价值。红色则显示出激情和兴奋，说明它产自一家值得信任、质量有保障的公司。赣南师范学院硕士学位论文 15 图3-3 全食食品企业品牌的主色调和他们的网站色调一样，是绿色。全食食品以较高的价格售卖健康的有机食品。绿色代表珍视健康，纯天然产品，他们也用了很配绿色的淡黄色作为强调色，为网站增添了趣味性。图3-4 白宫的网站主要是白色和浅灰色，再加上一些蓝色和红色作强调色。白色象征着希望和自由，显露出平安和纯洁的价值。美国的代表色是红色和蓝色，分别代表着热情和能量、稳定与和平。赣南师范学院硕士学位论文 16 图3-5 亚马逊的网站大多是白色的，白色有着最佳的对比度和可读性。它还显露出整洁性，让用户能自由地浏览网站。以橙色和蓝色的强调色则让用户能感到安定、兴奋，也让他们期望找到最满意的采购。图3-6 百思买的网站的色调是深蓝色，显露出他们在电子市场中的稳定和实力。顾客在百思买上的大量采购使得他们需要安全感与平和感。黄色散发的快乐气氛让他们在采购时感觉到兴奋与趣味。3.4 网页版式设计 网页版式是视觉传达的重要手段。版式设计是网页设计的第一步，关系到一个网页的成败与否。虽然网页种类繁多，但都有一定的设计规律。任何设计都赣南师范学院硕士学位论文 17 要遵循审美原则来设计，网页设计也不例外，充分合理地利用视觉元素，将会令网页充满生气，事半功倍。网页不仅是信息发布的重要媒体，还要让浏览者通过版面的阅读产生美的遐想和共鸣。网络在人们的生活中发挥的作用越来越大，在各种形形色色的网页中，普通的网页已经不能满足人们的审美要求，网页必须在发挥基础功能的基础下赋予艺术的元素。3.4.1 网页版式设计类型 网页版式的基本类型主要 10 有：骨骼型，网页版式的骨骼型是一种规范的、理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。满版型，页面以图像充满整版。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。分割型，把整个页面分成上下或左右两部分，分别安排图片和文案。中轴型，沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。曲线型，图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。倾斜型，页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。对称型，对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。焦点型，焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。三角型，网页各视觉元素呈三角形排列。自由型，自由型的页面具有活泼、轻快的风格。图3-9 分割性 图3-10 满版性 赣南师范学院硕士学位论文 18 图 3-11 对称性 图 3-12 骨骼性 3.4.2 网页版式