人机交互课程设计

1、人机交互的软件工程方法课程设计说明书文档类型：（个人）专业：软件工程班级：2016级1班学号：201601060801设计人：山东科技大学2019年1月6日山东科技大学课程设计任务书一、课程设计题目：网上商城系统界面设计设计原始资料：Axure使用教程二、设计应解决下列各主要问题：1、掌握Axure的具体使用2、商城界面设计3、实现基本的页面提示功能4、对商品进行合理的分类三、设计说明书应附有下列图纸：活动图顺序图界面图四、功能说明：商城首页、导航栏、商品展示页面的设计：商品详情展示页、商城登录、商城注册页面的设计：购物车、订单的设计。六、命题发出日期：设计完成日期：成绩：指导教师（签章）：山

2、东科技大学学生课程设计目_录TOC o 1-5 h z HYPERLINK l bookmark6 o Current Document 一、课程设计任务概述2 HYPERLINK l bookmark8 o Current Document 1.1目的与任务2 HYPERLINK l bookmark10 o Current Document 1.2开发环境2 HYPERLINK l bookmark12 o Current Document 1.3参考资料2 HYPERLINK l bookmark14 o Current Document 1.4任务完成的一般过程2 HYPERLINK

3、l bookmark16 o Current Document 1.5软件配置3 HYPERLINK l bookmark18 o Current Document 二、介绍本次设计的主题和功能3 HYPERLINK l bookmark21 o Current Document 三、需求分析53.1需求分析流程及用例图5 HYPERLINK l bookmark23 o Current Document 3.2工作内容6 HYPERLINK l bookmark25 o Current Document 四、交互设计7 HYPERLINK l bookmark27 o Current Doc

4、ument 4.1任务描述7 HYPERLINK l bookmark29 o Current Document 4.2界面功能需求74.4顺序图7 HYPERLINK l bookmark31 o Current Document 五、交互实现8 HYPERLINK l bookmark33 o Current Document 5.1交互实现工作8 HYPERLINK l bookmark35 o Current Document 5.2经验教训总结10 HYPERLINK l bookmark37 o Current Document 六、可用性分析与评估106.1系统可用性分析与评估的

5、意义：106.2系统可用性分析与评估分工与结论：11七、工作的具体过程12 HYPERLINK l bookmark39 o Current Document 7.1设计过程12 HYPERLINK l bookmark41 o Current Document 7.2遇到的困难及解决情况12 HYPERLINK l bookmark43 o Current Document 八、个人小结13山东科技大学学生课程设计一、课程设计任务概述1.1目的与任务1)通过课程设计，主要达到以下目的：加深对人机交互的软件工程课程以及数据库系统、软件工程、程序设计语言等相关课程的理论知识的理解和应用水平。掌握

6、人机交互系统设计的基本原则，熟悉人机交互系统设计的步骤。掌握人机交互界面的表示模型和实现；熟悉人机交互界面的可用性评估方法；2)课程设计任务：完成网上商城系统界面设计。1.2开发环境Windows系统，开发工具Axure。1.3参考资料孟祥旭李学庆主编人机交互基础教程清华大学出版社M,2016年3月；董士海计算机用户界面及其工具北京：科学出版社,1999罗仕鉴.朱上上.孙守迁.人机界面设计.北京.机械出版社,2002谭浩强网站设计与制作北京中国铁道出版社，20021.4任务完成的一般过程为更加全面的制作该网站，我们从软件设计的基本步骤出发：1.5软件配置IE浏览器，火狐浏览器、googl浏览器

7、,Android手机等。二、介绍本次设计的主题和功能本次课程设计是我一个人独立完成，主题是书籍类的网上商城，界面设计的总体思想是简洁大方。评回上侖墟莖说ft品展于住ije网上商城系统功能结构图IE打聽風軒書城月粘i規土g:阿秋咖詐自飯壮时代立W也饭甘DCS闿间；aMT-IQ-qiPKfliL*：世界文字若雷祁克的l|I章vMr：?nbw金已蚯社；AFSaisM:Htumfl：SOW-07-01PF耳：32开预澤：2BB年Ml超作*:閔亢屯32开殛：3EUMBit：f3晦却出的M2012-59-Qi:4凹CTzs*ate迢酝吐fFEMatdE鬥间：2012-OM1I幵包：SSF舉住门焯Tit圈药

8、fp*:讯|矩什E蚯社；ifc-lszaiKM:=葩11可：2010-06-01幵职35：22T注册、登录頁9QHME帕阿XW聽風軒書城水锻也!毗互NF）旺品泊事绍田证啊I-:fiismi-MiT-SWS互BIAMI3W?I互评姚乜盯曲目壷I池囲hhddiWbiuLHiEfflHFPiiS-WfiSZM-fiKriFHRsih：*诵:工丽Ki!曲AEiKW耳军甘醫F.B：H更蠹*财林半心*1?聽風軒書城点遵鬼刃壯f兵丽H芒和序住圧圧中銅老三ism曲H労Y:n：i4l讥tHsUNE弃25明悄交野醉削三与工台真；划）岡賞工台丰遢品梢胃鬲三方干吁ltFGjS=.abhsk:0艇賂fiSffll網昇航

9、HF|疑ti-2C13-OKS互阙mm虽拱悄逵扣Eaiiwni123390HI订单三、需求分析3.1需求分析流程及用例图3.2工作内容1）竞争商品分析主要对当下最受欢迎的，淘宝网，京东商城以及蘑菇街进行比较和分析。从他们的页面布局及产品分类进行分析，得出如下结论：商品分类清晰，易于查找界面简洁明了无太多广告和促销手段2）需求分析模型评价根据本组设计的需求模型及当前常用的商城模式对比可以发现，该需求模型没有明显的创新点，与其他相比显得较为普通，且商品的销售人群范围较小，种类较少，对于用户需求方面做的还是相当全面的，能够充分显示用户的主要需求，网站的整体规划做的比较完善例如数据字典、用户手册等。、

10、交互设计4.1任务描述本人在该设计中主要的职责是设计购物车页面、快递选择页面、支付选择页面设计。针对快递选择界面进行介绍。首先客户需要填写收货人信息，在填写过程中，所在地区、街道地址、收货人姓名、手机号等信息不允许为空填写完成后，客户可以根据自身需求选择快递方式。4.2界面功能需求界面具体要求商城首页展示商品登录、注册界面签订授权协议、跳转首页购物车界面修改购头数里显示单价、购头数里、总价订单页面填写收货人信息选择快递方式商品评价界面对商铺、物流进行评价4.3顺序图1T五、交互实现51交互实现工作主要的交互实现有登录、注册、签订授权协议、浏览书籍详情、加入购物车、查看订单等示例如下：登冒在将商

11、品加入购物车时，可以选择购买的数量，并可显示总价。冃巨与烦吐1*!更|毛妇喬浙S思浮宙施珮竝述社岀版时司：2017-1陽禹丛书：世黑文护尋合计：19.5元确认盍忖5.2经验教训总结在进行设计时，遇到了很多新手容易犯的错误，并且在开发过程中反复地出现。首先是使用部件库时有易错的部分。其次是主要页面原型设计的易错点。现总结如下。图片：图片拖拽进画布时如果选择“压缩图片大小”，gif文件会变成静态的图片形式。动态面板滚动栏：使用滚动栏给的动态面板添加可滚动内容，在动态面板属性面板中选择，滚动栏下拉菜单并选择滚动栏的显示方式，为了让滚动栏正常显示，动态面板状态内中的内容必须比动态面板的边界轮廓大，并且

12、不能勾选调整大小以适合内容。内部框架：可以给内部框架的属性选项框中添加Axure内置的预览图片，如视频、地图，也可以自定义预览图片。提交按钮：提交按钮无法设置交互样式，如：选中/鼠标悬停/鼠标按下。提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了。取而代之的是生成原型后在浏览器中它会使用内建的样式。如果你想自定义你的按钮样式，请使用形状按钮“Shapebutton”。六、可用性分析与评估6.1系统可用性分析与评估的意义：在产品开发工程中增强可用性可以带来很多好处，包括：（1）提高生产率；（2）增加销售和利润；（3）降低培训时间和产品支持的成本；（4）减少开发时间和开发成本；（5）减少

13、维护成本；（6）增加用户的满意度；可用性评估应该遵循的原则：（1）最具有权威性的可用性能测试和评估不应该针对专业技术人员，二应该针对产品的用户。对产品可用性能的测试和评估，应主要有用户来完成（2）软件的可用性能测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。（3）产品的可用性能测试，必须是在用户的实际工作任务和操作环境下进行。（4）要选择有广泛代表性能的用户。6.2系统可用性分析与评估分工与结论：为方面给网上商城系统的测试，我担任开发人员和产品测试人员，为满足以上的产品可用性的评估准则，经过对产品的不断测试得出如下测试结论：商品首页及商品展示购物车及商品支付页面左侧展示文字描述不

14、合理购物车界面功能太简单首页商品展示页面较复杂界面转换速度慢部分商品操作响应度不咼界面信息重复度较咼容易误导用户首页标题栏的商品分类重复度较高优点：用户支付选择方式充足Head标题栏目下拉展示出错用户确认信息多，减少出错由于时间关系，设计该网站系统时没有设计相应的管理后台，对于相应的数据也没用创建，无法实现相应的代码相应，因此，整个产品的测试都是基于界面的，并没有设计到代码方面。总而言之，整个产品的测试是不合理的，无奈地是，产品的测试人员也是我自己，显然是不符合测试要求的。产品评估建议，整体网上商品系统的开发应该更加的完善，除了设计网站的页面外，还应该有后台控制页面，以方便管理员对整个网站的控

15、制。还用该有相应的代码对用户的操作进行响应，同时应该设计响应的数据。综上所述，应该设计一个功能完整的网上商品系统。七、工作的具体过程7.1设计过程为更加完善登陆及商品展示页面的功能，在设计页面时，参考人机交互基础教程中界面设计原则进行界面设计，结合用户需求，设计界面相应功能。为方面开发，网站页面上所有的图片均是从同类网站上面截图下来的界面设计完成后，进行界面功能测试。同时针对测试出现的错误进行改正和总结。为增加网站的创新点我们特别设计了，添加邮箱功能，当用户输入相应的邮箱地址时，系统会自动的进行邮箱验证。在商品详情展示页面特地设置了购物流程提示以及退货流程提示，以方便用户购买商品从而降低出错率

16、。7.2遇到的困难及解决情况在进行页面设计时，遇到的第一个问题是关于母版的运用，本来觉得运用母版可以提高效率，但是我处理不了母版导致的问题，由于时间关系就放弃了母版的使用，有点遗憾，有机会还要学习一下。第二个问题是关于换肤的问题，本来想使用全局变量去实现，后来我发现用全局变量需要刷新页面才能换肤，所以我添加了一个换肤按钮，运用显示和隐藏功能来实现这个交互。我觉得效果还不错，而且很简单就能实现。我觉得要不断提高对未知知识的探索，提升自学能力，在编程或者开发时总会遇到许多问题，在遇到问题是要找解决方法，不能一个人想，要学会到网上寻找相应的解决方案，要知道自己遇到的问题别人也是会遇到的。同时要及时的

17、和其他同学进行讨论，所负责的设计部分要为整个网站服务，要考虑到网站的其他界面的色彩布局等等。八、个人小结通过这次课程设计学到了很多：首先是对理论知识的理解更加清晰了，比如，需求分析，用户建模，起初对于需求分析的认识只是停留在课本上，尽管书上有相应的例子，但依旧是陌生的，通过这次课程设计我知道了如何做需求分析，如何做用户建模，在进行页面设计的时候能够将书上学到的，界面设计原则。界面设计要素运用到实际的界面设计中。除对理论知识的认知更加深刻外，在实践方面更是有很大的提升，首先是对各大网站的数据分析和总结，针对当前最受欢迎的商品销售类网站进行分析，找出相应的优点和不足，对网站的运营方式进行研究，寻找出最为合适的网站运营方式，例如商品的打折促销、最新商品的及时推送等。由于之前对于网站的设计方式仅仅停留在代码编写，对于A