使用GUI Design Studio进行原型设计Word文件下载.docx

使用GUI Design Studio进行原型设计Word文件下载.docx

《使用GUI Design Studio进行原型设计Word文件下载.docx》由会员分享，可在线阅读，更多相关《使用GUI Design Studio进行原型设计Word文件下载.docx（26页珍藏版）》请在冰豆网上搜索。

1）用鼠标双击要加入的元素2）用鼠标单选要加入的元素，不要放鼠标左键，将对应的元素拖拉到文档中。

整个设计文档中间有一个红色线条围成的矩形，这个区域代表屏幕区域。

在这个区域里的元素，在模拟器运行中将显示在屏幕中，对于不在这个区域的元素将不会显示。

那么其他区域到底放什么呢，主要是放置在作为事件等动作，触发后被切换进入屏幕区的元素。

我们拖拉一个窗体作为整个设计的开始，你会发现这个窗体边缘有淡淡的绿色。

这个绿色表示是整个设计的主元素，默认的情况studio认为第一个就是主元素。

当然你也可以使用F10或使用右键菜单来指明主元素（此时淡绿色会变为深绿色）。

主元素是模拟器作为显示的起始元素，也是当该设计作为其他设计文档的组件时候，展现的起始元素。

如下图所示：

好了我们模拟一个制作一个登录界面。

双击拖出的主窗体，则会弹出属性编辑器（所有的设计元素，双击后都会弹出属性窗体，当然你也可以选择点右键菜单来完成该工作），我们输入“xxxx协同办公系统”，其它属性不用修改。

依此类推，我们放入标签和文本输入窗，来完成用户名和密码。

最后加入一个按钮，将它的文本改成登录。

效果如下：

3、添加图标

登录按钮看上去比较平淡，一般的程序在按钮旁都有图标的。

所以我们也想加入图标。

这里我们直接使用studio自带的图标。

我们选择设计面板的第三个页签（Icons）,这个页签主要是上中下三部分构成，上部分是分类列表，中间是过滤条件（可以通过文件大小和颜色深度来过滤），下部分则是图标列表。

我们选择toolbar类别在里面拖一个人物图标出来。

在图标列表上方有个工具条

分别是“新建图标、编辑图标、刷新列表、和删除图标”。

也就是说我们在这里可以维护这个图标库，可以通过studio提供的工具，自己来加入图标和修改现有的图标。

4、重用已有程序的界面元素

其实我们很多的设计都不是白手起家，一般的情况都是修改原有的界面或基于原有的界面做改进。

那么从新使用studio，一个一个元素的拖拉和摆放还原原先的界面的话，工作量是惊人的，细节调整工是巨大的。

有没有什么好的方法重用原有的界面呢？

答案是有！

最好的方式就是截图。

在这里有三种方法使用屏幕截图，第一种：

使用截图软件先将图截好，然后通过design菜单下的addBitmap菜单命令，完成图片的插入。

第二种方法：

将截后的图片放在工程目录下，然后直接拖动出来。

第三种：

现截现用，就是截完图后，使用工程面板下的pasteimgfromclipboard命令，存放在工程目录下，然后拖动到设计中。

我这里演示的是拷贝的左边背景图，其它界面是类似的，只要先前规划好界面大小即可。

4、导出图片

当我们的界面设计好后，要放入设计文档中，此时我们可以将我们先前制作的gui文档，导出成图片，然后就可以插入到设计文档中了。

打开设计好的gui文档，选择File下的Export菜单项。

在弹出来的导出窗体，选择导出路径及文件名。

studio支持导出的格式有：

BMP、GIF、JPG、PNG、EMF这些在制作文档方面是够用了。

总结

到此我们就利用guidesignstudio完成了界面图的制作，做界面效果图基本上不用总是麻烦美工了，而且也是十分的快速和具有比较真实的效果。

这些也只是利用到了guidesignstudio的一些皮毛功能。

GUIDESIGNSTUDIO3中文帮助

（1）-欢迎使用GUIDesignStudio3.0

2009-06-2812:

02:

44

　标签：

GUIDesignStudio中文欢迎　　　[推送到技术圈]

Design设计

Specify详细规格

Prototype原型

Demonstrate演示

Document文档

GUIDesignStudio是一个给应用软件设计图形用户界面（GUIs）的专业工具。

它是一个不需要软件开发和编码的完整的设计工具。

屏幕上的一切都通过图形方式创建，你可以设计整个应用程序或单个窗体，对话框和组件。

并组合它们来创建更多的设计，和典型界面。

我们也可以将它们链接在一起做为一个故事板，然后通过模拟器来运行，形成交互原型。

GUIDesignStudio将会支持所有基于微软Windows平台的软件环境。

这个意味着，你可以先自由的设计，设计完后再选择实现工具。

按照这种方法，你可以快速聚焦到应用程序设计中，而不会被实现细节干扰。

.

GUIDesignStudio可以被用于，任何你需要画程序界面，或着想展示这些界面是如何流转和配合的时候，例如：

∙·

设计整个应用程序

文档化产品创意

创建项目建议

需求捕捉

创建模拟界面

给开发者的产品详细规格说明

注解现有产品的可用性

给现有产品提供建议

构建用户手册时候的临时屏幕截图

+更多其它用途

我们可以创建如下的报告给用户、主管甚至是自己：

:

验证设计

展示候选方案

评估不同的使用场景

guidesignstudio3中文帮助

（2）-获取帮助

如果你在使用GUIDesignStudio时有困难或想需要更多信息。

下面有几条可以获得帮助的途径：

?

ContextHelp上下文帮助

OnlineReference联机参考

OnlineTutorials联机教学

WebSite网站

CustomerSupport客户支持

上下文帮助

也被称为“这是什么”的帮助。

实际上用户界面都被关联了帮助信息，这些信息告诉你它是什么或它能干什么。

它们出现在如下类似的弹出窗体中。

在联机参考中，主题和与其相关的主题或页面都链接在一起。

上下文帮助可以根据你需要帮助的地方，使用多种方式访问：

1.在对话框里，可以被如下访问:

在你需要帮助的控件上使用右键（这项在有右键菜单的编辑控件上无效）。

在控件获得输入焦点的时候，按F1键。

点击标题栏上的帮助按钮，进入“这是什么”的模式，然后点击控件。

2.在标题栏上没有“这是什么”帮助按钮的属性编辑对话框：

在你需要帮助的控件上使用右键（同样这项在有右键菜单的编辑控件上无效）。

点击标题栏上的帮助按钮，获取一般帮助信息。

3.用户界面的其他地方:

在窗体或菜单上时候，当控件获得输入焦点的时候，按F1键。

按Shift+F1进入“这是什么”的模式，然后点击控件。

使用帮助菜单中的"

What'

sThis?

"

命令，进入“这是什么”的模式，然后点击控件。

点击工具条上的"

按钮，进入“这是什么”的模式，然后点击控件。

联机参考

这就是你现在阅读的帮助文件。

这是获得在使用软件时候如何操作详细内容概览的好途径。

帮助菜单包含了文件索引和内容的链接。

如果你在内容中找不到你要的，可以尝试使用索引。

如果你任然找不到你想要的，可以试着使用关键字查询。

联机教学

如果你是使用GUIDesignstudio的新手，我们强烈推荐你使用帮助菜单中的"

QuickStartTutorial"

.这个教学覆盖了很多基本内容，能让你在简短的时间内熟悉软件的很多方面。

更多的教学将会被制作并可以到CarettaSoftware网站下载.这些将覆盖在使用软件进行GUI设计的一些特定方面。

网站

如果你尝试使用上下文帮助、翻遍联机参考、学习了在线教学，仍然无法找到你想要的信息，你可能会在CarettaSoftware网站上有所收获。

.

客户支持

当以上所有方法都无效的时候，请使用邮件联系我们的客户支持部门（support@）获得进一步的帮助。

guidesignstudio3中文帮助（3）-用户界面（上）

2009-07-1222:

13:

07

guidesign用户界面中文　　　[推送到技术圈]

用户界面

下面就是GUIDesignStudio工作区。

向下滚动滚动条看详细的说明。

多文档

你可以在同一时间里打开和编辑多个设计文档，并可以通过如下方式，轻松的切换：

使用工具条下的文档标签；

使用Ctrl+Tab激活队列中的下一个文档；

Shift+Ctrl+Tab激活队列中的上一个文档。

所有打开的文档也可以通过window菜单来选择和激活。

设计工具条

设计工具条可以被停放在主程序窗口的左边或右边，也可以通过view菜单来设置成为浮动。

每一个面板提供了访问制作设计的不同元素，具体如下：

Project工程

用于访问工程中的所有设计文档和图片文件.

Elements元素

分门别类的摆放着GUI设计中的各个组成部分，其中包括窗体和控件。

Icons图标

用于访问，可以被用于设计中的工程图标和其它类别的公用图标。

Annotations注释

使用浮动文本框、高亮的圈和其它标记注释你的设计中的各个部分。

tboxes,highlightringsandothermarkers.

Storyboard故事板

通过在设计中构建流程控制，来实现模拟原型。

Notes备注

用于记录关联到设计文档的备注。

guidesignstudio3中文帮助（4）-用户界面（中）-工具面板

2009-07-1910:

42:

54

gui用户界面design中文面板　　　[推送到技术圈]

工具面板

工程面板

设计工具条上的工程面板，可以访问工程所有设计文档和图片文件。

在这里你可以快速做如下事情：

创建新的工程目录来组织你的文件；

创建新的设计文档；

复制已有的设计和从剪贴板上导入图片。

你也可以加入其它工程和文件夹得链接，来获得访问它们的所有设计文档和图片文件。

这个功能，在你使用库工程的公共组件或使用存在别处的图片时候非常好用。

当你选择了列表中的工程或文件夹时候，其对应的文件树将出现在下方。

∙双击设计文件打开它，或者拖拉它作为组件到另外打开的设计中。

∙使用鼠标右键进行拖拉来加入组件的缩略图。

∙双击或拖拉图片文件，来将它们加入到打开的设计中。

元素面板

设计工具条上的元素面板，提供了所有可以用于创建应用程序GUI的窗体和控件。

元素被分成了好几个类别。

当你从列表中选择一个类别时候，该类别的元素将出现在下面的调色板窗口中。

每个元素都是十分典型的，并且为了方便使用，一些类别中包含了同一个元素的不同变形形式。

当你将一个元素放在你的设计上时候，你能改变它的属性，如文本、元素的外观样式。

∙双击或拖拽出元素，可以讲元素加入到打开的设计文档中。

∙在设计文档中，双击一个元素来编辑它的属性。

图标面板

设计工具条的图标面板，提供了访问公共的和在主工程中，以及其它在通过工程面板链接近来的工程或目录中的图标。

.

公共图标按类别存放着。

你可以创建新的类别目录来存放新的图标。

当你从列表中选择了类别时，该类别的图标将出现在下面的窗体中。

你可以通过大小、颜色深度来过滤这些图标。

从这个面板中，你也可以通过外部编辑器，创建新的图标，或编辑存在的图标。

∙双击或拖放图标来加到打开的设计文档中。

∙使用命令按钮，来通过外部编辑器，创建新的图标和编辑已有的图标。

注释面板

设计工具条的注释面板提供了一些特殊的元素，如：

浮动文本框，高亮的环合标记。

注释元素通常出现在其他设计元素的上面。

双击或拖放注释元素，加入到打开的设计文档中。

通过双击在设计文档中的注释元素，编辑它的属性。

∙使用

（工具条上的“建立连接”命令）绘制连接注释和其它元素的连接线。

∙使用菜单View|Annotations，来隐藏和显示，当前工作的设计文档中的注释。

故事板面板

设计工具条上的故事板面板，提供了一些用于构建设计文档中的控制流程的元素，来实现一个模拟原型。

故事板元素通常显示在其它设计元素的上方。

∙双击或拖放故事板元素，来加入到打开的设计文档中。

∙双击设计文档中的一个故事板元素，去编辑它的属性（如果有的话）。

（工具条上的“建立连接”命令）将元素连接在一起，来构建应用程序被设计成的控制流程。

设计工具条上的备注面板，提供记录关联设计文档和它上面的元素的笔记摘要。

这个可用于提供弹出注释，和生成详细说明规格文档。

和其它面板不一样的是，备注面板的内容会随着当前活动的设计文档而变化。

∙在上面的编辑器中，为当前活动设计文档，输入格式化的摘要，如果需要可以给设计提供一个ID。

∙在下面的编辑器中，为选择的元素输入格式化的摘要，并可以根据需要设置一个ID和Label（标签）。

∙如果必要，通过右键点击那些有红色下换线的文字，来纠正拼写错误。

∙使用拼写检查按钮来纠正文档中的所有拼写错误。