个人第三次作业:原型设计

所属课程https://edu.cnblogs.com/campus/xnsy/Autumn2019SoftwareEngineeringFoundation/
作业要求https://www.cnblogs.com/harry240/p/11524127.html
作业目标通过选择具体项目来做需求分析,再根据需求分析与原型工具来对项目进行原型设计,达到熟悉原型设计流程的目的

一、原型工具对比

1.墨刀

  • 优点
    • 教程清晰明了,易上手
    • 模板种类较多,素材丰富,且模板大多为国内网站
    • 可以方便的将原型设计导出
    • 在Web端与手机端都支持方便快捷的预览
  • 缺点
    • 不支持多种导出形式
    • 可供利用组件较少

2.Mockplus

  • 优点
    • 设计方便快捷,易上手
    • 组件种类丰富,样式齐全
    • 支持原型设计的多种导出形式,例如项目包、演示树、HTML演示
    • 支持自动生成的流程图
  • 缺点
    • 新建项目时可供选择的模板较少
    • 图形素材库中的素材大部分需收费
    • 免费版不支持任何的导出形式(我就被坑了(*  ̄︿ ̄)),只支持本地预览

3.Axure RP

  • 优点
    • 自带丰富的组件库且支持第三方组件库
    • 强大的交互支持
    • 教程详细完整
    • 可以快捷方便的进行多人协作设计
  • 缺点
    • 专业性较强,学习成本较高
    • 很多组件是利用起来很繁琐

4.综上

Axure RP专业性较强且上手较慢,随提供了强大的组件库但利用起来却较为繁琐;墨刀与Mockplus都都为国内团队设计,有很好的本地化支持,但墨刀可供利用的素材模板较少且扩展度低,而Mockplus组件齐全且模板丰富,最终选择了Mockplus作为此次作业的原型设计工具。


二、需求分析

我选择了项目一来做需求分析

1.小程序端

项目要求中提到学生在刚进入大学士没有了解各种社团的长期的、便利的渠道,各类信息分散各处。所以,小程序端功能的最大特色便是将各类社团信息活动信息集成起来;此外,学生在看到感兴趣的社团或者活动时有快捷的活动加入社团加入渠道;另外,学生还需要清晰明了的消息接收渠道。综上,列出小程序原型结构图如下:

小程序功能结构图

2.Web端

项目要求中提到Web端要面向社团管理员与社联管理员,其中社团管理员要在Web端进行活动发布报名人员信息统计报名审核消息通知发布的功能;而对于社联管理员,需要在Web端对社团发送的活动申请进行审核批准、对社团进行星级评定发送通知信息等。综上,列出Web端原型结构图如下:

Web端功能结构图


三、原型设计

1.原型设计可查看地址

由于Mockplus的免费版只支持本地预览不支持任何形式的导出,故在此只能给出本次原型设计完成后生成的.mp文件的下载链接(.mp文件只能通过Mockplus打开),望见谅!

百度网盘链接:
https://pan.baidu.com/s/1OJWrNbya-X3WuiRGkJTlzA 提取码:5m3x

2.详细功能介绍

由于部分展示页面添加了页面下拉滚动功能,导致展示图页面较长。。。为了将图片截全导致图片模糊。。。望见谅!详细且清晰原型设计内容务必下载网盘中的.mp文件后用Mockplus打开查看!

  • 小程序端

    - 注册及登陆页面如下:

    007b2muuly1g7g86pysuej30e90ps758.jpg

    007b2muuly1g7g86sh6dej30ed0pldgu.jpg

    007b2muuly1g7g86umj03j30eb0poglz.jpg

    - “首页”展示如下:

    007b2muuly1g7g8lduh83j30at0pqgsj.jpg

    • 首页轮播图链接:

    007b2muuly1g7g8lnpm0kj306g0pewgj.jpg

    - “活动”页面展示如下:

    007b2muuly1g7g8qy5uxhj306k0or78l.jpg

    • 活动一展示页面:

    007b2muuly1g7g8r22olwj30ay0nln0d.jpg

    • 活动一报名申请:

    007b2muuly1g7g9zjaliwj30dq0pn0ts.jpg

    • 活动一报名详情:

    007b2muuly1g7g9znuhvxj30cd0podgc.jpg

    - “社团”页面展示如下

    007b2muuly1g7gae8svysj30c70pqwg8.jpg

    • 社团详情页面展示:

    007b2muuly1g7gaebgv98j30ec0plmz5.jpg

    • 社团申请加入页面:

    007b2muuly1g7gaeienpcj30ec0pn0t8.jpg

    • 申请提交成功页面:

    007b2muuly1g7gaeebs3qj30eh0pnwez.jpg

    - “我的”页面展示如下

    007b2muuly1g7gahfwasaj30eh0prwfk.jpg

    • 我的社团页面展示:

    007b2muuly1g7gahn2yrej30ej0prwfk.jpg

    • 我的消息页面展示:

    007b2muuly1g7gahkpubyj30em0pojsd.jpg

    • 我的活动页面展示:

    007b2muuly1g7gailrc7fj30c90po7ai.jpg


  • Web端

    - 登陆页面及身份选择:

    007b2muuly1g7gauult8qj312b0u0n06.jpg

    - 社团管理员页面展示:

    • 首页

    007b2muuly1g7gawkifrvj31200qstaq.jpg

    • 活动发布:

    007b2muuly1g7gay65wvfj31290u0mzx.jpg

    • 统计信息查看:

    007b2muuly1g7gav3dtitj31280qv40x.jpg

    • 消息发布:

    007b2muuly1g7gavaeyc9j31260tgwgy.jpg

    • 审核批准:

    007b2muuly1g7gav7ojwbj31290qs0v3.jpg

    - 社联管理员页面展示:

    • 首页

    007b2muuly1g7gb5tzg87j31240pn40k.jpg

    • 社团活动申请查看:

    007b2muuly1g7gb6a8yotj31270pun0j.jpg

    • 社团活动申请通过:

    007b2muuly1g7gb6fteghj31230psmzy.jpg

    • 社团活动申请打回:

    007b2muuly1g7gb6ixsqwj312a0qsmzt.jpg

    • 社团星级评定详细查看:

    007b2muuly1g7gb95qgc7j31260pumzs.jpg

    • 社团星级评定选择:

    007b2muuly1g7gb98o3m2j31210pt0v3.jpg

    • 社联消息发布:

    007b2muuly1g7gb9cj8tnj31260sbtb2.jpg

转载于:https://www.cnblogs.com/FourtyTwo/p/11607236.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值