大学生科研立项研究结题报告

编号： x

xxxxxxxxxxxx大学生科研立项

结题调查报告

项目名称网页交互中视觉导向设计研究

项目类别自然科学类

申报人 xxx

所在系别 xxx

指导教师 xxx

申报日期 xxxxx 　　　　　　　　　　　　　　

完成时间. xxxxxx

共青团xxxxxxxxxxxxxxx委员会制

网页交互中视觉导向设计研究

摘要：本小组通过对国内外著名的网站的研究与调查，网页交互界面的设计当中应该注重视觉导向元素的设计,比如；要使浏览网页的用户在网站中能够快速的从任何位置,都能够清楚的发现并找到指引方向的标识物,并通过页面上的图形、符号、颜色、多媒体、文字标识物等界面元素所承载的信息,准确抵达目的地，并使网页的交互井然有序。

关键词：网页交互、视觉元素、设计。

前言：视觉导向设计是为了使网页更符合美学的法则，符合人的人体视觉的法则，符合人们使用的方便快捷性，莎士比亚说过“一千个读者就有一千个哈姆莱特”每个人都有不同的想法，而视觉元素的设计就是把网页创造成能够被大多数人所喜欢所认可的手段，。为了了解广大网民对优劣网站中视觉元素设计的接受度，而做了问卷调查！并通过对调查的结果进行深入的研究。

问卷调查及分析

（一）调查对象与方法

为了解我院师生以及部分网民对网页中视觉元素设计的重要性的了解，本小组设计了《知名网站与普通网站设计的区别》的问卷，选取我院20##级到20##级全日制在校生为调查对象。问卷让学生在10分钟内完成，要求如实填写。其中发放问卷200份，回收160份调查卷。以及部分的网络问卷调查！

（二）问卷调查统计结果

全院师生对网页中视觉元素设计的重要性的情况如下：

问卷满分30分，全部调查对象平均得分为22分，73.333%的人对网页中视觉元素的设计重视。具体情况见下表1：

表1 鹿山学院网页视觉元素设计状况调查情况表

（三）、调查分析

1、得分在9分以下的

19分以下的在不同专业之间有一定的差别，其中以艺术专业所占的比率最小，比率为5%，其中比率最高的为计算机专业，占到百分之14.1%。 9分以下的艺术类学生所占的比例是最低的，术业有专攻，艺术生对设计美得鉴赏能力略胜一筹。

2、得分在9~21分之间的

1在这之间的各专业多占的比率也有所不同，男女所占的比率也略有不同，整体在30%~55%之间。

得分在30~24之间的

1从各专业得分比率来看，艺术专业学生所占比率要比其他专业的略高，占到了60%。其他的比率如下：全院男生：55.5%，全院女生：45%，计算机专业：50%，理工类学生:49%,非理工类学生:45.7%。

3、平均分

从平均分来看，有73.333%的人对网页中视觉元素的优劣起到关注，设计精美的网站使人流连忘返，浏览量是居高不下，反之则什么浏览观众！

根据以上数据结果，视觉传达元素是重中之重，而导致这一切的根本原因是现在大多数的网页设计，人们更多的考虑的是链接的顺畅和功能的实现，只是完成基本的框架搭建和功能链接，就把它当成成品开始使用了，导致了大多数的网页大同小异，毫无亮点。

二、研究的技术关键和主要技术指标

我们研究视觉导向设计，那么我们做的视觉导向应该能很好的被广大用户认知和理解，才能真正起到导向的功能。现在大多数的网页设计，人们更多的考虑的是链接的顺畅和功能的实现，只是完成基本的框架搭建和功能链接，就把它当成成品开始使用了，导致了大多数的网页大同小异，毫无亮点。因此从文字、色彩、图形等几个方面来进行重点研究。

1.文字是理性而根本的，其准确性要求要表达无误，否则会产生引导错误，甚至导致严重后果的发生。

2.色彩的导向设计。色彩在视觉传达设计当中可以起到“先声夺人”的作用，一般导向设计都运用比较醒目的色彩，以期发挥最好的引导或警示等效果。
3.图形是既有感性的形象，又有理性的内容和含义。在一定的范围内能迅速准确地传达出特定的视觉信息，起到文字和色彩都不能替代的作用。美观亲和的图形化界面与合理易用的视觉导向都没有得到充分的重视。网页交互中视觉导向设计使网站用户在使用体验到美观和易用性。

三、研究理论和观点

网页设计是集技术和艺术于一体的创新性活动，他是各高校培养学生创新能力和艺术美感的手段，更是各高校宣传自身的一种媒介形式。网页界面交互设计是一个复杂的有不同学科参与的工程?网页交互界面的设计当中应该注重的方面：

1 页面布局的合理与统一

网页布局的基本概念：1.页面尺寸，2.整体造型，3.页头，4.文本，5.页脚，6.图片，7.多媒体等。大多数的网页的布局设计方法是一种上下框架结构式,通常上方是导导航栏,或者动态的logo以及广告区域，下方为正文 (也有先正文在导航的)还有企业网站较喜欢采用的二分栏式布局,也就是左右结构的布局，这是一种清晰的分列两旁的框架结构,一般左侧是导航条,最上方有logo,右侧是主体内容部分或者CI，大多数的网站比较喜欢的一般是T字形局式的框架式样，这种类型框架特征是通常在网页界面的上方设置为主要的菜单导航条,中间分开，左边为连接搜索，右边为主体内容。此外还有上左中右结构式又称为3分栏布局式,,这是较常见的结构式，同T型框架式稍有区别的是中间部分为主体内容,右侧是网站较重要的导航区域。页面的尺寸也是十分重要的，设计时要考虑到页面的大小，比如：全屏在778×432分辨率在1024×768的情况下,页面宽度应保持在1002以内,网页界面的布局设计没有一定的绝对的结构框架形式,可以说都是根据网站性质的开发需要，根据网站所想传达传达的信息考虑,然后选择适合展现，传播的设计理念。
2.页面元素及功能性的统一
1网页界面中的文字是重要的视觉元素设计,各级界面的必须注意：1.字体，2.字号，3.色彩，4.行距，5.字间距，6.排列方式，7.强调等。比如：主标题文字，跟第二标题，正文的差别。文字是网民获得信息的第一途径，首先，你不能够出现错别字（这是重中之重），其次文字的排列要符合人的视觉习惯（一般是从左到右排列），文字内容也要分的开，比如（标题的颜色的明度，纯度，色相，要和正文有分得开）。
2页面视觉元素设计中的另一个重点，色彩的搭配，要根据色彩的HSB（明度，纯度，色相）属性，色彩的搭配要符合美学的法则，如：尽量不把大红大绿得颜色排在一起，HSB属性相近的要分开搭配等。还要了解颜色本身所表示的属性，如：黄色调代表光明充满希望；红色调代表热烈且刺激；蓝色调代表冷静,崇高与理智等。又如:春，夏，秋，冬季分别可以以嫩绿色，翠绿色，金黄色，灰褐色来象征！

3在网页界面视觉元素的设计中,各种元素所承载的功能都必须有相同的操作方法，通过对这些元素功能性的统一,使用户在浏览网页能够建立起一种了然于心的感觉,让网民在使用熟悉了一个网页界面后,切换到另外一个网页界面就能够很轻松的推测网页的出各种功能,网页文字语句理解也不需要费神，这样可以给浏览用户统一熟悉的感觉,不觉得混乱,让的浏览过程变得轻松自然,方便易用。我们主要可以从图标和文字两个元素来设计。图形大致可分为具象图形和抽象图形两类型,抽象图形用概括的手法升华图形,这类图形具有视觉冲击效果强和容易识别的特点,常见用于表达注意含义等,通常是把强烈的色彩和简洁易懂的抽象图形结合起来达到最佳传达效果，而具象图形通过具体的形象来表达和传达事物信息,它的特点是直接与明了,在网页界面中常见用于传达特定与既定的事物。在网页界面的设计当中,我们往往不是做一个两个的界面,而是有几十个甚至上百个的不同层级的界面,在这里我们就必须要把握住图形功能性表达统一，但在图形标志的功能性定义中,也要特别注意避免与已经既有的，既定概念的图形标志混淆使用，如已经行业标准化，国家标准化，国际标准化的图标符号等。
通过对国内外多个网站的调查以及对师生的问卷调查，对视觉传达元素的设计在网页交互中的作用有了，更深层次的了解，如果把一个网站比喻成一个人的话，那么网站的内容是它的灵魂，视觉元素就是它那光鲜亮丽的外表，网站的灵魂是不会改变的，那么怎么那这个网站得到升华呢，其实很简单，人靠衣装，佛靠金装，为网站的视觉元素进行设计，就是为网站镀上一层金光灿灿的外衣，使自己的网站与众不同，心动不如行动，要设计自己的网站，那以上述的调查结果为依据，以上述的研究理论为指导思想，让你的想象力奔跑吧！设计出独一无二的网站吧！

参考文献：

[1]董海斌，王丽梅，孙浩章-----网页界面设计中的平面视觉元素

[2]黄海燕，张辉.网页设计与平面设计[J].包装工程，2004，25

（1）：126-127.

[3] 张帆，罗琦，宫晓东.网页界面设计艺术教程[M].北京：人民

邮电出版社，2002.

[4] 李庄稼.现代色彩设计[M].北京：轻工业出版社，1987
[5网页界面中的视觉导向设计-----汤天然]