原型设计工具比较及实践

 

一.原型设计工具比较及实践

墨刀

更偏向于“交互向”的原型设计工具，早期大部分用户使用的是web版本，简单高效的制作APP交互，快速的可以放在手机端进行演示和体验，真正的让产品体验放在研发之前，提前确认效果，降低研发试错成本。

优点：

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

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

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

 

缺点：

1、不适合做文档，只适合做交互设计

2、由于事件系统比较简单，无法演示复杂的交互效果

3.需要变量控制页面，数据排序等

Axure

更偏向于“技术向”的客户端产品设计工具，可能是因为“国内早期的产品岗大都是从技术岗转型而来”，自然对这种“类IDE”编程语言向的设计工具更加热衷。

优点：

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

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

3、使用成本几乎为零

 

缺点：

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

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

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

Mockpuls

优点：

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

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

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

缺点：

1.不支持鼠标悬停，日历表组件是静态的。

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

3.手机预览不是很清楚，

二、原型设计

1.主题名称

2.功能

关于购物app的设计，实现网上购物

3.界面设计考虑因素

商品购物车列表参考淘宝等app设计

为使用者提供更方便的网上购物

4.切换界面

1.购物车列表界面

• 界面功能：
  • 看见加入购物车里的商品
• 界面组成：
  • 商品信息，推出，管理等
• 前置条件：
  • 从主页点入购物车
• 后置条件：
  • 打开购物车

         操作步骤：点入app，进入到首页中点击购物车图标

 2.管理购物车

 

• 界面功能：
  • 可以删除不想要的商品
• 界面组成：
  • 删除按钮，跳转图标等
• 前置条件：
  • 摁下管理
• 后置条件：
  • 删除商品

      操作步骤：进入购物车界面后点击管理购物车进行购物车中物品删除

3.商品详情界面

• 界面功能：
  • 可以查看阅读商品信息，并将商品加入购物车
• 界面组成：
  • 商品详情图，商品信息，加入购物车等
• 前置条件：
  • 点进商品页面
• 后置条件：
  • 查看商品信息

 操作步骤：可以查看商品信息，将商品加入购物车

4.商品加入购物车界面

 

• 界面功能：
  • 可以查看阅读商品具体信息，并将商品加入购物车
• 界面组成：
  • 商品详情图，商品具体信息，加入购物车等
• 前置条件：
  • 点进商品页面
• 后置条件：
  • 点加入购物车

 操作步骤：查看商品详情并加入购物车

5. 界面切换流程