原型设计工具比较及实践

目录

原型设计工具比较及实践

一、原型设计工具比较

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. 查看浏览足迹👣
    4. 修改收货地址
    5. 进行设置
    6. 寻求客服💁帮助
    7. 退出登陆

  • 页面组成

    1. 用户头像及姓名
    2. 订单等功能按钮
    3. 退出登陆按钮

  • 操作步骤

    1. 点击头像进行修改个人信息

    2. 点击订单按钮查看订单

    3. 点击刚刚看过按钮查看浏览足迹

    4. 点击收获地址查看或修改收货地址

    5. 点击设置修改设置

    6. 点击退出登陆按钮退出登陆

  • 前置条件：用户选择左上方分栏或下方第四个按钮

  • 后置条件：进入个人信息页面/进入订单页面/进入足迹页面/进入修改地址页面/进入设置页面/进入帮助页面/进入退出登陆页面

页面切换流程

posted @ 2023-04-22 13:20  Sun不秃  阅读(178)  评论(0)    收藏  举报