原型设计工具比较及实践

目录

• 1原型设计工具比较
  • 1.1基本要求
  • 1.2原型设计工具
    • 1.2.1墨刀
      • （—）简介
      • （二）优点
      • （三）缺点
      • （四）领域
    • 1.2.2Axure
      • （一）简介
      • （二）优点
      • （三）缺点
      • （四）领域
    • 1.2.3Mockplus
      • （一）简介
      • （二）优点
      • （三）缺点
      • （四）领域
• 2原型设计工具实践
  • 2.1基本要求
  • 2.2“生鲜电商”原型设计
    • 2.2.1原型设计说明
    • 2.2.2界面说明
    • 2.3原型设计链接

1原型设计工具比较

1.1基本要求

对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点

1.2原型设计工具

1.2.1墨刀

（—）简介

墨刀，也是原型图制作软件，拥有着PC端、手机端、网页版这几个方面，可以让你随时随地可以原型设计制作 。

（二）优点

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

2. 功能特色： 内置丰富的素材广场、图文结合的PRD模式、细粒度的权限管理等特色功能，是经常会用到的高频功能，显著提升了创作和沟通效率。
  3. 简洁易用：产品界面简洁易用，上手快，学习成本和切换成本低，真正方便全员使用。

墨刀主要是用于移动端的app原型制作！其控件的拖拉、大小的调整，都会自然去匹配相应的母版大小，可以说是比较人性化的了。再者，墨刀提供了强大的共享创建功能，方便用户手机上预览原型。

（三）缺点

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

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

墨刀不好的点就是在交互效果、控件组合、操作面板的选择等等方面上都没有Axure灵活，内置交互效果包括点击、滑动、滚动等，做高保真原型的时候也不大够用；另外，效果切换因为是采用连线的方式，有时会让用户产生错乱的感觉。

（四）领域

• 产品经理：可以利用自带组件库和素材广场轻松完成原型设计；

• 开发人员：通过一个链接即可获取所需的标注、切图等设计资源；

• 测试人员：参考内置的PRD模式就能直接核对功能需求点；

• 市场销售：制作产品demo，与客户演示更传神；

• 设计师：使用Sketch插件，就能一键上传设计稿件，交付开发；

• 运营：可以更好的梳理活动需求

  ---

1.2.2Axure

（一）简介

Axure作为一款专业的快速原型设计软件，其实在功能上是十分齐全的，并且交互的样式也比较多样，主要是通过动态面板、函数、中继器等几个模块就几乎可以实现任何常见的交互效果，所以说Axure在制作PC端原型图上是占有非常强大的优势的 。

（二）优点

1. 即可以画图，又可以做文档，画图的难度比PS低，写文档比word灵活。
2. Axure有一套非常强大的交互编辑器，可以实现复杂的逻辑的关系处理，使得模拟更加真实。
3. 使用成本几乎为零。

Axure界面共有九大版块，使用者可以有更好的制作原型体验！还有一个很值得说的点，就是Axure有自带的元件库，如果想要制作更多的原型而想要用到其它样式的元件库的话，那么是可以自行导入进去使用的 。

（三）缺点

1. 不好看，在设计师眼中，Axure的默认元件和样式都无法接受。
2. 学习成本高，高级元件的使用有一定学习门槛。
3. 手机端演示效果差，服务器不在国内，自带元件库用处不大等。

Axure的功能比较多而往往会比较头晕不知道怎么操作

（四）领域

• Axure的最主要用户是产品经理

• 其次就是UI/UE

• 然后是研发。

  ---

1.2.3Mockplus

（一）简介

摹客（Mockplus）是成都摹客科技有限公司旗下设计协作品牌，专注于一站式的产品设计和协作平台，为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。

（二）优点

1. 易用且低学习曲线。对于任何经验水平的用户都是一个好的选择；
2. 针对不同的设备，有大量的元素和图标库；
3. 通过简单的拖放，容易地创建交互原型；
4. 通过拖放快速直观地链接页面。

（三）缺点

1. 文档支持欠缺；
2. 不支持手势交互。

（四）领域

• 产品经理

• 设计师

• 前端工程师

  ---

2原型设计工具实践

2.1基本要求

利用网络资源自学墨刀或Axure等原型设计工具，并利用原型工具自拟主题进行原型设计。主题可以是二手交易平台、在线听歌、老年手机、相册管理等。

要求：

1）对主题名称、功能、界面设计考虑因素等进行说明；

2）提供至少四个切换界面；

3）对每个界面的界面功能，界面组成，前置条件，后置条件，操作步骤简单说明。

2.2“生鲜电商”原型设计

2.2.1原型设计说明

• 主题名称——“生鲜电商”

• 功能:商品搜索，查看商品详情，查看购物车，查看我的账户信息

• 界面设计考虑：分为“主页”，“分类”，“购物车”，“我的”四大板块

  ---

  操作前后的页面跳转
  

  ---

  界面组成元素+组件
  

  ---

  事件的链接
  

---

2.2.2界面说明

• 主页（搜索，查看商品，商品评价，购买后确认订单等）
  

可搜索，点击“搜索栏”转换至下页：（点击“取消”可跳转回首页）

---

点击“放大镜”图标搜索内容，页面转换

---

查看商品跳转详情

---

商品评价

---

选择（点击加入并确认订单

---

• 分类
  

  ---

• 购物车
  

  ---

• 我的
  

  ---

  2.3原型设计链接

https://modao.cc/app/aLN4anN5ra80zpcPIyXUlQ 《生鲜电商原型》