[摘要]随着当前社会经济高速发展,计算机技术水平已非常成熟,人们已开始从对网站的浏览逐渐转向对网站的美观程度和艺术化表现效果的追求。因此,如果能在培养学生计算机应用开发技术的基础上融入一些相关的艺术欣赏力和效果表现力等方面的知识,才能让学生成为一个技术与界面美观并重的网页设计的综合优秀人才。
[关键词]网页:界面;艺术;美化
随着互联网的发展,周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计也开始慢慢上升到一个举足轻重的位置,一个好的网页界面设计小则可以让人赏心悦目,大则可以称之为艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来,它可以让设计师们的界面美观度达到极致的升华,也可以让界面变得暗淡和乏味。
在网页出现的早期,和设计发展的早期阶段一样,网页设计是以功能性为第一指导原则,以技术因素为主要考虑对象,以完成或实现必要的功能为目标。以字符组成的界面可以起到基本的信息传达作用,同时技术要求相对较低,易于实现,并且有较好的稳定性,故而这种形式的界面在很长一段时间内是人机交流的主要形式。而现在,网页设计并非是纯粹的技术型工作,而是融合了IT技术与美术设计两个方面。因此,对从业人员来说,仅掌握IT技术是不够的,还需要有一定的美术功底与审美能力。
作为一名网页设计师,首先要具备审美能力,而网页设计就相当于平面设计,网页设计师可以将平面设计中的审美观点套用到这上面来,所以平面设计的审美观点在网页设计上非常实用。如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美,这些都能在网页上显示出来。当然并不是页面做得好看,具有美感的网页就一定让人感兴趣,好的网页也要建立在有好的内容的基础上,假如没有内容,也是不能吸引人的。
据调研,在国外现已有专门的网站艺术设计师,而中国目前行业中的界面设计师多数由计算机类或美工类相关专业人员通过工作环境后期学习,转行而来的,缺少基础、专业、系统的培训。若能结合国内现状加紧网站技术开发人员的艺术设计能力的提高,那么在工作能便能更高的与客户进行沟通,开发客户满意的界面方案。这样可以使公司的开发过程更加顺利,也减少了学生本身在公司的适应期,公司对这类型人才培养会非常满意,必然会成为IT行业软件开发中的特色紧缺人才。
一、让学生了解优秀网页界面设计的几大要素
1、网站的整体风格
网站不仅具有良好的阅读功能,还需要页面整洁、美观,最好能有独特的吸引视觉的效果。如果没有独特的个性化视觉设计,一个网站即使在其他方面都考虑周全,也只会平庸而乏味,缺少良好的欣赏功能。
风格是独特的,是网站互相区别的地方,风格是有人性的,通过网站的外表、内容、文字、交流可以概括出一个站点的个性、情绪。或是温文儒雅,或是严肃庄重,或是执着热情,或是活泼易变,或是放任不羁。
2、色彩
界面设计的颜色运用,不仅可以给用户一个对网页的大致感受,然而对颜色谨慎的细节把握可以让用户感到颜色带来的舒适,从而根据颜色的巧妙配合给用户带来不同的视觉和心理体验。
在颜色的搭配细节中,色相起到一个重要的环节,色相搭配主要有以下部分细节用于网页界面设计中:
第一,单色搭配。一种色相由暗、中、明三种色调组成,这就是单色。单色搭配上并没有形成颜色的层次,但形成了明暗的层次。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。
第二,类比色搭配。相邻的颜色称为类比色,类比色都拥有共同的颜色。整个页面如果使用了类比的红色和黄色进行搭配,给人大气、有力量的印象。
第三,补色搭配。在色相环上直线相对的两种颜色称为补色,如:橙色和蓝色。补色形成强烈的对比效果,传达出活力、能量、兴奋等意义。
第四,分离补色搭配。如果我们同时用补色及类比色的方法来确定的颜色关系,就称为分离补色。这种颜色搭配既具有类比色的低对比度的美感,又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。
第五,原色搭配。三原色的搭配,红黄搭配是最受欢迎的一种搭配方法。但是红蓝搭配只有当两者的区域是分离时,才会显得吸引人,如果是紧邻在一起,则会产生冲突感。
第六,二次色搭配。二次色之间都拥有一种共同的颜色所以它们轻易能够形成协调的搭配。如果三种二次色同时使用,则显得很舒适、吸引,并具有丰富的色调。它们同时具有的颜色深度及广度,这一点在其它颜色关系上很难找到。
第七,全色相搭配。从色相环上取出所有的色相,开放、热闹、像节日一样的配色就产生了,全色相给人带来可以随时参与进去的气氛,这恰好是适合节日气氛的色相。
3、布局
美工设计师除了对色彩要有好的感觉外,对布局也要有很好的把握,组合的好坏直接影响作品的效果。网页设计中,设计者要注意到网页排版的“最佳视域”这一细节会引导用户去观看整个页面,并且能够创造出一种别称之为“Diagonal Balance(对角线平衡)”的和谐状态。人们在浏览页面或布局的时候,视线往往趋向于从左上角移动到右下角,因为人们通常都是从左至右、从上往下地阅读,久而久之视线自然会沿着这一路径移动。
其实做好布局设计也不是很难,无非就以下几步:
第一,布局准备。明确你表达内容的主体部分需要哪些必要的文字和图片。
第二,布局版式。关于布局的版式多种多样,在将重点内容放在最显眼的前提下,可自由选择版式。对于网页来讲,根据大多数人从上到下、从左到右的浏览顺序来考虑,应该将最主要的内容、图片等放在页面的左边和上边。
第三,精细布局。整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。
另外,网页设计时,也要各种元素(如图形、文字、空白)都会有视觉作用。图片和字体在页面排版中起到相辅相成的效果,字体可以给图片提供解说说明,而图片也给字体提供装饰、补白的效果。一个页面图片可以占据页面很大一部分,相比其他页面更具有视觉冲击力。网页界面设计不能只用文字,过长的文字篇幅会使网页显得单调。在网页中插入图片可以令网页生色不少。但图片也不能用得太多,简单的图片堆砌,会让人觉得累赘,而且影响网页的下载速度。所以网站中的图片既要美观、符合网站的内容,又要少而精,放在最需要的地方,起到画龙点睛的效果,增加网站的吸引力。页面设计中图片形象的远近处理会产生不同程度的视觉吸引力。根据页面的需要我们可以改变图片的位置、面积、数量和组合形式来达到页面的整体美观和保持页面的视觉冲击。同时,也决不能低估空白的
价值。如果你的网页上所显示的信息非常密集,这样不但不利于读者阅读,甚至会引起读者反感,破坏该软件的形象。在网页设计上,适当增加一些空白,精炼你的网页,使得页面变的简洁。
4、细节
“细节决定成败”,在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略,但对设计师来说绝不可放过,比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高,边框色/背景色、按钮的位置等等太多了。还是之前的话,只有你看得多了,比较得多了,才能看得出这些细节。有人觉得这些细节没有什么大碍,但多个不良的细节组合在一起就会让人觉得不舒服。
二、提高学生提高美术功底与审美能力
1、参观画展
打开欣赏艺术宝库的大门,看到东、西方艺术的博大精深,特别是对中国古代美术作品的欣赏,不仅要了解我国古代艺术的高度成就和特点,而且还要进一步激发民族自豪感和继承我国传统艺术的责任感。通过大量作品的欣赏,学会“古为今用,洋为中用”。
2、走进大自然,激发审美情趣
自然是一个天然的大课堂,自然界所蕴藏的美是无穷的,从植物、花卉、动物、人类以及所有的自然形象中,我们都会发现许多新奇而又极其美丽的形和色的存在。它不仅让我们开阔心灵,陶冶美的情操,还增长科学知识,培养探索精神,走进大自然,勤于观察,善于观察,做生活的有心人,感知、领会大自然中的一切,在心灵深处去感受美、发现美、创造美、观察校园里的花卉,观察房屋造型,观察来往车辆、人群等。
3、欣赏优秀作品
大量欣赏别人的作品,尤其是优秀作品,培养艺术鉴赏能力,这对于提高设计水平是必须的。看的时候不要走马观花,需要结合专业知识边看边想,仔细研究作品中值得学习的地方。网络上所有优秀设计资源的网站,这样可以省下很多时间和精力去提高学习效率。反复地欣赏优秀的作品。温故而知新,设计也是如此。收藏自己认为比较好的作品,过段时间再看看这些作品,往往会比第一次有更大的收获。
4、学习平面构成基础知识
平面构成结合网页讲述平面要能让学生知道不同的组合方式后形成的不同效果,差异化对比讲述,并让学生在网上找利用此理论的案例。色彩构成结合网页配色原理,命题以不同的环境,让学生给出不同的配色。针对一些抽象概念,展开联想,丰富学生想象能力和对物的感性认识。主要是常用的几种版式,各自的构图,网页字体大小,排版方式。讲述字体的发展、讲述宋体,黑体的结构、在宋体、黑体上进行拆字组合,以及在宋体黑体上进行二次变形设计等。
5、掌握相关的专业理论知识
多看专业理论知识以查漏补缺,同时更需要学习各种各样的知识。拥有丰富的知识,你大脑里的“素材”就越多,它们都将可能参与到你的设计里,你的设计才会生动饱满,富有思想内涵。所以知名的设计大师们往往都是全才,他们不仅精通设计。更精通其他很多领域。设计师需要懂得体会生活,了解世界。这需要实际调查和切身体会。否则你的设计就会容易脱离生活,失去感染力,因为设计源于生活并服务于生活。同时设计师需要了解世界,以增长更多的见识,保持最新的思想观念。一个思想落后、孤陋寡闻的设计师无论设计经验有多丰富,他的作品总会显得蹩脚和庸俗不堪。
只有懂得欣赏优秀网页设计作品的设计师才会提高的更快,因为从中可以借鉴到网页设计的精髓。便于转化成为自己的灵感,设计源于灵感,灵感源于借鉴。一名出色的网页设计师同时也应该是一名合格的人机界面设计师,因为无论从哪个意义上来说,网页设计是一种最典型也最流行的人机交互平台,它的载体就是网页。所以说网页设计也是人机交互界面设计。把握住网页设计好坏的标准,在以后的网页设计中更快更好的设计出独特的视觉交互作品。
参考文献:
[1]周陟,网页设计解析,清华大学出版社,2009
[2]鲁道夫·阿恩海姆,艺术与视知觉(新编)[M],湖南美术出版社,2008
[3](韩)崔美善,设计师谈网页视觉效果,电子工业出版社。2006