Caretta GUI Design Studio是一款Windows下的GUI设计工具,在不用编程和书写脚本的情况下快速创建原型。他可以使产品构思文档化,创建各种原型,为开发者定义规范等等。可以生成漂亮的页面跳转模拟页面,极为方便演示。
gui design studio版面介绍
1、工程面板
使用工程面板可以访问工程所有设计文档和图片文件。在这里你可以快速做如下事情:
(1)创建新的工程目录来组织文件。
(2)创建新的设计文档。
(3)复制已有的设计文档。
(4)从剪贴板上粘贴图片生成图片文件。
(5)加入其它工程和文件夹的链接,以访问它们的所有设计文档和图片文件。特别适用于使 用库工程的公共组件或使用存在别处图片的情况。
(6)当你选择了列表中的工程或文件夹时候,其对应的文件树将出现在下方。
(7)双击设计文件打开它,或者拖拽它将其添加到打开的设计文档中。
(8)使用鼠标右键拖拽添加组件缩略图。
(9)双击或拖拽图片文件,将其添加到打开的设计文档中。

2、元素面板
元素面板提供所有可以用于创建应用程序GUI的窗体和控件。元素被分成若干类别。当从列表中选择某一类别时候,该类别的元素将出现在下面的窗口中。每个元素都是十分典型的,并且为了方便使用,一些类别中包含了同一个元素的不同变形形式。在这里你可以快速做如下事情:
(1)双击或拖拽元素,可以将元素添加到打开的设计文档中。
(2)在设计文档中,双击元素编辑它的属性。

3、图标面板
使用图标面板,可以访问公共的、主工程中的、以及其它在通过工程面板链接添加的工程或目录中的图标。公共图标按类别存放着,可以创建新的类别目录来存放新的图标。
当从列表中选择某一类别时,该类别的图标将出现在下面的窗口中,可以通过大小、颜色深度来过滤这些图标。此外,还可以通过外部编辑器创建新的图标或编辑已经存在的图标。
4、注释面板
5、故事板面板
故事板面板提供用于构建设计文档中控制流程的元素来实现一个模拟原型。故事板元素通常显示在其它设计元素的上方。
6、备注面板
备注面板提供记录关联设计文档和它上面的元素的笔记摘要,可用于提供弹出注释和生成详细说明规格文档。和其它面板不一样的是,备注面板的内容会随着当前活动的设计文档而变化。
主要特色:
1、自带流程控制和命令促发判断。
2、多达120余种可用的内置设计元素,使用标准的Windows控件,Web元素以及其他的泛型元素创建窗体。
3、以不同的视图风格查看设计,允许您无需修改设计即可改变演示效果。
4、用法的超链接,直接以建立元素与元素之间的关联的方式来自动化的创建动作流程。
5、在不需要编写任何代码或脚本的情况下,使用标准元素绘制个性化的屏幕、窗口及控件,快速创建演示原型,并将它们整合展示操作工作流程然后运行模拟程序以测试设计。
6、提供的了大部分C/S、B/S组件的示意图,可组合使用。
7、精确的图标、窗体定位,可以具体到每一个Px
8、提供丰富的配色方案,在菜单参数选择里面选择颜色配置,然后所有的界面都可以一起换装。
9、支持模拟器模拟界面效果,同时也可以支持鼠标的点击,及屏幕的跳转。
10、实现多工程间互用串联设计以创建动态原型。
gui design studio使用教程
1、打开GUI Design Studio,图标如图,像一个blingbling的红宝石。
2、在菜单栏的“File”中找到“New Project”,点击后弹出一个对话框,如图
填写完后,单击“OK”,即创建了一个新的项目。
3、下面我们创建一个简单的窗体原型,单击如图的图标
,会弹出一个对话框来填写gui文件的名称,我们起名为“mainForm”,
,点击√之后,就会创建一个mainForm.gui的文件。
4、软件右侧有一溜儿的工具栏,下面选择“Elements”——>“Windows and Dialogs”,选择一个窗体样式。这里我们选择的是第二种。
将选中的窗体样式拖进显示屏幕处,就会有一个窗体出现啦,双击这个窗体就会弹出它的属性框,我们可以修改它的字体,窗体名称等基本属性。【这个软件中,双击控件都会弹出相应的属性框】
选择“Elements”——>“Toolbars and Menus”,可以选择工具条或者菜单栏,下面我们给这个窗体加上菜单。
一级菜单有时满足不了我们的需求需要多级菜单如
,那怎么办呢?
首先要接着从“Toolbars and Menus”里选择第二种样式的菜单,拖拽到白色区域内,然后双击修改显示文本。
然后重点就来了,要给这个二级菜单和一级菜单之间绑定关系。如图
在工具栏里找到红色方框内的图标,单击之后,在要绑定的控件划线,将二者连在一起,就完成了绑定。【注意箭头指向】
在工具栏点击
运行时,点击“文件”,就会出现二级菜单了。
5、窗体间的绑定。
比如点击打开文件时,需要弹出一个选择文件路径的对话框,这个过程应该怎么办呢?
我们再新建一个gui文件,用来做弹出的对话框。如图
重点来啦,怎么在两个文件间建立联系呢?
切换到“mainForm”文件,然后在菜单项“Design”中选择
会弹出一个文件选择对话框,接下来找到这个项目的存放位置,找到要弹出的那个对话框文件。
点击“打开”。我们做的第二个窗体就会作为一个整体,添加到“mainForm”页面中。【特别提示:不能将“打开.gui”整体复制到“mainForm”中,复制过去的话,“打开”窗体的绑定关系过不去,比如点击“取消”按钮的话,窗体不会关闭】
#FormatImgID_13#
在二级菜单“打开文件”和“打开”窗体之间绑定联系,这样我们在运行时就能看到完整的操作了。【下面的图片请自动脑补成动图,谢谢】


