网站界面分析和优化设计

王文震

摘要：本文以淄博职业学院动漫设计与制作专业教学资源库为例，结合目前网站界面设计的特点，说明了网站界面设计的一般性原则。重点突出了网页界面实用功能和审美功能之间的辩证关系。

关键词：网站；界面设计；资源库

网站根据其用途，理念的不同需要相应的氛围，比如教育机构、政府机关、游戏类、音乐类的网站的氛围是不可能相同的。如何在较短的时间内，使用户通过视觉效果认识到网站的用途，就需要适当设计符合网站特点的图像、颜色和布局。我们做网站设计应该沿用人民已经认同的大部分用户习惯，在此基础上设计自己的网站。下面以淄博职业学院动漫设计与制作专业教学资源库为例，谈谈网站设计的一般性原则。

一、界面设计

目前我院动漫设计与制作专业主要培养游戏动漫、影视制作行业美工方面的人才，因此我们在设计网站界面时应体现行业特点，不能设计的太严肃、古板。不能等同于机械、化工、计算机等专业的资源库网站。因此我们对游戏动漫类和影视音乐类网站的界面设计进行了分析得出如下特点：

影视音乐类网站界面颜色单纯，文字为主，一般都是黑字白底，配合彩色图片，区域划分井然有序。背景色也以单色为主，多为冷色调。

游戏动漫类网站界面，图片所占比重较大，颜色使用更丰富，多使用背景色以同类色、近似色为主，比如红色+橙色，或者蓝色+绿色，棕色系列等。Flash动画较多。

综合以上两类网站的特点，我们确认以橙色+黑色+白色的颜色方案设计我们的网站，同时添加大量的图片、Flash等元素提升网站界面的视觉效果。

二、颜色设计

颜色系统为整个网站结构决定了一个与理念相符合的颜色结构规则，表现出网站的整体性和统一性。我们的设计理念为严肃而不失活泼。在设计上充分考虑了颜色搭配不当造成的几种影响视觉感受的因素。如：

忌脏：背景与文字内容对比不强烈，背景与文字明度差异小，不易辨识。

忌纯：艳丽的纯色对人的刺激太强烈，不宜长时间关注。

忌跳：在纯度和明度上，色彩差别不要过于强烈。如果要用互补色，也要适当调和。减少面积对比，或者减弱纯度。

忌花：确定主色调，减少不同色相颜色，以3套色以内为佳。

忌轻：使用高明度颜色，而缺乏重色的话，会显得苍白无力。蓝色忌纯，绿色忌黄，红色忌艳。

为此我们对网站的主体色确定了以橙色+黑色+白色（背景）为主。

三、字体设计

在字体选择上，中文字体在网页上显示的最佳尺寸为：宋体12px、宋体12px粗体；宋体14px，宋体14px粗体；黑体20px。一个网站中最好把字体控制在3-4中以内，字体过多，会影响网站的统一性。

根据上面的原则，我们对网站内容的一级标题采用了黑体20px字体，二级标题采用宋体14px粗体，正文采用宋体12px。

四、导航设计

为更好的引导学生通过本资源库网站访问我们的资源，促进自己的学习。我们设计了良好的导航系统，主要分为七大菜单首页、专业建设、核心课程、案例中心、视频中心、资源中心、考试系统，同时还可以通过页面上的图片、文字等超链接快速访问自己需要的资源。

7大菜单中，因为不同的菜单所展示的内容不同，我们根据具体的情况为不同的内容页面设计了不同的界面样式。

1、专业建设页面

由于专业建设情况，主要以文档形式展示，我们采用了左侧导航栏、右侧内容显示、顶部显示类别的方式。

2、核心课程页面

由于动漫设计与制作专业共有六大核心课程，为了对六大核心课程有一个明确的介绍，同时用户又能直观的了解六大核心系统的不同，我们通过图片和文字相结合，并且在同一个页面显示的方式展示这六大核心课程。

3、资源中心页面

资源库，重点展示的是资源，为便于用户检索到本资源库所提供的资源服务，我们采用左侧导航、右侧显示资源列表的形式展示资源。同时对资源的类型，按照不同的方式进行了分类将资源按照媒体类型、应用类型、课程类型分了三大类，同时在每一个类型下面又细分了若干类，便于用户查找自己需要的资源。因资源数量较多，对于查找特定资源的用户，我们提供了资源搜索的功能，可以通过关键字去检索自己需要的资源。

4、视频中心页面

为更好的为学生提供感兴趣的视频讲解服务，我们按照慕课的理念，对每门课程的核心知识点单独制作了视频，同时为便于用户迅速找到自己需要的视频，设计了高效的导航模式，按照视频讲授方式的不同，分为了微课视频，教学设计视频以及国外的一些优秀视频。同时对每一类视频，又设计了二级菜单，按照课程去分了类别，便于用户查找。对视频内容也进行了缩略图展示，使得讲师内容更直观，易于用户浏览。

五、网页界面实用功能和审美功能之间的关系

网页界面的实用功能是最主要的，可以说是第一位的，脱离了功能美的形式美是没有意义的。界面是以实用功能为前提和基础，其审美功能必须以实用目的为导向，不能背离实用目的。

网页界面自从诞生那天起，就表现出了实用价值，当时的界面只包含实用成分而不讲究形式美感。直截了当地使用文字符号进行人机交流，界面的审美功能完全通过功能美来实现的，并没有考虑形式美的因素。这个现象也符合人类设计审美的一般规律，即是先满足实用功能再满足审美功能。

一幅网页界面设计作品的审美价值可以功能美为主要表现对象，也可以形式美为主要表现对象，但是不管怎样，功能美必须要作为审美价值的基础，并且不能被单方面取消。我们平常见到有形式美感十分突出的作品，但这并不意味着它可以改变审美功能的构成属性。这仅仅说明了它的审美取向的定位不同而已。个人网站的审美价值取向更偏重于形式之美，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为目的。但是它的最基本的实用功能是不能被取消的，否则是不能称之为优秀的网页界面设计的。

六、结束语

一个好的界面设计它突出的是功能，着重体现的是网站提供给使用者的是什么，传达的是什么信息。网页界面版式设计实际上没有规定的格式可循，在实际的网页设计过程当中，我们可以将所有在平面设计中体现出来的“新奇”、“独特”和大胆的东西，运用到网页界面设计中去。我们应该根据网页界面的具体内容和要求，勇于突破传统和形式框架的束缚，设计贵在创新和突破。

参考文献：

[1]何荣，浅谈网站界面设计，科技信息，2008年第26期

[2]黑格尔著 朱光潜译，《美学》第三卷，商务印书馆出版

[3]陈雷，网页设计基础[J]，艺術探索，2005，19（1）：75-76

[4]Ben Shneiderman，Catherine Plaisant，用户界面设计---有效的人机交互策略，电子工业出版社，2006.1

[5]马月，网站界面设计，北京理工大学出版社endprint