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

1、1）用鼠标双击要加入的元素 2）用鼠标单选要加入的元素，不要放鼠标左键，将对应的元素拖拉到文档中。整个设计文档中间有一个红色线条围成的矩形，这个区域代表屏幕区域。在这个区域里的元素，在模拟器运行中将显示在屏幕中，对于不在这个区域的元素将 不会显示。那么其他区域到底放什么呢，主要是放置在作为事件等动作，触发后被切换进入屏幕区的元素。我们拖拉一个窗体作为整个设计的开始，你会发现这个窗体边缘有淡淡的绿色。这个绿色表示是整个设计的主元素，默认的情况studio认为第一个就是 主元素。当然你也可以使用F10或使用右键菜单来指明主元素（此时淡绿色会变为深绿色）。主元素是模拟器作为显示的起始元素，也是当该设

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

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

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

5、弹出来的导出窗体，选择导出路径及文件名。studio支持导出的格式有：BMP、GIF、JPG、PNG、EMF这些在制作文档方面是够用了。总结到此我们就利用gui design studio完成了界面图的制作，做界面效果图基本上不用总是麻烦美工了，而且也是十分的快速和具有比较真实的效果。这些也只是利用到了 gui design studio的一些皮毛功能。GUIDESIGNSTUDIO3中文帮助（1）-欢迎使用 GUI Design Studio 3.0 2009-06-28 12:02:44标签：GUI Design Studio 中文 欢迎推送到技术圈 Design设计 Specify详细规

6、格 Prototype原型 Demonstrate演示 Document文档GUI Design Studio是一个给应用软件设计图形用户 界面（GUIs）的专业工具。它是一个不需要软件开发和编码的完整的设计工具。屏幕上的一切都通过图形方式创建，你可以设计整个应用程序或单个窗体，对话 框和组件。并组合它们来创建更多的设计，和典型界面。我们也可以将它们链接在一起做为一个故事板，然后通过模拟器来运行，形成交互原型。GUI Design Studio 将会支持所有基于微软 Windows 平台的软件环境。这个意味着，你可以先自由的设计，设计完后再选择实现工具。 按照这种方法，你可以快速聚焦到应用程序

7、设计中，而不会被实现细节干扰。. GUI Design Studio 可以被用于，任何你需要画程序界面，或着想展示这些界面是如何流转和配合的时候，例如： 设计整个应用程序文档化产品创意创建项目建议需求捕捉创建模拟界面给开发者的产品详细规格说明注解现有产品的可用性给现有产品提供建议构建用户手册时候的临时屏幕截图+ 更多其它用途我们可以创建如下的报告给用户、主管甚至是自己：:验证设计展示候选方案评估不同的使用场景gui design studio 3 中文帮助（2）-获取帮助 如果你在使用GUI Design Studio时有困难或想需要更多信息。下面有几条可以获得帮助的途径 ：?Context

8、Help上下文帮助Online Reference联机参考Online Tutorials联机教学Web Site网站Customer Support客户支持上下文帮助也被称为“这是什么”的帮助。实际上用户 界面都被关联了帮助信息，这些信息告诉你它是什么或它能干什么。它们出现在如下类似的弹出窗体中。在联机参考中，主题和与其相关的主题或页面都链接在一起。上下文帮助 可以根据你需要帮助的地方，使用多种方式访问：1.在对话框里，可 以被如下访问:在你需要帮助的控件上使用右键（这项在有右键菜单的编辑控件上无效）。在控件获得输入焦点的时候，按F1键。点击标题栏上的帮助按钮，进入“这是什么”的模式，然后点

9、击控件。2. 在标题栏上没有“这是什么”帮助按钮的属性编辑对话框：在你需要帮助的控件上使用右键（同样这项在有右键菜单的编辑控件上无效）。点击标题栏上的帮助按钮，获取一般帮助信息。3. 用户界面的其他地方:在窗体或菜单上时候，当控件获得输入焦点的时候，按F1键。按 Shift+F1 进入“这是什么”的模式，然后点击控件。使用帮助菜单中的 Whats This?命令，进入“这是什么”的模式，然后点击控件。点击工具条上的 按钮，进入“这是什么”的模式，然后点击控件。联机参考这就是你现在阅读的帮助文件。这是获得在使用软件时候如何操作详细内容概览的好途径。帮助菜单包含了文件索引和内容的链 接。如果你在内

10、容中找不到你要的，可以尝试使用索引。如果你任然找不到你想要的，可以试着使用关键字查询。联机教学如果你是使用GUI Design studio的新手，我们强烈推荐你使用帮助菜单中的Quick Start Tutorial.这个教学覆盖了很多基本内容，能让你在简短的时间内熟悉软件的很多方面。更多的教学将会被制作并可以到 Caretta Software网站 下载.这些将覆盖在使用软件进行GUI设计的一些特定方面。网站如果你尝试使用上下文帮助、翻遍联机参考、学习了在线教学，仍然无法找到你想要 的信息，你可能会在Caretta Software网站 上有所收获。.客户支持当以上所有方法 都无效的时候，

11、请使用邮件联系我们的客户支持部门（support） 获得进一步的帮助 。gui design studio3 中文帮助（3）-用户界面 （上） 2009-07-12 22:13:07gui design 用户界面 中文推送到技术圈 用户界面下面就是 GUI Design Studio 工作区。向下滚动滚动条看详细的说明。多文档你 可以在同一时间里打开和编辑多个设计文档，并可以通过如下方式，轻松的切换：使用工具条下的文档标签；使用Ctrl+Tab激活队列中的下一个文 档；Shift+Ctrl+Tab激活队列中的上一个文档。所有打开的文档也可以通过 window菜单来选择和激活。设计工具条 设计工

12、具条可以被停放在主程序窗口的左边或右边，也可以通过view菜单来设置成为浮动。每一个面板提供了访问制作设计的不同元素，具体如下：Project工程用于访问工程中的所有设计文档和图片文件.Elements元素分门别类的摆放着GUI设计中的各个组成部分，其中包括窗体和控件。Icons图标用 于访问，可以被用于设计中的工程图标和其它类别的公用图标。Annotations注 释使用浮动文本框、高亮的圈和其它标记注释你的设计中的各个部分。t boxes, highlight rings and other markers.Storyboard故事板通过在设计中构建流程控制，来实现模拟原型。Notes备注

13、用 于记录关联到设计文档的备注。gui design studio3 中文帮助（4）-用户界面 （中）-工具面板 2009-07-19 10:42:54gui 用户界面 design 中文 面板推送到技术圈 工具面板工程面板设计工具条上的工程面板，可以访问工程所有设计文档和图片文件。在 这里你可以快速做如下事情：创建新的工程目录来组织你的文件；创建新的设计文档；复制已有的设计和从剪贴板上导入图片。你 也可以加入其它工程和文件夹得链接，来获得访问它们的所有设计文档和图片文件。这个功能，在你使用库工程的公共组件或使用存在别处的图片时候非常好用。当你选择了列表中的工程或文件夹时候，其对应的文件树将出

14、现在下方。 双击设计文件打开它，或者拖拉它作为组件到另外打开的设 计中。 使用鼠标右键进行拖拉来加入组件的缩略图。 双击或拖拉图片 文件，来将它们加入到打开的设计中。元素面板设计工具条上的元素面板，提供了所有可以用于创建应用程序GUI的窗体和控件。元素被分成了好几个类别。当你从列表中选择一个类别时候，该类别的元素将出现在下面的调色板窗口中。每 个元素都是十分典型的，并且为了方便使用，一些类别中包含了同一个元素的不同变形形式。当你将一个元素放在你的设计上 时候，你能改变它的属性，如文本、元素的外观样式。 双击或拖拽出元素，可以讲元素加入到打开的设计文档中。 在 设计文档中，双击一个元素来编辑它的

15、属性。图标面板设计工具条的图标面板，提供了访问公共的和在主工程中，以及其它 在通过工程面板链接近来的工程或目录中的图标。 .公共图标按类别存放着。你可以创建新的类别目录来存放新的图标。当你从列表中选择了类别时，该类别的图标将出现在下面的窗体中。你可以通过大小、颜色深度来过滤这些图标。从这个面板中，你也可以通过外部编辑器，创建新的图标，或编辑存在的图标。 双击或拖放图标来加到打开的设计文档中。 使用命令按钮，来通过外部编辑器，创建新的图标和编辑已有的图标。注释面板设计工具条的注释面板提供了一些特殊的元素，如：浮动文本框，高 亮的环合标记 。注释元素通常出现在其他设计元素的上面。双击或拖放注释元素

16、，加入到打开的设计文档中。通过双击在设计文档中的注释元素，编辑它的属性。 使用 （工具条上的“建立连接”命令）绘制连接注释和其它元素的连接线。 使用菜单 View | Annotations，来隐藏和显示，当前工作的设计文档中的注释。故事板面板设计工具条上的故事板面板，提供了一些用于构建设计文档中的控制 流程的元素，来实现一个模拟原型。故事板元素通常显示在其它设计元素的上方。 双击或拖放故事板元素，来加入到打 开的设计文档中。 双击设计文档中的一个故事板元素，去编辑它的属性（如果有的话）。（工具条上的“建立连接”命令）将元素连接在一起，来构建应用程序被设计成的控制流程。设计工具条上的备注面板，提供记录关联设计文档和它上面的元素的 笔记摘要。这个可用于提供弹出注释，和生成详细说明规格文档。和其它面板不一 样的是，备注面板的内容会随着当前活动的设计文档而变化。 在上面的编辑器中，为当前活动设计文档，输入格式化的摘要，如果需要可以给设计提供一个 ID。 在下面的编辑器中，为选择的元素输入格式化的摘要，并可以根据需要设置一个ID和Label（标签）。 如果必要，通过右键点击那些有红色下换线的文字，来纠正拼写 错误。 使用拼写检查按钮来纠正文档中的所有拼写错误。