GUI Design Studio应用教程:网站首栏原型设计(二)

原创|使用教程|编辑:郝浩|2014-05-05 17:34:02.000|阅读 1400 次

概述:GUI Design Studio作为一款用户界面及软件原型设计工具,深受用户的喜欢。本文继续上期网站首栏的原型设计案例,主要介绍按钮和页面的连接,结尾附带了最终的原型设计图示和原型演示截图。

# 项目交付用正版,省下一台Iphone12 # # 31款JAVA开发必备控件和工具 #

构建弹出界面

前面说到,点击开发资源栏会弹出一个板块选择界面。这里,我们就来设计这个弹出的界面。在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.在右边选择连接模式。不同的箭头代表不同的连接类型(如下图):

GUI页面连接模式

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

最后,搭建页面的连接图如下图所示:

GUI页面连接图示

原型演示截图:

GUI原型图示

GUI Design Studio应用教程:网站首栏原型设计(一)>>

GUI Design Studio产品介绍>>

下载GUI Design Studio>>



标签:界面设计原型设计

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


慧都网友 2014-05-06 14:24:25.000
0

写的很详细,谢谢。这款软件做原型还行,做界面还是力不从心。


慧都网友 2014-05-06 09:14:39.000
0

导航不是tab,哥们


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
GUI Design Studio

零编码,拖放式的用户界面及软件快速原型设计工具

GUI Design Viewer

GUI Design Viewer是查看GUI Design Studio用户界面和软件原型设计的免费控件产品

Icon Express

Icon Express是一款基于GUI Design Studio的快捷简单且免费的图标编辑类控件。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat