使用GUI Design Studio进行原型设计Word文件下载.docx
- 文档编号:22718485
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:26
- 大小:1.48MB
使用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(标签)。
∙如果必要,通过右键点击那些有红色下换线的文字,来纠正拼写错误。
∙使用拼写检查按钮来纠正文档中的所有拼写错误。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用GUI Design Studio进行原型设计 使用 GUI Studio 进行 原型 设计
![提示](https://static.bdocx.com/images/bang_tan.gif)