原型设计工具比较及实践

目录

• 原型设计工具比较

  1. 墨刀

  2. Axure

  3. Mockplus

• 原型设计

  1. 主题名称

  2. 功能

  3. 界面设计考虑因素

  4. 切换界面

  5. 界面切换流程

一、原型设计工具比较

1. 墨刀

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

     （1）优点

• • 墨刀提供了丰富的模板和组件库，用户可以快速创建交互原型。

  • 墨刀支持多人协作，用户可以邀请团队成员一起编辑原型。

  • 墨刀支持云端保存和分享，用户可以随时随地访问和分享原型。

     （2）缺点

• • 墨刀功能相对简单，不适合制作复杂的原型。

  • 墨刀的交互效果相对较弱，不够灵活。

2. Axure

• 适用领域

Axure是专门用来画原型的工具，当然也可以画流程图。也可以说，Axure是产品经理必备的工具，甚至是专门为产品经理设计的工具。

     （1）优点

• • Axure支持高度自定义的交互和动画效果，能够制作出复杂的原型。

  • Axure拥有强大的组件库和模板库，支持自定义组件和交互，可以快速搭建原型。

  • Axure支持团队协作和版本控制，支持多人同时编辑和管理原型。

      （2）缺点

• • Axure学习曲线较陡峭，需要花费一定的时间学习和掌握。

  • Axure的价格较高，不适合个人用户或小团队使用。

3. Mockplus

摹客为“1+2+1”（1个平台+2个工具+1个设计系统）的产品矩阵，支持全工序的产品设计，连接从需求到开发，为企业产品团队提供原型设计、UI设计、PRD文档撰写管理、全流程协作、自动标注切图、高效评论审阅，支持全部主流设计稿交付，助力产品经理、设计师、开发人员高效设计协作。

       （1）优点

• • Mockplus的界面简洁、易用，学习成本较低。

  • Mockplus拥有丰富的组件库和模板库，支持快速创建原型。

  • Mockplus支持云端保存和分享，可以随时随地访问和分享原型。

        （2）缺点

• Mockplus的交互效果相对简单，不够灵活。

• Mockplus的定制性较弱，不能自定义组件和交

二、原型设计

1.主题名称

牛啵商城

 一款牛啵的二手交易平台

2.功能

• 用户注册和登录：允许用户创建账户、登录和注销。

• 商品发布：允许商家发布二手商品的信息，包括商品的照片、描述、价格、交易方式等。

• 商品搜索和筛选：允许用户根据关键词、价格、地理位置等条件进行商品搜索和筛选。

• 商品购买：允许用户直接购买或议价购买商品。

• 交易沟通：允许用户在交易过程中与卖家或买家进行沟通。

• 支付系统：允许用户通过APP内置的支付系统进行交易支付，包括第三方支付平台的接入。

• 物流配送：提供物流配送服务，包括快递、自提、送货上门等方式。

• 评价系统：允许用户对交易过程和对方进行评价和评分，以提高用户的信誉和可信度。

• 个人中心：允许用户管理个人信息、交易记录、收藏夹、购物车等。

• 活动推广：为了吸引用户和提升APP的知名度，允许发布者创建折扣、限时优惠等活动并向用户推广。

• 社区交流：例如评论、评价、分享和收藏物品等功能。这些功能可以帮助用户更好地了解卖家和物品，并增加购买意愿。

• 资产管理：便于商家更好的管理自己的收益。

3.界面设计考虑因素

• 用户体验：设计应该专注于提高用户体验，确保易于使用和导航。通过使用直观和简洁的布局、图标和颜色来实现。

• 交易流程：设计应该使购买和出售物品的过程简单和容易，使用户可以快速找到想要的物品，与卖家进行交流并完成交易。

• 搜索功能：设计应该提供高级搜索选项和过滤器，以便用户可以根据价格、地理位置、物品类型等准确地搜索物品。

• 物品列表：设计应该呈现物品列表，以便用户可以快速浏览、筛选和排序可用的物品。此外，设计应该使用户可以查看物品的详细信息，包括价格、照片、描述和其他详细信息。

• 信任和安全：设计应该在用户之间建立信任，确保交易过程安全。例如，可以提供用户评级、交易历史记录和付款保护等功能。

• 社交互动：设计应该鼓励社交互动，例如评论、评价、分享和收藏物品等功能。这些功能可以帮助用户更好地了解卖家和物品，并增加购买意愿。

• 多平台支持：设计应该支持多个平台，例如手机、平板电脑和桌面电脑。此外，设计应该考虑响应式设计，以便在不同屏幕尺寸和设备上实现良好的用户体验。

• 品牌一致性：设计应该与品牌的整体视觉风格一致，包括标志、颜色、字体和排版等方面。这有助于提高品牌的可识别性，并加强用户对品牌的信任感。

4.切换界面

1.商品管理主界面

• 界面功能

  • 搜索商品

  • 查看商品分类

  • 选择商品

• 界面组成

  • 搜索输入框

  • 搜索按钮

  • 可用功能分布按钮

  • 商品浏览按钮

• 前置条件

  • 打开商品管理主页

• 后置条件

  • 进入商品分类界面

• 操作步骤

  • 选择要购买的商品分类

  • 进入商品分类界面

2.商品分类界面

• 界面功能

  • 看到每个分类所属的子类

  • 子类的各种类

  • 物品图片介绍

  • 排行榜和小编推荐

• 界面组成

  • 搜索、分类

  • 图片框

  • 排行榜

  • 小编推荐

• 前置条件

  • 商品总界面

• 后置条件

  • 进入商品购买

• 操作步骤

  • 点击功能按钮，跳转到相应的页面

3.商家购买页面

• 界面功能

  • 用于查看商品的详细信息，进行购买，评论等操作

• 界面组成

  • 关注店铺

  • 商品相关的信息

  • 出价

  • 留言

  • 收藏

• 前置条件

  • 点击商品详细信息

• 后置条件

  • 购买

  • 评论

• 操作步骤

  • 点击出价

  • 点击具体的按钮

4.商家新增商品

• 界面功能

  • 评论

• 界面组成

  • 用户评论

  • 商家回复

  • 点赞

• 前置条件

  • 点击留言功能

• 后置条件

  • 评论

• 操作步骤

  • 输入留言信息

  • 点击确认按钮

5.界面切换流程

1. 首先打开商城主界面，然后进入搜索界面。

2. 查看商品的分类、以及可选择的功能。

3. 进行某类商品的选取。

4. 查看商品的详细信息。

5. 进行商品购买以及留言