人机交互课程设计

人机交互的软件工程方法

课程设计说明书

文档类型：（个人）

专业：软件工程班级：2016级1班学号：201601060801

设计人：

山东科技大学

2019年 1 月 6 日

目录

一、课程设计任务概述 (2)

1. 1目的与任务 (2)

1.2开发环境 (2)

1.3参考资料 (2)

1.4任务完成的一般过程 (2)

1.5 软件配置 (3)

二、介绍本次设计的主题和功能 (3)

三、需求分析 (5)

3.1需求分析流程及用例图 (5)

3.2工作内容 (6)

四、交互设计 (7)

4.1任务描述 (7)

4.2界面功能需求 (7)

4.4顺序图 (7)

五、交互实现 (8)

5.1交互实现工作 (8)

5.2经验教训总结 (10)

六、可用性分析与评估 (10)

6.1系统可用性分析与评估的意义： (10)

6.2系统可用性分析与评估分工与结论： (11)

七、工作的具体过程 (12)

7.1设计过程 (12)

7.2遇到的困难及解决情况 (12)

八、个人小结 (13)

一、课程设计任务概述

1. 1目的与任务

1)通过课程设计，主要达到以下目的：

加深对《人机交互的软件工程》课程以及数据库系统、软件工程、程序设计语言等相关课程的理论知识的理解和应用水平。

掌握人机交互系统设计的基本原则，熟悉人机交互系统设计的步骤。

掌握人机交互界面的表示模型和实现；

熟悉人机交互界面的可用性评估方法；

2)课程设计任务：完成网上商城系统界面设计。

1.2开发环境

Windows系统，开发工具Axure 。

1.3参考资料

[1] 孟祥旭.李学庆主编.人机交互基础教程.清华大学出版社[M]，2016年3月；

[2] 董士海.计算机用户界面及其工具.北京：科学出版社,1999

[3] 罗仕鉴.朱上上.孙守迁.人机界面设计.北京.机械出版社,2002

[4] 谭浩强.网站设计与制作.北京.中国铁道出版社，2002

1.4任务完成的一般过程

为更加全面的制作该网站，我们从软件设计的基本步骤出发：

1.5 软件配置

IE浏览器，火狐浏览器、googl浏览器,Android手机等。

二、介绍本次设计的主题和功能

本次课程设计是我一个人独立完成，主题是书籍类的网上商城，界面设计的总体思想是简洁大方。

网上商城系统功能结构图

注册、登录

订单

三、需求分析

3.1需求分析流程及用例图

用户调查：

用户角色构建 用户建模 可行性需求

功能需求

竞争产品分析

用例图

3.2工作内容

1）竞争商品分析

主要对当下最受欢迎的，淘宝网，京东商城以及蘑菇街进行比较和分析。从他们的页面布局及产品分类进行分析，得出如下结论：

商品分类清晰，易于查找

界面简洁明了

无太多广告和促销手段

2）需求分析模型评价

根据本组设计的需求模型及当前常用的商城模式对比可以发现，该需求模型没有明显的创新点，与其他相比显得较为普通，且商品的销售人群范围较小，种类较少，对于用户需求方面做的还是相当全面的，能够充分显示用

户的主要需求，网站的整体规划做的比较完善例如数据字典、用户手册等。

四、交互设计

4.1任务描述

本人在该设计中主要的职责是设计购物车页面、快递选择页面、支付选择页面设计。针对快递选择界面进行介绍。首先客户需要填写收货人信息，在填写过程中，所在地区、街道地址、收货人姓名、手机号等信息不允许为空。填写完成后，客户可以根据自身需求选择快递方式。

4.2界面功能需求

4.3顺序图

五、交互实现

5.1交互实现工作

主要的交互实现有登录、注册、签订授权协议、浏览书籍详情、加入购物车、查看订单等

示例如下：

注册时需要用户签订服务协议，避免出现不必要的纠纷

在将商品加入购物车时，可以选择购买的数量，并可显示总价。

5.2经验教训总结

在进行设计时，遇到了很多新手容易犯的错误，并且在开发过程中反复地出现。首先是使用部件库时有易错的部分。其次是主要页面原型设计的易错点。现总结如下。

图片：图片拖拽进画布时如果选择“压缩图片大小”，gif文件会变成静态的图片形式。

动态面板滚动栏：使用滚动栏给的动态面板添加可滚动内容，在动态面板属性面板中选择，滚动栏下拉菜单并选择滚动栏的显示方式，为了让滚动栏正常显示，动态面板状态内中的内容必须比动态面板的边界轮廓大，并且不能勾选调整大小以适合内容。

内部框架：可以给内部框架的属性选项框中添加Axure内置的预览图片，如视频、地图，也可以自定义预览图片。

提交按钮：提交按钮无法设置交互样式，如：选中/鼠标悬停/鼠标按下。提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了。取而代之的是生成原型后在浏览器中它会使用内建的样式。如果你想自定义你的按钮样式，请使用形状按钮“Shape button”。

六、可用性分析与评估

6.1系统可用性分析与评估的意义：

在产品开发工程中增强可用性可以带来很多好处，包括：

（1）提高生产率；

（2）增加销售和利润；

（3）降低培训时间和产品支持的成本；

（4）减少开发时间和开发成本；

（5）减少维护成本；

（6）增加用户的满意度；

可用性评估应该遵循的原则：

（1）最具有权威性的可用性能测试和评估不应该针对专业技术人员，二应该针对产品的用户。对产品可用性能的测试和评估，应主要有用户来完成。

（2）软件的可用性能测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。

（3）产品的可用性能测试，必须是在用户的实际工作任务和操作环境下进行。

（4）要选择有广泛代表性能的用户。

6.2系统可用性分析与评估分工与结论：

为方面给网上商城系统的测试，我担任开发人员和产品测试人员，为满足以上的产品可用性的评估准则，经过对产品的不断测试得出如下测试结论：

的数据也没用创建，无法实现相应的代码相应，因此，整个产品的测试都是基于界面的，并没有设计到代码方面。总而言之，整个产品的测试是不合理的，无奈地是，产品的测试人员也是我自己，显然是不符合测试要求的。

产品评估建议，整体网上商品系统的开发应该更加的完善，除了设计网站的页面外，还应该有后台控制页面，以方便管理员对整个网站的控制。还

用该有相应的代码对用户的操作进行响应，同时应该设计响应的数据。综上所述，应该设计一个功能完整的网上商品系统。

七、工作的具体过程

7.1设计过程

为更加完善登陆及商品展示页面的功能，在设计页面时，参考《人机交互基础教程》中界面设计原则进行界面设计，结合用户需求，设计界面相应功能。为方面开发，网站页面上所有的图片均是从同类网站上面截图下来的。界面设计完成后，进行界面功能测试。

同时针对测试出现的错误进行改正和总结。为增加网站的创新点我们特别设计了，添加邮箱功能，当用户输入相应的邮箱地址时，系统会自动的进行邮箱验证。在商品详情展示页面特地设置了购物流程提示以及退货流程提示，以方便用户购买商品从而降低出错率。

7.2遇到的困难及解决情况

在进行页面设计时，遇到的第一个问题是关于母版的运用，本来觉得运用母版可以提高效率，但是我处理不了母版导致的问题，由于时间关系就放弃了母版的使用，有点遗憾，有机会还要学习一下。

第二个问题是关于换肤的问题，本来想使用全局变量去实现，后来我发现用全局变量需要刷新页面才能换肤，所以我添加了一个换肤按钮，运用显

示和隐藏功能来实现这个交互。我觉得效果还不错，而且很简单就能实现。

我觉得要不断提高对未知知识的探索，提升自学能力，在编程或者开发时总会遇到许多问题，在遇到问题是要找解决方法，不能一个人想，要学会到网上寻找相应的解决方案，要知道自己遇到的问题别人也是会遇到的。同时要及时的和其他同学进行讨论，所负责的设计部分要为整个网站服务，要考虑到网站的其他界面的色彩布局等等。

八、个人小结

通过这次课程设计学到了很多：首先是对理论知识的理解更加清晰了，比如，需求分析，用户建模，起初对于需求分析的认识只是停留在课本上，尽管书上有相应的例子，但依旧是陌生的，通过这次课程设计我知道了如何做需求分析，如何做用户建模，在进行页面设计的时候能够将书上学到的，界面设计原则。界面设计要素运用到实际的界面设计中。

除对理论知识的认知更加深刻外，在实践方面更是有很大的提升，首先是对各大网站的数据分析和总结，针对当前最受欢迎的商品销售类网站进行分析，找出相应的优点和不足，对网站的运营方式进行研究，寻找出最为合适的网站运营方式，例如商品的打折促销、最新商品的及时推送等。

由于之前对于网站的设计方式仅仅停留在代码编写，对于Axcure软件的认知为零，对于该软件的实际操作更是没有，根据现有的学习资料和网上查找的资料对该软件进行学习，能够做到相应的要求，同时对于界面设计的认识更是有所提高，更加注重网站布局及色彩的搭配。在进行实践的过程中，我发现，一定要关注好部件、母版、动态面板，并学会灵活运用部件属性。

总的来说，通过本次课程设计，我在学会应用Axure RP工具的同时，也学习到了很多优秀的设计。明白结合实际业务需求和系统实际应用，从而

设计原型的过程。尽管在这个过程中，我遇到了很多困难，但是我从实际中了解到了人机交互基本的思想，将理论和实践相结合，提高了动手能力。