构建弹出界面

前面说到，点击开发资源栏会弹出一个板块选择界面。这里，我们就来设计这个弹出的界面。在Elements的Ribbon Bar里找到下图所示模板：

双击打开属性界面，点选左方列表里的“Menu”，在Item栏中第二行中将“Menu”替换成“视频”。和前面一样，点击“Insert”按钮可插入更多的内容，为了将三个板块区分开，可在两个板块中点击“Insert”按钮，在Item栏第一行中选择“Separator”，这个时候就2个板块中间就插入了区分的横线。然后在Font栏中将字体大小调整为12.8pt。调整完毕后，我们设计出了弹出的界面：

创建按钮

由于使用的是试用版的缘故，无法使用嵌套按钮的Tool bar模板。所以，这里我们选择单独创建按钮，再把按钮放置在前面的Ribbon bar模板上，一样可以达到预期的效果。在Elements的Button里，选择无字的那种按钮，双击该按钮模板打开按钮属性，在button栏的label（标签）项输入按钮的名字。在label下方的text项是按钮的样式，可根据喜好自由选择，最下方的button项有一个可调节的数字，默认为2，意思是连续点击2下，可触发按钮效果。在Font栏中我们也将按钮字体大小调整为12.8pt，样式与前面一致。由于是作为原型演示，我们只做了首页、控件、工具软件和开发资源四个按钮，然后将其分别放置在之前完成的几个静态页 面上。

搭建页面连接模式

在GUI Design Studio里，最先创建的界面被默认为代表元素（representative elements），界面周围有绿色边框，在原型演示里，首先显示的就是代表元素的窗口。如果你需要调换代表元素，可选取想要成为代表元素的界面，再点F10即可完成调换。那么如何在原型演示中，切换不同界面的窗口呢？主界面正上方的 就是用来搭建页面间的连接模式的。使用的方法：

1.在右边选择连接模式。不同的箭头代表不同的连接类型（如下图）:

2.点击使用左边的图标对页面进行连接。这个时候就会出现一个笔形状的光标，将光标放在界面的某个位置，则这个位置就会出现红色边框，方便对连接区域进行识别。在本文中，窗口的切换采用Replace Window的箭头 ，我们可用笔形光标将箭头的起始位置设置在首页界面的“控件”按钮上，指针指向控件板块。设置成功后，在原型演示时，点击首页的“控件”按钮页面就会跳转到控件板块。同样的，参考上图，在点击“开发资源”时弹出选择界面的原型可采用Modal Choice Popup的箭头实现。

最后，搭建页面的连接图如下图所示：

原型演示截图：

GUI Design Studio应用教程：网站首栏原型设计（一）>>

GUI Design Studio产品介绍>>

下载GUI Design Studio>>

5

好文不易，鼓励一下吧！