使用GUIDesignStudio进行原型设计

1、使用GUI Design Studio进行原型设计如何制作界面图在实际开发中，我们常常会用很多工具，绘制界面图。用于描述我们的产品的某个功能对应的界面，将来会是什么样子。可以使用的工具很多（visio、smartdraw等），也有用excel画框图，来标明程序的各个区域的。其实使用gui design studio，可以很容易的话界面图。不仅轻松，而且十分的真实，既获得一个很好的效果，也能减少沟通上的一些不便。不仅可以向非开发人员展示，也可以向开发人员展示你的设计。1、新建设计   打开gui design studio，其默认会打开welcome工程。由于我们只

2、是做一个界面效果图，所以不会用到工程那一块的功能。我们就直接使用File菜单下的new菜 单项（CTRL+N）新建一个设计。2、添加界面控件      右边的面板叫设计器面板，它由多个页签构成。分别对应的功能是：工程面板、元素面板、图标面板、注释面板、故事板、备注面板。而我们要用的是第二个 面板“元素面板”。在这个面板上分为上下两部分，上部分是一个分类列表，下部分为各个分类下的元素。当你选择一个分类后，下面的面板就会显示该分类的元 素。要将元素添加到设计文档中，有两种方法。1）用鼠标双击要加入的元素 2）用鼠标单选要加入的元素，不要放鼠标左键，

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

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

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

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

7、就可以插 入到设计文档中了。  打开设计好的gui文档，选择File下的Export菜单项。  在弹出来的导出窗体，选择导出路径及文件名。studio支持导出的格式有：BMP、GIF、JPG、PNG、EMF这些在制作文档方面是够用了。 总结到此我们就利用gui design studio完成了界面图的制作，做界面效果图基本上不用总是麻烦美工了，而且也是十分的快速和具有比较真实的效果。这些也只是利用到了 gui design studio的一些皮毛功能。GUIDESIGNSTUDIO3中文帮助(1)-欢迎使用 GUI Design Studio 3.0 2

8、009-06-28 12:02:44标签：GUI Design Studio 中文 欢迎推送到技术圈           Design设计 Specify详细规格 Prototype原型 Demonstrate演示 Document文档  GUI Design Studio是一个给应用软件设计图形用户 界面（GUIs）的专业工具。它是一个不需要软件开发和编码的完整的设计工具。屏幕上的一切都通过图形方式创建，你可以设计整个应用程序或单个窗体，对话 框和组件。并组合它们来创建更多的设计，和典型界面。我们也可以将它们链接

9、在一起做为一个故事板，然后通过模拟器来运行，形成交互原型。 GUI Design Studio 将会支持所有基于微软 Windows 平台的软件环境。这个意味着，你可以先自由的设计，设计完后再选择实现工具。 按照这种方法，你可以快速聚焦到应用程序设计中，而不会被实现细节干扰。. GUI Design Studio 可以被用于，任何你需要画程序界面，或着想展示这些界面是如何流转和配合的时候，例如： · ·设计整个应用程序· ·文档化产品创意· ·创建项目建议· ·需求捕捉· ·创建模拟界

10、面· ·给开发者的产品详细规格说明· ·注解现有产品的可用性· ·给现有产品提供建议· ·构建用户手册时候的临时屏幕截图· ·+ 更多其它用途我们可以创建如下的报告给用户、主管甚至是自己：: · ·验证设计· ·展示候选方案· ·评估不同的使用场景gui design studio 3 中文帮助（2）-获取帮助 如果你在使用GUI Design Studio时有困难或想需要更多信息。下面有几条可以获得帮助的途径 ：?Context He

11、lp上下文帮助?Online Reference联机参考?Online Tutorials联机教学?Web Site网站?Customer Support客户支持  上下文帮助 也被称为“这是什么”的帮助。实际上用户 界面都被关联了帮助信息，这些信息告诉你它是什么或它能干什么。它们出现在如下类似的弹出窗体中。在联机参考中，主题和与其相关的主题或页面都链接在一起。    上下文帮助 可以根据你需要帮助的地方，使用多种方式访问： 1.在对话框里，可 以被如下访问:?   在你需要帮助的控件上使用右键（这项在有

12、右键菜单的编辑控件上无效）。?在控件获得输入焦点的时候，按F1键。?点击标题栏上的帮助按钮，进入“这是什么”的模式，然后点击控件。 2. 在标题栏上没有“这是什么”帮助按钮的属性编辑对话框：?在你需要帮助的控件上使用右键（同样这项在有右键菜单的编辑控件上无效）。?在控件获得输入焦点的时候，按F1键。?点击标题栏上的帮助按钮，获取一般帮助信息。 3. 用户界面的其他地方:?在窗体或菜单上时候，当控件获得输入焦点的时候，按F1键。?按 Shift+F1 进入“这是什么”的模式，然后点击控件。?使用帮助菜单中的 "What's This?"命令，进入“

13、这是什么”的模式，然后点击控件。?点击工具条上的 "What's This?"按钮，进入“这是什么”的模式，然后点击控件。  联机参考 这就是你现在阅读的帮助文件。这是获得在使用软件时候如何操作详细内容概览的好途径。帮助菜单包含了文件索引和内容的链 接。如果你在内容中找不到你要的，可以尝试使用索引。如果你任然找不到你想要的，可以试着使用关键字查询。  联机教学 如果你是使用GUI Design studio的新手，我们强烈推荐你使用帮助菜单中的"Quick Start Tutorial"

14、.这个教学覆盖了很多基本内容，能让你在简短的时间内熟悉软件的很多方面。 更多的教学将会被制作并可以到 Caretta Software网站 下载.这些将覆盖在使用软件进行GUI设计的一些特定方面。  网站 如果你尝试使用上下文帮助、翻遍联机参考、学习了在线教学，仍然无法找到你想要 的信息，你可能会在Caretta Software网站 上有所收获。.  客户支持 当以上所有方法 都无效的时候，请使用邮件联系我们的客户支持部门（） 获得进一步的帮助 。gui design studio3 中文帮助（3）-用户界面 （上） 2009-07

15、-12 22:13:07标签：gui design 用户界面 中文推送到技术圈 用户界面下面就是 GUI Design Studio 工作区。向下滚动滚动条看详细的说明。 多文档你 可以在同一时间里打开和编辑多个设计文档，并可以通过如下方式，轻松的切换：使用工具条下的文档标签；使用Ctrl+Tab激活队列中的下一个文 档；Shift+Ctrl+Tab激活队列中的上一个文档。所有打开的文档也可以通过 window菜单来选择和激活。 设计工具条  设计工具条可以被停放在主程序窗口的左边或右边，也可以通过view菜单来设置成为浮动。每一个面板提供了访问制作设计的不同元素，具体如下

16、：Project工程用于访问工程中的所有设计文档和图片文件.Elements元素分门别类的摆放着GUI设计中的各个组成部分，其中包括窗体和控件。Icons图标用 于访问，可以被用于设计中的工程图标和其它类别的公用图标。.Annotations注 释使用浮动文本框、高亮的圈和其它标记注释你的设计中的各个部分。t boxes, highlight rings and other markers.Storyboard故事板通过在设计中构建流程控制，来实现模拟原型。.Notes备注用 于记录关联到设计文档的备注。.gui design studio3 中文帮助（4）-用户界面 （中）-工具面板 200

17、9-07-19 10:42:54标签：gui 用户界面 design 中文 面板推送到技术圈 工具面板工程面板设计工具条上的工程面板，可以访问工程所有设计文档和图片文件。在 这里你可以快速做如下事情：创建新的工程目录来组织你的文件；创建新的设计文档；复制已有的设计和从剪贴板上导入图片。你 也可以加入其它工程和文件夹得链接，来获得访问它们的所有设计文档和图片文件。这个功能，在你使用库工程的公共组件或使用存在别处的图片时候非常好用。当你选择了列表中的工程或文件夹时候，其对应的文件树将出现在下方。· 双击设计文件打开它，或者拖拉它作为组件到另外打开的设 计中。· 使用鼠标右键进行

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

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