• 原型设计工具比较及实践
  • 一、原型设计工具比较
    • 1.综述
    • 2.分析对比
      • 2.1 墨刀
      • 2.2. Axure
      • 2.3 Mockplus
    • 3.总结
  • 二、原型设计实践
    • 1.软件主题
    • 2.基本功能
    • 3.界面设计的要点
    • 4.切换页面
      • 4.1 登陆页面
      • 4.2 注册页面
      • 4.3 主页面
      • 4.4 分栏页面
      • 4.5 个性推荐页面
      • 4.6 个人信息页面
    • 页面切换流程

原型设计工具比较及实践

一、原型设计工具比较

1.综述

​ 墨刀、Axure和Mockplus都是比较常见的原型设计工具，它们各自在不同的使用领域和特点上都有一些优缺点。

2.分析对比

2.1 墨刀

• 使用领域：墨刀适用于快速原型设计和高保真度的交互设计，特别适合移动端应用、小程序等交互设计。
  • 优点：操作相对简单，易上手；支持多种设计元素和交互效果；支持在线协作，并可直接在设计过程中与开发人员进行交流；支持云存储和文件同步，设计更方便。
  • 缺点：有些功能需要收费，一些高级功能依赖于插件等；页面数量有限制，不适用于大型项目；对于复杂的交互效果，需要进行定制开发。

2.2. Axure

• 使用领域：Axure适用于大型项目和 Web 应用程序的原型设计，通常用于需求分析和功能评估，适合高保真度和数据驱动设计。

  • 优点：支持快速制作高保真度原型；对于多个页面和大量数据的管理，有较好的统一性；支持多人协作和版本控制；支持自定义交互效果；有丰富的文档输出和导出功能。

  • 缺点：上手难度较大；操作相对复杂；不支持简单快速的表单元素的设计；在复杂交互的情况下，会出现性能问题。

2.3 Mockplus

• 使用领域：Mockplus适用于中小型项目的原型设计，特别是针对大量功能实现的快速测试和交互设计。

  • 优点：操作相对简单，易上手；支持组件库和快速原型设计；支持多种交互效果和页面切换；支持多人协同和在线协作；支持实时预览和分享；页面数量没有限制。
  • 缺点：对于复杂的交互效果和高保真度的设计的支持能力相对较差；对于非标准元素支持不足；对于多视口的响应设计支持不足。

3.总结

​ 综合来看，适合墨刀的设计师通常需要快速制作移动端应用，适合采用Axure的设计师通常需要设计大型的 Web 应用程序，而适合Mockplus的设计师通常需要快速创建中小型项目原型。

二、原型设计实践

1.软件主题

​ 高校二手交易平台

2.基本功能

• 用户注册和登录：允许用户注册并且登录系统，记录并保存用户的信息。

• 商品搜索和展示：允许用户搜索和浏览二手商品，查看商品的详情和图片，以及发布二手商品。
• 购买和支付：用户可以加入购物车并且选择商品后下单，还可以选择支付方式，进行在线支付。
• 评价和反馈：用户可以对购买的商品进行评价，以及给卖家或平台提出反馈意见。
• 物流查询和管理：用户可以查询购买商品的物流信息，卖家可以管理订单并且发货。

3.界面设计的要点

• 界面设计的整洁清爽，易于使用，界面图标明显、功能清晰。
• 定位尽可能明确，使用户在短时间内得到正确的、且需要的信息，不易迷失。
• 分组合理，根据功能模块和重要性来分组，使顺序简明合理，并且分组之间有一定的分隔，使页面清晰明了。

4.切换页面

4.1 登陆页面

• 页面功能

  1. 允许用户通过E-mail和密码的方式进行登陆，另外还可以通过Google、QQ和微信等第三方软件进行登陆。
  2. 用户若忘记密码可点击“Forgot your password”按钮进行找回密码
  3. 若用户尚未注册账号，可通过底部的Sign up来进行注册账号

• 页面组成

  1. E-mail输入框
  2. Passwor(密码)输入框
  3. 登陆按钮
  4. 第三方软件（Google、QQ和微信）登陆
  5. 注册按钮
  6. 忘记密码按钮

• 操作步骤

  1. 输入E-mail和密码

  2. 点击LOGIN按钮进入软件

• 前置条件：打开app

• 后置条件：进入主页面/注册账户/找回密码/第三方软件登陆

4.2 注册页面

• 页面功能

  用户通过输入个人信息，如E-mail、电话号码、身份以及密码等，完成注册账户

• 页面组成

  1. 个人信息输入框
  2. 注册按钮

• 操作步骤

  1. 依次输入个人信息
  2. 点击LOGIN按钮，完成注册

• 前置条件

  用户点击Sign up按钮

• 后置条件

  完成注册，进入登陆页面

4.3 主页面

• 页面功能

  1. 搜索想要的商品，可以通过文字或拍照的形式
  2. 通过各种分栏选择挑选商品
  3. 左上角为个人信息夜
  4. 右上角为购物袋，用户可以查看已经添加的商品信息

• 页面组成

  1. 搜索框
  2. 底部页面切换按钮
  3. 左上角个人信息展示按钮
  4. 右上角购物袋按钮

• 操作步骤

  ​ 点击相应的按钮完成操作

• 前置条件：用户已注册账户并且完成登陆

• 后置条件：

  1. 进入搜索页面
  2. 进入购物袋页面
  3. 查看个人信息页面
  4. 切换页面

4.4 分栏页面

• 页面功能

  1. 允许用户通过各个分栏进入不同的分区，包括家具、服饰和电子产品
  2. 查看个人信息
  3. 查看购物袋

• 页面组成

  1. 家具分区
  2. 服饰分区
  3. 电子产品分区

• 操作步骤

  点击想要进入到到分区即可

• 前置条件：主页面下点击下方分栏按钮

• 后置条件：

  1. 进入不同分区页面
  2. 购物袋页面
  3. 个人信息页面

4.5 个性推荐页面

• 页面功能

  1. 通过用户经常购买的产品进行个性化推荐
  2. 每个商品下有商品基本信息，以及新旧程度
  3. 进入购物袋页面
  4. 个人信息页面

• 页面组成

  1. 各类商品的图片和价格
  2. 个人信息分栏和购物袋

• 操作步骤

  ​ 点击想要的商品的图标进入商品详情页

• 前置条件：选择底部第三个个性推荐按钮

• 后置条件：进入各类商品详情页

4.6 个人信息页面

• 页面功能

  1. 用户查看个人信息
  2. 查看订单
  3. 查看浏览足迹
     标签：个人信息,实践,点击,原型,按钮,设计,工具,页面
     From： https://www.cnblogs.com/shengbosun/p/17342755.html