首页 > 其他分享 >原型1

原型1

时间:2023-04-21 19:36:12浏览次数:19  
标签:界面 签到 原型 设计 墨刀 交互

目录

一 原型设计工具比较

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. 后置条件
    • 切换到其他界面

三 总流程图

标签:界面,签到,原型,设计,墨刀,交互
From: https://www.cnblogs.com/xhyy-/p/17334673.html

相关文章

  • 原型设计工具比较和实践
    目录一、原型设计工具比较1.墨刀2.Axure3.Mockplus二、原型设计1.主题名称2.功能介绍3.界面设计考虑因素4.切换界面(1)视频界面(2)视频播放界面(3)个人信息界面(4)编辑个人信息界面5.界面切换流程一、原型设计工具比较1.墨刀优点新手小白型工具,操作难度较低模板较多,可......
  • 原型设计
    一.工具比较1.墨刀1.适用邻域:主要用于设计移动APP原型。2.优点:拥有PC端、手机端、网页版,可跨平台。可多人协作。使用方法不难,适合新手。3.缺点:需要收费。对交互效果、控件组合、操作面板的选择都不如Axure灵活。2.Axure1.适用邻域:用于创建应用软件或Web网站的线框图、......
  • 原型设计工具比较及实践
    目录一、原型设计工具比较1.墨刀2.Axure3.Mockplus二、原型设计1.主题名称2.功能3.界面设计考虑因素4.切换界面5.界面切换流程一、原型设计工具比较1.墨刀适用领域墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、......
  • 原型设计工具比较及实践
    目录一、原型设计工具比较1. 墨刀2. Axure3. Mockplus二、原型设计1.主题名称2.功能3.界面设计考虑因素4.切换界面1.搜索界面2.搜索结果界面3.商铺陈列页4.菜品页面五、界面切换流程一、原型设计工具比较1. 墨刀• 适用领域:适合设计团队和个人用户使用,可用于移动端和Web......
  • 原型设计工具比较及实践
    目录一.原型设计工具比较1.墨刀适用领域:优点:缺点2.Axure适用领域优点缺点3.Mockplus适用领域优点缺点二.原型设计1.主题名称2.功能3.界面设计考虑因素4.切换界面5.界面切换流程一.原型设计工具比较1.墨刀适用领域:墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、......
  • 产品原型15-20230418
               ......
  • 原型设计工具比较及实践
    目录一.对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点二.功能三.界面设计考虑因素1.主页面:2.听歌识曲界面3.收藏歌单界面:4.下载管理界面四.界面流程一.对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点墨刀:优点:用户界......
  • 产品原型14-20230417
             ......
  • 使用JavaScript的原型
    在javascript中,函数可以有属性。每个函数都有一个特殊的属性叫作原型(prototype)。functiondoSomething(){}console.log(doSomething.prototype);运行这段代码之后,控制台上面应该出现了像这样的一个对象。{constructor:ƒdoSomething(),__proto__:{const......
  • 产品原型13-20230416
               ......