原型设计工具比较及实践

目录

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

一、原型设计工具比较

1. 墨刀

适用领域
墨刀是一款在线的产品设计协作软件，可以解决产设研团队中存在的项目管理权限不明、版本管理混乱、协作低效等诸多问题，提高团队效率，推进项目更快落地。对于产品经理可以利用自带组件库和素材广场轻松完成原型设计；对于开发人员可以通过一个链接即可获取所需的标注、切图等设计资源； 对于测试人员可以参考内置的PRD模式就能直接核对功能需求点；对于市场销售可以制作产品demo，与客户演示更传神；对于设计师可以使用Sketch插件，就能一键上传设计稿件，交付开发；对于运营可以更好的梳理活动需求

优点

• 功能强大：可满足产品经理、设计师、开发在产品设计和团队协作上的主要需求，不需要采购多款工具来回切换同步。

• 功能特色： 内置丰富的素材广场、图文结合的PRD模式、细粒度的权限管理等特色功能，是经常会用到的高频功能，显著提升了创作和沟通效率。

• 简洁易用：产品界面简洁易用，上手快，学习成本和切换成本低，真正方便全员使用。

• 实力强可信赖： 墨刀成立至今已有六年，一直深耕产品设计协作领域，服务过国内外众多知名企业，用户数量现已达到了190w，业界口碑好，可以信赖。

缺点

• 不自由：这与墨刀的产品定位有关，清晰定位为移动端原型设计工具，因此在交互效果上、控件组合上，操作面板的选择上都不如AXURE 灵活，并且效果切换因为是采用连线的方式。

• 付费：需要充费才能够使用更强大的共享创建功能。

---

2. Axure

适用领域
Axure为一款专业的快速原型设计工具，它可以让设计师们利用需求，设计功能和界面来快速的创建应用软件的线框图、流程图、原型和规格说明文档，并且同时支持多人协作和版本控制管理。Axure的最主要用户是产品经理，其次就是UI/UE，然后是研发。
优点

• 即可以画图，又可以做文档，画图的难度比PS低，写文档比word灵活。

• Axure有一套非常强大的交互编辑器，可以实现复杂的逻辑的关系处理，使得模拟更加真实。

• 使用成本几乎为零。

缺点

• 不好看，在设计师眼中，Axure的默认元件和样式都无法接受。

• 学习成本高，高级元件的使用有一定学习门槛。

• 手机端演示效果差，服务器不在国内，自带元件库用处不大等。

---

3. Mockplus

适用领域
摹客（Mockplus）是成都摹客科技有限公司旗下设计协作品牌，专注于一站式的产品设计和协作平台，为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。主要对于产品经理，设计师，前端工程师展开使用。
优点

• 易用且低学习曲线。对于任何经验水平的用户都是一个好的选择。

• 针对不同的设备，有大量的元素和图标库。

• 通过简单的拖放，容易地创建交互原型。

• 通过拖放快速直观地链接页面。

缺点

• 文档支持欠缺。

• 不支持手势交互。

---

二、原型设计

1.主题名称

看看

—— 二手交易平台

2.功能

• 二手交易app为买卖双方提供在线交流平台，双方可以在线交流、降价等一系列可以在线完成的事宜，以确保双方的个人生活不受干扰。
• 通过支付宝、微信、银行卡等多种方式的在线支付功能，快速支付，并且下单安排发货或者当面取货。
• 通过个人中心，卖家和买家可以了解自己销售或购买的二手产品情况，并可了解订单、物流等情况。

3.界面设计考虑因素

• 设计红包、足迹以及待收货等相关功能。
• 我的红包通过展示其中信息，给予用户选择。
• 待收货功能通过数据信息来展现其功能，可读性更强。
• 订单跟踪通过对订单的查找，来进行对于订单的跟踪。

4.切换界面

1. 我的界面

• 界面功能

  • 页面切换
  • 转换红包、足迹、待收货
  • 其编辑个人信息
    
    

• 界面组成

  • 页面切换栏
  • 商品信息
  • 商品情况
    
    

• 前置条件

  • 打开我的
    
    

• 后置条件

  • 打开红包
  • 打开足迹
  • 打开待收货
    
    

• 操作步骤

  • 点击红包、足迹、待收货
  • 点击返回键

---

2. 红包界面

• 界面功能
  • 领取红包
  • 使用红包
  • 查看使用说明
    
    
• 界面组成
  • 使用说明
  • 红包内容
  • 红包数量
  • 页面切换栏
    
    
• 前置条件
  • 点击红包
    
    
• 后置条件
  • 进入使用说明
  • 切换到其他页面
    
    
• 操作步骤
  • 点击使用说明
  • 点击红包内容，对红包信息进行查看

---

3. 待收货界面

• 界面功能
  • 申请退款
  • 我要催单
  • 确认收货
  • 查看商品分配信息
  • 观看直播
    
    
• 界面组成
  • 页面切换栏
  • 功能小图标
  • 商品信息查询
  • 商品信息
    
    
• 前置条件
  • 点击待收货
    
    
• 后置条件
  • 切换到相应的功能页面
    
    
• 操作步骤
  • 点击待收货按钮，跳转到相应的页面

---

4. 关注界面

• 界面功能
  • 物流进度查询
  • 领取优惠券
  • 商品信息展示
  • 分享商品信息
    
    
• 界面组成
  • 客服
  • 分享
  • 仓库处理中
  • 商品信息
  • 复制
  • 领取优惠
    
    
• 前置条件
  • 点击订单跟踪
    
    
• 后置条件
  • 点击领取优惠
  • 点击商品信息
  • 点击完整物流进度
    
    
• 操作步骤
  • 点击完整物流进度按钮，查看物流信息
  • 点击复制按钮，对商品编号进行复制
  • 点击领取优惠按钮，领取优惠

---

5.界面切换流程

首先进入我的界面，可以根据自己所需选择合适的功能，可以选择红包、足迹、待收货三个功能。点击红包，可以进入红包页面并查看红包信息，点击返回键，可以再次选择功能。再次选择足迹功能，然后点击订单跟踪，查看订单信息，然后点击返回键，可以再次选择功能，然后点击待收货，可以查看未收货商品信息。

界面切换流程图