• 一.原型设计工具比较
  • 1.墨刀
    • 适用领域：
    • 优点：
    • 缺点
  • 2.Axure
    • 适用领域
    • 优点
    • 缺点
  • 3.Mockplus
    • 适用领域
    • 优点
    • 缺点
• 二.原型设计
  • 1.主题名称
  • 2.功能
  • 3.界面设计考虑因素
  • 4.切换界面
  • 5.界面切换流程

一.原型设计工具比较

1.墨刀

适用领域：

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理 。

优点：

1. 近乎完美的原型演示效果，几乎可以以假乱真，适合产品设计确认与交互验证。

2. 丰富的元件，无需自己编写直接使用。

3. 非常方便分享给他人，预览速度非常快。

缺点

1. 不适合做文档，只适合做交互设计，很多产品经理会把原型图修改为需求文档给研发。

2. 由于事件系统比较简单，无法演示复杂的交互效果，比如需要变量控制页面，数据排序等。

3. 墨刀是一款线上产品设计工具，使用墨刀需要上网，设计的产品也保存在云端，在墨刀数据库中。安全性和保密性没有保障，而产品是互联网企业的命脉，这是一个致命问题。

2.Axure

适用领域

Axure RP是美国“Axure Software Solution”公司出品的一款快速原型（Rapid Prototyping）软件。商业分析师，信息架构师，可用性专家，产品经理，IT咨询师，用户体验设计师，交互设计师，界面设计师，架构师、程序开发工程师都可以使用。

优点

1. Axure作为老牌的原型图工具，功能最齐全，交互最多样，基本任何想要的效果都可以实现，尤其在制作PC端原型图上有优势。

2. 有强大的编辑功能, 使得制作素材库会更便捷一点。

3. 更快的复制粘贴，素材库和原型库会多一些。

4. 可以项目共享，使得同事间可以同步工作，并保留所有工作历史，并可以随时到处历史版本的项目文档。

缺点

1. 正版的Axure售价高，学生等群体可能负担不起。
2. 动态面板和中继器较为复杂，要完全弄懂也需要一定的时间成本，学习成本高。
3. Axure只支持在本地设计。

3.Mockplus

适用领域

摹客（Mockplus）隶属于成都摹客科技有限公司，注重一站式的产品设计及协作。摹客支持全工序的产品设计，连接从需求到开发，为企业产品团队提供原型设计、UI设计、PRD文档撰写管理、全流程协作、自动标注切图、高效评论审阅，支持全部主流设计稿交付，帮助产品经理、设计师、开发人员高效设计协作。

优点

1. 基础版免费使用，操作简单，上手快，交互简单(只需拖曳就可以)，功能多样，组件资源丰富，预览方式和导出类型多样，支持团队协作。

2. 有原型演示，可以帮助前端设计师、后端程序员更好地理解你的原型产品。

3. mockplus有组件库和图标库，界面设计较为方便。

缺点

1. 不支持鼠标悬停，手机预览不是很清楚，日历表组件是静态的。

2. 表格功能还需要完善。

3. 不支持手势交互，功能上的细腻性有待加强

二.原型设计

1.主题名称

微信

2.功能

1. 可以与他人在网络上进行聊天。
2. 可以发布朋友圈，或者浏览微信好友的朋友圈

3.界面设计考虑因素

1. 消息列表界面考虑用户交流的方便性与直观性。
2. 聊天界面则是采用对话框的形式，使用户之间的交流更贴近现实，给用户一种身临其境的感觉。
3. 发现界面提供多个娱乐功能，给予用户放松休闲的途径。
4. 朋友圈界面方便用户发表自己的心情、情绪，分享美食，经历等。同时还推出评论点赞功能，利于用户之间的交流。
5. 个人主页为用户提供查询信息、支付等生活功能。方便了用户的日常出行等需求。

4.切换界面

1. 消息列表界面
   

   • 界面功能

     • 查看谁给自己发送了信息，选择查看哪条信息

   • 界面组成

     1. 消息时间
     2. 发消息人呢称
     3. 发消息人头像
     4. 消息内容

   • 前置条件

     • 开启APP

   • 后置条件

     • 进入聊天界面，进入发现界面，进入我的主页

   • 操作步骤

     1. 如果点击某个消息，将进入与此人的聊天界面
     2. 如果点击发现，将进入发现界面
     3. 点击我，将进入我的主页

2. 聊天界面
   

   • 界面功能
     • 与好友进行聊天
   • 界面组成
     1. 对方和自己的消息内容
     2. 对方的微信昵称
     3. 聊天框
   • 前置条件
     • 点击消息列表
   • 后置条件
     • 输入文字，图片，进入对方主页
   • 操作步骤
     1. 点击聊天框，可输入文字或者图片发送给对方
     2. 点击对方头像，可进入对方主页查看信息
     3. 点击返回键回到消息列表

3. 发现界面
   

   • 界面功能
     • 进入朋友圈，摇一摇等娱乐功能
   • 界面组成
     1. 朋友圈
     2. 扫一扫
     3. 摇一摇
     4. 看一看
     5. 搜一搜
     6. 附近的人
     7. 购物
     8. 游戏
     9. 小程序
   • 前置条件
     • 点击发现按钮
   • 后置条件
     • 点击朋友圈，扫一扫等按钮进入其界面
   • 操作步骤
     1. 点击朋友圈，进入朋友圈
     2. 点击微信，进入消息列表
     3. 点击我，进入我的主页

4. 朋友圈界面
   

   • 界面功能
     • 查看好友的朋友圈，评论，点赞
   • 界面组成
     1. 朋友的微信头像
     2. 朋友的微信昵称
     3. 朋友发的朋友圈内容
     4. 点赞按钮
     5. 评论按钮
   • 前置条件
     • 点击朋友圈按钮
   • 后置条件
     • 点击各个按钮与朋友进行互动
   • 操作步骤
     1. 点击点赞按钮，进行点赞
     2. 点击评论按钮，进行评论
     3. 点击朋友头像，查看他的历史朋友圈

5. 个人主页界面
   

   • 界面功能
     • 查看个人信息，修改个人信息，退出账号等
   • 界面组成
     1. 服务
     2. 收藏
     3. 朋友圈
     4. 卡包
     5. 表情
     6. 设置
   • 前置条件
     • 点击"我"按钮
   • 后置条件
     • 点击各个按钮进入对应的功能
   • 操作步骤
     1. 点击服务按钮进入服务界面
     2. 点击收藏按钮进入收藏界面
     3. 点击朋友圈按钮进入朋友圈界面
     4. 点击卡包按钮进入卡包界面
     5. 点击表情按钮进入表情界面
     6. 点击设置按钮进入设置界面

5.界面切换流程