使用教程uidesigner资料

《使用教程uidesigner资料》由会员分享，可在线阅读，更多相关《使用教程uidesigner资料（26页珍藏版）》请在金锄头文库上搜索。

1、 UIDesigner 使用帮助 UIDesigner 使用帮助 目录 目录 一、 认识 UIDesigner 1. 定义和特点 2. 认识窗体 3. UIDesigner 的文件格式 4. 加入 UID 设计师群/QBAR 二、 UID 的工作区 1. UID 使用流程简述 三、 新手上路 QQ 关闭提示对话框 1. 分析界面功能及布局 2. 新建文件 3. 设计界面布局 4. 填充控件 a) 设计标题栏 b) 设计信息提示区 c) 设计命令按钮区 5. 预览 6. 设定响应 7. 保存源文件、导出 exe 8. 总结 四、 认识“响应”命令 五、 认识“容器”与“停靠” 认识UIDesig

2、ner 认识UIDesigner 欢迎大家使用 UIDesigner。 定义和特点 定义和特点 UIDesigner，简称“UID” ，是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能，能够快速的搭建起软件界面的高保真原型。 可以实现设计师、产品经理、程序开发工程师三者间的快速沟通，减少不必要的 工作内耗。 UIDesigner 的主要目标用户： ? 交互设计师 ? 产品经理 ? 程序开发工程师 认识窗体 认识窗体 窗体位于设计区域，是您进行所有设计的载体，即所有的设计都是通过编辑 窗体来实现的。 对于一个 UID 文件只能包含一个窗体。 双击窗体主体，弹出“窗体属性”框，可以对

3、窗体自身属性进行调整。 典型 UID 窗体（windows 默认风格） UIDesigner文件格式 UIDesigner文件格式 与 UIDesigner 相关的文件有两种格式： a) Uid 格式Uid 格式：可编辑性的，打开后可对设计稿进行自由编辑。该格式为软 件默认保存的文件格式。 .uid 文件 b) Exe 格式Exe 格式：展示性的，为给别人展示所用的 demo，任何人任何机器都可 直接点击打开。该格式只可通过“导出 EXE”命令来实现。 .exe 文件 加入UID设计师群/QBAR 加入UID设计师群/QBAR UID设计师论坛： UID的工作区 UID的工作区 UIDesig

4、ner 的工作区主要由一些面板和工具模块组成。了解和熟悉它们， 可以帮助您更好的使用 UID 来完成您的任务。 菜单栏：位于标题栏下，包含该软件所有关键面板和命令。 工具栏：位于菜单栏下，一些快捷的命令方便直接使用。 项目管理：位于软件左上角，对于很复杂的项目和稿件，可以在这里进行管 理。 工具箱：位于软件左下角，包括所有需要用到的控件，方便直接调用。 设计区域：位于软件的正中间，如很多绘图软件一样，是进行设计的地方。 控件层：位于软件右上角，类似于 PS 的图层，方面快速定位。 高级属性：位于软件右下角，类似于 VB，做复杂响应设计的时候必备。 UID使用流程简述 UID使用流程简述 使用

5、UID 搭建一个软件界面，基本按照以下几个步骤进行： 1. 分析界面功能及布局 对于所要设计的界面，需要了解该界面需要实现哪些功能，会有哪些交 互点，从而设定该界面大致的布局。 2. 新建文件 新建一个文件，其中系统会自动为您新建一个窗体，这表示您将开始使 用 UID 为您设计交互稿了。 3. 设计界面布局 这一步对于设计较复杂的交互稿非常有用。使用控件“容器（Panel） ” ， 并配合“停靠（Dock） ”命令，首先设计出界面的大致布局，再添加各个 控件。这样界面布局更规整，思路更清晰。 4. 填充控件 向窗体或父容器中拖入所需要的控件。双击控件，在其属性框中修改属 性，以此来获得希望的控

6、件样式。 5. 设定响应 在演示交互稿时， 往往需要告诉他人点击某个控件会出现什么样的效果， 比如在一些提示对话框中单击“取消”按钮就会关闭该对话框。设定目 标控件的响应就是为了实现这样的效果。 6. 预览 在做设计稿的过程中，往往需要先看一下在实际演示中会是什么样的效 果，然后再做对应修改或继续。 7. 保存 将以确定的稿件保存为 uid 格式。 8. 导出 将需要向他人展示的 demo 导出成 exe 格式。 新手上路 关闭提示对话框 新手上路 关闭提示对话框 这里假想了一个提示对话框。现在来使用 UIDesigner 做出这样的界面，并 实现相关的交互功能。 关闭提示对话框 ? 当点击一

7、个软件的关闭按钮后，弹出一个这样的对话框进行询问； ? 选择“退出程序”并按“确定”则关闭本软件； ? 选择“最小化到系统托盘” 并按“确定” ，则不关闭本软件，而只是最 小化到系统托盘； ? 选择“不再提醒”并按“确定”则下次点击软件关闭按钮时，不再弹出 该对话框，依照本次的选择去执行； ? 选择“确定”按钮，执行命令并关闭对话框； ? 选择“取消”按钮，取消该命令并关闭对话框。 下面将开始讲解如何制作该稿件。所有稿件的制作方法都可概括为：设计布 局，将控件拖入窗体，定义控件属性，为控件定义“响应” ，保存并导出。 分析界面功能及布局 分析界面功能及布局 这个案例的布局很简单，很清晰，并且已

8、经给出，当前步骤便会比较容易完 成了。 界面功能分为如图三个区域： 界面功能区域划分 各个区域包含的控件如下： ? 标题栏 标题栏 标题、关闭按钮 ? 信息提示区 信息提示区 图标、文字、单选项 ? 命令按钮区 命令按钮区 复选项、确定按钮、取消按钮 注：该对话框的尺寸是固定的，不可拖拽变大变小的。 新建文件 新建文件 单击菜单栏中“文件”-“新建” ，得到一个新建的窗口 文件菜单中的新建按钮 新建后，将在设计区得到一个可编辑窗体： 新建后得到的窗体 设计界面布局 设计界面布局 由于界面简单， 这里需要做的只是调整窗体的尺寸 （当然也可以放入 “容器” 配合停靠命令，对界面进行区域划分） 。

9、双击窗体主体，弹出“窗体属性”框，在此对话框的“大小”一栏下输入合 适的尺寸，这里输入宽度为 320，高度为 170。 点击属性对话框的“确定”按钮，完成尺寸修改。 在属性框中调整大小 填充控件 填充控件 这里按照区域进行设计。 设计标题栏 设计标题栏 首先，双击窗体主体，弹出“窗体属性”框。 其次，在属性对话框的“标题”中输入标题。 输入标题 然后，在属性对话框的下方进行设置： 1) 在“其他”中去除“显示图标” 、 “带最大化按钮” 、 “带最小化按钮” ，其 目的是保证标题栏上不出现图标以及“最大化” 、 “最小化”按钮； 2) 在“窗口边框”中选择“不可调整大小” ，以保证界面不出现“

10、大小调整 柄” ，不可随意调整大小。 编辑属性对话框 最后，点击属性对话框的“确定”按钮，完成标题栏设计。 可以点击菜单栏的“生成”下的“预览”选项进行预览，亦或者可以直接按 快捷键“F10” 。 预览设置后的界面 设计信息提示区 设计信息提示区 添加一个提示图片 添加一个提示图片 在界面右侧的工具箱中选择“图片框” ，并拖拽到窗体内。 工具箱中的图片框选项 双击窗体中的图片框，在弹出的“图片框属性”对话框的“图像”栏中进行 编辑。点击“浏览”按钮，弹出“图片库” ，在图片库中选择适合的图片。 浏览选择合适图片 另外，可以使用任何截图功能获得一个图片，然后直接粘贴在窗体区域内。 可以通过键盘的

11、方向键来控制任一控件的精细位置。 添加描述文字 添加描述文字 在界面右侧的工具箱中选择“标签” ，并拖拽到窗体内。双击“标签”本身， 弹出的“标签属性框” ，在其“文本”输入框中添加描述性文字“您点击了关闭 按钮，您是想： ” 。 工具箱中的标签选项 输入文字 添加单选项 添加单选项 在界面右侧的工具箱中选择“单选按钮” ，并拖拽到窗体内，双击其弹出属 性对话框，在其“文本”输入框中为别输入对应选项文字，并放置合适的位置。 UID 已经设置了默认距离，这使控件放置很方便，界面也很标准。 工具箱中的单选按钮选项 由于“退出程序”为默认选择项，所以需要勾选上“选中状态” 。 输入文字且勾选“选中状

12、态” 设计命令按钮区 设计命令按钮区 如法炮制，在界面右侧的工具箱中分别选择“复选项” 、 “按钮” ，拖拽到窗 体内，双击其弹出对话框，在弹出的对话框中设置属性。按照需要排列各空间。 由于“确定”按钮为默认选择项，所以设定“Tab 顺序”为 0，这表示在所 有控件中， “确定”按钮为起始。 设置“Tab 顺序”为 0 预览 预览 UID 提供了方便的预览功能，以帮助查看稿件是否正确，各个交互点是否符 合要求。对照预览，及时对稿件进行修改或优化。 在“工具栏”或者菜单栏的“生成”下寻找“预览”选项， 或者可以直接 按快捷键“F10” 。 预览 设定“响应” 设定“响应” 如果您是按照以上流程进

13、行操作时，在预览时候，您会发现，点击“确定” 或“取消”按钮，对话框并不消失。这是就要为其设定“响应”命令。 所谓“响应”命令，就是定义控件被点击时的表现。 以给“取消”按钮添加响应为例。右键单击“取消”按钮本身，在下拉菜单 中选择“响应” 。 右键菜单中的响应 弹出“设置按钮（取消）的响应”对话框，鼠标单击“关闭本身窗体”添加 一条响应命令，单击“完成”按钮完成响应命令的添加。这是再次预览，会发现 单击“取消”按钮将关闭对话框本身。 添加响应命令 保存源文件、导出exe 保存源文件、导出exe 将设计稿源文件保存，以便下次进行修改或调用。在“工具栏”或者菜单栏 的“文件”下寻找“保存”选项，

14、或者可以直接按快捷键“Ctrl+S” 。 保存与另存为 将完成稿导出成 exe 格式文件，以便向他人演示。该文件在所有安装了 DotNet Framework 程序电脑上都可以直接运行。 在“工具栏”或者菜单栏的“生成”下寻找“导出 exe”选项，或者可以直 接按快捷键“F12” 。 导出 EXE 总结 总结 重复之前的一句话作为总结。 所稿件的制作方法可概括为：设计布局，将控件拖入窗体，定义控件属性， 为控件定义“响应” ，保存并导出。 认识“响应”命令 认识“响应”命令 响应，定义控件被点击时的表现。其入口很多，如菜单栏“编辑”下；目标 控件右键菜单中；快捷工具栏。 单击“响应”后，弹出“

15、设置按钮（取消）的响应”对话框。 设置响应对话框 该对话框主要由设置响应类型、设置响应结果、设置执行规则三个设置部分 构成。 响应类型 响应类型 设置响应类型 “响应类型”主要定义这个命令执行是在目标控件经历怎样的鼠标动作后 出现。如普通的按钮都是单击后执行命令，则选择“单击”就好；又如，有些 tips 提示，是当鼠标移上目标后出现，那么就选择“更多”中的“鼠标悬停” 。 执行规则 执行规则 执行规则 同时 逐个 执行 同时 逐个 执行 当点击一个控件会连续执行一系列的命令，也就是分别去执行多个响应，那 么就选择“执行规则”中的“同时执行” 。 如 QQ 登录框，当输入密码错误后点击“登录”按

16、钮，则关闭原来的登录对 话框，并弹出一个新的对话框提示帐号或密码错误。 设置第一个响应是关闭对话框，设置第二个响应是弹出一个指定对话框，并 选择“同时”执行则能达到效果。 执行 执行 相对“同时执行” ， “逐个执行”针对一个控件随着鼠标的多次点击而以此执 行不同的命令。 如 QQ 登录框上的“设置”按钮，当第一次点击是，将拉出设置面板；当再 次点击时，将收起设置面板。 也就添加两个响应，一个是显示设置面板，一个是隐藏设置面板，而这两个 响应命令应“逐个执行” 。 设置响应结果 设置响应结果 设置响应结果 这里提供六种设置方式： 打开窗体：指目标控件被操作后所执行的命令是打开一个新的指定窗体。单 击“打开窗体”后会弹出一个选择窗体的对话框，所选择的必须是.uid 格式的 文件。 打开网页： 指目标控件被操作后所执行的命令是打开一个指定网页。 单击 “打 开网页”后会弹出一个对话框提示输入所要打开网页的网址。 弹出对话框：指目标控件被操作后所执行的命令是弹出一个系统对话框。这 是一个快捷的设置方式，UID 已设定了标准的系统对话框，如提示、警告、询问、