首页 > 电脑专区 > 电脑教程 >

如何用balsamiq mockups制作软件的界面原型

来源:互联网 2023-02-21 19:18:02 161

我们进行软件开发的时候首先需要做的就是制作界面原型图,然后开发人员根据原型图进行代码的编写。那么如何制作界面原型图呢?下面小编就给大家分享一下用balsamiq mockups制作原型图的方法。PBa办公区 - 实用经验教程分享!

PBa办公区 - 实用经验教程分享!

如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

工具/原料

  • balsamiq mockups

方法/步骤

  • 1

    首先设计原型图之前我们需要先更新一下AIR,因为balsamiq mockups依赖AIR的环境,所以要确保AIR环境是最新的,如下图所示,一般打开软件的时候会自动提示更新PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 2

    接下来打开balsamiq mockups软件,我们会看到如下图所示的界面,设计原型图的时候直接从原型组件里面拖拽即可PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 3

    大家在选择原型组件的时候可以根据组件顶部的分类进行筛选,如下图所示PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 4

    然后我们拖动几个组件到画布上,你会发现很简单的几步就能绘制出一个软件的基本界面,如下图所示PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 5

    如果你想更改某一个组件的属性,比如更改左侧菜单的选中状态,只需要选中组件,在右侧属性界面修改即可,如下图所示PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 5该信息未经许可获取自百度经验
  • 6

    最后设计完了原型图一定要保存文件,balsamiq mockups设计的原型文件的后缀名统一都是bmpr,如下图所示PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 7

    另外很多的公司要求将设计好的原型图直接导出图片,在balsamiq mockups中只需要点击Project菜单下面的Export选项即可,如下图所示PBa办公区 - 实用经验教程分享!

    如何用balsamiq mockups制作软件的界面原型?PBa办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!PBa办公区 - 实用经验教程分享!


    标签: 操作系统界面原型

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码