原型设计工具比较及实践

发布时间 2023-04-22 18:07:38作者: 王冲,

目录
一、原型设计工具比较

  1. 墨刀
  2. Axure
  3. Mockplus

二、原型设计

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

1.墨刀
适用领域:适合移动端、PC端等的用户体验设计,支持UI设计、交互设计、动效设计等。

优点:

。界面简单易用,可以快速实现初稿设计。
。集成度高,支持多设备查看和在线协作。
。可以制作高保真原型,并自动生成代码。
缺点:

。功能较弱,对一些复杂功能的支持不足。
。不支持离线操作。
。导出功能有限。

2.Axure

适用领域:适合大型项目的原型设计,如企业级应用。

优点:

。功能强大,可定制化程度高,支持丰富的交互动效和数据驱动。
。适用于团队协作,在线评论功能高效。
。输出格式支持较多,可以方便地与前端开发对接。
缺点:

。学习曲线较陡峭,需要一定的学习成本。
。界面不够清晰简洁,影响使用体验。
。定位较为专业,对非专业人士不友好。
3.Mockplus

适用领域:适合中小型项目,能快速制作出实际效果的交互原型。

优点:

。界面简洁易用,可拖拽式的操作便捷。
。内置丰富的UI元件库和模板方便设计。
。预览功能更加完善,支持多设备查看。
缺点:

。功能相对较弱,不支持复杂动效和数据驱动。
。不支持离线操作,需要网络连接。
。不支持自定义组件。

二、原型设计

1.主题名称:沈航二手交易平台

2.功能:可售出自己的二手商品,二手商品在线搜索,购物车中支付购买。

3.界面设计考虑因素:界面设计简单,信息详尽,功能齐全,保证二手交易平台商品的展示与交易质量。

4.切换界面

界面组成:搜索栏、滑动广告栏、首页商品推荐

前置条件:点击进入手机APP

后置操作:可搜索、或滑动浏览首页商品

操作步骤:点击搜索或点击商品图标可以进行后续操作

 

 

界面组成:搜索栏、商品分类选项

前置条件:点击下方分类栏

后置操作:可以选择不同商品分类进入不同种类商品界面

操作步骤:点击分类选项

 

 

界面组成:购物车商品信息,支付栏

前置条件:点击下方购物车

后置操作:可以选择购物车中的商品进行支付

操作步骤:选中商品,在下方点击结算进行支付

界面组成:账户余额、我的订单状态,服务与帮助,积分余额,优惠卷余额

前置条件:点击我的

后置操作:可以选择任意一项查看信息

操作步骤:点击所要查看的信息栏

 

5.界面切换流程