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

原创|使用教程|编辑:郝浩|2014-05-05 11:14:36.000|阅读 2238 次

概述:GUI Design Studio是一款用户界面及软件原型设计工具,适用于Web,桌面,移动和嵌入式软件应用程序设计, 其快速、易于使用以及无需任何编码的优点,使其成为软件设计师,用户体验专家,业务分析师,开发人员,项目经理和咨询专家的首选原型设计工具。本篇将通过使用GUI Design Studio来重现网站首栏的原型设计,加深大家对这款软件的认识。

# 正版采购狂欢节,企业采购正当时 #

设计原型的功能分析

打开网站首页,让我们来看看网站首栏:

首栏导航

我们观察发现,首栏的导航条设计的功能是用户在点击导航栏的任意一个选项时,页面即跳转到该页,同时导航栏该选项按钮的外观变化 ,区别于其它未选中选项 。其中的“开发资源”一栏又有别于其它选项,用户在点击该选项时会弹出进入三个板块——视频、在线文档、问答的选择界面,用户选择三个板块的其中之一,则会进入该板块的界面。如果点击页面其它位置,则该选择界面消失。

创建原型设计项目

打开GUI Design Studio,在File中选择new project,进入创建新项目界面:

创建原型设计项目

选择项目文档保存的路径,并命名。 在项目命名完成后,点击最右方菜单里的project选项 ,选择创建新文档图标图标 ,创建设计文档。

构造导航板块各界面

在最右方的菜单里选择Elements(元素),然后在列表栏里的Ribbon Bar(功能导航栏)里选择与首栏导航最相似的模板:

导航栏模板

双击该模板会弹出它的属性窗口, 在这里我们可将该模板调整为需要的样子。Item栏,是调节界面显示内容的地方。我们点选左边的“Home”,再将调节模板中第2栏的“Home”更改为“首页”,再依次点选“Insert”、“View”进行更改,由于模板给出的导航数只有3个,而我们需要的不止这个数,这时可点击下方的“Insert” (插入)按钮进行增加。于是,我们就将Item栏调整为下图所示:

导航栏item变化

下一步 ,我们点击Style栏,将“left margin”(左边缩进)的数值调整为0;点击Font栏,将字体大小调整为12.8pt;接着,在Position栏将Fixed的三条属性全部取消勾选,这样将得到一个大小可随意调整的窗口。然后,我们点击主界面的Design菜单的Add Bitmap,将首页的截图放入导航模板,再手动调整模板大小,最后我们将得到一个在首页状态下的静态页面:

首页界面

再下一步,我们将打造其它界面的静态页面。类似的,我们将做好的首页的那个模板(不包含bitmap的)复制,然后,点击Item栏selected中的数字改为2,这个时候模板的导航就是显示的是在第2个页面——控件的状态了。同样的,我们再添加控件页面的bitmap截图,得到了在控件页面状态下的静态页面。

控件页面界面

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

GUI Design Studio产品介绍>>

下载GUI Design Studio>>



标签:界面设计原型设计

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

文章转载自:慧都控件

登录 慧都网发表评论


慧都网友 2014-05-07 16:34:16.000
0

学习了,谢谢分享


慧都网友 2014-05-05 17:57:56.000
0

lz幸苦了,写得不错


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
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