原型1

发布时间 2023-04-21 19:26:18作者: xhyy-

一 原型设计工具比较

1.墨刀

2.Axure

3.Mockplus

  1. 墨刀 :
    • 适用范围
      • 墨刀是一款在线的移动应用原型与线框图工具,借助墨刀,创业者、产品经理及UI/UX设计师等用户群体能够快速搭建移动应用产品原型,演示项目效果;同时墨刀也可作为协作平台,项目成员可以协作编辑、审阅。适用于Windows、Mac 桌面客户端,同时支持 iOS、Android 端预览。
    • 优点
      • 操作简单--简单拖拽和设置,即可将想法、创意变成产品原型。即使是一个新手,也可以通过它所提供的教程和视频,快速上手。
      • 协作高效--可与同事共同编辑原型,作品完成后,可一键分享发送给别人;在线浏览方便,他人可在原型上打点、评论,收集反馈意见,高效协作。
      • 交互简单--简单拖拽就可实现页面跳转,还可通过交互面板实现复杂交互,多种手势和转场效果,可以实现一个媲美真实产品体验的原型。
    • 缺点
      • 不适用于PC端,仅限移动端产品原型,交互效果、控件组合、操作面板的选择上也都不够灵活。
      • 免费版对于项目数量、页面数量有限制。
      • 必须在线操作,离线无法保存。
  2. Axure :
    • 适用范围
    • Axure RP是美国Axure Software Solution公司旗舰产品,它是一款专业的原型设计工具,让负责定义需求和规格、设计功能和界面的设计师能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。它功能全面,同时方便团队成员一起完成协同设计,极大地优化了工作方式,能够使沟通更加清晰有效。但Axure的交互设置略显复杂,缺乏可视化。我个人认为,如果你是一位专业的交互设计师,并且需要设计复杂的交互,这款工具才会更适合一些。
    • 优点
      • 擅长原型设计的复杂交互行为。
      • 拥有良好的培训和文档支持。
      • 拥有多种元素样式,可增加独立元素交互性以及内置的插件库可以定制特殊的动作和行为。
    • 缺点
      • 陡峭的学习曲线,对于初学者来说不算容易。
      • 在导出HTML之前无法对原型进行预览。
      • 原型的web展示并不支持所有的浏览器,比如,对于谷歌浏览器就必须要使用插件才能观看。
  3. Mockplus :
    • 适用范围
      • 摹客隶属于成都摹客科技有限公司,专注于产品设计领域,致力于为全球互联网团队和软件企业以及产品经理、设计师、开发工程师提供“更快更简单”的设计解决方案,为企业软件设计产品创造持续增长价值。Mockplus除用于移动APP原型设计,还可以制作PC、网页的原型设计,它可以帮助UI设计师在最短的时间内完成产品原型图的设计。
    • 优点
      • 基础版免费使用,操作简单,上手快,交互简单。
      • 功能多样,组件资源丰富,预览方式和导出类型多样。
      • 支持团队协作。
    • 缺点
      • 不支持手势交互,无法通过其设计制作一些较为精细的操作,
      • 设计界面不够美观
      • 对于产品文档的支持,也有不足。

二 原型设计

  1. 功能
    • 从主界面跳转到某一界面,也可从某一界面回到主界面,实现了界面间灵活跳转,流程图共计16张。

    • 主界面

    • 听歌识曲界面

    • 下载管理界面

    • 歌单界面

    • 歌曲信息界面

    • 视频界面

    • 视频播放界面

    • 个人信息界面

    • 编辑个人信息界面

    • 设置界面

    • 签到及关注界面

    • 关注界面

    • 邮箱通知界面

    • 播客界面

    • 播放列表

    • 直播界面

  2. 界面设计
    本组的原型设计作业参考了网易云音乐PC端的界面设计,本组认为此程序界面功能丰富的同时又不冗杂,给人的直观感觉很清新舒适;
    本次我主要负责设计签到及关注界面、关注界面、邮件通知界面以及播放列表界面。

1. 签到及关注界面

  1. 界面功能
    • 观看动态数、关注数及粉丝数

    • 签到

    • 我的会员

    • 等级

    • 个人信息设置

    • 我的客服

    • 退出登录

  2. 前置条件
    • 点击右上角签到及关注图标
  3. 后置条件
    • 切换到其他功能界面

2.关注界面

  1. 界面功能
    • 查看用户关注的歌手信息
    • 私信歌手
  2. 前置条件
    • 点击主菜单左侧关注图标
  3. 后置条件
    = 切换到其他对应界面

3.邮箱通知界面

  1. 界面功能
    • 私信、评论、@我及通知
    • 一键已读
  2. 前置条件
    = 点击主界面邮件与通知图标
  3. 后置条件
    • 切换到其他界面

4.播放列表界面

  1. 界面功能
    • 查看当前及后序播放歌曲
    • 收藏全部
    • 清空列表
  2. 前置条件
    • 点击主界面播放列表图标
  3. 后置条件
    • 切换到其他界面

三 总流程图