gui design studio教程

《gui design studio教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、如何制作界面图1、新建设计2、添加界面控件双击拖出的主窗体，则会弹出属性编辑器（所有的设计元素，双击后都会弹出属性窗体，当然你也可以选择点右键菜单来完成该工作），我们输入“xxxx协同办公系统”，其它属性不用修改。依此类推，我们放入标签和文本输入窗，来完成用户名和密码。最后加入一个按钮，将它的文本改成登录。效果如下：  3、添加图标登录按钮看上去比较平淡，一般的程序在按钮旁都有图标的。所以我们也想加入图标。这里我们直接使用studio自带的图标。我们选择设计面板的第三个页签(Icons),这个页签主要是上中下三部分构成，上部分是分类列表，中间是过滤条件（

2、可以通过文件大小和颜色深度来过滤），下部分则是图标列表。我们选择toolbar类别在里面拖一个人物图标出来。在图标列表上方有个工具条 分别是“新建图标、编辑图标、刷新列表、和删除图标”。也就是说我们在这里可以维护这个图标库，可以通过studio提供的工具，自己来加入图标和修改现有的图标。4、重用已有程序的界面元素其实我们很多的设计都不是白手起家，一般的情况都是修改原有的界面或基于原有的界面做改进。那么从新使用studio，一个一个元素的拖拉和摆放还原原先的界面的话，工作量是惊人的，细节调整工是巨大的。有没有什么好的方法重用原有的界面呢？答案是有！最好的方

3、式就是截图。在这里有三种方法使用屏幕截图，第一种：使用截图软件先将图截好，然后通过design菜单下的addBitmap菜单命令，完成图片的插入。第二种方法：将截后的图片放在工程目录下，然后直接拖动出来。第三种：现截现用，就是截完图后，使用工程面板下的pasteimgfromclipboard命令，存放在工程目录下，然后拖动到设计中。  我这里演示的是拷贝的左边背景图，其它界面是类似的，只要先前规划好界面大小即可。4、导出图片当我们的界面设计好后，要放入设计文档中，此时我们可以将我们先前制作的gui文档，导出成图片，然后就可以插入到设计文档中了。 打开设

4、计好的gui文档，选择File下的Export菜单项。  在弹出来的导出窗体，选择导出路径及文件名。studio支持导出的格式有：BMP、GIF、JPG、PNG、EMF这些在制作文档方面是够用了。 总结到此我们就利用guidesignstudio完成了界面图的制作，做界面效果图基本上不用总是麻烦美工了，而且也是十分的快速和具有比较真实的效果。这些也只是利用到了guidesignstudio的一些皮毛功能。一般人做界面原型设计的时候，可能会存在下面几种设计方式：纸质：很多人比较推崇纸质原型设计，就是用笔和纸进行产品原型描绘（白板也常常起到类似的作用），不过

5、我认为这只是产品经理进行原型构思阶段使用的最佳方式，不过这才是原型设计的第一步，构思和框架基本确定之后，就需要将这个"纸上谈兵"的框架转移到更形象直观的电子文档上，便于后续的研讨、设计、开发和备案。WORD：这是原型设计时常用的一种方式，在WORD文档建立一块画布，用文本框、图片、控件等等组合起来形成一个原型设计方案。WORD文档门槛低，使用方便，功能效果丰富，如果一个熟练者甚至可以达到一个很好的类似实际页面的表现力，我的同事做出来的原型连设计师都夸奖它好比PS设计图一般(不过原型设计不讲求美观，不推荐花费过多精力去修饰)。但是WORD文档的WEB控件不

6、是太好用，交互性也较弱。VISIO：这也是常用的原型设计工具，它的操作比WORD更加方便快捷，可以进行快速原型设计，但表现力弱一些，毕竟它不是专门的网页原型设计工具。Photoshop：也有人使用，不过用PS进行原型设计，费时费力，改动很不方便，容易降低效率，PM还是不要抢了UI设计师的饭碗。Dreamweaver：这是网页设计工具，但是对于功能复杂并且交互性很强的产品，可以通过DW去设计简单的HTML交互稿，这样更有说服力。如果是设计原型，采用专门的原型设计工具，应该事半功倍的，当然原型设计工具，好用的应该还有不少，除了GUIDesignStudio和

7、MockupsForDesktop外，AxureRp好像也是一个不错的原型设计工具。在此放上一个AxureRp的软件截图，感兴趣的可以也去了解一下。下面我们先看看这两款软件的介绍内容：GUIDesignStudio是一个给应用软件设计图形用户界面（GUIs）的专业工具。它是一个不需要软件开发和编码的完整的设计工具。屏幕上的一切都通过图形方式创建，你可以设计整个应用程序或单个窗体，对话框和组件。并组合它们来创建更多的设计，和典型界面。我们也可以将它们链接在一起做为一个故事板，然后通过模拟器来运行，形成交互原型。GUIDesignStudio将会支持所有基于

8、微软Windows平台的软件环境。这个意味着，你可以先自由的设计，设计完后再选择