原型设计工具比较及实践

发布时间 2023-04-22 12:28:46作者: qfzwy

原型设计工具比较及实践

 

目录

 

一、原型设计工具比较

1. 墨刀

  • 适用领域

墨刀为北京磨刀刻石科技有限公司旗下一款在线原型设计与协作工具产品,用户群体包括:产品经理、设计、研发、运营销售、创业者等。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,展示产品想法,向客户收集产品反馈以及在团队内部进行协作沟通。

  • 优点

    • 原型演示效果好,适合产品设计确认与交互验证

    • 元件种类丰富,使用者无需编写可以直接使用

    • 提供强大的共享创建功能,预览速度快

  • 缺点

    • 事件系统较为简单,无法演示复杂的交互效果,比如需要变量控制页面,数据排序等

    • 部分便捷的操作需要购买使用,免费版对于项目、页面数量有限制

    • 组件太少,缺少传统UI交互的基础组件


2. Axure

  • 适用领域

Axure是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。

  • 优点

    • 即可以画图,又可以做文档,画图的难度较低,写文档较灵活

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

    • 使用成本很低

  • 缺点

    • 学习成本高,高级元件的使用有一定学习门槛

    • 素材需要寻找第三方素材库进行载入,需要花费较多时间

    • 手机端演示效果差


3. Mockplus

  • 适用领域

摹客(Mockplus)隶属于成都摹客科技有限公司,注重一站式的产品设计及协作。摹客支持全工序的产品设计,连接从需求到开发,为企业产品团队提供原型设计、UI设计、PRD文档撰写管理、全流程协作、自动标注切图、高效评论审阅,支持全部主流设计稿交付,帮助产品经理、设计师、开发人员高效设计协作。

  • 优点

    • 原型项目层次清晰,交互上的功能性强大

    • 项目树层级分明,项目树中以分组和子页面来规定层级

    • 基础版免费使用,操作简单,上手快

  • 缺点

    • 软件设计方式相对传统。无法适应复杂、高定制化的需求

    • 表格功能需要完善,预览不是很清楚

    • 不支持手势交互,功能上的细腻性有待加强

 

二、原型设计

1.主题名称

牛啵商城

 —— 一款牛啵的二手交易平台

2.功能

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

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

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

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

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

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

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

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

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

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

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

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

3.界面设计考虑因素

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

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

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

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

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

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

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

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

4.切换界面

1.登录界面

 

 

  • 界面功能

    • 注册账号

    • 账号密码登录

    • 社交账号登录

  • 界面组成

    • 账号密码输入框

    • 登录按钮

    • 忘记密码按钮

    • 注册按钮

    • 微信、QQ、支付宝登录按钮

  • 前置条件

    • 打开APP

  • 后置条件

    • 进入主页

  • 操作步骤

    • 输入账号和密码登录,点击登录按钮,或者选择其他方式登录

    • 若没有账号,点击注册按钮

 

2.商家个人中心

 

  • 界面功能

    • 看自己发布的商品,关注,粉丝数量

    • 总收益

    • 邀请好友

    • 查看我的订单,商品,问答,权益,卡包

  • 界面组成

    • 发布,关注,粉色,获赞,收藏

    • 总收益

    • 邀请好友

    • 我的订单,我的商品,我的回答,我的权益,我的卡包

  • 前置条件

    • 登录成功

  • 后置条件

    • 进入对应选择页面

  • 操作步骤

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

3.商家订单处理

 

  • 界面功能

    • 用于商家查看处理订单,进行发货,关闭等操作

  • 界面组成

    • 全部订单

    • 待发货订单

    • 待收货订单

    • 已完成的订单

    • 已关闭的订单

    • 订单的名称,数量,总价,客户支付时间,订单状态

  • 前置条件

    • 商家进入我的,我的订单

  • 后置条件

    • 点击订单,进入详情页

    • 切换到其他页面

  • 操作步骤

    • 点击订单分类,查看对应状态的订单

    • 点击具体的订单,进入订单详情页

 

4.商家新增商品

 

  • 界面功能

    • 添加商品

  • 界面组成

    • 商品名称输入

    • 商品描述输入

    • 交易方式输入

    • 商品价格输入

    • 商品图片上次

    • 提交按钮

  • 前置条件

    • 点击我的商品

    • 点击添加商品

  • 后置条件

    • 点击提交按钮

    • 返回商品管理

  • 操作步骤

    • 输入各项信息

    • 点击提交按钮

5.商家新增优惠

 

  • 界面功能

    • 商家新增优惠券

  • 界面组成

    • 优惠券名称输入框

    • 优惠类型选择

    • 发放数量

    • 每人限领

    • 有效期

    • 提交按钮

  • 前置条件

    • 商家进入我的商品

    • 点击优惠券管理

  • 后置条件

    • 点击提交按钮

    • 返回优惠券管理

  • 操作步骤

    • 输入各项信息

    • 点击提交

5.界面切换流程

  1. 首先打开APP,然后进入登录页面。

  2. 用户输入账号密码,或者选择微信、QQ、支付宝等方式登录。

  3. 登录成功后进入主页面,点击我的,对订单商品等进行管理。

  4. 点击我的订单,查看对应订单状态,对订单进行处理。

  5. 点击我的商品,可对商品进行增删,以及对商品新增优惠

 

界面切换流程图