原型设计工具比较与实现

发布时间 2023-04-26 17:22:27作者: 立诚

目录

    • 一 .原型设计工具优缺点比较

      • 1.墨刀
      • 2.Axure
      • 3.Mockplus
    • 二.原型设计

      • 1.主题名称
      • 2.功能
      • 3.界面设计考虑因素
      • 4.界面切换介绍
        • 1.联系人主页面
        • 2.个人页面
        • 3.设置备注和标签
        • 4.设置权限
        • 5.新的朋友
        • 6.添加朋友
        • 7.扫一扫
        • 8.个人二维码
      • 5.界面切换流程图

    一 原型设计工具优缺点比较
    1.墨刀

    • 适用领域
      墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理。
    • 优点:
      • 交互简单,可通过交互面板实现复杂交互。
      • 演示方便,项目演示效果逼真。
      • 操作简单,页面相对简约,适合初学者。
    • 缺点:
      • 不适用于pc端,仅限移动端产品原型。
      • 免费版对于项目数量,页面数量有限制,深入学习成本较高。
      • 无法离线保存,只可以在线操作。

    2.Axure

    • 适用领域

    作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
    Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。

    • 优点:
      • 可以完成原型设计的复杂交互行为,元素样式多,客增加独立元素交互性。
      • 拥有良好的培训和文档支持。
      • 编辑功能强大,内置的插件库可以定制特殊的动作和行为。
    • 缺点:
      • 具有陡峭的学习曲线,对初学者不太友好。
      • Axure的大部分PM需要寻找相应第三方素材库,需要花费相应的时间。
      • 需要购买正版,学习成本较高。
      • 软件为英文,需要英语好或者寻找汉化方法

    3.Mockplus

    • 适用领域
      Mockplus为产品开发团队提供全流程协作、原型设计、UI设计和设计规范管理支持。摹客可以自产出原型及高保真设计,也支持多款主流设计工具的设计稿交付,团队成员在产品、设计到开发的各个工作环节,使用不同设计工具,可通过摹客平台协同工作。
    • 优点:
      • Mockplus组件资源丰富,还具有自由开放的插件机制。
      • 预览方式和到处类型多样,可供使用者进行多层次对比。
      • 永久免费使用,学习成本低,对初学者友好。
    • 缺点:
      • 文档支持功能欠缺,缺少文档与界面连接性。
      • 不支持手势交互。
      • 不支持鼠标悬停,同时在手机端预览不太直观。

    二.原型设计
    1.主题名称

    • 该软件名为FaceChat.我参考了一下微信界面,尝试着做了一下与联系人相关的页面

    • 2.功能
      1 查看你的联系人目录
      2 添加新的朋友
      3 扫一扫
      4 对其中一个联系人设置权限以及备注标签

    • 3.界面设计考虑因素
      简单明了没有学习成本

    • 4.界面切换介绍

      • 1.联系人主页面


        如图所示:与微信一致,你可以通过右上角下拉选项,选择添加朋友或者扫一扫等选项进行页面跳转。也可以直接点开联系人的头像进入到用户的个人页面。
      • 2.个人页面

        如图所示:你可以点击“设置备注和标签”或者“朋友权限”来设置一些东西。至于“发消息”会跳转到聊天界面,好像是由王利强分工了这聊天界面,到时候进行整合处理,交互。
        - 3.设置备注和标签

        - 4.设置权限


        如图:你可以屏蔽他的朋友圈,也可以不让他看你的朋友圈。
        • 5.新的朋友

          点击左上角回退按钮可以回到1联系人主页面,点击头像或者姓名位置打开2个人页面,点击右上角“添加朋友”跳转至6界面。
        • 6.添加朋友

          如图:点击二维码标识打开自己的二维码。点击“扫一扫”即可扫码
        • 7.扫一扫
        • 8.个人二维码

          不加以赘述了。
    • 5.界面切换流程图