原型设计工具比较及实践

目录

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

一、原型设计工具比较

1. 墨刀

• 适用领域

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

• 优点

  • 原型设计展示效果极佳，利于查看设计的原型

  • 组件种类丰富多样，利于产品设计

  • 拥有多线协作能力，利于高效完成原型设计

• 缺点

  • 免费版具有局限性，部分功能无法使用

  • 不能够进行复杂流程演示和制作

  • 相对于其他的工具组件较少

---

2. Axure

• 适用领域

    Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理

• 优点

  • 可以画图和写文档

  • 功能全面且强大

  • 可以进行复杂的操作

• 缺点

  • 对于新手不友好，上手难度大

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

  • 收费高

---

3. Mockplus

• 适用领域

    摹客（Mockplus）隶属于成都摹客科技有限公司，专注于一站式的产品设计及协作。依托摹客“1+2+1”（1个平台+2个工具+1个设计系统）的产品矩阵，为产品开发团队提供全流程协作、原型设计、UI设计和设计规范管理支持。摹客可以自产出原型及高保真设计，也支持多款主流设计工具（Figma/Sketch/PS/XD/Axure等）的设计稿交付，团队成员在产品、设计到开发的各个工作环节，使用不同设计工具，可通过摹客平台协同工作

• 优点

  • 免费版功能相对齐全，操作简单，易上手

  • 手机版演示清晰，机型多样

  • 兼容性和多人协作功能强大

• 缺点

  • 工具开发的相对于简单，不能进行复杂的开发

  • 演示时界面切换反应较慢

  • 不支持更加复杂的交互

---

二、原型设计

1.主题名称

气泡

—— 一款在线听歌平台

2.功能

• 用户可以使用手机号登录账户，根据用户的需求推荐音乐
• 用户可以修改设置
• 用户可以修改个人资料

3.界面设计考虑因素

• 登录页面设计考虑到本平台主打简便
• 推荐界面以用户的个人爱好为主，利于用户的个性化推荐
• 其他用户界面以简洁明了为主，设置和用户信息修改界面整洁清楚

4.登录界面

1. 登录界面

• 界面功能

  • 注册账号
  • 手机号登录
  • 查看用户协议
  • 查看帮助
  • 其他登录方式
    
    

• 界面组成

  • 手机号登录按钮
  • 手机号输入框
  • 用户协议文字框
  • 其他登录按钮
    
    

• 前置条件

  • 打开APP
    
    

• 后置条件

  • 进入主页
    
    

• 操作步骤

  • 输入手机号进行验证，点击登录按钮

---

2. 推荐界面

• 界面功能
  • 滑动寻找感兴趣的电台、歌单
  • 点击电台或者歌单收听音乐
  • 刷新推荐的电台和歌单
  • 搜索功能
    
    
• 界面组成
  • 歌单推荐和音乐电台的文字框
  • 播放音乐按钮
  • 切换主页按钮
  • 搜索按钮
    
    
• 前置条件
  • 主界面
    
    
• 后置条件
  • 进入电台
  • 进入听歌界面
  • 进入搜索界面
    
    
• 操作步骤
  • 收听推荐的歌单和电台
  • 下拉刷新歌单和电台
  • 点击搜索按钮，可对希望了解的歌曲进行查找
  • 点击主页切换至个人主页
  • 点击播放按钮开始播放音乐

3. 设置界面

• 界面功能
  • 修改播放和下载设置，例如音质、定时关闭和同时播放
  • 修改账号隐私设置，例如个人资料、注销账号和系统权限
  • 查看帮助、意见反馈和清理缓存
  • 退出登录
    
    
• 界面组成
  • 进入功能按钮
  • 各类设置的文字框
  • 退出登录按钮
  • 退出登录弹窗
  • 搜索按钮
    
    
• 前置条件
  • 点击个人主页中的设置按钮
    
    
• 后置条件
  • 切换到相应的功能页面
  • 退出至登录界面
    
    
• 操作步骤
  • 点击功能按钮，跳转到相应的页面
  • 点击退出按钮，是否继续退出

---

4. 修改个人信息界面

• 界面功能
  • 修改用户头像
  • 修改用户名
  • 设置简介
  • 修改用户的信息
    
    
• 界面组成
  • 头像图片
  • 各种文字框
  • 各种操作按钮
    
    
• 前置条件
  • 点击设置的修改个人信息按钮
    
    
• 后置条件
  • 修改用户的各种信息
  • 返回个人主页
  • 复制个人账号
    
    
• 操作步骤
  • 点击更改更改头像按钮
  • 点击学校按钮进行官方认证
  • 点击修改各种个人信息

---

5.界面切换流程

    首先打开软件，进入登录页面,输入手机号进行验证登录或者选择其他方式登录。登陆后切换至发现界面，在发现界面点击音乐电台或者歌单推荐，点击进入可以收听。点击右下角的主页界面，切换到个人空间页面，再点击右上角设置按钮进入设置界面。点击个人资料修改按钮，切换到资料修改界面，此页面可以修改头像、个人信息和进行学校认证等功能。

界面切换流程图