Web界面设计可用性研究论文.doc

摘要
随着互联网技术的发展和网站设计研究的深入，以用户为中心的设计成为了网站设计主要的发展趋势。目前web时代的核心理念是真正以用户为中心和提供丰富的用户体验，这种新的理念就直接促使我们采用新的网页设计方法。网站的可用性直接关系到用户对网站的体验水平,进而影响到网站的市场竞争力。以用户为中心的设计理念就是要重视用户参与,强调网站设计的可用性,实现用户与网站的自然交互。因此,采用科学的可用性设计方法,对更好地满足用户需求、提高网站市场竞争力具有重要意义。
本次毕业设计是通过制作一个企业网站，全面理解和学习交互设计在web页面设计中的应用。这其中包括需求获取，界面设计和可用性测试三个阶段。涉及了网页界面设计相关概念，交互设计流程，认知心理学等方面的知识。

关键词：交互设计，需求分析，界面设计，可用性测试
ABSTRACT
With the development of Internet technology and web design of research, user-centered design to become a web design major trends.The core idea of the current web era is truly user-centric and provide a rich user experience, this new concept directly prompted us to design a new website.Web site usability directly to the user experience on the site level, thereby affecting the competitiveness of the site.User-centered design is to attach importance to user participation and emphasized the availability of site design, implement user interaction with the natural site.Therefore, the availability of the design using scientific methods to better meet customer needs, improve market competitiveness site of great significance.
The graduation project is to produce a corporate website through a comprehensive understanding and learning interaction design in web page design.This includes requirements capture, interface design and usability testing in three stages.Involved in the web interface design concepts, interactive design process, cognitive psychology knowledge.

Keywords: Interaction design,requirements analysis,interface design,usability testing
目录
摘要 I
ABSTRACT II
目录 III
第1章 引言 1
1.1 背景 1
1.2 研究内容及拟解决问题 1
第2章 需求分析 3
2.1 需求获取阶段 3
2.1.1 调查工作领域 3
2.1.2 组织需求获取 4
2.2 需求描述 6
第3章 交互设计 7
3.1 概念设计 7
3.2 物理设计 9
3.3 界面设计 10
3.4 数据库设计 12
第4章 系统实现 14
4.1 开发环境和工具 14
4.2技术基础 16
4.3作品介绍 17
第5章 可用性测试 26
5.1 设计测试 26
5.2 测试准备 27
5.3 执行测试 27
5.4 处理数据 28
第6章 结束语 29
致谢 30
参考文献 31

III
第1章 引言
1.1 背景
电子数字产品及网络的应用已经越来越深的影响到人们生活的各个方面，与这个趋势相对应的界面设计讨论、实践、研究也更加受到人们的重视。Web界面设计的可用性研究可以使用户能简单的、愉快的、方便的使用网站，使网站从形式上获得良好的诱导力，鲜明地突出诉求主题[1]。同时，应将技术与艺术依照设计的目的与要求对网页设计的构成元素进行艺术性的有机结合.这不仅仅是一种技能,更应该说是艺术与技术的高度统一[2]。
可用性(Usability，又译为“优使性”)，是一种以使用者为中心的设计概念，可用性设计的重点在于让产品的设计能够符合使用者的习惯和需求，而网站可用性设计的重点则在于让网站的设计能够符合使用者的习惯与需求，以期让使用者在浏览的过程中不会产生压力和感到挫折，并能让使用者在使用网站功能时，能用最少的努力发挥最大的效能。网站可用性的研究范畴包括网站设计的正确性、兼容性、性能、易用性、易学性、易记性以及安全性等七个方面[3]。其三个热点问题包括：一是可用性与创新之间的关系；二是可用性研究的经济效益问题；三是可用性研究和用户使用经验问题[4]。
人机交互领域经过20多年的发展，随着新技术的不断出现，尤其是互联网、移动通信、无处不在的计算机技术等的普及，人机交互领域已经扩展成了一门新兴学科——交互设计。人机交互作为一个独立的、重要的研究领域受到了世界计算机产业界的关注，并成为目前计算机行业的又一竞争领域。
目前国内外可用性研究的发展情况有着很大的差异，在国外对于可用性研究已经有了比较完整的评价体系，这方面的研究成果也比较多。但在国内，对于可用性的研究仍处于比较初级的阶段，并未形成自己的评价体系，虽然可以借鉴国外的研究成果，但还是需要结合本国的实际情况作出相应的改变，所以在网站可用性研究方面我们还有巨大的的发展空间和发展意义[5]。
1.2 研究内容及拟解决问题
交互式界面设计是以人机交互理论为基础的，并与其有着密不可分的联系。对人机交互的全面研究，以及对研究成果的实践应用，为交互性设计奠定了坚实的基础，并有助于创建可用性和实用性更好的用户界面。
网站的可用性包含了几个方面的含义：第一、可用性不仅是涉及到界面的设计，也涉及到整个系统的技术水平。第二、可用性是通过人因素反映的，通过用户操作各种任务去评价的。第三、环境期间因素必须被考虑在内，在各个不同领域，评价的参数和指标是不同的，不存在一个普遍适用的评价标准。第四、要考虑非正常操作情况。所以在本次设计的过程中，我们需要理解以下几点：
1. 认知心理学原理。
2. 网页界面设计的基础学科与知识。
3. 网页界面设计的相关概念。
4. 交互设计的相关概念。
5. 交互设计的设计流程。
6. 交互设计中考虑的因素。
拟解决的主要问题包括以下几点：
1. 如何获取用户需求。
2. 如何确定用户模型。
3. 选择哪些交互原则进行应用。
4. 如何设计可用性测试（为什么测试，测试什么，如何测试，选择参与者、测试者和观测者）。
5. 哪些颜色的感知特性对交互设计有影响。
6. 如何把界面交互组件很好的应用到界面设计中。
7. 如何利用图标与计算机进行交互。
8. 如何把文本很好的应用到界面设计中。
第2章 需求分析
可用性设计中的第一阶段是需求获取阶段。在这一阶段中，我们必须通过丰富的细节来确定和记录现有的工作流程。然后，我们需要把收集到的信息组织起来并将其文档化，最终的需求文档将从整体的视角涵盖工作的各个方面。这些内容将有助于设计一个系统，使得这个系统是合适的，并且不会减少生产力也不会减少工作者对工作的满意度。
2.1 需求获取阶段
目前，很多交互设计的框架和模型已经被发展用来构造设计过程。它们中的一些是已经定义好了，并且规定了具体方法的框架；另外的则提供了可以混合不同方法的松散框架。这些模型的共同点是他们包含关于工作领域的数据的手机，这些数据必须先被说明，然后才能应用到设计中去。本次设计获取需求阶段的参考框架图如下：
发现

解释
任务描述
需求文档
项目管理文档
收集 5W+H
启发式观察 过滤器
物理的
功能的
文化的

图2-1 获取阶段框架
2.1.1 调查工作领域
在开始收集关于工作领域的信息之前，我首先必须确定项目中包含的利益相关者，所谓利益相关者就是那些直接或间接包含到工作流程中的人，主要包括4种类型：主要的，次要的，负责人和间接者。本次设计中涉及的主要利益相关者为通过网站了解公司的潜在客户，次要利益相关者为通过网站了解公司及相关资讯的浏览者，负责人为包括我在内的开发设计及后期维护的人员。
当然，在最初的需求获取阶段，我也进行了竞争调查，浏览了类似的网站，并查找了关于企业网站制作过程中需要注意的原则，然后整合资源，把他们的设计和原则作为一个原型并且分析一些具体决策的正面和负面的影响。在这个过程中，我可以从不同的设计中了解到不同选择的意义，并运用到自己的制作过程中个。
2.1.2 组织需求获取
组织需求获取可以分为两个阶段：收集和描述。收集的两个基本方法是：观察和启发式。观察是通过观察人们在工作环境中完成他们的活动来获得有效信息，可以是在工作时间直接完成，或者利用看录像和听录音间接完成。启发式的方法也可以分为直接调查和间接调查，如：访谈，专题小组和问卷调查。收集过称图如下：

收集

观察 启发

直接 间接
直接 间接

结构的 非结构的 开放-封闭 约束
图2-2 收集过程
在本次设计中，我选用的收集方法是调查问卷，这是基于问卷调查所具有的一个优点：花费较少，但可以捕捉到目标用户大部分的想法。由于一些客观原因，这次的问卷调查只涉及了公司往来的客户。具体的问卷内容如下：

图2-3 问卷调查
虽然本次调查涉及的范围不是很大，但是还是在收集到的这些问卷中总结出了以下几点：1.用户对原版本网站的界面设计普遍不满意，结构划分不够清楚。2.信息更新不及时。3.部分功能没有得到实现。4.公司介绍和服务项目介绍不够详细，以至于客户无法直观的了解公司的相关情况和业务。所以，针对以上的问题，我在设计过程中，做的相应的调整。着重设计了页面以及页面的布局，同时完善了公司留言簿的功能，把用户关注的公司介绍和服务项目放在了首页醒目的位置，并在导航中添加了相关项目。
2.2 需求描述
在完成信息收集后，我们进入了描述阶段，描述是头脑风暴会议和团队会议上运用各种方法和工具完成的。主要的工具包含以下几种：任务分析，故事板，用例，主要利益相关者档案。而本次设计中选用的工具是任务分析。任务分析是记录人们如何完成任务的一种方式。我们可以利用任务分析来了解通过观察和访谈目前参与工作流程的人收集到的数据。这种方法有助于我们理解过程、功能、对象和参与到工作中的人，并且给我们一个确定需求的框架和基础。任务分析涉及工作流程的各个方面，那些自动化的和那些计算机系统的外围设备。它将帮助我们了解新的系统如何融入现有的工作流程中，以及它们怎样受外部过程的影响。
任务分析有两种方式：任务分解和层次任务分析。这两种方法不是相互排斥的，它们可以联合使用来完成任务分析。任务分解包含行动的原因，执行任务的人和完成任务需要的对象或信息。而由于时间关系，本次设计只做了任务分解部分，具体任务分解如下：
目标：完成宁波世明会计师事务所网站界面设计。
计划：根据自己的时间安排设计的进度。
信息：网站完成所需要的资料，调查用户的联系信息。
方法：问卷调查，电话，面对面交流。
步骤：需求分析，界面设计，可用性测试。
第3章 交互设计
在需求获取阶段收集、整理和了解足够的信息之后，我们开始此次项目的设计。设计阶段并不意味着需求获取阶段的结束。根据开始的迭代思想，当在设计阶段发现新的资料或者需求时需要返回重复以前的活动。如果要验证概念设计或物理设计的某一方面，可能需要返回去观察整个工作流程，也可以返回去测试某种设想，这种设想是设计阶段真正的用户在实际工作流程中提出来的。虽然这个阶段需求获取会大大缩减，但还是不是会用到[6]。
3.1 概念设计
设计的第一步就是系统的概念设计，包括拟议设计的信息空间的组织。在概念设计中，可以测试各种设计想法，判定它们是否符合需求获取阶段的所有需求文档。基本上，在概念设计的部分，我需要做到以下几点：
1. 提出基于特定目标的设计方案。
2. 创建具体的设计图标。
3. 根据图标衡量设计方案是否可行。
概念设计的工具包括以下几种：
1. 头脑风暴
2. 卡片分类
3. 语义网络
4. 角色
5. 情景
6. 流程图
7. 认知走查
8. 用例图
这些工具应结合使用，而不应相互排斥。在本次设计中，我应用的工具是卡片分类和流程图。
卡片分类可以用于以用户为中心的分组。在设计阶段，我们要思考如何组织需求获取阶段收集的各种信息。卡片分类是一种以用户为中心的方法，它可帮助将菜单、控制和网页内容的信息分组，并生成基于用户的菜单、按钮和页面导航的链接标签。
在本次设计中，我将网站的各个板块作为分类依据得出结果。具体卡片分类结果如下：
首页
公司简介
首页
服务项目
公司简介

咨询
公司动态

咨询
在线调查
政策法规

政策法规

首页
政策法规详细内容
首页

公司动态详细内容
咨询

公司动态

咨询

首页
服务项目

首页
咨询

咨询

图3-1 卡片分类结果
卡片分类虽然有快速并易于使用，能揭露深层结构等优点，但是也会存在很难浏览更多分类的缺点。所以，在使用卡片分类的同时，我也使用了流程图工具，它可以确保设计没有死角，确保那些经常跳转的信息相关的页面之间的导航比较简单。具体流程图如下：
主页

咨询
在线调查
政策法规
服务项目
公司简介
公司动态

填写咨询内容
服务项目详细内容
政策法规列表
公司简介详细内容
公司动态列表

政策法规详细内容
公司动态详细内容

留言板
、

图3-2 流程图
3.2 物理设计
在完成概念设计之后，就可以开始考虑物理设计了，预想系统看起来会怎么样，它需要什么组成，屏幕应该怎么布局。该阶段可以使用的工具包括：低保真原型，评估，层次框架图，功能原型。在物理设计过程中，我选用的是工具是层次框架图，各个页面的层次框架图定义了基本的页面规划和屏幕组成。各个页面的层次框架图如下：
LOGO

网站Banner

网站导航

服务项目的 公司简介
列示 在线咨询

公司动态

网站界面 相关政策 咨询列示
信息反馈

网站底部

图3-3 首页层次框架图
LOGO

Banner

导航

在线咨询

不同页面显示其相应内容

咨询列示

底部

底部

图3-4 其他页面层次框架图

3.3 界面设计
界面的说法以往常见于人机工程学中。“人机界面”是指人机间相互施加影响的区域，凡参与人机信息交流的一切领域都属于人机界面。 从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。网站界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性[7]。
界面设计过程中，我主要从颜色，组件，图标和文本四个方面的因素来考虑交互性。
颜色在交互设计中是一种有用的工具，但它依赖于人类的感知，人类的颜色感知是一个复杂的问题。一般而言，对大多数人来讲，视觉感知器官有着特定的特征和局限性，但也会因为个人的喜好有所不同[6]。
在交互设计中要考虑颜色的使用，多个研究表明应用颜色不好的系统有潜在的降低用户性能的风险。目前，已发现学习环境中使用红色、蓝色、绿色和黄色最有益处。而本次的设计，由于公司的LOGO是蓝色系，所以结合可学习性来说，我的网站整体色调选用了不同层次的蓝色[8]。
在考虑完整体色调后，就要避免颜色组合产生的不和谐效果。在这次的设计中，就要避免在蓝色背景上加深红色。
GUI由各种各样的组件组成，有时统称为窗口小器件。它们是组成界面的基本要素，由窗口、图标、菜单和指点设备组成。而针对于本次的设计，我主要需要设计的是图标。
图标是一类标记，在认知复杂性方面具有意义深远的地位。它们在直接操作界面上起着重要作用。如果它们被合理设计，可能提高用户的经验。它们也可能带来模糊不清的风险，引起用户迷惑和挫败感。研究表明，人们使用图标对象比使用文本对象能更好的完成任务。本次设计中使用的图标比较少，主要是因为大部分的内容需要通过文字来表述，当然会在适当的地方添加一些合适的图标，用来使用户能更好的理解。
文本是交互设计中的一个重要的因素。在计算机屏幕上往往有很多与文本信息相关的任务和目标：界面控件上的标签，为用户提示它们的功能；图标有工具提示；菜单上有标题和选项；上下文帮助有助于解释控制的功能和过程。
在计算机界面中出现许多不同的文本形式，从菜单的标题到超链接及工具提示等。它们的目的不同，作出的处理也应该不同。我们把文本分为两种类型：注释文本和设备文本[9]。
注释文本使得系统的状态或功能可见。例如：在本次设计的咨询留言页面，我用文本注释了填写内容时需要注意的事项，避免用户在填写时再发现问题。

图3-5 注释文本
设备文本是关于系统内在功能的，它是“起作用的文本”。通常可分为两类：控制和超链接。
控制——设备文本常常和屏幕上的控制相关。例如：按钮、复选框、单选按钮、图标。这些控制组件需要标签来描述它们的功能和操作。尽管看上去像是解释性文本，但这些控制组件及其标签是被视为一个整体的。
超链接——超链接存在于网页和导航菜单中。根据上下文的不同，连接到的内容也各有不同。然而，导航菜单往往包含描述性和语义一致的链接。
交互设计中的文本符合以下两个原则：
1. 易读性。这是首要考虑的因素。如果易读性降低，那么阅读的理解力、速度及准确度都会降低。
2. 可读性。应尽量使用用户可理解的语言，同时避免使用专业术语[6]。
3.4 数据库设计
表3-1 留言公告表
CID(公告编号)(主键)
Int
不允许为空
CTitle(公告主题)
nvarchar(100)
不允许为空
CTime(公告发布时间)
Datatime
不允许为空
表3-2 网站信息反馈表
IID(编号)(主键)
Int
不允许为空
ICNumber(选项一点击次数)
Int
不允许为空
IUNumber(选项二点击次数)
Int
不允许为空
IBNumber(选项三点击次数)
Int
不允许为空
ISNumber(选项四点击次数)
Int
不允许为空
表3-3 新闻动态表
NID(新闻编号)(主键)
Int
不允许为空
NTitle(新闻主题)
nvarchar(100)
不允许为空
NContent(新闻内容)
nvarchar(MAX)
不允许为空
NTime(新闻发布时间)
Datatime
不允许为空
NNumber(点击次数)
Int
不允许为空
表3-4 政策法规表
PID(法规编号)(主键)
Int
不允许为空
PTitle(法规主题)
nvarchar(100)
不允许为空
PContent(法规内容)
nvarchar(MAX)
不允许为空
PTime(法规发布时间)
Datatime
不允许为空
PNumber(点击次数)
Int
不允许为空
表3-5 咨询留言表
QID(留言编号)(主键)
Int
不允许为空
QName(留言人姓名)
nvarchar(50)
不允许为空
QSex(留言人性别)
nvarchar(10)
允许为空
QCompany(单位)
nvarchar(100)
不允许为空
QTel(联系电话)
nvarchar(50)
不允许为空
QEmail(电子邮件)
nvarchar(50)
不允许为空
QAddress(地址)
nvarchar(100)
允许为空
QTitle(留言主题)
nvarchar(100)
不允许为空
QContent(留言内容)
nvarchar(MAX)
不允许为空
QTime(留言发布时间)
Datatime
不允许为空
QAnswer (留言回复内容)
nvarchar(MAX)
不允许为空
QATime(回复时间)
nvarchar(50)
不允许为空

第4章 系统实现
4.1 开发环境和工具
在交互式界面设计的制作过程中，会使用到Photoshop，Flash等媒体制作软件，另外在连接后台数据库的时候，会用到Microsoft Visual Studio 2008和Microsoft SQL Server 2008。
在前期设计的部分，我选用的是Photoshop CS。Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。Photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版各方面都有涉及。从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。
　　图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。
图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。
校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。
特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。
在设计完成之后，我选用Microsoft Visual Studio 2008进行网页的制作。Visual Studio 是微软公司推出的开发环境。是目前最流行的 Windows 平台应用程序开发环境。目前已经开发到 10.0 版本，也就是 Visual Studio 2010。
Visual Studio 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序，也可以用来创建网络服务、智能设备应用程序和 Office 插件。
Visual Studio 2008版本特点包括以下几点：
快速的应用程序开发。为了帮助开发人员迅速创建先进的软件，Visual Studio 2008 提供了改进的语言和数据功能，例如语言集成的查询 (LINQ)，各个编程人员可以利用这些功能更轻松地构建解决方案以分析和处理信息。Visual Studio 2008 还使开发人员能够从同一开发环境内创建面向多个.NET Framework 版本的应用程序。开发人员能够构建面向.NET Framework 2.0、3.0 或 3.5 的应用程序，意味他们可以在同一环境中支持各种各样的项目。
高效的团队协作。Visual Studio 2008 提供了帮助开发团队改进协作的扩展和改进服务的项目，包括帮助将数据库专业人员和图形设计人员加入到开发流程的工具。
突破性的用户体验。Visual Studio 2008 为开发人员提供了在最新平台上加速创建紧密联系的应用程序的新工具，这些平台包括 Web、Windows Vista、Office 2007、SQL Server 2008 和 Windows Server 2008。对于 Web，ASP.NET AJAX 及其他新技术使开发人员能够迅速创建更高效、交互式更强和更个性化的新一代 Web 体验。
Visual Studio 2008 提供了高级开发工具、调试功能、数据库功能和创新功能，帮助在各种平台上快速创建当前最先进的应用程序。Visual Studio 2008 包括各种增强功能，例如可视化设计器（使用.NET Framework 3.5 加速开发）、对Web开发工具的大量改进，以及能够加速开发和处理所有类型数据的语言增强功能。Visual Studio 2008 为开发人员提供了所有相关的工具和框架支持，帮助创建引人注目的、令人印象深刻并支持 AJAX 的 Web 应用程序。开发人员能够利用这些丰富的客户端和服务器端框架轻松构建以客户为中心的 Web 应用程序，这些应用程序可以集成任何后端数据提供程序、在任何当前浏览器内运行并完全访问 ASP.NET 应用程序服务和 Microsoft 平台。
在制作网站Banner和导航的时候，我选用的Flash8.0。Flash是目前最优秀的网络动画编辑软件之一，从简单的动画效果到动态的网页设计、短篇音乐剧、广告、电子贺卡、游戏的制作，Flash的应用领域日趋广泛，它引领着整个网络动画时代。Flash软件因其容量小、交互性强、速度快等特性，在网页矢量动画设计领域占有重要的地位。
Flash软件与其他软件相比优势在于，其能以最简单的方法制作出复杂而多变的动画，以最小的容量制作出最优秀的效果，它具有以下几个特点：
1.操作简单，容易学习。
2.流媒体动画。Macromedia Flash播放器在下载Flash影片时采用流媒体方式，可以边下载边播放，不用等文件全部下载后观看。而且Macromedia Flash播放器非常小，不仅可以在线下载，并且能直接安装，在任何浏览器中都可以顺利观看。
3.小容量动画文件。因为Flash的图形系统是基于矢量的，矢量技术只需存储少量的数量数据就可以描述一个看起来相对复杂的对象。
4.强大的交互功能。Flash可以通过ActionScript与用户进行交互作用。用户利用ActionScript可以给动画添加单选按钮、下拉菜单和滚动条等这种交互组建，通过键盘操作或动画的按钮操作来实现。
5.Flash的图文元素。在Flash中使用矢量图形的一个优点就是能保证线条和文字的输出质量是浏览者的计算机所能够实现的最高输出质量。
4.2技术基础
本次设计中涉及的最主要的知识点就是交互式界面设计的相关概念。
交互式界面设计的过程是一个迭代的过程。解决方案并不是以线性方式产生的，而是在开发过程中不断发展的。交互设计的实质就是以用户为中心的设计，通常会用以下一些方式来获取用户需求：1.用户参与，2.问卷调查，3.专家评估，4.可用性测试等[10]。
交互设计过程中也可以遵循一些通用模型：1.发现阶段：在此阶段需要了解项目的组成，包括的人，目前的工作空间和工作流程以及会影响工作流程的场景和外在因素。这个阶段可以使用参与和/或观察的方法。2.设计：设计阶段由两部分组成：a.概念设计：设计能满足问题空间的可行的方法是什么？怎样组织工作？这是由各种在概念设计过程中创建的概念模型记录的，概念设计包括角色、情景、用例等。b.物理设计：在现实世界中，概念设计可以被实现的可行的方法是什么？这是有低保真原型，线框图和功能性原型记录的。可以使用抛弃式和演化式原型。3.评估：人们怎样确定一个设计优于另一个设计，怎样衡量一个拟议设计是否是成功的，怎样得到真正用户对拟议设计的反馈，怎样在设计过程的早期阶段使用可用性测试？这是通过正式和非正式的可用性测试结果来记录的。
交互设计是一个复杂的过程，像所有设计学科一样，交互设计也是由已经完善的各种原则来指导的，设计原则指导交互设计者并且帮助他们对设计问题做出决策。交互设计原则的框架包括：1.可用性目标：在框架中有两个主要的可用性目标分别为：可理解性和可学习型，2.设计原则分类：设计框架将设计原则分为两个主要类别：效率性原则和有效性原则，有效性原则可用于决定系统的功能性，效率性原则应用于表现层次（界面）的设计，3.设计原则的描述格式。交互设计的原则包括：1.可理解性：这是交互设计中，最重要也是最需要考虑的，如果用户不能理解这个界面，那么他就无法使用，这样的界面也就毫无用处，2.可学习性：设计的可学习性是基于可理解性，高可用性的界面更易于学习，3.有效性/可用性：有效性目标规定交互设计必须能够提供必须的功能来满足用户的需求，4.效率/可用性：高效率目标规定设计应该能使用户以快捷，容易且不经过非常复杂和无关的过程来完成任务。
交互设计受物理和认知能力及技术复杂和并发性的限制，在完成任务的时候结合所有的原则是不可能完成的，所以这就需要我们在这中间进行平衡。对于企业网站页面来说，最重要的原则包括：有效性/可用性中的简洁性，效率/可用性中的一致性和可记忆性。简洁性原则的核心是设计者减少不必要的细节并去掉不易于理解的元素，只保留必要的元素。一致性原则可以使得界面相互协调，从而提高了记忆和预测结果和过程的能力。
所以，在项目的设计过程中，需要根据不同的情况和需求应用不同的设计原则来进行指导。
4.3作品介绍
此次毕业设计的作品是公司网站的交互界面设计。在设计的前期做了相关的调查，首先通过网络了解了相关行业整体的运营模式，然后在与公司工作人员的沟通中了解单位所面向的对象，同时掌握用户的需求。这里的需求包括了两个方面：1.公司需要展现给客户的内容。2.客户需要获取的信息。从公司方面来看，公司需要将自己的经营理念，经营范围，联系方式等信息详细的展示给客户看，做到一个宣传的效果。而从客户方面来看，他们希望通过网站来获取公司的信息，同时也需要了解最新的行业政策。
完成需求分析之后，我对网站进行了概念设计，物理设计和界面设计。最终选定此次设计的结构为环形结构，将被环绕的区域视为图形，而环绕它的区域视为背景。这样做有利于突出被置于中间的内容，这其中包括公司的简介，公司的动态和客户所需要了解的相关政策，这三个部分的选定，取决于需求分析阶段的相关资料。同时，我在客户和公司的需求之间做了一个平衡，把用户最需要了解的内容放在了中间部分。首页最终完成的效果图如下：

图4-1 网站首页效果图
本次交互设计的系统是企业的网站，所以在满足交互设计原则的同时，也要满足企业网站设计中涉及的原则。在配色上，我选用的是几个层次的蓝色，这种选择是因为要照顾企业本身LOGO的颜色，另一方面也参照了相关企业的网站配色。在Banner部分制作了一个Flash的动画，会显示企业的宗旨，让用户可以比较直观的对企业的文化有一定的了解。在网站中间的部分分三个部分，分别显示公司简介，公司动态和相关的政策法规。基于会计师事务所这一行业的要求，客户需要及时了解相关方面的政策，以至于可以在工作中进行应用。网站左边分别列示了本企业提供的服务和在线调查模块。网站的右边是在线咨询的公示，咨询留言的列示和公司部分联系方式。右边部分总体体现的是公司与用户交流的不同方式。
在完成首页的制作之后，其他的页面都是基于首页的配色和布局进行设计的。
公司介绍的页面效果图如下：

图4-2 公司介绍页面效果图
在保留首页的LOGO，Banner和导航部分的基础上，把原来在右边的部分移至左边，右边填写该页面相应的内容，在内容的头部会显示相应页面的名称，并可以通过点击站点首页链接到首页，也可以在导航中选择其他不同的页面，一定程度上减少了用户的操作步骤。在交互设计中认为图像具有直观形象，信息量大等优点。所以在文字介绍的同时，附加了公司内部的图片，同时这也解决了只有文字介绍的单调感。
服务项目页面的效果图如下：

图4-3 服务项目页面实际效果图
此页面对公司经营的项目进行了详细的介绍。每个总条目都用了明显的红色字体，同时在前面会有标示，用户可以首先检索到自己需要了解的条目，再仔细了解该条目下的具体内容。因为本身没有很多的项目，所以并没有运用检索的功能，这样直观的写出所有的内容，简化了用户的操作，也提高了系统的运行速度。
新闻动态页面效果图如下：

图4-4 新闻动态页面实际效果图
在新闻动态页面列示新闻的标题和发布时间，时间降序排列。在鼠标移至到标题时，该标题字体的颜色会变为红色，并出现下划线。红色可以使用户注意到自己关注的标题，下划线与用户普遍的认知相同，即为进行链接。而在页面的下方会显示一共有多少条新闻，分为几页，当前是第几页等信息，另外可以通过上页，下页，首页，尾页等按钮进行页面的切换。
由于政策法规的页面类型与新闻动态页面是相同的，所以所设计的样式也是一样的，这也满足了交互设计中的一致性原则，使用户在使用中减轻重新学习和记忆的负担。
招贤纳士页面效果图如下：

图4-5 招贤纳士页面实际效果图
该页面介绍了企业所需的人才，以及企业对待人才的态度。用比较突出的颜色表现企业对人才重视。
联系我们页面的效果图如下：

图4-6 联系我们页面实际效果图
在联系我们页面详细的说明了公司的地址，联系人，联系电话，网址等联系方式，并在底部设置了三个图标，分别连接到谷歌网站的地图，进行企业具体位置和公交的查询。
咨询留言页面效果图：

图4-7 咨询留言页面实际效果图
在咨询留言页面，运用红色的*表示该项必须填写，与一般的网站保持的一致性，并同时在填写的最前端对*做出了解释，以便通知不理解的用户。
剩下的其他页面的样式都与上面一些页面比较相似，就不独立贴图了。
另外，我对用户的后台也进行了制作，登录的页面和整个后台的色调也沿用前台的蓝色，整体的页面比较简洁，使用起来会比较方便和快捷。效果图如下：

图4-8 登录页面实际效果图

图4-9 后台管理页面实际效果图
后台管理页面中左边的一排是导航，通过对左边的选择，相对应在右边白色的框中