人机交互期末报告

人机交互基础教程

期末设计报告

（ 2015/ 2016 学年第一学期）

设计题目：以用户为中心的互动网站交互设计研究专业: 计算机科学与技术

姓名：

学号：

指导教师：

日期：

以用户为中心的互动网站交互设计研究

摘要

随着当前网络媒体的迅速发展，互动网站的交互设计也越来越需要更充分的体现，用户是网站的使用者，积极的用户体验可以使用户增加亲切感舒适感，也可以使用户在使用的过程中更加轻松自如更高效率的完成任务从用户体验的角度来研究和分析互动展示网站中的交互设计，从而可以让使用者有更轻松更自由的体验。

通过对网站的交互结构、交互流程、交互细节，展示互动交互、动态交互界面等互动展示网站的多维度分析，并结合使用Flash 、Dreamweaver 、Photoshop 等相关制作软件，进行具体的网站设计制作，从而更好的促进互动展示网站交互设计的发展，互动展示网站的交互设计更加趋于人性化，引导交互体验设计能够更加注重用户体验。

以用户为中心来进行设计分析，做符合用户使用需求的交互设计，基于用户体验的互动展示网站的交互设计。以具体实例网站的设计为出发点，要求围绕互动展示网站的交互设计方向进行深入的阐述，同时说明如何基于用户体验来完成的交互设计。

关键词：用户体验交互设计互动网站

一、问题定义

1、用户体验简介

用户体验（User Experience，UX）通常是指用户在使用产品或系统时的全面体验和满意度。该术语经常出现在和软件、商业的有关话题中。事实上这些话题中的用户体验，多半与交互设计有关。

用户体验主要有下列元素组成：品牌（Branding）、使用性（Usability）、功能性（Functionality）和内容（Content）。这四个元素单独作用都不会带来好的用户体验。只有把他们综合考虑、一致作用才会带来良好的结果。

用户体验是一个涉及面很宽泛的问题。实际操作中的用户体验建设，更多的是一种“迭代”式的开发过程：按照某种原则体系设计功能、版面、操作流程，

在系统完成后，还要通过考虑各种途径的用户反馈，经历一个相对长时间的修改和细化过程。

影响用户体验的因素很多，包括：

①现有技术上的限制，使得设计人员必须优先在相对固定的UI框架内进行设计。

②设计的创新，在用户的接受程度上也存在一定的风险。

③开发进度表，也会给这样一种具有艺术性的工作带来压力。

④设计人员很容易认为他们了解用户需要，但实际情况常常不是这样。

要达到良好的用户体验，理解用户是第一步要做的事情，而用户本身的不同以及用户知识的不同是其中重要的两方面，需要在系统设计之初进行充分的了解。2、用户体验定义

用户体验（User Experience，简称：UE/UX）是一种在用户使用一个产品（服务）的过程中建立起来的纯主观的心理感受。它是一个全方位的概念，在产品不同的阶段，不同的渠道，每一个可能和产品、服务，以及企业本身接触的地方都能产生用户体验。尝试产品（服务）的用户个体差异也决定了每个用户的真实感受、体验是无法通过非常有效途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的测试、实验来认识到的。

3、网站用户体验的表现形式

网站当中用户体验的三个基本表现为：①网站设计②品牌展现③客户服务

①网站设计

独特的网站风格，新颖的展现方式，但是要以品牌的逻辑要求为基础，当然了，前人的路也是要借鉴的，电商平台的页面展现方式，我们就可以借鉴。

②品牌展现

从多个角度推销自己的产品，比如当当网的书籍，站外的邮件营销跟踪服务、手机短信、竞价投放等，站内专题页面、热度书籍推荐等。都是一个产品的推广展现方法，多个角度，多个方法，一起推广产品让用户存在一种‘脸熟’到认可的程度。

③客户服务

客户服务其实是和产品推广是并驾齐驱的，要实时跟踪潜在用户，针对产品推敲

客户心理来起到推广产品的作用，客户服务最主要的是态度，让用户认可产品首先就要认可这个平台。这样才能起到连锁反应；售后服务基本是所有平台基本都欠缺的一个指标，售后维护客户，也可以进一步“压榨”的，尽量的去提取客户身上的价值，因为一个新的客户的成本往往比较高，而像这种客户就存在一个口碑营销。一般情况下很少平台存在“一次性客户”，所以售后服务值得关注。4、用户体验的研究

用户体验研究（User Experience Research）的目的是通过对用户行为和企业商业目的的研究，将企业的商业模式、服务方式、策略重点和盈利模式融入良好的用户体验中。用户体验研究是对用户在使用一个产品或系统之前、使用期间和使用之后的全部感受包括情感、信仰、喜好、认知印象、生理和心理反应、行为的研究与分析。良好的用户体验产生持续的用户粘性，并对企业品牌的口碑传播起到不可估量的作用。

用户体验研究的具体方法：【眼动&脑电研究】；【信噪比原则】；【焦点小组】；【卡片分类法】；【情景调查四要素】；【深度访谈】；【组块原则】；【纸面原型】；【问卷法】；【启发式评估】；【隐喻诱引技术】；【参与式设计】。

二、交互设计现状及表现形式分析

1、当前网站交互分析与研究

随着互联网的快速发展，网站设计和实现的成本不断降低，这使得互联网站遍地开花，市场上出现了各种各样的设计公司、工作室，它们都有着各自的展示平台，这也为交互设计和用户体验提供了良好的发展空间。当今交互设计互动展示类的网站都处于不断探索、不断进步的过程当中，很多的互动展示形式都可以通过一个场景来展示网站内容或者说是传达企业信息。

①先以登录界面为例：

126邮箱：支付宝：

目前主流的登录界面基本都是上下结构，他们的特点就是简洁明了。

②其次是导航的布局：

美团：

当当：

当前好的网站设计的导航都是在网页的头部，让人一目了然，结构很清晰，方便用户使用。

③最后，举例说明如何体现用户登录后的head及如何排版用户中心的位置的方

式比较明智。

淘宝：

整个head应该让用户能够迅速找到想要点击的按钮，多数情况下，如果用户找不到想要的指示按钮估计就直接将浏览器关闭了。

2、互动展示网站的主要展示形式

当前交互网站展示形式分为图片类展示、文字类展示以及图文混合展示三

种。图片类的展现形式是目前使用最广泛的，原因在于图片具有很大的可控性，包括内容更新、结构变换、多种案例的整合统一，都能够非常方便地通过图片整合在一起。有交互展示需求的网站，一般为具有可视化产品的公司或个人，可视化可以是一张视觉效果图、一张草稿、一个三位虚拟模型、一个真实的产品照片等等，这类展示都是建立在其有可视化的展示需求上的。

①图片类展示：

在最大化展示某张图片的同时，让用户看到相册中其他内容，更吸引用户进行继续点击浏览下一张图片。

②文字类展示：

网页文字展示通过字体的大小、颜色来使内容的展现更富有逻辑性，界面更清晰，用户使用起来更易掌握信息。

③图文混合展示

现在的某些搜索词的展示已经不再仅限于图片本身，如搜索圣诞节，网页向我们展示文字的会附带很多图片信息，这样的设计将文字图片相结合，让浏览者更有中身临其境的感觉，获得的信息也更多。

3、互动展示网站的其他展示形式

互动展示网站的展示形式一般都是由展示内容决定的，除了以上说的常规的三种外，还有一些其他的展示形式比如三维展示、动画展示、视频展示等。

①三维展示

三维展示形式分为两种，一种是纯技术手段实现图片、文字等内容在网站内做三维效果的展现，这种展现形式只能做简单模型的内容展示和信息展示，体积较小，适合网络传播；另一种则是通过三维建模软件实现复杂模型，导入互动展示网站制作软件进行交互合成，体积庞大，不适合网络传播。三维建模的展示形式，具有非常好的实物表现力，尤其体现在购物网站中，其强大的产品展示令用户具有直观性的体验，可以观察到每个角度的细节。

②视频展示

视频展示在互动展示中信息传递效果比较直观，但是只是纯粹的视频播放，没有用户的参与，最终的互动效果一般较差。

三、网站交互设计与用户体验

1、互动展示网站的需求分析

1）互动展示网站定位

本互动网站的定位为创意工作室，宗旨是将品牌、设计和先进的科技相结合。主要为一些有需要的公司品牌进行互动展示设计。本网站设计的主要目的是进行工作室形象的树立、工作室的介绍以及宣传等等。

2）互动展示网站内容分析

本网站作为工作室网站，主要为了对工作内容和品牌形象进行宣传，其内容主要以工作室相关内容为主体。

第一，工作室介绍。工作室的性质、理念、品牌、历程等等都需要有所体现，让用户有一个全面直观的印象。

第二，案例的展示。将过去曾经设计过的作品展现在用户面前。因为工作室是为品牌设计，所以图片展示必不可少。

第三，联系我们。树立良好的品牌形象的核心目的是挖掘潜在的客户，让用户能够方便地联系我们也是必不可少的元素。页面展示包括联系电话和地址等等。

第四，招募人才。人才是一个公司最为重要的竞争力，工作室欢迎具有相同工作理念的设计人才的加入。

第五，服务的客户。一个陌生的工作室很难让用户清晰地去判断并作出选择，但是其曾经服务过的客户从某方面而言也可以体现工作室的水平。

3）展览展示需求

工作室建立网站来展示作品根本目的是为了在用户心中建立良好的品牌形象。作为互动展示设计类网站，其作品展示更加显得重要。首先作为创意工作室，创新的理念要突显出来。所以网站的设计及作品展示必须是最能吸引用户的，让浏览者时时刻刻感受到互动展示设计所带来的魅力。

4）企业宣传需求

一个工作室有品牌意识、实力，还要有口碑、宣传，营销宣传是为了给工作室提高知名度。要想让工作室被广大用户熟知，企业宣传是必要的，网站宣传是比较有效的方法之一，一个优秀的展示网站，展示给用户不仅仅是工作室，更是一种品牌。

企业的宣传方式有很多种，而网络媒体是成本最低、效果最好的宣传平台。当今社会信息大爆炸，大到企业、小到工作室都在努力地进行着宣传，工作室的知名度决定了工作室的生存和发展，也决定着企业的定位。所以工作室互动网站的设计是基于企业宣传所必须的组成部分，同时企业网站是企业宣传的必要组成部分。

2、互动展示网站的交互结构设计分析

1）网站的整体架构和布局

首先，直观地展示网站整体结构，即直观的导航设计。导航作为网站结构的核心，始终贯穿整个网站的每一个页面，让用户可以快速地在各网页中进行跳转、切换，以便实现简单快捷的操作。为了使用户简单的记忆和理解网站结构，互动网站在导航上采用单一导航结构，内容即导航，导航即内容，通过舒适柔和的交互设计让用户轻松地进行交互操作。

其次，界面内容布局。要想让用户清晰地理解网站的结构，导航在页面所占的位置就显得尤为重要。导航要醒目，又不能占太大比例，这就要从界面设计的角度去处理导航在视觉上的效果，从而使页面达到良好的平衡。

2）用户体验与交互结构

一般来说，图形、图像对眼球的吸引力较大，合理地利用信息元素的吸引力，引导用户浏览整个页面，使其了解网站结构，清晰明确地进行网站操作，是用户体验一直以来的主要研究方向。

交互结构主要表现在导航和页面布局。从导航上来说，让用户理解和清晰网站结构是基础。当用户激活导航内容时，导航栏目要求反馈用户，让用户明确地了解到他的行为激活了一个可点击的区域。从表现上来说，鼠标变为手型，触及的栏目导航动态展示相应的鼠标事件。

本站的设计结构以文字图形结合为主。用户点开后即能看见所需内容，这样可以尽可能地降低用户的错误操作，达到良好的用户体验的目的。如图3-1所示。

图3-1 网站主导航

内容结构的展示需要简单明了地阐述网站结构，本站也采用极简的设计，简单、有效，又不乏艺术感。如图3-2所示。

图3-2 创作设备栏目内容

3、互动展示网站的交互流程设计分析

1）一般交互流程分析

交互设计即为有来有往，用户通过鼠标、键盘进行输入操作，网站对用户操作进行相应的反应。交互流程按照网站交互结构划分，依照结构设计推出交互流程，交互流程相对结构而言更加细致的进行页面交互细分，引导用户完成整个页面的浏览和体验互动与展示。

2）本站交互流程设计

进入网站首先看到的是首页内容，首页设计中布局了LOGO、导航、工作室的创作宣言等。首页的交互流程具体设计如下：先让用户的视线聚焦于一个被闪烁圆形包围的向下的箭头上，随着用户向下滚动鼠标的滚轮，下面的导航开始向左滑动，上面的导航条开始变长。随后橙黄色的矩形条开始消失，切换到下一个页面：四方块的文字内容逐一出现。或者当用户将鼠标移动到上部导航栏，鼠标的形态会直接变成手势，提示用户可以进行点击，随即进入到新的展开页面。

只要用户滚动鼠标滚轮，就可以一直往下浏览，图片会随着页面自动切换。中间还有工作室的案例展示，工作室的理念展示等等。直到用户滑到页面的最低端，展示就会停止。此刻用户就会看到工作室的联系方式以及分享登录网站的信息。

4、互动展示网站的交互细节设计分析

1）页面尺寸控制交互设计

良好的用户体验设计要求任何状态、任何情况下浏览器本站都能够获得最佳的用户体验，享受最佳的网站服务。通过程序判断浏览器大小，自动适应浏览器尺寸，是目前较好的解决方案之一。现行浏览器窗口最小为1024*768px，该尺寸为现行主流电脑的最低显示标准，本站设计将宽度固定在1000px，去除滚动栏及浏览器所占据的20px左右的宽度，避免产生横向滚动条，影响网站整体效果。屏幕分辨率在网站打开的瞬间进行程序判断，获取当前页面所在窗口的宽高尺寸，将数据传递到flash接口内，网站内容在获得的尺寸下自动适应调整。

2）网站的加载与调取研究

在网站制作的过程中，把大文件包拆分成若干文件，要尽可能的降低每个文件或模块的加载时间，提高网站的加载速度和减少用户等待的时间，为用户提供良好的用户体验。文件虽然被拆分了，但依然存在加载的过程，所以在每个元素和外调文件被调区和加载的过程中都需要一个提示，提醒用户网站当前的操作，让用户耐心地等待，该提示统称为Loading。Loading的设计使得互动展示有了一个承上启下的链接，使加载和互动有了一个动态的过程。Loading在动态提醒的基础上还有加载进度条，加载进度一般通过百分比来显示提醒用户当前进度，暗示用户耐心等待以及大致需要等待的时间。

3）互动鼠标动态设计

互动动态有多种表现形式，通过用户的不同操作展示不同的动态效果，鼠标事件分为：鼠标移动、鼠标经过、鼠标按下、鼠标抬起、鼠标离开、鼠标拖曳等等。鼠标点击、移动、经过等事件是最常用的用户操作，这些操作的精心设计能够给用户带来细腻的用户体验，让用户方便快捷的进行浏览和操作。本站的鼠标事件以鼠标滚轮滚动为主导，当用户滚动鼠标滚轮时，页面开始向下滑动，图片不断地动态更新切换，展现出新的页面内容，达到了良好的用户体验的目的。本站没有其他华丽的鼠标事件，简单的鼠标原则也在动态的图片展现中显现的淋漓尽致，可以增强用户浏览的趣味性。

5、互动展示网站的展示交互设计分析

1）展示交互的用户操作分析

用户浏览网站的操作以鼠标操作为核心，键盘操作为辅助。对于展示浏览，

最有效和直接的鼠标事件是点击，点击意味着激活了一项新的内容。用户对浏览内容的每一次操作，都希望得到反馈，所以每一个互动动态要对应一个用户操作结果，这样的交互流程才是完整的。所以用户点击事件在展示交互设计中意味着内容的展开与跳转。用户浏览网站时，对超出屏幕的内容会有缺失感，这种情况下用户会下意识地进行元素拖拽，希望能够看到全部内容，所以拖拽操作也是极易产生的操作行为。

2）展示交互的发展与变化

展示设计的体验真实化，一直是互动展示设计所追求的发展方向，立体的、三维的、仿真的设计风格能够让用户更加快速的适应和接受。随着互联网使用人群进一步深入接触互联网，进一步加强对互联网产品的操作认知，用户操作变得丰富起来，所以简洁、平面化的设计风格及交互设计体验将会取代空间感、拟真化的设计风格，用户习惯了现实中的真切体验，就会寻找科技化、现代化的体验，所以展示交互设计的未来是以展示内容为核心进行设计的。

3）展示交互在本站的体现

本站通过简洁的设计方式，让展示交互设计摒弃繁杂无用的元素，让用户通过最简单、原始的互动方式来浏览页面的交互内容，以实现展示内容的核心最大化，如图3-3所示。

图3-3 首页导航栏的展示设计

首页的展示交互设计主要注重的是工作室名称还有导航栏的设计。良好的多内容切换及内容展示交互设计能够让用户进行更好地浏览，如图3-4所示，展示内容的切换：

图3-4 内容的切换

其他内容通过滚动鼠标滚轮，或者通过鼠标点击事件来实现，内容动态通过网页下面的图片切换来展现，如图3-5,3-6,3-7,3-8所示：

图3-5 图片切换图3-6 图片切换

图3-7 图片切换图3-8 图片切换

或者通过鼠标点击事件直接展开，点击导航栏的Services，页面跳转到下一展示区，如图3-9所示：

图3-9 通过导航栏进行切换

无论当前处于网页的哪个部位，都可以通过点击右上角的导航栏来进行切换。这样产生的交互结构就是一个闭合的流程，从主页展示切换到工作室设计设备，再到工作内容展示，都可以随时进行任意部位的切换，这样就实现了交互设计的完整和统一。其他方面的展示也一样，这是本站最大的特点，只通过唯一的

滚动事件来实现各种内容的展示与切换，如图3-10所示：

图3-10 其他内容切换

6、互动展示网站的交互动态设计分析

1）交互动态设计的意义

交互动态的设计在互动展示以及交互设计中都占据着重要的地位，交互设计

可以进行人机对话、信息交流，而动态设计就是让人机对话、信息交流变得可视

化，让用户可以清楚地看到当前操作的界面哪些内容是可以点击的，哪些内容是用来浏览的。交互动态可以指示用户操作方式，弥补了交互设计生硬的不足，增加用户体验的感知度，使用户能够更好地进行浏览和互动。

2）本站交互动态设计应用

交互动态设计的原则是简单直接的表达出交互形式，区分于静态内容。交互动态设计在一个互动展示网站中应该是无处不在的，每一个交互点都要有一个动态提示，这样才能让用户方便地感知热区所在。从用户体验的角度来说，只有通过充分动态设计的热区才能让用户有点击的欲望，才能引发用户进一步的浏览，本站设计中网络登录部分的交互设计，随着鼠标的移动，图形颜色变深，使得按钮的可点击性一目了然，如图3-11,3-12所示：

图3-11 鼠标动态（1）图3-12 鼠标动态（2）当鼠标划过一个可点击区域时，交互动态就应该随之出现，增加视觉动态效果并达到引导用户的目的。工作室展示的区域有个黑色向左方向的箭头，表示关闭左侧导航栏，如图3-13所示：

图3-13 左侧导航关闭箭头

交互的动态设计，通过动态的元素引导着用户的每一个操作，每一次的引导形成了网站的线索，最终组成了整个网站的结构。动态交互是互动网站的视觉基础，所以动态交互的设计是互动展示网站最根本的要素。

7、互动展示网站的交互设计创新

1）互动拖拽展示

通过拖拽进行内容的展示，让用户能够亲身地体验内容的可扩展性；多内容地共享展示平台，使互动展示交互体验达到新的高度，让基于用户体验的交互设计深入人心，从视觉和听觉上都可以感受到交互设计为用户带来的友好体验，从而使用户能够方便、快速、简单、高效地获取信息。

2）互动滚轴展示

滚轴的使用需要全面的进行引导，在告知用户的同时保证滚轴的可使用性。滚轴要控制动态展示的内容，每次滚动移动的位置不要超过浏览器大小的六分之一，且移动不要匀速，动态移动要求以先快后慢为行为准则，这样在进行动画时能够最大程度地模拟现实，让用户在现阶段能够更加容易接受交互体验，更好地进行网站内容的浏览。

3）交互一体化设计

交互设计与视觉设计相通，都需要进行整体化的构建，在主体统一的基础上进行内容的演化。交互设计在展示内容的交互形式上采用统一的展开和拖拽展示样式，让交互设计在最大程度上得到有效的统一。在画面交互元素的视觉设计上，采取统一的视觉风格交互形式，进行对网站的统一整合，使整体的交互设计保持一致性，以提高用户的使用效率。交互设计的一体化设计是用户的体验和使用都得到良好的优化。

四、基于用户体验的交互界面设计

1、交互界面风格设计

1）本站界面风格设计

本站的设计定位是简约、大方、个性、清新，所以网站在整体设计时采用白、橙色作为主背景，对比度大的黑、灰色进行点缀，突显出主要展示内容，使得网站看起来简洁明了，如图4-1所示：

图4-1 网站首页

2）本站界面设计演变与突破

本站介绍性的内容页面采用纯色模式，高纯度的色彩使得页面很有个性与时尚感，增强了对比度。如图4-2，4-3所示：

图4-2 创作设备内容

图4-3 工作案例展示

2、交互设计界面元素布局的合理化

1）标志的布局需求

Logo是工作室的标志，即为网站的标志，是本站设计的重要元素，经研究发现，用户浏览习惯为“F”型，从左上开始，向右上浏览，然后从网站左边向下，随后再向右。Logo要占据重要的位置，要保证每一个用户都可以看到，起到宣传的作用。

2）导航和版权的布局需求

网站的导航是网站的重要组成部分。导航要求简洁和直接，导航通常位于右上角。网站的主体内容需要预留出来布局网站需要展示的主要内容，所以左下角式布局版权信息的最佳选择。这样布局之后网站在结构上就实现了整体化。如图4-4所示：

图4-4 导航布局在右上角

3、交互设计中界面版式设计

1）点线面在交互展示中的呈现

点是画面的最基本的组成元素，在本站的设计中没有特别明显的大量点的集合，点大即为面，点有机组合便是线，本网站设计将点线面有机组合在一起。如图4-5所示：

图4-5 网站首页

首页右上角的Logo就是明显的多点组合，Home、Services、Work，多点的有机排列组合形成了导航线，使导航在线的统一下展示其特有的结构关系。

主要展示区通过面来统一，在内容页面上创作设备的展示由线形成了四大面区域，通过鼠标滚轮的滚动，线段不断出现、消失，引导着面的变化，如图4-6,4-7所示：

图4-6 线面的交互转变

图4-7 线面的交互转变

2）交互设计中版式构成

交互设计的版式构成是常规构成，作品展示中的每一个作品都是在进行结构上的重复，产生了不断强调的效果，最终实现版面构成。如图4-8、4-9所示：

图4-8 作品展示

图4-9 作品展示

工作室介绍的模块分为两个部分，左侧为导航栏，用户可以进行点击操作，选择查看工作室图片或者位置地图，右侧即为选择以后的展示区。在展示区左边有个小的黑色的返回箭头，可以让用户返回到首页的的主页面。如图4-10所示：

图4-10 工作室介绍版面