这个作业属于哪个课程 |
传送门 |
这个作业的要求 |
传送门 |
这个作业的目标 |
学习使用原型设计工具,简化开发过程 |
1.对比原型工具
-
墨刀🔪
墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo
展示,或是在团队内部协作沟通、项目管理。
墨刀也有了桌面版软件,下面是桌面版的截图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190921185504872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
墨刀的特点:
- 简约方便,网页端的Web程序即可满足小型应用的原型设计。
- 中文,操作方便,左边有着元素的列表和右边有着修改项。
- 可以分享适合小型团队使用。
- 简约并不是很专业,企业版要付费。没有付费,不清楚企业版是否会精细化专业一些。
-
Mockplus
Mockplus(摹客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。
下面是桌面版的截图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190921192948606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
Mockplus的特点:
- 简约,比较墨刀又显得更加专业,功能比前者多一些。
- 方便,但是团队付费贵了。
- 没有网页端,各种控件比较齐全。
-
Axure rp
Axure RP是美国Axure Software Solution
公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web
网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190923171002336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
Axure rp 的特点:
- 专业性强,每个功能下分很细致。
- 功能性强,设计原型时有着很多的选项。
- 学习成本较以上两者高,个人认为存在学习曲线。在使用这个软件之前要先去学习他的使用。
- 英文,付费。
综合对比三款软件,最最专业的属Axure,其次Mockplus,最后墨刀,但三款软件都要付费,金钱至上。如果说要专业的从事一个和原型设计相关,工作中要做原型设计的职业,Axure首选。但在便携性上墨刀很是不错,做到了网页即开即用,这样的设计很方便,尤其是外出办公,出差之类的。
2.原型设计举隅
2.1 需求分析
题目:社团管理。
项目需求如下:
面向普通学生和社团管理员,集合了各个社团的信息,特色功能是活动的浏览和报名,以及活动的发布、审核与通知,同时还具有加入社团、发送站内信等功能。
项目背景和解决的痛点:
学生刚入西南石油大学时缺乏了解社团的长期的、便利的渠道;社团公众号文章分散各处;群里发的活动报名问卷容易被水过去,而且每次要填的信息都差不多。
社团管理员在管理社员时没有一个很好的工具,来发布活动、统计报名人员、通知活动变更等。
社联在管理所有社团时,在审核活动申请、审核场地申请、星级评定、材料收取等方面也存在一些困难。
因此,我们希望能打造一款软件连接学生、社团和社联,根据用户不同的使用需求,我们计划给将社团展示、活动报名等功能放在手机小程序端,在社团管理的大部分功能放在网页端。
项目面向的用户:
小程序: 主要面向西南石油大学普通学生,其中的社团管理功能,则面向社长等社团管理员。
网页端: 主要面向社长等社团管理员,还能面向社联。
具体分析:
社团管理软件面向社团管理人员,社团联和学生,所以我们把功能划分为三大块——社团负责人模块,社团联模块和普通学生模块。
针对社团负责人模块。一个社团负责人想要发起创建一个社团,他需要足够的人数,具体详尽的申请书,活动规划书。所以我们要为负责人,社团创办人开设一个板块,负责人通过注册该板块,通过后登陆,提交申请书,设置社团简介,社团招新信息,社团活动日历,申请活动并发布,社团成员管理。
针对普通学生模块。一位普通的学生可以注册账号后,在软件的大厅查看所有的已存在的社团,可以__点击浏览所有社团的信息,查看社团的入团要求,查看社团的活动,管理已加入社团的信息,社团活动打卡。__
针对社团联模块。社团联是一种超级管理员的用户性质,社团联审批社团的申请,活动申请,管理社团数量。
在此根据我的设计,我将系统分为两种方式,一个是移动端的程序面向普通大学生,他们可以登录浏览查看等一系列行为。一个是网页端的后台管理程序用于社团部长和社团联管理社团和社员。
手机端的小程序:
- 登陆注册
- 大厅查看俱乐部
- 申请加入俱乐部
- 查看已加入的社团
- 查看参加的活动
- 申请加入活动
- 产看俱乐部活动快讯
- 退出
网页端的后台管理:
- 不同用户登陆
- 管理活动
- 管理社员
- 查看社团社员信息
- 添加社员
- 社员信息审核
- 修改活动信息
2.2原型设计模型
手机端->传送门
电脑端->传送门
__建议使用火狐浏览器国际版访问__,谷歌可能会打不开页面。程序中所有登陆直接点击即可,不需要输入用户名。
## 2.3 原型设计截图展示
__手机端__
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019092419411331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 登陆
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192214324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 大厅
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192246874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 点击俱乐部资讯 (机车俱乐部)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192355388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 申请计入俱乐部(红框框)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192527240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192553497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 个人信息
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019092419261870.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 我的社团
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192655309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 我的活动
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192720695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
点击查看
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192752211.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
__电脑端__
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924194139605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 登陆
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924192936740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 查看活动
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924193015717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924193412574.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 新建活动
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019092419350666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 社员管理
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924193838271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
- 添加社员
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190924193908649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyQnZz,size_16,color_FFFFFF,t_70)
# 3.总结
这个原型设计作业采用了墨刀的模板,本憨憨最初建立了一个空项目,一个个图片,控件,跳转关系的调整,几近崩溃发出无能狂怒。之后才发现可以使用模板,随即而出了一句语气词```**```,这个真好用。
回到正题,原型设计旨在建立一个提供演示功能的```项目最初体```,为了向他人展示你所想,或者客户所想的效果是否符合预期。是一道将文字转化为视觉感受的工序,在软件工程中很符合原型开发的法则。