浅析网页界面设计的艺术化

２Ｏ１Ｏ　Ｏ５　西部大开发・中旬　

ｗＥｓＴ　ＣＨＩＮＡ　ＤＥｖＥＬＯＰＭＥＮＴ　

科技与网络　

浅析网页界面设计的艺术化　

朱桂萍　

（兰州职业技术学院，甘肃

摘

兰州７３００７０）　

要：在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分。网站建设越来越接近于一门艺术而不仅仅是一项技术。　

网页界面艺术设计，也日益被网站建设者所注重。作者结合教学经验，阐述了如何制作一个完整的丰富多彩的页面，主要从网页组成要素、版　

式设计、色彩、优化这几个大方面对页面设计进行描述，最后对其艺术设计原则进行了深入的分类和阐述。最后总结出在进行网页设计时，应　

注重技术与艺术的统一，力求形式与内容的统一，以期网页的显示达到快捷、美观的视觉效果。　

关键词：互联网；网页界面；艺术设计　

中图分类号：ＴＰ３９３．０９２　文献标识码：Ａ　文章编号：１００９—８６３１（２０１０）０５—０１７３—０２　

一

、

网页的组成部分　

使用冷色系（青色、绿色、紫色等），且色彩要丰富。　

一

个完整的网页大致包括文本、背景、按钮、图标、图像、表格、颜　

（二）色彩有柔软和坚硬感　

色、导航工具、背景音乐、动态影像等要素。网页设计者所要考虑的是　

同色相，明度高，则有柔软感。明度低，则会有坚硬感。女性站点，　

如何以感人的形式把它们放进页面这个“大画布”里。　适量选用柔美的淡粉色或高级灰，而男性类站点，就可以使用棕色，　

（一）图形、图像处理制作　

深蓝色。　

提到界面艺术化．在网页上插入一些精美、适当的图片是必要　

（三）色相　

的。我们常用的图片处理软件是Ｆｉｒｅｗｏｒｋｓ。它可以制作出传输较快的　从色相看，暖色给人的感觉华丽，从明度看，明度高的感觉华丽：　

ｇｉｆ格式的图片，占用空间非常小。相比之下，Ｐｈｏｔｏｓｈｏｐ制作的是ｊｐｇ　

从纯度看，纯度高的色彩给人的感觉华丽。由此首饰类站点可以使用　

格式的位图，有损压缩，象素小了就会出现模糊或者马赛克小方格，　

高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。　

所以我们推荐采用Ｆｉｒｅｗｏｒｋｓ处理网页图片　

（四）色彩的联想　

（二）动画制作　

红色：热情。橙色：温暖、欢乐。黄色：光明、快活。绿色：和平、新　

网页艺术设计，少不了动画的加入，这就要求设计者有艺术修养　

鲜。蓝色：安宁、平静、理智。紫色：优雅、高贵、庄重、神秘。黑色：恐怖、　

和对颜色的综合把握能力。在没有ＦＬＡＳＨ之前，用的是Ｇｏ　ｌｉｖｅ，后来　

死亡。白色：纯洁、神圣、清净。灰色；谦逊等等。如游戏站点，适合黑　

是在ｈｔｍｌ中嵌入Ｊａｖａ程序编写的动画．这要求设计者对Ｊａｖａ语言非　色，因为暗色感觉诡秘。旅游类站点，可以选用草绿搭配黄色。政府类　

常熟悉。随着软件的发展，有了制作动画的专门软件．现在我们用　

站点，可以使用红色、蓝色。时装类站点，可以选择高级灰、紫色等，突　

ＦＬＡＳＨ软件制作的动画，小巧迷人．只需作为一个．ｓｗｆ格式文件导　

出高稚氛围。校园类站点也适合绿色。科技类适合深蓝色。新闻类适　

出，再导人到网页编辑器里即可　

合深红色，或黑色，搭配高级灰等等。　

（三）文本的编写　

（五）对比色调　

一

般在网页中可以用网页编辑工具的“所见即所得”功能直接写　

即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、　

入文字，如用Ｄｒｅａｍ　ｗｅａｖｅｒ或者Ｆｒｏｎｔ　ｐａｇｅ等软件都可以进行文本　

黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果．给人　

的编写。为了体现站点的“与众不同”，可以根据需要选择一些特别字　

亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，　

体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广　

产生俗气、刺眼的不良效果。这就要把握“大调和．小对比”这一个重　

告体，体现亲切随意可以用手写体等等。目前常见的中文字体有二三　

要原则，即总体的色调应该是统一和谐的．局部的地方可以有一些小　

十种，常见的英文字体有近百种，网络上还有许多专用艺术字体下　

的强烈对比　

载，要寻找一款满意的字体并不困难。　

四、网页界面的优化　

（四）框架的应用　

在页面设计中，网页界面的优化是较为重要的一个环节。它的成　

框架是网页的常用形式，它可以使网页更为清晰，可以把不同的　功与否会影响页面的浏览速度和页面的适应性．影响观者对网站的　

页面超链接到同一框架中，使页面更加紧凑。一般框架用在小说浏览　

印象。　

页面，或者介绍图书章节的部分　

（一）背景与字体　

（五）表格的应用　

在资讯类网站中，文字是页面中首要构成元素．因此字体的优化　

表格在网页中使用最为广泛，可以布局、定位，使网页更加灵活。　

显得尤为重要。通常我们使用ＣＳＳ样式表指定文字的样式．将字体指　

我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。　

定为宋体，大小指定为１２ｐｘ，颜色要视背景色而定．原则上以能看清　

二、网页的版式设计　

且与整个页面搭配和谐为准。在白色的背景上，一般使用黑色，这样　

所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元　不易产生视觉疲劳，保证浏览者可以较长时问地浏览网页。　

素进行有机的排列组合，是一种具有个人风格和艺术特色的视听传　（二）分辨率因素　

达方式。同报刊杂志等平面媒体版式设计相比，印刷品都有固定的规　网页的适应性是很重要的，在不同的操作系统上，不同的分辨率　

格尺寸，网页的尺寸是由读者来控制的。这使网页设计者不能精确控　

下，不同的浏览器上，我们将会看到不同的结果，因此设计时要统筹　

制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品　考虑。一般我们在８００ｘ６００下制作网页，会得到最佳浏览效果。现在　

那样为线性组合，这给网页的版式设计带来了一定的难度　我们设计网页，一般要考虑８００ｘ６００和１０２４ｘ７６８两种分辨率．因此　

三、色彩的运用　

我们的表格一般为居中的７７０左右的表格，表格的宽度最宽不要超　

人眼对色彩非常敏感。打开一个网站，给用户留下的第一印象就　

过７７８。　

是网站的色彩，一个网站设计得成功与否．在很大程度上取决于设计　

五、网页艺术设计的建议　

者对网页颜色的运用和搭配。主页的色彩处理得好，可以锦上添花．　

要提高网页设计制作的整体水平，除了设计者努力提高自身的　

达到事半功倍的效果。在色彩的运用上，可以根据网页内容的需要．　修养，我们还可以在技术和技巧上提几点建议：　

分别采用不同的主色调以及与内容风格相适宜的颜色　

（一）主题要鲜明　

（一）色彩有冷暖的感觉　

优秀的１习页设计必须服务于网站的主题。例如，设计类的个人站　

如儿童类站点宜使用暖色系（即红色、橙色、黄色、赭色等）．不宜　

点与商业站点性质不同，目的也不同，所以评论的标准也不同。有些　

作者简介：朱桂萍（１９７４一），女，甘肃兰州人，讲师，现供职于兰州职业技术学院。　

１７３　

２０１０．０５　西部大开发・中旬　

ＷＥＳＴ　ｃＨＩＮＡ　ＤＥＶＥＬ．ＯＰＭＥＮＴ　

科技与网络　

情况下．“功能”即是“主题”，还有些情况下．“美”即是主题。例如，雅　

虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它　

的“功能”。而一个个人网站，可以只体现作者的设计思想，或者仅仅　

以设计出“美”的网页为目的。它的主题只有一个，就是——美。　

（二）形式与内容统一　

任何设计都有一定的内容和形式。内容是设计存在的基础，被称　

为“设计的灵魂”；形式是其外部表现方式。设计者只有将二者有机地　

统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个　

完美的表现形式，才能体现出网页设计独具的分量和特有的价值。　

因此，在网页设计中必须注意形式与内容的高度统一。　

（三）整体风格要统一　

形式上的整体性。这主要从版式、色彩、风格等方面人手。例如：在版　

式上，一个站点通常只使用两到三种标准色，并注意色彩搭配的和　

谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样．整个　

网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者　

完整的设计思想。　

参考文献：　

『１１张帆．网页界面设计艺术教程ｆＭ１．北京：人民邮电出版社，２００２．　

『２１梁景红．设计师谈网页设计思维『Ｍ］．北京：电子工业出版社，２００６．　

『３１姜恩正，黄静慧．设计师谈成功网页设计原则ｆＭ１．北京：电子工　

业出版社．２００６．　

『４１　ＳｔｅｖｅＫｒｕｇ．访客至上的网页设计秘笈ｆＭ１．北京：机械工业出版　

社．２００６．　

网页的整体性包括内容和形式上的整体性．这里主要讨论设计　

｛上接第９７页）　

的陈旧观念，在课堂上应注意学生教学的参与性．多采用启发式、诱　

导式、讨论式、互动式、演讲式的教学模式．在课堂外应开辟英语角等　

教师去越南国内高校参加相关的交流和培养，真正培养出一批业务　

能力强的越南语骨干教师队伍．同时．积极做好”２＋１”、”２＋２”的中外　

第二课堂，增加学生与学生、学生与老师之间的越南语直接交流和对　

话，让学生在主动学习中获得提高：其次．教学应充分利用信息化、网　

络化背景下的资源共享，开拓越南语网络教学平台．结合职业院校自　

身实践性和应用性特点，开拓实训室教学课堂，将越南的历史文化、　

自然景观、国际新闻、海外风情、、政治经济、风土人情、历史遗产等信　

息利用广播电台和现代化多媒体技术图文并茂的形式传授给学生．　

增强学生对越南语学习的认同感；最后．作为与东盟各国经济、政治　

和文化交流的前沿阵地，广西应充分利用其地理和位置优势，在越南　

语教学中开展与越南积极交流与合作．应贯彻”引进来”和”走出去”　

相结合的方针，”引进来”即多引进一批水平高、责任心强越南籍教师　

参与本校的越南语教学，让学生能获得真正本土化的越南语教育，同　

时开拓本校的越南籍留学生教育，打通本校越南留学生和中国学生　

越南语学习的平台：”走出去”即广西高校应注重输送本校的越南语　

（上接第１６６页）　

合作培养模式．利用国内两年的越南语学习时间打好学生越南语学　

习的基础，并通过越南一年和两年的留学学习时间提高学生越南语　

的理解和应用能力。　

３．建立科学合理的评价体系　

越南语教学的效果如何．其根本标准应当结合其专业，以实践为标　

准，笔者认为，依据当前实际，越南语教学的课程评价体系标准应参　

考相关专业和该行业评估的标准对学生进行形成性评价和终结性评　

价的结合。具体模式应该包括教师评价、同学评价、行业专家评价、社　

会评价和越南籍专业人士评价相结合科学评价体系，只有建立科学　

合理的越南语评价体系，越南语教学的效果才能在实际教学过程中　

有据可依，对教师的教学水平和学生的越南语应用能力的评价才能　

真正做到客观、公正。　

业道德、社会公德的基本要求及其法律规范要求；掌握中华民族优良　

传统道德的主要内容及社会主义道德建设的核心和原则．认识诚信　

道德建设的重要性；掌握我国社会主义法律的内涵、体系及运行机　

制，了解社会主义法治观念的基本要求．掌握加强社会主义法律修养　

的基本途径；了解我国宪法规定的基本制度，重要的实体法律制度和　

程序法律制度，掌握基本的法律知识。　

（５分）。　

ｂ、期末测评：４０分。　

Ｂ．学生自评互评：总分２５分。其中学生自评占１０分，学生互评占　

１５分。　

在教学实践中．笔者真切地感受到，学生参加各种能力训练项目　

的积极性很高，效果也好。“课前十分钟时事点评”经常出现学生排队　

抢机会的现象。“为父母做一件实事”给很多学生带来思想上的震动，　

尤其是那些生活在平时感情交流较少家庭中的学生。会计（３）０８１班　

的一位女生很想向母亲表达自己的爱和感恩，但又胆怯并害羞。在开　

展训练时正逢她的母亲过生日，在任课教师的建议和鼓励下．她先给　

母亲发了一条短信，收到回复后．又给母亲打了个电话。她在感想中　

写道：我终于跨出了第一步，也明白了孝顺并不一定需要金钱。这种　

践履型教学最初是２００６年下学期由笔者两人施行．一年后获得同行　

二、高职院校《思想道德修养与法律基础》的素质能力训　

练项目　

如何引导高职学生将《思想道德修养与法律基础》课程的理论知　

识自觉内化为思想道德素质和法律素质呢，笔者设计和实施了系列　

贯穿训练项目和单项训练项目。贯穿训练项目是指贯穿于该课程学　

习始终和学生日常生活中的项目．单项训练项目是针对某一学习单　

元而开展的项目　

三、高职院校《思想道德修养与法律基础》的学习评价方法　

《中共中央宣传部、教育部关于进一步加强和改进高等学校思想　

政治理论课的意见》指出，要改进和完善考试方法，采取多种方式，综　

合考核学生对所学内容的理解和实际表现，力求全面、客观反映大学　

生的马克思主义理论素养和道德品质。据此，笔者采用过程考核与终　

结考核相结合、理论认知与实际表现相结合，教师评价与学生自评互　

评相结合的综合考核方法，从思想素质、道德素质、法纪观念及理解　

运用所学知识分析社会问题的能力等方面全面评价学生。具体评价　

方法是：　

的认可。２００８年开始，践履型教学在学院所有思想政治课教师得到　

推行。　

注：本文为湖南省职业院校教育教学改革研究重点项目《高职文　

化基础课教、学、用技能型教学模式的构建》（项目编号ＺＪ—　

ＧＡ２００９０１８）阶段性研究成果。　

参考文献：　

ｆ１１张宥，新时期对高校思想政治教育中灌输理论的思考，安徽　

医科大学学生．ｙ－作部（处）网站，ｈｔｔｐ：／／ｘｓｃ．ａｈｍｕ．ｅｄｕ．ｃｎ／ＲｅａｄＮｅｗｓ．ａｓｐ？　

ＮｅｗｓＩＤ＝１４８．　

（１）评价内容：素质评价，即评价学生的思想素质、道德素质和法　

律素质。　

（２）评价方法及评价标准：采用百分制。　

Ａ、教师考评：总分７５分　

ａ、平时测评：３５分。包括人生规划书（５分）、心理健康分析表（５　

分）、爱国主义心得体会（５分）、实践家庭美德感想（５分）、择业与　

创业主题讨论会表现（５分）、参加公益活动表现（５分）、时事点评　

１７４　

ｆ２］周辉，浅议高校思想政治理论灌输中存在的几个问题【Ｊ］．商　

情，２００８（３）．　

【３】赵芳，思想政治教育灌输原则再探ｆＪ】．理论月刊，２００８（１２）．　

『４１编写组．思想道德修养与法律基础［Ｍ］．北京：高等教育出版社，　

２０ｏ８．１４．　

『５１吴潜涛．“思想道德修养与法律基础”课的性质、逻辑结构与特　

点…．思想理论教育导刊，２００６．