GUI Design Studio应用教程：网站首栏原型设计（一）-控件新闻-慧都网

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

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

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

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

设计原型的功能分析

打开网站首页，让我们来看看网站首栏：

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

创建原型设计项目

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

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

构造导航板块各界面

在最右方的菜单里选择Elements（元素），然后在列表栏里的Ribbon Bar（功能导航栏）里选择与首栏导航最相似的模板：

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

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