如何制作界面图
在实际开发中,我们常常会用很多工具,绘制界面图。用于描述我们的产品的某个功能对应的界面,将来会是什么样子。
可以使用的工具很多(visio、smartdraw等),也有用excel画框图,来标明程序的各个区域的。其实使用gui design studio,可以很容易的
话界面图。不仅轻松,而且十分的真实,既获得一个很好的效果,也能减少沟通上的一些不便。不仅可以向非开发人员展示,也可以向开发人员展示
你的设计。
1、新建设计
打开gui design studio,其默认会打开welcome工程。由于我们只是做一个界面效果图,所以不会用到工程那一块的功能。我们就直接使用File菜单下的new菜单项(CTRL+N)新建一个设计。
2、添加界面控件
右边的面板叫设计器面板,它由多个页签构成。分别对应的功能是:工程面板、元素面板、图标面板、注释面板、故事板、备注面板。而我们要用的是第二个面板“元素面板”。在这个面板上分为上下两部分,上部分是一个分类列表,下部分为各个分类下的元素。当你选择一个分类后,下面的面板就会显示该分类的元素。
要将元素添加到设计文档中,有两种方法。1)用鼠标双击要加入的元素 2)用鼠标单选要加入的元素,不要放鼠标左键,将对应的元素拖拉到文档中。
整个设计文档中间有一个红色线条围成的矩形,这个区域代表屏幕区域。在这个区域里的元素,在模拟器运行中将显示在屏幕中,对于不在这个区域的元素将不会显示。那么其他区域到底放什么呢,主要是放置在作为事件等动作,触发后被切换进入屏幕区的元素。
我们拖拉一个窗体作为整个设计的开始,你会发现这个窗体边缘有淡淡的绿色。这个绿色表示是整个设计的主元素,默认的情况studio认为第一个就是主元素。当然你也可以使用F10或使用右键菜单来指明主元素(此时淡绿色会变为深绿色)。主元素是模拟器作为显示的起始元素,也是当该设计作为其他设计文档的组件时候,展现的起始元素。如下图所示:
好了我们模拟一个制作一个登录界面。
双击拖出的主窗体,则会弹出属性编辑器(所有的设计元素,双击后都会弹出属性窗体,当然你也可以选择点右键菜单来完成该工作),我们输入“xxxx协同办公系统”,其它属性不用修改。依此类推,我们放入标签和文本输入窗,来完成用户名和密码。最后加入一个按钮,将它的文本改成登录。效果如下:
3、添加图标
登录按钮看上去比较平淡,一般的程序在按钮旁都有图标的。所以我们也想加入图标。这里我们直接使用studio自带的图标。我们选择设计面板的第三个页签(Icons),这个页签主要是上中下三部分构成,上部分是分类列表,中间是过滤条件(可以通过文件大小和颜色深度来过滤),下部分则是图标列表。我们选择toolbar类别在里面拖一个人物图标出来。
在图标列表上方有个工具条
分别是“新建图标、编辑图标、刷新列表、和删除图标”。也就是说我们在这里可以维护这个图标库,可以通过studio提供的工具,自己来加入图标和修改现有的图标。
4、重用已有程序的界面元素
其实我们很多的设计都不是白手起家,一般的情况都是修改原有的界面或基于原有的界面做改进。那么从新使用studio,一个一个元素的拖拉和摆放还原原先的界面的话,工作量是惊人的,细节调整工是巨大的。有没有什么好的方法重用原有的界面呢?
答案是有!最好的方式就是截图。在这里有三种方法使用屏幕截图,第一种:使用截图软件先将图截好,然后通过design菜单下的add Bitmap菜单命令,完成图片的插入。第二种方法:将截后的图片放在工程目录下,然后直接拖动出来。第三种:现截现用,就是截完图后,使用工程面板下的paste img from clipboard命令,存放在工程目录下,然后拖动到设计中。
我这里演示的是拷贝的左边背景图,其它界面是类似的,只要先前规划好界面大小即可。
4、导出图片
当我们的界面设计好后,要放入设计文档中,此时我们可以将我们先前制作的gui文档,导出成图片,然后就可以插入到设计文档中了。
打开设计好的gui文档,选择File下的Export菜单项。
在弹出来的导出窗体,选择导出路径及文件名。studio支持导出的格式有:BMP、GIF、JPG、PNG、EMF这些在制作文档方面是够用了。
总结
到此我们就利用gui design studio完成了界面图的制作,做界面效果图基本上不用总是麻烦美工了,而且也是十分的快速和具有比较真实的效果。
这些也只是利用到了 gui design studio的一些皮毛功能。
- 大小: 169.8 KB
- 大小: 44.2 KB
- 大小: 63.1 KB
- 大小: 44.4 KB
- 大小: 3.5 KB
- 大小: 51.4 KB
- 大小: 58.8 KB
- 大小: 28.1 KB
- 大小: 30.6 KB
- 大小: 178.9 KB
- 大小: 138.2 KB
- 大小: 62 KB
分享到:
相关推荐
GUI Design Studio允许您创建个性化的设计文档。本文将介绍原型设计工具GUI Design Studio如何快速创建一个项目
GUI DesignStudio 是一个给应用软件设计图形用户界面的专业工具,它可在画基于web形态的原型时,可以用 Axure RP、 Balsamiq Mockups很方便的画出来,但要是对象是客户端软件的时候,Axure却不是首选。 以快速的把...
GUI DesignStudio 是一个给应用软件设计图形用户界面的专业工具,它可在画基于web形态的原型时,可以用Axure RP、Balsamiq Mockups很方便的画出来,但要是对象是客户端软件的时候,Axure却不是首选。 以快速的把思路...
GUI Design Studio是一个给应用软件设计图形用户界面(GUIs)的专业工具。 它是一个不需要软件开发和编码的完整的设计工具。屏幕上的一切都通过图形方式创建,你可以设计整个应用程序或单个窗体,对话框和组件。并...
GUI design studio一个不错的原型化工具,可是其帮助做得太简单,帮助中的例子也过于简单,本资源是用GUI design studio做的一个较复杂的例子,用到该软件很多高级功能,相信对您学习使用该软件有更多帮助
gui design studio 4.5.151 含序列号,原型设计工具,希望对你有帮助
GUI design studio一个非常棒的原型化工具,可以在开发前明确开发结果,提升开发效率,本资源是用GUI design studio做的一个简单的入门的例子
GUIDesignStudio v4.0是一款图形用户界面设计工具,您能用它在不需要编写任何代码或脚本的情况下快速地创建演示原型。使用标准元素绘制个人化的屏幕、窗口以及控件;将它们整合以展示操作工作流然后运行模拟程序测试...
GUI Design Studio Pro是一款Windows下强大的gui设计软件,用户可以在不用编程和书写脚本的情况下快速创建原型。软件集成了拖放式的用户界面设计及原型设计工具,可以使产品构思文档化,创建各种原型,为开发者定义...
一个原型工具 GUI Design Studio ,它的主要特点就是操作简单,不需要开发人员帮助,通过半个小时的学习后你将可以自己开始做原型了。《原型工具GUI Design Studio》对这个工具的使用进行可简单介绍
一个非常好用的界面原型制作工具,做出来的效果和MFC的基本一致,不涉及代码,经过拖拽就可以使用,还以编译运行,除了具体的功能,界面的操作都可以响应。
GUI Design Studio是一个相当出色的软件原型设计工具。这是它的中文使用手册,详细介绍了该软件的使用方法。
GUIDesignStudio_R092_Setup.exe 软件工程原型开发工具
自己做的 不会用GUI的可以联系我交流~
GUI Design Studio Professional 4.x 非常不错的软件界面原型制作工具 It's free!
界面模型设计中很实用的一个工具GUI Design Studio,可以让界面示意图实现基本的交互,便于演示、交流。推荐需求、软件界面设计开发等界面原型相关人员使用。
无须安装,直接解压原文件后,点击GUIDesignStudio.exe执行文件即可正常使用。 注意事项:win7系统下,点击上述执行文件可能会出现某英文内容提示框,无需理睬,点击确定按键后即刻弹出主界面,并且可正常使用。