使用教程UIDesigner

UIDesigner使用帮助

目录

一、 认识UIDesigner

1.

2.

3.

4.

定义和特点

认识窗体

UIDesigner的文件格式

加入UID设计师/QBAR

二、 UID的工作区

1. UID使用流程简述

三、 新手上路 – QQ关闭提示对话框

1.

2.

3.

4.

分析界面功能及布局

新建文件

设计界面布局

填充控件

a) 设计标题栏

b) 设计信息提示区

c) 设计命令按钮区

预览

设定响应

保存源文件、导出exe

总结

5.

6.

7.

8.

四、 认识“响应”命令

五、 认识“容器”与“停靠”

认识UIDesigner

欢迎大家使用UIDesigner。

定义和特点

UIDesigner，简称“UID”，是一款进行软件界面原型设计的工具。

它拥有强大的模板和预制功能，能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通，减少不必要的工作内耗。

UIDesigner的主要目标用户：

y 交互设计师

y 产品经理

y 程序开发工程师

认识窗体

窗体位于设计区域，是您进行所有设计的载体，即所有的设计都是通过编辑窗体来实现的。

对于一个UID文件只能包含一个窗体。

双击窗体主体，弹出“窗体属性”框，可以对窗体自身属性进行调整。

典型UID窗体（windows默认风格）

UIDesigner文件格式

与UIDesigner相关的文件有两种格式：

a) Uid格式：可编辑性的，打开后可对设计稿进行自由编辑。该格式为软件默认保存的文件格式。

.uid文件

b) Exe格式：展示性的，为给别人展示所用的demo，任何人任何机器都可直接点击打开。该格式只可通过“导出EXE”命令来实现。

.exe文件

加入UID设计师/QBAR

UID设计师论坛：/uidesigner

UID的工作区

UIDesigner的工作区主要由一些面板和工具模块组成。了解和熟悉它们，可以帮助您更好的使用UID来完成您的任务。

菜单栏：位于标题栏下，包含该软件所有关键面板和命令。

工具栏：位于菜单栏下，一些快捷的命令方便直接使用。

项目管理：位于软件左上角，对于很复杂的项目和稿件，可以在这里进行管理。

工具箱：位于软件左下角，包括所有需要用到的控件，方便直接调用。

设计区域：位于软件的正中间，如很多绘图软件一样，是进行设计的地方。

控件层：位于软件右上角，类似于PS的图层，方面快速定位。

高级属性：位于软件右下角，类似于VB，做复杂响应设计的时候必备。

UID使用流程简述

使用UID搭建一个软件界面，基本按照以下几个步骤进行：

1. 分析界面功能及布局

对于所要设计的界面，需要了解该界面需要实现哪些功能，会有哪些交互点，从而设定该界面大致的布局。

2. 新建文件

新建一个文件，其中系统会自动为您新建一个窗体，这表示您将开始使用UID为您设计交互稿了。

3. 设计界面布局

这一步对于设计较复杂的交互稿非常有用。使用控件“容器（Panel）”，并配合“停靠（Dock）”命令，首先设计出界面的大致布局，再添加各个控件。这样界面布局更规整，思路更清晰。

4. 填充控件

向窗体或父容器中拖入所需要的控件。双击控件，在其属性框中修改属性，以此来获得希望的控件样式。

5. 设定响应

在演示交互稿时，往往需要告诉他人点击某个控件会出现什么样的效果，比如在一些提示对话框中单击“取消”按钮就会关闭该对话框。设定目标控件的响应就是为了实现这样的效果。

6. 预览

在做设计稿的过程中，往往需要先看一下在实际演示中会是什么样的效果，然后再做对应修改或继续。

7. 保存

将以确定的稿件保存为uid格式。

8. 导出

将需要向他人展示的demo导出成exe格式。

新手上路 – 关闭提示对话框

这里假想了一个提示对话框。现在来使用UIDesigner做出这样的界面，并实现相关的交互功能。

关闭提示对话框

y 当点击一个软件的关闭按钮后，弹出一个这样的对话框进行询问；

y 选择“退出程序”并按“确定”则关闭本软件；

y 选择“最小化到系统托盘” 并按“确定”，则不关闭本软件，而只是最小化到系统托盘；

y 选择“不再提醒”并按“确定”则下次点击软件关闭按钮时，不再弹出该对话框，依照本次的选择去执行；

y 选择“确定”按钮，执行命令并关闭对话框；

y 选择“取消”按钮，取消该命令并关闭对话框。

下面将开始讲解如何制作该稿件。所有稿件的制作方法都可概括为：设计布局，将控件拖入窗体，定义控件属性，为控件定义“响应”，保存并导出。

分析界面功能及布局

这个案例的布局很简单，很清晰，并且已经给出，当前步骤便会比较容易完成了。

界面功能分为如图三个区域：

界面功能区域划分

各个区域包含的控件如下：

y 标题栏

标题、关闭按钮

y 信息提示区

图标、文字、单选项

y 命令按钮区

复选项、确定按钮、取消按钮

注：该对话框的尺寸是固定的，不可拖拽变大变小的。

新建文件

单击菜单栏中“文件”-“新建”，得到一个新建的窗口

文件菜单中的新建按钮

新建后，将在设计区得到一个可编辑窗体：

新建后得到的窗体

设计界面布局

由于界面简单，这里需要做的只是调整窗体的尺寸（当然也可以放入“容器”配合停靠命令，对界面进行区域划分）。

双击窗体主体，弹出“窗体属性”框，在此对话框的“大小”一栏下输入合适的尺寸，这里输入宽度为320，高度为170。

点击属性对话框的“确定”按钮，完成尺寸修改。

在属性框中调整大小

填充控件

这里按照区域进行设计。

设计标题栏

首先，双击窗体主体，弹出“窗体属性”框。

其次，在属性对话框的“标题”中输入标题。

输入标题

然后，在属性对话框的下方进行设置：

1) 在“其他”中去除“显示图标”、“带最大化按钮”、“带最小化按钮”，其目的是保证标题栏上不出现图标以及“最大化”、“最小化”按钮；

2) 在“窗口边框”中选择“不可调整大小”，以保证界面不出现“大小调整柄”，不可随意调整大小。

编辑属性对话框

最后，点击属性对话框的“确定”按钮，完成标题栏设计。

可以点击菜单栏的“生成”下的“预览”选项进行预览，亦或者可以直接按快捷键“F10”。

预览设置后的界面

设计信息提示区

添加一个提示图片

在界面右侧的工具箱中选择“图片框”，并拖拽到窗体内。

工具箱中的图片框选项

双击窗体中的图片框，在弹出的“图片框属性”对话框的“图像”栏中进行编辑。点击“浏览”按钮，弹出“图片库”，在图片库中选择适合的图片。

浏览选择合适图片

另外，可以使用任何截图功能获得一个图片，然后直接粘贴在窗体区域内。

可以通过键盘的方向键来控制任一控件的精细位置。

添加描述文字

在界面右侧的工具箱中选择“标签”，并拖拽到窗体内。双击“标签”本身，弹出的“标签属性框”，在其“文本”输入框中添加描述性文字“您点击了关闭按钮，您是想：”。

工具箱中的标签选项

输入文字

添加单选项

在界面右侧的工具箱中选择“单选按钮”，并拖拽到窗体内，双击其弹出属性对话框，在其“文本”输入框中为别输入对应选项文字，并放置合适的位置。

UID已经设置了默认距离，这使控件放置很方便，界面也很标准。

工具箱中的单选按钮选项

由于“退出程序”为默认选择项，所以需要勾选上“选中状态”。

输入文字且勾选“选中状态”

设计命令按钮区

如法炮制，在界面右侧的工具箱中分别选择“复选项”、“按钮”，拖拽到窗体内，双击其弹出对话框，在弹出的对话框中设置属性。按照需要排列各空间。

由于“确定”按钮为默认选择项，所以设定“Tab顺序”为0，这表示在所有控件中，“确定”按钮为起始。

设置“Tab顺序”为0

预览

UID提供了方便的预览功能，以帮助查看稿件是否正确，各个交互点是否符合要求。对照预览，及时对稿件进行修改或优化。

在“工具栏”或者菜单栏的“生成”下寻“预览”选项， 或者可以直接按快捷键“F10” 。

预览

设定“响应”

如果您是按照以上流程进行操作时，在预览时候，您会发现，点击“确定”或“取消”按钮，对话框并不消失。这是就要为其设定“响应”命令。

所谓“响应”命令，就是定义控件被点击时的表现。

以给“取消”按钮添加响应为例。右键单击“取消”按钮本身，在下拉菜单中选择“响应”。

右键菜单中的响应

弹出“设置按钮（取消）的响应”对话框，鼠标单击“关闭本身窗体”添加一条响应命令，单击“完成”按钮完成响应命令的添加。这是再次预览，会发现单击“取消”按钮将关闭对话框本身。

添加响应命令

保存源文件、导出exe

将设计稿源文件保存，以便下次进行修改或调用。在“工具栏”或者菜单栏的“文件”下寻“保存”选项，或者可以直接按快捷键“Ctrl+S”。

保存与另存为

将完成稿导出成exe格式文件，以便向他人演示。该文件在所有安装了DotNet Framework程序电脑上都可以直接运行。

在“工具栏”或者菜单栏的“生成”下寻“导出exe”选项，或者可以直接按快捷键“F12”。

导出EXE

总结

重复之前的一句话作为总结。

所稿件的制作方法可概括为：设计布局，将控件拖入窗体，定义控件属性，为控件定义“响应”，保存并导出。

认识“响应”命令

响应，定义控件被点击时的表现。其入口很多，如菜单栏“编辑”下；目标控件右键菜单中；快捷工具栏。

单击“响应”后，弹出“设置按钮（取消）的响应”对话框。

设置响应对话框

该对话框主要由设置响应类型、设置响应结果、设置执行规则三个设置部分构成。

响应类型

设置响应类型

“响应类型”主要定义这个命令执行是在目标控件经历怎样的鼠标动作后出现。如普通的按钮都是单击后执行命令，则选择“单击”就好；又如，有些tips提示，是当鼠标移上目标后出现，那么就选择“更多”中的“鼠标悬停”。

执行规则

执行规则

同时执行

当点击一个控件会连续执行一系列的命令，也就是分别去执行多个响应，那么就选择“执行规则”中的“同时执行”。

如QQ登录框，当输入密码错误后点击“登录”按钮，则关闭原来的登录对话框，并弹出一个新的对话框提示帐号或密码错误。

设置第一个响应是关闭对话框，设置第二个响应是弹出一个指定对话框，并选择“同时”执行则能达到效果。

逐个执行

相对“同时执行”，“逐个执行”针对一个控件随着鼠标的多次点击而以此执行不同的命令。

如QQ登录框上的“设置”按钮，当第一次点击是，将拉出设置面板；当再次点击时，将收起设置面板。

也就添加两个响应，一个是显示设置面板，一个是隐藏设置面板，而这两个响应命令应“逐个执行”。

设置响应结果

设置响应结果

这里提供六种设置方式：

打开窗体：指目标控件被操作后所执行的命令是打开一个新的指定窗体。单

击“打开窗体”后会弹出一个选择窗体的对话框，所选择的必须是.uid格式的文件。

打开网页：指目标控件被操作后所执行的命令是打开一个指定网页。单击“打开网页”后会弹出一个对话框提示输入所要打开网页的网址。

弹出对话框：指目标控件被操作后所执行的命令是弹出一个系统对话框。这是一个快捷的设置方式，UID已设定了标准的系统对话框，如提示、警告、询问、错误等。这里只需要简单的设置就好。

修改属性值（自动）：指目标控件被操作后所执行的命令是其本身的窗体或其它控件的属性变化。单击“修改属性值（自动）”后会提示在高级属性对相应属性进行修改。如一个对话框上有个下拉的按钮，点击后，对话框将变长，这是只需要在单击“修改属性值（自动）”修改对话框的长度就好。

修改属性值（手动）：功能同“修改属性值（自动）”一样，只是这是支持编写程序来修改属性的入口。

关闭本身窗体：指目标控件被操作后所执行的命令是关闭本身窗体。

认识“容器”与“停靠”

对于一个复杂的界面，使用配合停靠命令来使用容器，可以使布局更规整，思路更清晰。

容器（Panel）

容器

容器可以被当作是一个控件。

容器不会显示在窗体中。

使用容器可以使窗体布局更加规整。

作为父容器配合使用停靠可以有效布局，特别是在需要改变尺寸时保持布局不变时使用。

当遇到一个布局复杂、控件繁多的界面时，建议先使用“容器”将布局搭建成，之后再将各个区域的控件添加进对应容器中。

•

•

•

•

停靠（Dock）

• 停靠是一种命令

• 它可以让控件紧靠于窗体(或父容器)的某一边缘，如通常情况下的工具栏、状态栏

右键菜单中的停靠命令

对于停靠的作用，通过一个例子来说明：

在一个窗体中，添加一个“文本框”，将其拉长放置窗体底部，并拉伸至窗体的宽度。

添加“文本框”

此时点击“预览”，当缩放窗体时，发现“文本框”并没有随窗体变化而有任何变化。

“文本框”不随窗体变化而变化

右键单击“文本框”，在弹出的菜单中选择“停靠”中的“底部停靠”，此时再次“预览”，“文本框”将随着窗体变化而变化位置和长短。

“文本框”随窗体变化而变化