人机交互课程设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
内部框架：可以给内部框架的属性选项框中添加Axure内置的预览图片，如视频、地图，也可以自定义预览图片。
提交按钮：提交按钮无法设置交互样式，如：选中/鼠标悬停/鼠标按下。提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了。取而代之的是生成原型后在浏览器中它会使用内建的样式。如果你想自定义你的按钮样式，请使用形状按钮“Shape button”。
六、可用性分析与评估
6.1系统可用性分析与评估的意义：
在产品开发工程中增强可用性可以带来很多好处，包括：
（1）提高生产率；
（2）增加销售和利润；
（3）降低培训时间和产品支持的成本；
（4）减少开发时间和开发成本；
（5）减少维护成本；
（6）增加用户的满意度；
可用性评估应该遵循的原则：
（1）最具有权威性的可用性能测试和评估不应该针对专业技术人员，二应该针对产品的用户。对产品可用性能的测试和评估，应主要有用户来完成。
商品首页及商品展示
购物车及商品支付
页面左侧展示文字描述不合理
购物车界面功能太简单
首页商品展示页面较复杂
界面转换速度慢
部分商品操作响应度不高
界面信息重复度较高容易误导用户
首页标题栏的商品分类重复度较高
优点：用户支付选择方式充足
Head标题栏目下拉展示出错
用户确认信息多，减少出错
由于时间关系，设计该网站系统时没有设计相应的管理后台，对于相应的数据也没用创建，无法实现相应的代码相应，因此，整个产品的测试都是基于界面的，并没有设计到代码方面。总而言之，整个产品的测试是不合理的，无奈地是，产品的测试人员也是我自己，显然是不符合测试要求的。
（2）软件的可用性能测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。
（3）产品的可用性能测试，必须是在用户的实际工作任务和操作环境下进行。
（4）要选择有广泛代表性能的用户。
6.2系统可用性分析与评估分工与结论：
为方面给网上商城系统的测试，我担任开发人员和产品测试人员，为满足以上的产品可用性的评估准则，经过对产品的不断测试得出如下测试结论：
四、交互设计
4.1
本人在该设计中主要的职责是设计购物车页面、快递选择页面、支付选择页面设计。针对快递选择界面进行介绍。首先客户需要填写收货人信息，在填写过程中，所在地区、街道地址、收货人姓名、手机号等信息不允许为空。填写完成后，客户可以根据自身需求选择快递方式。
4.2
界面
具体要求
商城首页
展示商品
登录、注册界面
主要对当下最受欢迎的，淘宝网，京东商城以及蘑菇街进行比较和分析。Байду номын сангаас他们的页面布局及产品分类进行分析，得出如下结论：
商品分类清晰，易于查找
界面简洁明了
无太多广告和促销手段
2）需求分析模型评价
根据本组设计的需求模型及当前常用的商城模式对比可以发现，该需求模型没有明显的创新点，与其他相比显得较为普通，且商品的销售人群范围较小，种类较少，对于用户需求方面做的还是相当全面的，能够充分显示用户的主要需求，网站的整体规划做的比较完善例如数据字典、用户手册等。
1.2
Windows系统，开发工具Axure。
1.3
[1]孟祥旭.李学庆主编.人机交互基础教程.清华大学出版社[M]，2016年3月；
[2]董士海.计算机用户界面及其工具.北京：科学出版社,1999
[3]罗仕鉴.朱上上.孙守迁.人机界面设计.北京.机械出版社,2002
[4]谭浩强.网站设计与制作.北京.中国铁道出版社，2002
2、商城界面设计
3、实现基本的页面提示功能
4、对商品进行合理的分类
三、设计说明书应附有下列图纸：活动图顺序图界面图
四、功能说明：商城首页、导航栏、商品展示页面的设计；
商品详情展示页、商城登录、商城注册页面的设计；
购物车、订单的设计。
六、命题发出日期：设计完成日期：
成绩：
指导教师（签章）：
一、课程设计任务概述
第二个问题是关于换肤的问题，本来想使用全局变量去实现，后来我发现用全局变量需要刷新页面才能换肤，所以我添加了一个换肤按钮，运用显示和隐藏功能来实现这个交互。我觉得效果还不错，而且很简单就能实现。
我觉得要不断提高对未知知识的探索，提升自学能力，在编程或者开发时总会遇到许多问题，在遇到问题是要找解决方法，不能一个人想，要学会到网上寻找相应的解决方案，要知道自己遇到的问题别人也是会遇到的。同时要及时的和其他同学进行讨论，所负责的设计部分要为整个网站服务，要考虑到网站的其他界面的色彩布局等等。
签订授权协议、跳转首页
购物车界面
修改购买数量
显示单价、购买数量、总价
订单页面
填写收货人信息
选择快递方式
商品评价界面
对商铺、物流进行评价
4.
五、交互实现
5.1
主要的交互实现有登录、注册、签订授权协议、浏览书籍详情、加入购物车、查看订单等
示例如下：
注册时需要用户签订服务协议，避免出现不必要的纠纷
在将商品加入购物车时，可以选择购买的数量，并可显示总价。
八、个人小结
通过这次课程设计学到了很多：首先是对理论知识的理解更加清晰了，比如，需求分析，用户建模，起初对于需求分析的认识只是停留在课本上，尽管书上有相应的例子，但依旧是陌生的，通过这次课程设计我知道了如何做需求分析，如何做用户建模，在进行页面设计的时候能够将书上学到的，界面设计原则。界面设计要素运用到实际的界面设计中。
1.
1)通过课程设计，主要达到以下目的：
加深对《人机交互的软件工程》课程以及数据库系统、软件工程、程
序设计语言等相关课程的理论知识的理解和应用水平。
掌握人机交互系统设计的基本原则，熟悉人机交互系统设计的步骤。
掌握人机交互界面的表示模型和实现；
熟悉人机交互界面的可用性评估方法；
2)课程设计任务：完成网上商城系统界面设计。
除对理论知识的认知更加深刻外，在实践方面更是有很大的提升，首先是对各大网站的数据分析和总结，针对当前最受欢迎的商品销售类网站进行分析，找出相应的优点和不足，对网站的运营方式进行研究，寻找出最为合适的网站运营方式，例如商品的打折促销、最新商品的及时推送等。
由于之前对于网站的设计方式仅仅停留在代码编写，对于Axcure软件的认知为零，对于该软件的实际操作更是没有，根据现有的学习资料和网上查找的资料对该软件进行学习，能够做到相应的要求，同时对于界面设计的认识更是有所提高，更加注重网站布局及色彩的搭配。在进行实践的过程中，我发现，一定要关注好部件、母版、动态面板，并学会灵活运用部件属性。
产品评估建议，整体网上商品系统的开发应该更加的完善，除了设计网站的页面外，还应该有后台控制页面，以方便管理员对整个网站的控制。还用该有相应的代码对用户的操作进行响应，同时应该设计响应的数据。综上所述，应该设计一个功能完整的网上商品系统。
七、工作的具体过程
7.1
为更加完善登陆及商品展示页面的功能，在设计页面时，参考《人机交互基础教程》中界面设计原则进行界面设计，结合用户需求，设计界面相应功能。为方面开发，网站页面上所有的图片均是从同类网站上面截图下来的。界面设计完成后，进行界面功能测试。
同时针对测试出现的错误进行改正和总结。为增加网站的创新点我们特别设计了，添加邮箱功能，当用户输入相应的邮箱地址时，系统会自动的进行邮箱验证。在商品详情展示页面特地设置了购物流程提示以及退货流程提示，以方便用户购买商品从而降低出错率。
7.2
在进行页面设计时，遇到的第一个问题是关于母版的运用，本来觉得运用母版可以提高效率，但是我处理不了母版导致的问题，由于时间关系就放弃了母版的使用，有点遗憾，有机会还要学习一下。
5.2
在进行设计时，遇到了很多新手容易犯的错误，并且在开发过程中反复地出现。首先是使用部件库时有易错的部分。其次是主要页面原型设计的易错点。现总结如下。
图片：图片拖拽进画布时如果选择“压缩图片大小”，gif文件会变成静态的图片形式。
动态面板滚动栏：使用滚动栏给的动态面板添加可滚动内容，在动态面板属性面板中选择，滚动栏下拉菜单并选择滚动栏的显示方式，为了让滚动栏正常显示，动态面板状态内中的内容必须比动态面板的边界轮廓大，并且不能勾选调整大小以适合内容。
人机交互的软件工程方法
课程设计说明书
文档类型：（个人）
专业：软件工程班级：2016级1班
学号：201601060801
设计人：
山东科技大学
2019年1月6日
山东科技大学
课程设计任务书
一、课程设计题目：网上商城系统界面设计
设计原始资料：《Axure使用教程》
二、设计应解决下列各主要问题：
1、掌握Axure的具体使用
1.4
为更加全面的制作该网站，我们从软件设计的基本步骤出发：
1.5
IE浏览器，火狐浏览器、googl浏览器,Android手机等。
二、介绍
本次课程设计是我一个人独立完成，主题是书籍类的网上商城，界面设计的总体思想是简洁大方。
网上商城系统功能结构图
注册、登录
订单
三、需求分析
3.1
用例图
3.2
1）竞争商品分析
提交按钮：提交按钮无法设置交互样式，如：选中/鼠标悬停/鼠标按下。提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了。取而代之的是生成原型后在浏览器中它会使用内建的样式。如果你想自定义你的按钮样式，请使用形状按钮“Shape button”。
六、可用性分析与评估
6.1系统可用性分析与评估的意义：
在产品开发工程中增强可用性可以带来很多好处，包括：
（1）提高生产率；
（2）增加销售和利润；
（3）降低培训时间和产品支持的成本；
（4）减少开发时间和开发成本；
（5）减少维护成本；
（6）增加用户的满意度；
可用性评估应该遵循的原则：
（1）最具有权威性的可用性能测试和评估不应该针对专业技术人员，二应该针对产品的用户。对产品可用性能的测试和评估，应主要有用户来完成。
商品首页及商品展示
购物车及商品支付
页面左侧展示文字描述不合理
购物车界面功能太简单
首页商品展示页面较复杂
界面转换速度慢
部分商品操作响应度不高
界面信息重复度较高容易误导用户
首页标题栏的商品分类重复度较高
优点：用户支付选择方式充足
Head标题栏目下拉展示出错
用户确认信息多，减少出错
由于时间关系，设计该网站系统时没有设计相应的管理后台，对于相应的数据也没用创建，无法实现相应的代码相应，因此，整个产品的测试都是基于界面的，并没有设计到代码方面。总而言之，整个产品的测试是不合理的，无奈地是，产品的测试人员也是我自己，显然是不符合测试要求的。
（2）软件的可用性能测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。
（3）产品的可用性能测试，必须是在用户的实际工作任务和操作环境下进行。
（4）要选择有广泛代表性能的用户。
6.2系统可用性分析与评估分工与结论：
为方面给网上商城系统的测试，我担任开发人员和产品测试人员，为满足以上的产品可用性的评估准则，经过对产品的不断测试得出如下测试结论：
四、交互设计
4.1
本人在该设计中主要的职责是设计购物车页面、快递选择页面、支付选择页面设计。针对快递选择界面进行介绍。首先客户需要填写收货人信息，在填写过程中，所在地区、街道地址、收货人姓名、手机号等信息不允许为空。填写完成后，客户可以根据自身需求选择快递方式。
4.2
界面
具体要求
商城首页
展示商品
登录、注册界面
主要对当下最受欢迎的，淘宝网，京东商城以及蘑菇街进行比较和分析。Байду номын сангаас他们的页面布局及产品分类进行分析，得出如下结论：
商品分类清晰，易于查找
界面简洁明了
无太多广告和促销手段
2）需求分析模型评价
根据本组设计的需求模型及当前常用的商城模式对比可以发现，该需求模型没有明显的创新点，与其他相比显得较为普通，且商品的销售人群范围较小，种类较少，对于用户需求方面做的还是相当全面的，能够充分显示用户的主要需求，网站的整体规划做的比较完善例如数据字典、用户手册等。
1.2
Windows系统，开发工具Axure。
1.3
[1]孟祥旭.李学庆主编.人机交互基础教程.清华大学出版社[M]，2016年3月；
[2]董士海.计算机用户界面及其工具.北京：科学出版社,1999
[3]罗仕鉴.朱上上.孙守迁.人机界面设计.北京.机械出版社,2002
[4]谭浩强.网站设计与制作.北京.中国铁道出版社，2002
2、商城界面设计
3、实现基本的页面提示功能
4、对商品进行合理的分类
三、设计说明书应附有下列图纸：活动图顺序图界面图
四、功能说明：商城首页、导航栏、商品展示页面的设计；
商品详情展示页、商城登录、商城注册页面的设计；
购物车、订单的设计。
六、命题发出日期：设计完成日期：
成绩：
指导教师（签章）：
一、课程设计任务概述
第二个问题是关于换肤的问题，本来想使用全局变量去实现，后来我发现用全局变量需要刷新页面才能换肤，所以我添加了一个换肤按钮，运用显示和隐藏功能来实现这个交互。我觉得效果还不错，而且很简单就能实现。
我觉得要不断提高对未知知识的探索，提升自学能力，在编程或者开发时总会遇到许多问题，在遇到问题是要找解决方法，不能一个人想，要学会到网上寻找相应的解决方案，要知道自己遇到的问题别人也是会遇到的。同时要及时的和其他同学进行讨论，所负责的设计部分要为整个网站服务，要考虑到网站的其他界面的色彩布局等等。
签订授权协议、跳转首页
购物车界面
修改购买数量
显示单价、购买数量、总价
订单页面
填写收货人信息
选择快递方式
商品评价界面
对商铺、物流进行评价
4.
五、交互实现
5.1
主要的交互实现有登录、注册、签订授权协议、浏览书籍详情、加入购物车、查看订单等
示例如下：
注册时需要用户签订服务协议，避免出现不必要的纠纷
在将商品加入购物车时，可以选择购买的数量，并可显示总价。
八、个人小结
通过这次课程设计学到了很多：首先是对理论知识的理解更加清晰了，比如，需求分析，用户建模，起初对于需求分析的认识只是停留在课本上，尽管书上有相应的例子，但依旧是陌生的，通过这次课程设计我知道了如何做需求分析，如何做用户建模，在进行页面设计的时候能够将书上学到的，界面设计原则。界面设计要素运用到实际的界面设计中。
1.
1)通过课程设计，主要达到以下目的：
加深对《人机交互的软件工程》课程以及数据库系统、软件工程、程
序设计语言等相关课程的理论知识的理解和应用水平。
掌握人机交互系统设计的基本原则，熟悉人机交互系统设计的步骤。
掌握人机交互界面的表示模型和实现；
熟悉人机交互界面的可用性评估方法；
2)课程设计任务：完成网上商城系统界面设计。
除对理论知识的认知更加深刻外，在实践方面更是有很大的提升，首先是对各大网站的数据分析和总结，针对当前最受欢迎的商品销售类网站进行分析，找出相应的优点和不足，对网站的运营方式进行研究，寻找出最为合适的网站运营方式，例如商品的打折促销、最新商品的及时推送等。
由于之前对于网站的设计方式仅仅停留在代码编写，对于Axcure软件的认知为零，对于该软件的实际操作更是没有，根据现有的学习资料和网上查找的资料对该软件进行学习，能够做到相应的要求，同时对于界面设计的认识更是有所提高，更加注重网站布局及色彩的搭配。在进行实践的过程中，我发现，一定要关注好部件、母版、动态面板，并学会灵活运用部件属性。
产品评估建议，整体网上商品系统的开发应该更加的完善，除了设计网站的页面外，还应该有后台控制页面，以方便管理员对整个网站的控制。还用该有相应的代码对用户的操作进行响应，同时应该设计响应的数据。综上所述，应该设计一个功能完整的网上商品系统。
七、工作的具体过程
7.1
为更加完善登陆及商品展示页面的功能，在设计页面时，参考《人机交互基础教程》中界面设计原则进行界面设计，结合用户需求，设计界面相应功能。为方面开发，网站页面上所有的图片均是从同类网站上面截图下来的。界面设计完成后，进行界面功能测试。
同时针对测试出现的错误进行改正和总结。为增加网站的创新点我们特别设计了，添加邮箱功能，当用户输入相应的邮箱地址时，系统会自动的进行邮箱验证。在商品详情展示页面特地设置了购物流程提示以及退货流程提示，以方便用户购买商品从而降低出错率。
7.2
在进行页面设计时，遇到的第一个问题是关于母版的运用，本来觉得运用母版可以提高效率，但是我处理不了母版导致的问题，由于时间关系就放弃了母版的使用，有点遗憾，有机会还要学习一下。
5.2
在进行设计时，遇到了很多新手容易犯的错误，并且在开发过程中反复地出现。首先是使用部件库时有易错的部分。其次是主要页面原型设计的易错点。现总结如下。
图片：图片拖拽进画布时如果选择“压缩图片大小”，gif文件会变成静态的图片形式。
动态面板滚动栏：使用滚动栏给的动态面板添加可滚动内容，在动态面板属性面板中选择，滚动栏下拉菜单并选择滚动栏的显示方式，为了让滚动栏正常显示，动态面板状态内中的内容必须比动态面板的边界轮廓大，并且不能勾选调整大小以适合内容。
人机交互的软件工程方法
课程设计说明书
文档类型：（个人）
专业：软件工程班级：2016级1班
学号：201601060801
设计人：
山东科技大学
2019年1月6日
山东科技大学
课程设计任务书
一、课程设计题目：网上商城系统界面设计
设计原始资料：《Axure使用教程》
二、设计应解决下列各主要问题：
1、掌握Axure的具体使用
1.4
为更加全面的制作该网站，我们从软件设计的基本步骤出发：
1.5
IE浏览器，火狐浏览器、googl浏览器,Android手机等。
二、介绍
本次课程设计是我一个人独立完成，主题是书籍类的网上商城，界面设计的总体思想是简洁大方。
网上商城系统功能结构图
注册、登录
订单
三、需求分析
3.1
用例图
3.2
1）竞争商品分析