| 项目 | 内容<br/> |
|---|---|
| 这个作业属于哪个课程 | >>2016级计算机科学与工程学院软件工程（西北师范大学） |
| 这个作业的要求在哪里 | >>实验七 团队作业3：团队项目原型设计与开发 |
| 团队名称 | 队长说得队 |
| 作业学习目标 | （1）掌握软件原型开发技术；<br>（2）学习使用软件原型开发工具。 |
-
##原型设计工具简介
- 墨刀MockingBot：免费的移动应用原型与线框图工具
墨刀MockingBot是一款免费的移动应用原型设计工具，这款产品可以快速构建移动应用原型与线框图，云端保存，实时手机预览，支持iOS和安卓，多种手势及页面切换特效支持。还有多种主题选择，是产品经理与交互设计师的贴身小帮手。墨刀MockingBot是一个在线移动应用原型工具，旨在帮助产品经理及UI/UX设计师快速构建移动应用产品原型，并及时与团队内其他成员分享和讨论。作为一款专注移动应用的原型工具，除了云端保存，实时手机预览，MockingBot还有多种手势，页面切换特效及主题可供选择。 - 老牌原型设计工具 -Axure RP，Axure Axure RP是美国Axure Software Solution公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家。Axure RP作为老牌的产品设计工具，允许程序设计者为程序或者网站制作动态的线框图、流程图、以及其他所需的图表。它可以辅助产品经理快速设计完整的产品原型，并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员，如UI、UE等等，并在讨论中不断完善。规范的图标文档可以让我们在交流、记录、设计上更容易被接受，使用Axure RP 建立更简单、更专业的数据表、图。 - 网页和移动端的设计sketch Sketch 是一款适矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，还添加了一些基本的位图工具，比如模糊和色彩校正。Sketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用，所有我们需要的工具都触手可及。在 Sketch 中，画布将是无限大小的，每个图层都支持多种填充模式；还有很好的文字渲染和文本式样。必要的话，我们也可以用无限精准的分辨率无关模式来查看画布，或者打开像素模式来查看每一个像素导出后的样子。但是 Sketch 并不是一个位图编辑应用，如果你想修正一张照片或者用笔刷来画画，那么这不是你要找的应用。 - 一款简洁高效的原型图设计工具mockplus Mockplus是一款简洁快速的原型图设计工具。国内官网为www.mockplus.cn。Mockplus特别适合软件团队、个人在软件开发的设计阶段使用，使用人群为程序员、UI设计人员、产品经理、项目经理等。有别于Axure等重量级、高保真、需要学习培训的原型设计工具，Mockplus的特色在于低保真、无需学习、快速上手、功能够用。没有任何设计经验的人，也可以立即使用，并能够很好地表达自己的设计。Mockplus的产品设计理念在于“关注设计，而非工具”。Mockplus从设计上，采取了隐藏、堆叠、组合等方式，把原本复杂的功能，精心安排。上手很容易，但随着你的使用，功能层层递进，你会发现更多适合自己的有用的功能。新手不会迷惑，熟手可以够用。 - 致力于高保真原型制作工具Justinmind JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。它是一个非常强大的线框动态应用程序或软件应用，专门为移动端订制的原型图设计工具，无需编码，简单拖拽使用而已。使用JustinMind，你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状，如矩形和文本，还有特定的组件，如菜单，表单或数据列表。JustinMind提供了多种触屏的交互效果，例如滑动、缩放、旋转，甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。可以创建自己的组件库。JustinMind为iPhone ，iPad，黑莓，Android提供了多样的组件。你可以创建自定义组件库，方法是将排列好的单个组件放在一起，并将它们集体框选拖动到组件库。在JustinMind中，你可以通过拖拽等方式来实现跳转、定向等交互效果，无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观，如进度条。 - 一款免费的带有手绘涂鸦风格的原型设计软件balsamiq mockups Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器。在产品设计的需求阶段，低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间，在Balsamiq Mockups出现之前，流程图可以使用Visio，高保真DEMO可以使用Axure，但我们并没有好用的草图设计工具；在产品设计管理中，我们通常在产品的业务流程和数据流转已经相当明确时才开始进一步考虑产品的结构层和框架层，虽然此时纸、笔、白板都是非常简单方便的交流工具，但是他们的最大劣势就是——很难将有价值的原型保存下来。Balsamiq Mockups的出现完美的解决了这个问题。
- ##mockplus原型设计工具团队学习总结
mockplus是一款快速设计项目原型的工具。mockplus界面比较简洁，主要这些区域： 1.顶部：顶部有主工具栏，其中包含了主菜单和最常用的快捷按钮； 2.中间：是创作时的工作区。 3.在工作区底部，可以查看到项目尺寸信息，设置工作区缩放，还可以做软件偏好设置； 4.左上侧：是项目树面板，其中包含了项目和所属的各个页面或分组； 5.左下侧：是组件面板，其中包含了组件、图标、我的组件库以及母版，可以通过选项卡做切换； 6.右上侧：是属性面板，其中可以设置组件属性、交互和页链接，可以通过选项卡做切换； 7.右下侧：是组件大纲面板，其中包含了某个页面中组件的层次关系。 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190508000919404-1767337867.png" width=536,height=538> 本次主要采用mockplus进行原型设计，由于是第一次使用这个工具，对一些操作不是很熟悉，在设计过程中只用了一些简单的组件和一节交互，后续会不断深入学习。但是在导出项目时需要购买软件，这一点感觉很不友好。看到有些同学选择用墨刀进行设计，但由于时间关系，就没有重新设计，但后续如果有时间会选择学习一下墨刀。
- ##团队项目github仓库地址链接 【点击查看】
- ##团队项目原型设计成果
-
登录界面以及登录成功后主页 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507224747143-1127546799.png" width=300,height=328> <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507224953904-1841655211.png" width=300,height=328>
-
管理员管理 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507225701878-1639158197.png" width=436,height=438>
-
学生管理及添加学生 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507225914314-310754328.png" width=300,height=328> <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507230027528-976112120.png" width=300,height=328>
-
楼宇管理 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507230453157-1840066289.png" width=436,height=438>
-
宿舍管理 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507230616327-1803657423.png" width=436,height=438>
-
查寝记录 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507231045332-1152690339.png" width=436,height=438>
-
调换宿舍 <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507231222464-795149677.png" width=300,height=328> <img src="https://img2018.cnblogs.com/blog/1659650/201905/1659650-20190507231314989-1999463174.png" width=300,height=328>
-
- ##团队项目的原型设计过程、原型设计心得总结
- 设计过程
首先每位成员通过官网上的教程对mockplus工具进行简单的学习，然后我们讨论了我们的项目应该展现的一些重要的功能，参考网上一些类似系统的界面后本系统的总体界面绘制定了大致草图。接着根据每个人的具体情况进行分工。在各自设计的工程中遇到的问题大家都会积极的上网去查询解决或者提出来大家一起解决，从讨论中不断学习新的知识。最后将每个人设计的部分进行整合，并共同对最后的设计进行进一步的美化。在整个设计中，每个成员都积极参加到项目设计中，大家共同努力不断进步。
- 心得总结
在本次项目设计中，大家互相配合，最终完成了本次原型设计。从本次原型设计中可以感受到人多力量大，每个都想法都很新颖，在讨论中不断学习和借鉴其他人的想法，不仅完成了本次项目，还开阔大家的视野，有些事一个人做远不如大家一起做好。在讨论和合作中也是一个团队不断磨合的过程，只有每个成员参与到团队项目中才能让更容易融入这个小集体。当然通过这次设计也让我们了解和学习了原型开发的一些工具，也算是掌握了一项新技能吧。接下来我们会根据老师的指导再接再厉，认真做好每一次作业。
- 设计过程
来源：oschina
链接：https://my.oschina.net/u/4298840/blog/3546793