原型设计工具比较及实践

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

一、原型设计工具比较

1. 墨刀

• 适用领域

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

• 优点

  • 原型演示效果较好，有利于观察设计的原型

  • 各种组件丰富多样，便于使用者直接使用，无需编写

  • 拥有多线协作能力，预览速度快，方便协作者交流互动

• 缺点

  • 系统较为简单，具有移动端的局限性，部分复杂功能无法实现

  • 免费版的限制较多，页数也较少，不利于随意创作

  • 缺少传统的UI交互组件，相较于其他原形设计工具有所欠缺

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. 用户界面

• 界面功能

  • 听歌识曲
  • 查看歌单，下载以及历史播放
  • 查看消息
  • 查看设置界面
  • 查看VIP界面
    
    

• 界面组成

  • 用户个人信息
  • 歌单，下载以及历史播放的界面
  • 听歌识曲功能按钮
  • 消息界面的功能按钮
  • 设置功能按钮
  • 用户个人互动栏
    
    

• 前置条件

  • 打开APP
    
    

• 后置条件

  • 进入用户个人主页
    
    

• 操作步骤

  • 点击查看用户的歌单，下载以及历史播放的界面
  • 点击查看用户消息
  • 点击进入听歌识曲界面，使用听歌识曲功能

2. 听歌识曲界面

• 界面功能
  • 听歌识曲，识别目前背景的音乐
  • 退出当前界面，返回上一页
    
    
• 界面组成
  • 听歌识曲界面的背景图案设计
  • 听歌识曲功能的互动按钮
  • 听歌识曲功能的提示语句
  • 返回按钮
    
    
• 前置条件
  • 点击图标进入听歌识曲界面
    
    
• 后置条件
  • 点击开始听歌识曲
  • 返回到上一页面
    
    
• 操作步骤
  • 点击听歌识曲按钮，开始识别当前的背景音乐
  • 点击退出按钮，返回上一页

3. 用户个人消息界面

• 界面功能
  • 查看动态、关注的人、粉丝个人
  • 对关注的人和粉丝进行查询和互动
  • 查看关注的人和粉丝的信息
  • 返回上一页
    
    
• 界面组成
  • 粉丝和关注的按钮
  • 粉丝名单
  • 互动按钮
  • 名单目录
  • 返回按钮
    
    
• 前置条件
  • 点击进入个人消息界面
    
    
• 后置条件
  • 切换到相应的功能页面
  • 返回上一页
    
    
• 操作步骤
  • 点击用户名单，跳转到个人界面

4. 粉丝个人界面

• 界面功能
  • 通过按钮回关粉丝
  • 取消关注
  • 通过举报按钮拉黑或者举报该用户
  • 返回上一页
    
    
• 界面组成
  • 粉丝的个人信息及头像
  • 回关按钮
  • 关注数，粉丝数和获赞数
  • 粉丝个人主页内容
  • 返回按钮
    
    
• 前置条件
  • 点击粉丝界面的用户目录
    
    
• 后置条件
  • 查看粉丝的信息
  • 返回个人主页
  • 点击按钮和粉丝进行互动
    
    
• 操作步骤
  • 点击回关按钮，对未关注的粉丝进行回关
  • 点击举报按钮，对用户进行举报和拉黑
  • 点击返回按钮，返回上一页

5.界面切换流程

    首先进入用户个人主界面，可以看到用户的个人信息以及关注，粉丝等消息，然后可以根据个人选择进入听歌识曲界面进行听歌识曲，也可以根据需要查看用户的消息界面，查看粉丝目录并和粉丝进行互动，点击粉丝目录进入粉丝个人界面，可以和粉丝进行互动，之后便可以通过返回按钮逐级返回用户个人界面。

界面切换流程图