人机交互的软件工程实践

1.人机交互设计概述

交互设计视图提高产品或系统的可用性和用户体验。他首先研究、了解某类用户的需求，然后再通过设计来满足用户的需求。随着产品和操作变得越来越复杂，越需要用户掌握新技能，因此设计师对如何能帮助用户提高效率面临更大的挑战。通常，新技术对目标用户都很复杂，交互设计试图在保证产品功能的同时又能缩短用户的学习时间，提高任务的准确性和效率。这能让用户遇到更少的阻碍，从而有更高的效率，并感到更加满意。

1.1人机界面的定义、起源和发展

1.1.1人机交互界面的定义

人机交互界面，可以从人机交互与人机界面设计这两个方面来理解他的含义。人机交互(英文名为Human Computer Interface,简称HCI)，是一门研究系统与用户之间的交互关系的学问。系统可以是各种各样的机器，也可以是计算机化的系统和软件。人机交互界面通常是指用户可见的部分。用户通过人机交互界面与系统交流并进行操作，小如收音机的播放按钮，大至飞机上的仪表板或是发电厂的控制室

操作系统的人机交互功能是决定计算机系统友善性的一个重要因素。人机交互功能主要靠可输入输出的外部设备和相应的软件来完成。可供人机交互使用设备主要有键盘、鼠标、各种模式和识别设备等。与这些设备相应的软件就是操作系统提供人机交互功能的部分。人机交互部分的主要功能是控制有关设备的运行，理解并执行通过人机交互设备传来的有关的各种命令和要求。早期的人机交互设施是通过键盘、显示器，操作员通过键盘键入命令，操作系统接到命令后立即执行并将结果通过显示器显示，输入的命令可以有不同方式，但每一条命令的解释是清楚的、唯一的。

人机界面设计是指通过一定的手段对用户界面有目标和计划的一种创作活动。大部分为商业性质，少部分为艺术性质。人机界面通常也称为用户界面。人机交互界面的设计要包含用户对系统的理解即心智模型，那是为了实现系统的可用性或者用户友好性。

如图图1.1淘宝登录页效果图 支付宝首页

1.1.2人机交互界面的起源于发展

1959年，美国学者B.Shackel从人在操作计算机时如何才能减轻疲劳触发，提出了被认为是人机界面的第一篇文献：关于计算机控制台设计的人机工程学的论文。1960年，Liklider JCR首次提出人机紧密共栖(Human – Computer Close Symbiosis)的概念，被视为人机界面学的启蒙观点。1969年在英国剑桥大学召开了第一次人机系统国际大会，同年第一份专业杂志国际人机研究(IJMMS)创刊。可以说，1969年时人机界面学发展史的里程碑。

在1970年成立了两个HCI研究中心，一个是英国的Loghbocough大学的HUSAT研究中心，另一个是美国Xerox公司的Palo Alto研究中心

1970年到1973年出版了四本与计算机相关的人机工程学专著，为人机交互界面的发展指明了方向。

20世纪80年代初，学术界相继出版了六本专著，对最新的人机交互研究成果进行了总结，人机交互学科逐渐形成了自己的理论体系和实践范畴的架构。理论体系当面，从人机工程学独立出来，更加强调认知心理学以及行为学和社会学的某些人文学科的理论指导；实践范畴方面，从人机界面（人机接口）拖延开来，强调计算机对于人的反馈交互作用。人机界面被人机交互所取代。HCI中的I，也由Interface（界面/接口）变成了Interaction（交互）

20世纪90年代后期以来，随着高速处理芯片，多媒体技术和InternetWeb技术的迅速发展和普及，人机交互的研究重点放在了智能化交互，多模态（多通道）多媒体交互，虚拟交互以及人机协同交互等方面，也就是放在以人为中心的人机交互技术方面。

人机交互的发展历史，是从人适应计算机到计算机不断适应人的发展史。人机交互的发展经历了几个阶段

• 早期的手工作业阶段
• 作业控制语言及交互命令语言阶段
• 图形用户界面(GUI)阶段
• 网络用户界面的出现
• 多通道、多媒体的智能人机交互阶段

1.2人机界面

1.2.1人机界面的研究内容

美国学者西蒙提出：设计是人工物的内部环境（人工物自身的物质和组织）和外部环境（人工物的工作或使用环境）的结合，所以设计是把握人工物内部环境和外部环境结合的学科，这种结合是围绕人来进行的。“人“是设计界面的一个方面，是认识主体和设计服务的对象，而作为对象的”物“则是设计界面的另一个方面。他是包含着对象实体、环境及信息的综合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用的功能、材料的质地，也包含着对传统思考、文化领域、科学观念等 认知，分析物也就分析了设计界面存在的多样性。

为了便于认识和分析设计界面，我们可以将设计界面分为

• 功能性设计界面：接受物的功能信息，操作与控制物，同时也包括和生产的额接口。即材料运用、科学技术的应用等，这一界面反映着设计与人造雾的协调作用。
• 情感性设计界面：物要传递感受给人，取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情，而不是个人的情感抒发。设计要“要投入热情，不投入感情”，避免个人的任何主观臆断与个性的自由发挥。这一界面反应着设计与人的关系
• 环境性设计界面：外部环境因素对人的信息传递。任何一件或一个产品或平面视觉传达作品或室内环境作品都不能脱离环境而存在，环境的物理条件与精神氛围是不可忽略的界面因素。应该说，设计界面是以功能性界面为基础，以环境性界面为前提，以情感性界面为中心而构成的，他们之间形成有机和系统的联系。

1.2.2用户体验

用户体验和界面设计是相辅相成的，互相有紧密联系。用户体验(User Experience,简称UX）主要是指“客户体验”，是指客用户访问一个网站或者使用一个产品时的全部体验。即他们的印象和感觉，是否成功，是否享受，是否还想再来使用。或许这样听起来我们会觉得有点难以理解。不如换个说法，用户体验是一种在用户使用产品过程中建立起来的纯主观感受

“用户”，“过程中”，“主观感受”这三个关键词构成了用户体验的灵魂，通过这几个词，我们来深刻理解何为用户体验

“用户”意味着对于不同的目标用户，“好的用户体验”的定义是不同的，所以如果脱离了用户，是无法评价一个产品的用户体验的。用户设计的一大原则最好是用户不需要学习就能“自然地”使用

案例操作

对比美图秀秀和photoshop这两个软件的用户体验，那个好？

美图秀秀的目标用户，可能是一些普通爱美的大众。他们的一个典型用户场景，是用手机自拍，希望把自己变得更美一些，然后发到朋友圈上面去，大部分用户估计并没学过设计或者美术，可能也不太懂得摄影，但是美图秀秀可以让使用者只通过简单地点按、选择，就能把自己的照片变美。不需要过多的思考，不需要专业知识，所以，在这个场景中，他的用户体验是好的。

Photoshop的目标用户，估计并不是这些普通大众，而是专业的设计师。对于一个专业的设计师来说，“能够最大限度帮助设计师表达他们的擦黄奕”才是好的用户体验。为了做到这一点，专业的设计师并不介意去深入学习这个软件的使用方法。从易用性来看，ps显然不够易用，但对于专业设计师来说，他的体验太棒了！

1.2.3人机交互界面的基本流程

人机交互界面设计基本流程共分为五个阶段：需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证阶段

1.需求阶段

软件产品依然属于工业产品的范畴。依然离不开3W的考虑(who,where,why)也就是使用者、使用环境、使用方式的需求分析。所以在设计一个软件产品之前，我们应该明确什么人用（用户的年龄、性别、爱好、收入、教育程度等），在什么地方用（在办公室/家庭/厂房车间/公共场所）如何用（鼠标键盘/遥控器/触摸屏），上面的任何一个元素改变结果都会有相应的改变。

识别和理解用户是开始产品设计的第一步，同样重要的是分析市场上类似的产品，分析类似产品针对的用户群，甄别其是否是竞争对手，这些工作对于设计将非常有借鉴意义。理解其他产品的过程有利于比较和理解自己产品目标用户的需求、

另外，非常有价值的方法是对用户使用产品的过程做情节描述，考虑不同环境、工具和用户可能遇到的各种约束，可能的话，可深入到实际的使用场景去观察用户执行任务的过程，找到有利于用户操作的设计。

通过一些方法寻找符合目标用户条件的人来帮助测试原型，听取他们的反馈，并努力使用户说出他们的关注点，和用户一起设计，而不是只通过自己的猜测。

通常情况下，软件研发和界面设计人员对产品的了解和细节的把握比用户要精细的多，尽管这些知识对类似设置缺省状态或者提供最佳信息非常有帮助。但一个重要的概念是：产品设计不是给自己来用，不是为满足自己的需求或符合自己的习惯而设计，而是为目标或者潜在用户设计。

除此之外，在需求阶段，同类竞争产品也是我们 必须了解的。同类产品比我们的产品提前问世，我们要比其做得更好才有存在的价值。那么单纯地从界面美学考虑说那个好那个不好是没有一个很可观的评价标准的，更适合最终用户的就是最好的。

2.分析设计阶段

通过分析上面的需求，我们进入设计阶段，也就是方案形成阶段，我们设计出几套不同风格的界面用于备选。完成用户模型定义后，需要定义和分析用户将履行的任务，寻找与任务相关的用户心智和概念模型。心智模型体现了任务场景，定义了任务包含的具体内容和用户的期望，描述了任务之间的组织关系与其适应的工作流程。

观察用户在非使用电脑的状态下怎样完成任务，使用什么术语，与任务相关的概念、物体、手势等，设计产品反应这些事物，但不是机械的复制。充分利用电脑环境固有的优势使整个过程和方法更加简单，并得到优化。

3.调研验证阶段

测试阶段开始前，我们应该对测试的具体细节进行清楚分析描述。调研阶段需要从以下几个问题出发：

用户对各套方案的第一印象如何？用户对各套方案的综合印象如何？用户对个套方案的单独评价如何？选出最喜欢的，选出其次喜欢的：对各方案的色彩，文字图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点，所有这些都要图形表达出来。直观科学

4.方案改进阶段

经过用户调研，得到目标用户最喜欢的方案，而且了解到用户为什么喜欢，还有什么遗憾等，这样就可以进行下一步操作了。这时候我们可以把精力投放到一个方案上，将方案做到细致精美

5.架构原型阶段

在完成用户目标与任务分析之后，使用这些关于任务及其步骤的信息构建草图，进而发展成产品原型。原型是很好的测试设计的方法，他能够帮助检验设计在多大程度上契合用户的操作。可以使用各种各样的办法构建原型，例如可以使用故事版来可视化地展示用户使用产品的过程，也可以使用原型工具来模拟过程，以此说明产品是如何运行的。

6.用戶驗證階段

对于改进以后的方案，我们可以将其推向市场，但是设计并没有结束，我们还需要关注用户反馈，好的设计师应该在产品上市以后去站柜台。可以请一些目标用户使用，仔细观察，倾听用户在执行特定任务的时候的反应是否与设计定义一致，最好用摄像机记录下来。用户观察有助于发现设计是否合理和存在的问题。

用户测试注意要把范围限定在关键领域，着重对设计阶段重点分析的任务的检验，对参与者的指导必须清晰而全面，但不能解释所要测试的内容

使用测试记录获得的信息来分析设计，进而修正和优化原型。当有了第二个原型之后，就可以开始第二轮测试来检验设计改变之后的可用性。可以不断重复这个过程，直到满意为止。使产品变得具有优秀产品的特质，成为满足目标用户的高实用性产品

知识点

界面设计基本流程

• 产品制作人与产品计划书
• 用户体验研究员作调查分析
• 信息建构师设计产品架构
• 互动设计师作出互动流程
• 视觉设计师与用户界面设计师作出页面视觉设计
• 前台工程师进行前台开发
• 后台工程师进行后台开发
• 用户体验研究员做用户测试、确保质量

1.2.4网站开发流程

大家对于网站即熟悉又陌生，每天都在浏览各式各样的网站但却不了解一个网站由那些方面组成，通过下面的讲解让大家了解网站开发的了流程

• 需求分析：目标用户、用户分析、市场前景

目标定位：做这个网站干什么，这个网站的主要职能是什么？网站的用户对象是谁？他们用网站干什么？用户分析：网站主要用户的特点是什么？他们需要什么？他们厌恶什么？如何针对他们的特点引导他们？如何做好用户服务？市场前景：网站如同一个企业，他需要能养活自己，网站的市场结合点在哪里？

• 平台规划：内容策划、界面策划、网站功能

内容策划：这个网站要经营那些内容？其中分重点、主要和辅助性内容，这些内容在网站中具有各自的体现形式。内容划分好以后就进行文字策划（取名），把每个内容包装成栏目。界面策划：结合网站主体进行风格策划。如色彩包括主色、辅色、 突出色，板式设计包括全局、导航、核心区、内容区、广告区、版权区及板块设计。网站功能：主要是管理功能和用户功能。管理功能是人们通常说的后台管理，关键是做到管理方便、智能化。而用户功能就是用户可以进行的操作，这设计交互设计，这涉及交互设计，他是人和网站对话的接口，非常重要。

• 项目开发：界面设计、程序设计、系统整合

界面设计：根据界面策划的原则，对网站界面进行设计及完善。程序设计：根据网站功能规划进行数据库设计和代码编写。系统整合：将程序与界面结合，并实施功能性调试。这个阶段是整个项目的核心阶段。这一块的建设还包括一些基本流程及注意事项。

1.网站域名建设

也就是用户在浏览器里面访问的这个网址，比如某博客使用的域名是：***.net。网站域名显然是非常重要的，选择一个非常有代表性的域名是网站长期发展的必要考虑因素，当网站运营一段时间以后（域名已深入人心），如果需要更换域名，可能会流失很多网站流量。最常用的国际域名后缀有“.com",“.net”,“.org”,国内的域名后缀有".com.cn"",cn"等，这里要注意的是国内的域名是需要备案才能使用的。域名可以到专门的idc提供商注册。比如万网、美橙互联、新网、中国数据、爱名网等。对于新网的域名，不推荐去注册，存在安全漏洞。温馨提示：选择一个洋气的域名更容易被用户记住！

2.网站空间

网站空间是用来存放网站数据使用的，也称为虚拟主机。网站空间是服务器上的一个文件夹，服务器可以分为N个文件夹，用于单独出售。当然用户也可以直接租服务器，对于占用资源小的网站如企业网站，一般都是选择购买网站空间；对于一些独立论坛、商城等占用资源稍大的，会选择租用服务器建站。这里要提醒大家的是：目前国内的正规网站空间基本都是需要备案才能使用的，如果你不具备备案条件，可以选择海外免备空间或香港免备空间。温馨提示：选择一个高速稳定的网站空间对于以后网站优化起着至关重要的作用！

3.网站程序

网站程序主要分为ASP\php\html等，就是不同的网站编程语言，目前使用的比较多就是应该php程序了，网站程序大部分都是用开源的，当然也有自己写的，对于一般的无特殊要求的站长来说，开源网站程序已经能满足建站需求！网站程序除了网站的内核框架外，也有网站模板、logo、板块分类、banner、广告位等，在用户浏览不同的网站时应该可以很直观看到。

在搜索引擎非常注重用户体验的时代，制作一个精美的网站末班也是非常重要的，网站程序与模板的关系就跟房子与装修的关系一样，网站程序就是房子的框架，网站模板就是房子的效果装修。温馨提示：选择一淘网站结构简单明了的程序会得到搜索引擎“蜘蛛”的青睐

4.网站数据库

网站数据库是一个虚拟的东西，是用来存储网站信息的，比如论坛注册用户信息、网站发布的文章信息等都是被存储在网站数据库里面的，一般网站数据库在购买网站空间里会免费赠送，如果是购买的服务器，那么数据库可以自己安装，当然大部分空间商会待安装好建站环境。温馨提示：网站数据库里面存放的往往是网站最重要的核心资料，所以做好数网站数据库的备份是每个站长必做的工作

了解以上四点：那么做网站的流程是非常简单的：购买域名–》购买空间–》域名解析空间ip–》空间绑定域名–》上传网站程序，根据要求进行安装–》安装完成设置网站基本信息–》网站建设完成

测试验收：项目人员测试、非项目人员测试、公开测试

项目人员测试：项目经理，监察员及项目开发人员一同根据前期规划对项目进行测试和检验。非项目人员测试：邀请非项目参与人员作为不同的用户角色对平台进行实用性测试。公开测试：网站开通，并接受网友的使用测试，设立反馈信息平台。收集意见和建议信息，针对平台存在的不足进行思考和完善