人机交互实验总

1、 人机交互技术 课程设计软件工程专业2013级 组长：朱彦荣：20132184 成员：陈 应：20132201 张 雷：20132198 王志鹏：20132204 2015-2016(2) 软件工程2班 qq界面原型设计 小组成员：朱彦荣，陈应，张雷，王志鹏 人机交互技术课程设计qq需求获取与用户建模软件工程专业2013级 组长：朱彦荣：20132184 成员：陈 应：20132201 张 雷：20132198 王志鹏：20132204 2015-2016(2) 1.项目描述 1.1项目背景即时消息系统的研究现状 即时消息系统1(Instant Messenger，IM)是一种在后 PC 时代

2、兴起的，以 Internet 网络为基础的，允许交互双方即时地传送文字、语音、视频等信息，能够跟踪网络用户在线状态的网络应用软件。即时消息系统产生有着深刻的社会原因：人们都有渴望社交，获得社会尊重、实现自我的需求，这正是即时消息软件风行的原动力，而物质文明的日益发达所带来副作用，又使得人们习惯与周围的人保持距离，以致人们更愿意对陌生人敞开心扉，在网络中可以跨越年龄、身份、行业、地域的限制，达到人与人、人与信息之间的零距离交流。从这点上讲，即时消息系统的出现改变了人们的沟通方式和交友文化，大大拓展了个人生活交流的空间。国内最为流行的即时消息软件是 OICQ（简称 QQ） 。它以良好的中文界面和不

3、断增强的功能形成了一定的 QQ 网络文化。该软件是由腾讯公司于 1999 年 2 月自主开发的基于Internet的即时消息系统。腾讯QQ 目前已成为中国最主要的即时消息服务网络软件。作为一种即时消息工具，QQ 支持显示好友在线、即时传送文字、语音和文件等功能。 QQ 还与无线寻呼、GSM 短信息、IP 电话网互联，为用户提供互联网短信及信息增值服务。腾讯 QQ 开发和拓展统一、高速、丰富的互联网应用平台、在线广告业务、移动通信业务、ISP及IP电话合作业务、企业商用即时消息服务、在线客户支持及在线呼叫业务。 即时消息系统的发展趋势 21世纪将是网络化、信息化的世纪，信息的融合已经成为社会发展

4、的主流方向2。即时消息系统将不断与信息交流领域的系统相互集成和渗透，扩展其自己的功能和应用范围，满足未来话音，数据和视频的多媒体应用需要，使即时消息以更丰富的接入方法，更高的服务质量，更友好的面貌呈现在世人的面前。 从功能角度来看，即时消息系统向支持全媒体方向发展，随着多媒体技术在网络应用中的发展，即时消息系统承载的媒体，不再局限于原来的文字、语音和文件的信息交换，信息载体扩展到图形、图像和流媒体等多媒体业务上。目前ICQ 和 QQ预设了部分简单的表情图像， 通过传输图像代码来传递表情图像，可以被视为即时消息开发商开发支持图形、图像为载体的即时消息软件的开端。 从应用范围角度来看，即时消息系统

5、集中在 Internet 个人用户之间的信息交流应用，随着网络技术应用的发展，即时消息系统应用范围向园区化、集团化拓展，应用领域突破个人，而用于远程教学、远程医疗、远程演示、网络会议等领域。  1.2项目目标本项目最终目的是开发一款基于andriod或者ios系统的适用于qq聊天APP，其主要功能实现在线聊天，在线语音视频等qq功能。 1.3目标用户1.匿名用户:可以登入网站进行浏览,注册登录等操作。2.注册用户:该类用户可以进行聊天交友,传输文件等一些活动。3.系统管理员:对网站进行管理以及对用户进行管理等操作。2.功能分析1.新用户注册；2.用户登录验证；3.好友列表：显示好友状

6、态（在线/不在线）；4.添加用户好友；5.删除用户好友；6.用户与好友聊天（可查看聊天记录）；7.忘记密码服务8.好友处理9.群组处理10.直播间处理11.动态处理12.切换图片处理13.退出下线下面是具体的分析：登录系统模块本模块的功能是用户正确登陆的实现及管理，涉及各个类别的用户：例如学生、教师，进行QQ登陆的用户通过此功能模块进行QQ的登录及登录信息；预设系统在线审批QQ登录用户的信息及查看记录信息以及密码；预设系统在线审批学生长时间的请假及查看请假记录信息。IPO表 系统：模拟QQ聊天系统 作者：第二小组 模块：登陆系统模块 日期： 编号：NO1 聊天系统模块 本系统的功能是聊天功能的

7、实现、查看以及管理。用户可以和在线好友聊天并且留言给不在线的好友，以及查看或者是删除聊天记录系统：模拟QQ聊天系统 作者：第二小组 模块：聊天系统模块 日期： 编号：NO2  后台管理模块 本模块的功能实现整个系统数据的同步更新及维护，只涉及系统管理员用户。系统管理员动态的管理用户信息、聊天记录的保存及删除等信息，是整个系统实现的基础。IPO表系统：模拟QQ聊天系统 作者：第二小组模块：后台管理模块 日期：编号：NO23.竞争调查与分析 采用小组讨论，问卷调查（附录），上网查阅资料的方法制定调查表。 4、用户分析 用户需要完成的任务及所使工具、任务环境、遇到的问题 用户需要使用手机和

8、电脑的qq终端进行通信操作，任务的环境可以在android平台、ios平台或者windows操作系统环境下。遇到的问题主要有如何正确的使用和识别qq终端软件的布局和拓扑结构，以使得用户能够快速、方便的对目标界面进行操作。 用户建模：每一类用户的相关特征详细描述（知识、经验认知等），建立用户角色、用户任务表格。 用户类型 用户描述 用户任务 儿童（4-12岁）该年龄段的儿童因为文字或其他的因素需要有鲜活的图片和语音指示。 用户主要可以通过语音信息来获取内容，当然也可以作为娱乐工具。 青少年该类用户是使用该软件的主要群体，因为在界面识别上没有过大的障碍，对于新鲜的事物更加的感兴趣。用户通过该软件进

9、行聊天、通讯、娱乐、交友等活动，并从中获取信息，收获快乐。 老年人可能由于时代的原因，喜欢一些比较清淡的东西，因此界面应该尽量的简约，字体应该尽量的放大。 该用户很少使用该软件，当然也会将其当作娱乐的工具之一。 工作人员该类人员因为工作的原因，可能希望所有的信息能够准确的通知到位。 主要用来聊天、交友、娱乐，放松心情，收获简单。 有关QQ使用对大学生影响的调查问卷 学院： 年级： 年龄： 大学生是个受人关注的群体，我们想通过此问卷了解QQ使用对大学生人际交往的影响。感谢您填写我们的调查问卷。O(_)O谢谢！1、 你的性别是？ A、男 B、女2、 你对qq的依赖度有多大？（） A、几乎不用 B、

10、偶尔使用 C、每天使用 D、频繁使用3. 你认为qq的界面设计怎么样？（） A:不满意 B:还算可以 C:比较满意 D:非常满意4.你的QQ好友数量是多少？A、50以内 B、50150 C、150200 D、200以上5.你使用QQ多少年了？A、三年以下 B、三年至五年 C、五年至八年 D、八年以上6.你的QQ信息、资料的真实程度有？A、都是真的 B、80%是真的 C、20%50%是真的 D、都是假的7.你每天都上QQ吗？A、是 a.在线 b,隐身 c.离开B、不是 a.一周五次 b.一周三次 c.一周一次8.你用QQ加好友的原则是什么？A、根据个性签名 B、看头像随便加C、聊过以后再确定加与

11、不加 D、据性别定9.你对待群聊的态度是？A、都参与 B、很少参与，感兴趣就聊聊C、不参与，每次都只看别人聊 D、屏蔽10.你的QQ好友都是怎么认识的？（多选）A、邻居或儿时的玩伴 B、去亲戚家或者串门认识的C、在学校认识的 D、通过别人介绍人认识的11、你认为在你的朋友中？ A、几乎都是知心的好友 B、只有少数是知心大部分不是C、完全没有知心的 D、不了解，没想过12.在QQ上，您进行人际交往的主要目的是.？.A、渴望交到谈得来的朋友 B、认识更多的异性朋友C、改变现实人际交往不理想的状况 D、渴望和因为距离变陌生的朋友恢复以前的友好关系 13.你认为QQ的使用对大学生的学习有什么影响？A、

12、使一部分学生迷恋于网络，放纵自己B、创造了一个学术交流的环境C、促进了师生交流D、QQ是一把双刃剑，有好有坏14.你认为使用QQ给你带来的最大好处是什么？A、更有目的地和认识的人进行交流B、认识陌生人并结为朋友，扩大交际圈C、与旧的同学和朋友保持联系D、打发时间15. 你认为qq有存在的必要性吗？（） A:没有 B:不反对也不赞成 C:可以有 D:非常有必要感想： 通过对需求的获取，我们掌握了一些最基本的获取手段，比如问卷调查等形式，然后，我们根据需求对用户的类型和性质进行解析，最终对用户进行建模，以使我们对需求的群体和对象有很好的准备，以便在后面的设计中游刃有余，切中肯綮。人机交互技术课程设

13、计qq任务分析与交互设计软件工程专业2013级 组长：朱彦荣：20132184 成员：陈 应：20132201 张 雷：20132198 王志鹏：20132204 2015-2016(2)目录任务分析与交互设计说明书错误！未定义书签。1引言131.1编写目的131.2背景131.3参考资料132总体设计142.1需求规定142.1.1 对功能的规定142.2运行环境142.2.1软件环境142.2.2硬件环境142.2.3 开发机器软件环境152.3基本设计概念和处理流程152.4人工处理过程163 系统功能设计17 3.1 功能需求3.1.1 用例1：用户登录注册3.1.2 用例2：聊天3.

14、1.3 用例3：修改好友信息3.1.4 用例4：添加好友3.1.5 用例5：删除好友3.1.6 用例6：创建群3.1.7 用例7：加入群3.1.8 用例8：退出群3.1.9 用例9：群聊天3.1.10 用例10：与好友聊天3.1.11 用例11：上传文章3.1.12 用例12：上传相册3.1.13 用例13：修改个人信息3.1.14 用例14：修改用户权限3.1.15 用例15：添加用户3.1.16 用例16：删除用户3.1.17 用例17：找回密码 3.2用例说明 3.2.1 用例1：登录（GSM-01）3.2.2 用例2：申请号码（GSM-02）3.2.3 用例3：主面板（GSM03）3.

15、2.4 用例4：个人信息（GSM04）3.2.5 用例5：查找（GSM05）3.2.6 用例6：聊天（GSM06）3.2.7 用例7：增加好友（GSM07）3.2.8 用例8：删除好友（GSM08） 4.G-U-L分析 4.1 任务一 登录界面 4.2 任务二 注册账户 4.3 任务三 修改密码 4.4 任务四 更换皮肤一、引言1.1编写目的 本需求规格说明书编写的目的是为了清晰地说明本小组开发的聊天软件要实现的所有功能。同时也为软件使用者和软件开发者之间建立共同的需求目标，进行一定程度的交流沟通。同时对软件所需实现的功能模块做了全面的描述。它是后续开发工作和验收工作的依据文件。软件使用者和软

16、件开发者以此为共同的基础。由于是采用界面原型工具来设计的，这里主要侧重于功能的界面。1.2背景随着网络的普及，人类生活越来越依赖网络，人与人之间的交也更多的是在网络上进行实时性的交流，即时通讯系统也被越来越多的人所使用。即时通讯系统除了普通的生活上的交流，也在商业交流中越来越受到重视，它可以是个很好的与客户之间即时交流的平台，在时间上它要比电子邮件更加具有实时性，而费用相对电话交流也要经济的多。 在这种环境下，即时通软件作为一种即时通讯工具，得到了很好的发展。1.3参考资料（1） Axure参考资料老师发放二、总体设计2.1需求规定2.1.1 对功能的规定即时通信系统用于完成局域网中的注册用户

17、即时通讯功能，具体包括：1. 群聊2. 私聊3. 文件传输4. 离线信息2.2运行环境简要说明本产品的运行环境（包括硬件环境和支持环境）的规定。2.2.1软件环境名称版本语种操作系统WindowsXP，2003操作系统的附加功能数据库平台Mysql5.0语言JDK5.0以上邮件系统客户端软件2.2.2硬件环境硬件配置最低配置推荐配置服务器1CPU：P4 2.0G1CPU：P4 2.8GMem：1GMem：2GHD：40GHD：120G客户端1CPU：P4 1.0G1CPU：P4 2.0GMem：512MMem：1GHD：40GHD：120G2.2.3 开发机器软件环境分类名称版本语种操作系统M

18、icrosoft windows XP2002 Sp3中文操作系统的附加功能不详数据库平台Oracle10g英文数据库平台补丁无开发软件Myeclipse8.5英文Enterprise Architect7.0英文2.3基本设计概念和处理流程（层次分析）2.4人工处理过程功能输入处理过程输出原因用户注册用户名和密码电话，班级验证该用户名有效性注册是否成功不注册没有登录权限用户登录用户名密码系统处理更改的用户的信息并修改数据库的表登录成功或失败登陆后有权使用软件群聊群聊数据包根据数据包的协议分流处理群发给所有用户所有注册用户都可以在大厅里公聊私聊普通数据包服务器根据数据包不同分流处理在对方聊天里

19、显示聊天内容私密聊天文件传输文件数据包服务器根据数据包不同分流处理文件结果 资料分享 发送图片文件数据包服务器根据数据包不同分流处理文件图潘分享截屏截取屏幕部分快照本地图片捕获屏幕映像监控用户信息用户名通过服务器得到用户的聊天内容聊天内容用户监控用户聊天的合法踢人用户名将用户从数据库中清除成功与否维护系统秩序发公告公告内容将公告发布到板块上公告内容通知公告事件三、系统功能设计3.1 功能需求 总体用例图1.1总体功能需求说明：web qq 简易系统是一个集聊天交友，个人展示于一体的网站平台，其中包括以下几个子系统：a) 用户登录注册b) 用户聊天c) 空间管理d) 管理员模块3.1.1 用例1

20、：用户登录注册简要描述：web qq 简易系统的聊天系统采用注册与登录集成的方式。参与者：用户群；前置条件：登陆网站；事件流：用户输入的账号在系统中不存在，就提示注册;若用户输入的账号已存在,则进行账号与密码的验证；后置条件：登录成功。活动图：3.1.2 用例2：聊天简要描述：用户聊天子系统具有丰富的功能，它具有可以与好友一对一的聊天功能，同时也具有群聊天的功能,也具备了发送文件的功能。参与者：已注册的用户。前置条件：用户登录。事件流：打开聊天界面，点击好友头像打开聊天窗口，进行聊天，也可以点击群聊天面板就行群聊。同时也可以发送文件。后置条件：关闭聊天窗口。活动图：3.1.3 用例3：修改好友

21、信息参与者：用户；前置条件：登陆；事件流：1)登录账号 2)找到好友 3)修改信息 4)提交;后置条件：用户看到修改后的信息。活动图：3.1.4 用例4：添加好友参与者：用户；前置条件：登陆；事件流：1)登录账号 2)输入好友账号 3)查找到好友添加 4)提交确认;后置条件：能够即时和好友聊天。3.1.5 用例5：删除好友参与者：用户；前置条件：登陆；事件流：1)登录账号 2)找到好友 3)删除好友 4)提交确认;后置条件：用户看到修改后的信息。3.1.6 用例6：创建群参与者：用户；前置条件：登陆；事件流：1)登录账号 2)申请创建群 3)填入创建信息 4)提交系统审核;后置条件：看到所创建

22、的群。3.1.7 用例7：加入群参与者：用户；前置条件：登陆；事件流：1)登录账号 2)输入群号 3)申请加入 4)提交审核; 5)加入成功;后置条件：看到已加入的群3.1.8 用例8：退出群参与者：用户；前置条件：登陆；事件流：1)登录账号; 2) 找到要退出的群; 3)点击退出群; 4)提交审核; 5)退出成功;后置条件：不在所属于退出群.3.1.9 用例9：群聊天参与者：用户；前置条件：登陆打开群；事件流：1)登录账号; 2) 进入群窗口; 3)输入聊天信息; 4)发送; 5)退出群窗口;后置条件：关闭群窗口。3.1.10 用例10：与好友聊天参与者：用户；前置条件：选择好友；事件流：1

23、)登录账号; 2) 打开聊天窗口; 3)输入聊天信息; 4)发送给好友; 5)退出聊天窗口;后置条件：关闭好友窗口。3.1.11 用例11：上传文章参与者：用户；前置条件：进入空间系统；事件流：1)登录账号; 2) 进入空间系统; 3)上传文章; 4)审核; 5)退出空间;后置条件：关闭空间。3.1.12 用例12：上传相册参与者：用户；前置条件：进入空间系统；事件流：1)登录账号; 2) 进入空间系统; 3)上传相册; 4)审核; 5)退出空间;后置条件：关闭空间。3.1.13 用例13：修改个人信息参与者：用户，管理员；前置条件：登录；事件流：1)登录账号; 2) 进入个人信息界面; 3)

24、修改信息; 4)提交; 5)退出界面;后置条件：看到修改后的信息。3.1.14 用例14：修改用户权限参与者：管理员；前置条件：登录；事件流：1)登录账号; 2) 进入管理员权限界面; 3)查找用户; 4)修改用户权限; 5)提交系统; 6）退出；后置条件：看到修改后用户权限的信息。3.1.15 用例15：添加用户参与者：管理员；前置条件：登录；事件流：1)登录账号; 2) 进入管理员界面; 3)添加用户; 4)提交数据库; 5)退出界面;后置条件：看到创建后的用户账号。3.1.16 用例16：删除用户参与者：管理员；前置条件：登录；事件流：1)登录账号; 2) 进入管理员界面; 3)查找用户

25、; 4)删除用户; 5)提交到数据库; 6)退出管理员界面；后置条件：看不到删除后的用户账号。3.1.17 用例17：找回密码参与者：用户，管理员；前置条件：登入窗口；事件流：1)打开网站; 2) 点击找回密码; 3)进入找回界面; 4)输入个人信息; 5)提交验证; 6)发送密码给用户； 7）登录；后置条件：可以登录账号。3.2用例说明3.2.1 用例1：登录（GSM-01）l 简要描述：输入正确QQ号和密码显示登入成功。输入错误QQ号和密码显示登入失败l 参与者：用户l 执行者：用户l 前置条件：开启程序，进入QQ登陆界面l 事件流：1. 打开登录界面2. QQ号只能是5到10位的数字3.

26、 输入正确QQ号或密码，按登入键，用户登入成功4. 输入非法QQ号或密码，按登入键，提示输入有误5. 输入未注册的QQ号，按登入键，提示无此QQ号请注册6. 输入错误QQ号或密码，按登入键，提示登入失败7. 点击申请号码页面自动转到申请号码窗体，用户可在那进行 注册 l 后置条件：无论用户输入任何信息，按取消键，关闭此窗体，退出软件3.2.2 用例2：申请号码（GSM-02）l 简要描述：用户按照相关提示资料信息进行正确的填写以完成申请QQ号并获得QQ号l 参与者：用户l 执行者：用户l 前置条件：有常用的国家承认的证件（身份证，军人证，护照等），并拥有一台可以连入网络的机器或者移动终端（实名

27、制）l 事件流：1. 按Tab键,光标可在注册窗体中进行切换2. 系统测试用户输入是否符合要求，输入是否有误3. 系统测试用户输入两次密码是否一样4. 有*号标记是否都填写5. 当用户正确输入全部资料信息后，按确定键，用户是否得到相应的QQ号6. 用户注册成功后，注册界面清空l 后置条件：用户点击取消按钮，窗口关闭，返回注册窗口，等待注册3.2.3 用例3：主面板（GSM03）l 简要描述：头像显示，QQ号显示，好友列表，聊天消息，QQ昵称等l 前置条件：打开QQ登录界面并成功登录l 事件流：1. 头像的正确显示及即时更新2. QQ昵称的正确显示及即时更新3. QQ号的正确显示4. 好友列表正

28、确显示及好友列表的更新5. 聊天消息提示6. 点击头像出现消息框7. 能否实现大小头像l 后置条件：退出QQ，等待下次登录3.2.4 用例4：个人信息（GSM04）l 简要描述：修改个人信息（姓名、年龄、性别、头像等），修改安全设置l 参与者：用户l 执行者：用户l 前置条件：正确登录QQ，打开个人信息模块l 事件流：1. 修改个人信息资料后，按确定键，个人信息更新 2. 安全设置中应先输入原密码，在输入新密码，并且输入两次新密码是否一样3. 安全设置在不允许添加好友情况下，任何人都不能加为好友4. 安全设置在允许添加为好友的情况下，任何人都能加为好友5. 安全设置在需要验证才能添加为好友的情

29、况下，经过验证，添加为好友6. 点击个人信息，可以顺利进入修改页面7. 再次进入编辑个人信息模块，用户相关资料信息都能及时的从数据库提前新的信息l 后置条件：退出个人信息模块，等待下次更改3.2.5 用例5：查找（GSM05）l 简要描述：可以基本查找、高级查找好友，或者陌生人，可以按号码查找，也可以按姓名查找l 参与者：用户l 执行者：用户l 前置条件：正确登录QQ，打开查找按钮l 事件流：1. 基本查找中根据用户的ID号查找好友时正确显示相应的用户资料信息2. 基本查找中根据名称查找好友正确显示相应的用户资料信息3. 基本查找中没有输入用户ID号和名称时，提示输入信息4. 高级查找中根据年

30、龄性别查找好友时正确显示相应的用户资料信息 5. 高级查找中没有输入年龄性别时，显示全部的用户资料信息l 后置条件：关闭查找窗口，等待下次查找3.2.6 用例6：聊天（GSM06）l 简要描述：发送信息、接收信息、显示头像与QQ号、显示聊天对象、关闭窗口l 参与者：用户l 执行者：用户l 前置条件：正确登录QQ，并打开聊天窗口界面l 事件流：1. 发送的信息能正确到达对应窗口2. 接收的信息能正确显示在窗口3. QQ头像与QQ号能随个人信息修改显示4. 聊天对象能显示在对应窗口上5. 当聊天结束，关闭窗口能顺利实现6. 发送信息不能为空l 后置条件：关闭聊天窗口，等待聊天，或者开启合另外一人的

31、聊天窗口3.2. 7用例7：增加好友（GSM07）l 简要描述：增加陌生人或者现实朋友至联系人列表l 参与者：用户l 执行者：用户l 前置条件：登录QQ并进入增加好友界面l 事件流：1. 若添加陌生人可先进行查找功能添加，或者直接添加2. 若已知对方ID则可直接添加好友3. 添加后，好友列表更新l 后置条件：无3.2. 8用例8：删除好友（GSM08）l 简要描述：删除对方IDl 参与者：用户l 执行者：用户l 前置条件：登录QQ并进入增加好友界面l 事件流： 1. 直接拖动即将删除联系人至黑名单2. 点击联系人名字，选择删除选项3. 删除联系人后好友列表更新l 后置条件：无四、G-U-L分析

32、 GOMS模型描述的人机交互模型分为四个有序的步骤，解释了交互的整个完成经过。 GOMS是在交互系统中用于分析用户复杂性的建模技术，主要被软件设计用于建立用户行为模型。 GOMS模型是一个缩写术语，G代表Goals（目标）、O代表Operations（操作）、M代表Methods（方法）、S代表Selection rules（选择规则）。 Goals（目标）就是执行任务最终想要得到的结果。 Operations（操作）是任务分析到最底层的行为，是用户为了完成任务必须执行的基本动作。 Methods（方法）是描述如何完成目标的过程。 Selection rules（选择规则）是用户要遵守的判定规

33、则，以确定在特定环境下所使用的方法。 GOMS模型是关于用户在与系统交互时使用的知识和认知过程的模型。GOMS模型主要用于指导第一代（命令行）和第二代（WIMP）人机交互界面的设计和评价。 UAN：是一种简单的符号语言，着眼于用户和界面两个交互实体的描述，主要描述用户的行为序列以及在招待任务时所用的界面。 LOTOS(Language Of Temporal Ordering Specification)：是一种作为国际标准的形式描述语言，它的特点是适于描述解决并发、交互、反馈和不确定性等问题的一系列系统的设计，因此可以用来描述交互系统。 LOTOS与基于扩展FS

34、M模型的一些语言不同，它不关心进程内部的状态与动作，而是依据对各进程外观行为的时态次序进行描述，达到对整个系统功能描述的目的。LOTOS是一种数学概念很强的语言，它主要基于Milner开发的进程代数的概念以及柏林工业大学的抽象数据类型ACI ONE。LOTOS适用于描述协议、分布处理和并行处理。ISO-A定义了两个主要概念：模块(Module)和通道(Channel)。模块是一说明单位，其行为由ISO-B和ISO-C两组的语言来描述。模块可再细分为子模块，各模块间通过通道进行交互。任务一、登录系统 GOMS模型： Goals(目标）：若账号密码正确则进入主界面，否则提示账号或密码出错； Ope

35、rations（操作）：填写账号、密码、并且点击登录按钮； Methods（方法）：当用户输入完账号密码后，再系统内部，等待用户点击登录按钮，当用户点击登录按钮之后，此时要进行判断，如果账号密码都填写了并且是完全正确的，则关闭当前界面，并跳转到主界面；否则，提示出错信息。 Selection rules（选择规则）： 规则一：当用户键盘可用时，采用键盘上的TAB键自动设置焦点，填写信息。规则二：当键盘不可用并且有鼠标的情况下，采用鼠标确定焦点。 规则三：键盘可用，按Enter键进入主界面规则四、键盘不可用，点击登录按钮进入主界面LOTOS: specification 登录ut, ur(tws

36、 : Nat, rws : Nat) : noexit behaviour P1:填写信息之后，点击登录按钮 P2:内部的确认进程，验证信息是否正确。 endspec 任务二、注册账户 GOMS模型：Goals(目标）：为用户注册一个账号Operations（操作）：填写基本信息：姓名、性别、昵称、生日、电话等；点击确定注册、验证手机号上的验证码Methods（方法）：当用户进入注册界面的时候，系统弹出将要填写的信息，用户开始填写必要的信息，其中手机验证码是必须有的，通过点击获取验证码，系统会向用户手机发送验证码信息，在一定的时限之内填写即可，最后用户单击注册账号，会显示注册的结果。 Sele

37、ction rules（选择规则）： 规则一：当用户键盘可用时，采用键盘上的TAB键自动设置焦点，填写信息。规则二：当键盘不可用并且有鼠标的情况下，采用鼠标确定焦点。规则三、若用户不采用手机注册的方式，也可以采用其他的方式等规则四、用户可以填写非必填的选项，也可以不填任务三、找回密码 GOMS模型：Goals(目标）：用户密码丢失，需要找回密码Operations（操作）：填写账号、手机号等必要信息、填写验证码信息、填写新密码、点击确认修改按钮等操作。Methods（方法）：用户点击找回密码选项时，会弹出找回密码界面，在这个界面中，填写必要的信息，并且采用手机发送验证码的方式进行确认，若新密码

38、、账号、验证码都正确无误，则按点击提交按钮，系统会修改数据库，来适应新的密码。 Selection rules（选择规则）： 规则一：当用户键盘可用时，采用键盘上的TAB键自动设置焦点，填写信息。规则二：当键盘不可用并且有鼠标的情况下，采用鼠标确定焦点。规则三、可以采用别的方式确定身份，比如说qq的相关安全软件。任务四、更换皮肤GOMS模型： Goals(目标）：更换主界面的皮肤Operations（操作）：点击更换皮肤按钮、选择相应的新皮肤、关闭皮肤界面Methods（方法）：对于更换皮肤，前置条件是用户已经在主界面之内，此时用户点击更换皮肤按钮，会弹出更换皮肤的皮肤界面，选择相应的皮肤系统

39、会自动更换皮肤，然后关闭界面即可。Selection rules（选择规则）： 规则一：可以采用别的方式打开皮肤界面，比如快捷键、点击等方式。规则二：若不想关闭皮肤界面则可以不关闭。五、感想 任务分析与交互设计在需求分析的基础上对交互设计向前推进了一大步，是把设想变为现实的一大步。在这一环节中，我们要深刻理解我们的交互系统到底要做什么，怎么做，需要注意哪些细节和功能特性。另外，我们还要一交互的眼光去审视我们的设计，不断地修改和完善已达到最优的交互效果和功能。同时不断地积累我们的分析和设计能力，为以后的交互实现做准备。 人机交互技术课程设计qq概念设计与低保真原型设计软件工程专业2013级 组长

40、：朱彦荣：20132184 成员：陈 应：20132201 张 雷：20132198 王志鹏：20132204 2015-2016(2)1、 低保真原型介绍 纸面原型：就是指画在纸上、白板上的界面原型。便于修改和绘制，不便于保存和展示。能让所有人参与其中，创造很多附加信息和价值。通过绘制的过程，你可以更清晰的传递界面的布局和逻辑。 高保真原型：通常指高保真灰度线框图或产品演示Demo。界面布局和交互效果与实际产品完全等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交互设计师有较好的视觉审美的能力，对界面比较敏感，有控件和组件的概念，注重界面的规范性和一致性。 低保真原型：能

41、够准确的传达界面的布局和交互方式，但是美观、效果欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称，往往也可以作为需求设计稿输出。二、概念设计与低保真原型设计1纸质原型和低保真原型 登录界面：主界面：注册界面：其他界面：评估：该低保真原型再突出了qq的基本功能的基础下，又增加了一些艺术效果和娱乐元素。2、 线框图 线框图(Wireframe)是软件或者网站设计过程中非常重要的一个环节。 线框图是整合在框架层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。通过把这三者放到一个文档中，线框

42、图可以确定一个建立在基本概念结构上的架构，同时指出了视觉设计应该前进的方向。在Web开发和软件开发项目中线框扮演着极其重要的角色，因为它能允许开发者和客户在项目搭建中可视化网页。友好性、易操作以及内容多样化对于网站来说非常重要，利用线框工具可以帮助你简化繁琐的设计过程为你节省时间和精力。常用的工具包括PowerMockup为PPT添加线框、Moqups在线Mockup线框工具、Wireframe.cc 在线线框工具等。 线框图如下：3、层次架：4、情节串联： 一般的情况是用户注册之后，填写账号密码可以进入主界面，并且根据提示进行相应的操作。完毕后退出主界面。5. 感想 概念设计和低保真设计这一

43、环节看似没有进行实质的工作，其实对后面的设计影响是非常深远的，只有认真完成了该部分的工作，我们才能在以后的设计中按部就班，设计出自己想要的原型和软件，因此，我们要深刻理解线框图、低保真原型等的作用，以此做到游刃有余的设计和分析问题，提高自己的交互设计的水平和能力。 人机交互技术课程设计 qq详细设计与高保真原型设计软件工程专业2013级 组长：朱彦荣：20132184 成员：陈 应：20132201 张 雷：20132198 王志鹏：20132204 2015-2016(2)1、 高保真原型设计介绍 原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。 纸面原型就是

44、指画在纸上、白板上的界面原型。便于修改和绘制，不便于保存和展示。能让所有人参与其中，创造很多附加信息和价值。通过绘制的过程，你可以更清晰的传递界面的布局和逻辑。 高保真原型通常指高保真灰度线框图或产品演示Demo。界面布局和交互效果与实际产品完全等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交互设计师有较好的视觉审美的能力，对界面比较敏感，有控件和组件的概念，注重界面的规范性和一致性。高保真原型注意事项：1) 灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。2) 清晰地展示流程：好的操作流程是易用性的最基本标准。3) 关键功能要有故事版：更好的、更快的理解产

45、品。4) 要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。5) 有一致性：一致性会降低用户对界面的学习和识别成本。6) 有规范性：好的软件或者网站绝对是规范的。二、高保真原型图设计过程和演示2.1第一阶段： 对于qq软件，小组目前设计了登录界面、主界面、注册账号界面、找回密码界面、照片界面。并且在主界面中采用了动态面板技术，嵌入了6个子界面，在第六个子界面中又使用动态面板技术，制作了三个子界面。整体布局如下：1.首先是登录界面：完全仿照了qq的布局，采用了图片控件、文本框、按钮等控件，密码部分，输入文字时是不可见的。并且在某些主要部位建立了连接，以便转到相应的界面。点击登录进入

46、主界面。按F5演示如下：点击登录后如下：2.这里先不谈主界面，先讲一下注册账号：点击注册账号之后进入： 这个注册界面。中间也有很多控件，可以填写信息。点击提交注册后又回到主界面。比如：3.再点击找回密码，进入如下界面：填写相应的信息之后，点击下一步，进入登录界面。4.这次真正进入主界面：可以看到有很多按钮，这些按钮有的我已经做了相应的链接，比如：有的是内部链接，有的是外部链接，比如qq空间就是一个外部链接。点击之后，如下：由于安全考虑，只能在新窗口中打开：看完了外部链接，我们看一下内部的，内部的我用了动态面板，功能十分强大：，标号为16的点击以下就转换成相应的界面。下面是第一个界面：4.2.下

47、面是所有的动态面板子界面： 注意5这里的照片，我做了个链接，可以转到：下面是最后一个，比较复杂：这三个控件也采用了动态面板的原理。 2.2修改完善阶段界面设计，最重要的是有创意，注意布局，熟练掌握控件的用法，尤其是动态面板的用法，可以让界面非常美观，具有动态性。 继续完善上次的功能，另外增添了更多的动作，利用动态面板等工具，使界面更加的具有美感，突出影响力。具体改进有下：1. 登录界面首先是运用动态面板增加了动态性的图片切换，使得下图的上面的图片不断渐变，更加逼近qq的真实界面，另外使“X”的关闭产生作用，还有就是修改了按钮，使得鼠标指上去之后改变颜色和字体大小等，更加真实，最后，我尝试用了全局变量，记录下登录的账号，准备在主界面