构建之法第三次作业

原型设计

作业属性

作业课程	系统分析与设计
作业要求	第三次个人作业
作业目标	学习原型设计工具，学习需求分析
学号	201731062416
选题	博客园班级博客客户端
博客地址	博客园博客

对比原型设计工具

墨刀初体验

墨刀是一款使用比较简单，支持网页端和客户端使用的原型工具。它提供了非常丰富的素材库，支持拖拽的使用方式，能够较好的模拟不同的设备的边框和分辨率特点。并且其企业版还支持Sketch和标注，多人协作，云端编辑等高级功能，

我在使用中，发现其实内置的组件还是比较单一的，尤其是缺少图标类的组件。基于拖拽的方式进行设计，使用方便。交互逻辑的设计还是不够清晰，但交互逻辑比较复杂后，修改起来就很困难了。

特点分析

Axure RP

Axure RP工具就显得很专业了，提供了足够的灵活性，但是增加了上手的难度。它的交互功能非常的强大，支持多种交互方式，但是对移动端特有的一些交互方式的支持不是很好。并且它不能提供手机边框，总的来说，这个软件给我的第一印象就是使用难度高。可能它更多的是针对专业人员吧。

特点分析

### Mockplus ![uSOrtS.png](https://s2.ax1x.com/2019/09/22/uSOrtS.png) 我在使用Mockplus时，发现它真的像它宣传的一样简单高效，内置的组件非常丰富，一些常用的几乎都有。而且交互的添加也非常简单，拖拽一下就可以了。而且在使用它进行组件布局时，辅助线也总是恰到好处的出现，不像墨刀的辅助线，一会有一会没的。对应我们这种非专业人士简直太友好了，但令人沮丧的是试用版本无法分享。

特点分析

对比

总的来说墨刀和Mockplus对非专业人士很友好，上手简单，但不够专业。而Axure RP虽然上手难度大，但是非常的灵活，在掌握使用技巧后，能够非常灵活的设计出漂亮的原型。

需求分析

目的

开发博客园班级客户端主要是为了方便同学们更好的完成课堂任务，更好的参与到课堂的讨论中去。帮助老师更好的跟踪同学们的学习动态，更加方便的参与同学们的讨论。更好的帮助助教为同学们答疑和批改作业。

范围

使用博客园班级系统的老师，同学和助教。

总体概述

博客园班级客户端的目标是更好的服务于教学。它和博客园网页端的不同之处在于，手机端能够方便同学和老师及时的接收到消息，更加方便地参与到课堂讨论中。博客园手机端能能够帮助同学们利用好碎片时间进行学习。因此，手机端需要有更好的信息分类和检索功能。

用户特征

该软件中主要存在三类用户。教师、助教和学生。

老师	关注学生的学习状况，主要参与作业的制定，评分的审核，关心学生课堂反馈
助教	关注学生博客的批改，督促学生完成任务，对同学有答疑义务
学生	关心课堂任务和成绩，有反馈疑问的需求，并且喜欢与其它优秀的同学进行交流

### 具体需求 #### 功能需求

</tr>
<tr>
    <td>助教特有管理</td>
    <td>能够为教学班指定助教，并为不同的助教赋予不同的权限（如打成绩的权限，发布作业的权限等），帮助老师构建一个各施其职的助教团队</td>
    
</tr>
<tr>
    <td>学生管理</td>
    <td>能够管理同学的加入班级的申请</td>
</tr>
<tr>
    <td>成绩调整</td>
    <td>调整助教的打分</td>
</tr>
<tr>
<tr>
<th rowspan="4">教师和助教共有功能</th>
    <td>发布作业</td>
    <td>发布博客作业</td>
</tr>
<tr>
    <td>给成绩</td>
    <td>给同学的作业进行评分</td>
</tr>
<tr>
    <td>查看学生的作业详细报表</td>
    <td>以统计图的形式进行展示</td>
</tr>
<tr>
    <td>发布通知</td>
    <td>发布通知功能</td>
</tr>
<tr>
 <th rowspan="2">学生功能</th>
    <td>提交作业</td>
    <td>提交博客作业</td>
</tr>
<tr>
    <td>查看成绩</td>
    <td>查看指定作业的成绩</td>
</tr>

教师特有功能	创建班级	能够在手机端创建教学班

#### 性能需求软件的使用应该非常的流畅，响应时间短。在网络较差的情况下，也能利用本地缓存好的博客。

原型设计

预览地址

图片展示

</tr>
<tr>
    <td><img src="https://s2.ax1x.com/2019/09/25/uZ0WKf.png" height="90%" width="90%"></td>
   <td><img src="https://s2.ax1x.com/2019/09/25/uZ0OMV.png" height="90%" width="90%"></td>
</tr>
<tr>
    <td><img src="https://s2.ax1x.com/2019/09/25/uZBSIJ.png" height="90%" width="90%"></td>
   <td><img src="https://s2.ax1x.com/2019/09/25/uZBPR1.png" height="90%" width="90%"></td>
</tr>
<tr>
    <td><img src="https://s2.ax1x.com/2019/09/25/uZBkM6.png" height="90%" width="90%"></td>
   <td><img src="https://s2.ax1x.com/2019/09/25/uZBZZD.png" height="90%" width="90%"></td>
</tr>
<tr>
    <td><img src="https://s2.ax1x.com/2019/09/25/uZBmIH.png" height="90%" width="90%"></td>
   <td><img src="https://s2.ax1x.com/2019/09/25/uZBuid.png" height="90%" width="90%"></td>
</tr>
<tr>
    <td><img src="https://s2.ax1x.com/2019/09/25/uZB2FJ.png" height="90%" width="90%"></td>
   <td><img src="https://s2.ax1x.com/2019/09/25/uZBBQ0.png" height="90%" width="90%"></td>
</tr>

原型图制作总结

在制作原型图时，很重要的一点就是要仅仅围绕之前设计的功能来绘制。并且要注意各种页面之间的交互。在界面的设计上要保持简洁。确保界面的结构的一致性，减少用户的记忆负担。图标图形要能够清楚的传达它的功能。在使用原型工具时，要充分利用原型工具，比如母版等功能，可以极大的减少工作量，提高原型设计的效率。