JZTXT

原型设计工具比较及实践

发布时间 2023-04-19 18:25:19作者: 重铸沈航荣光

目录

一.原型设计工具比较

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. 消息列表界面
    image

    • 界面功能

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

    • 界面组成

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

    • 前置条件

      • 开启APP

    • 后置条件

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

    • 操作步骤

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

  2. 聊天界面
    image

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

  3. 发现界面
    image

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

  4. 朋友圈界面
    image

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

  5. 个人主页界面
    image

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

5.界面切换流程

image