UIDesigner要点.ppt

UIDesigner 简介： UIDesigner，简称“UID”，是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能，能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通，减少不必要的工作内耗。 UIDesigner的主要目标用户： 交互设计师 用户调研员 视觉设计师 产品经理 教程：创建第一个设计稿 1) 启动 UIDesigner应用程序 默认安装完成 UIDesigner后，在 windows桌面上会出现一个 桌面上会出现一个 UIDesigner应用程序 应用程序 的快捷方式，双击运行。 的快捷方式，双击运行。 2) 进入引导页 启动 UIDesigner后，进入 欢迎界面，用户点击引导页的新建空白设计稿，进入界面设计界面 注：新建界面也可以在 UIDesigner应用程序中 “文件 ”-“新建 ”中打开 使用控件 在创建完空白设计稿后，我们可以使用控件栏里的控件来丰富我们的界面。 首先：获得控件栏视图（一般系统会自动显示）。将鼠标移到菜单栏里的“窗口”按钮（如右图），左键单击工具箱。 接下来：我们会得到控件视图，分为基本控件（如图片，按钮，编辑栏），控件库（一些复杂的控件按钮）以及自定义控件（手机界面客户端未实现）。（如右图） 我们只需选中我们要使用的控件，右键按住将其拖入设计稿中便可 控件属性 对于控件的大小和文字内容，我们可以直接在设计稿中进行，也可以在控件属性视图中进行，但控件一些属性则必须在控件属性视图中进行。 首先：获得控件属性视图（一般系统会自动显示），将鼠标移到菜单栏里的“窗口”按钮（如右图），左键单击属性。 下图则是选中ID为Button1，内容为Button的按钮控件时的属性视图： 图层 在界面设计中，图层这一概念非常重要； 我们在一个界面中各种图片、控件、按钮有时候会相互叠加；刚开始时我用的是控件属性中的透明度效果。同一位置的不同控件通过修改不同的透明度来达到遮罩效果，但效果非常差。后来熟悉了图层这一概念，界面的美观就上升了几个等级。“例如：有时候我需要将头像图片覆盖背景图片的一部分。”怎么办？ 首先，我们需要获得图层视图；同之前的：窗口-图层管理；之后如右图 在一个界面中：有背景图片控件，有文本控件，按钮控件，有头像控件。 背景图片为Image1 头像图片为Image21 因为Image1图层排在Image21的下面，所以头像图片Image21可以遮罩背景图片Image1 右图中：眼睛图案代表着显示控件或隐藏控件。 锁代表锁定控件和解锁控件，以防我们在操作其它控件时误操作。 美丽的界面！ 会动的设计稿：演示 首先，我们需要为一些控件添加事件响应，那么我们需要获得控件事件视图。如之前的，窗口-事件。之后如下图： 在UIDesigner for mobile 中，一个界面称之为layer；一个layer只有1个phone控件，控件事件可以设置为点击后跳转至其它界面；如下图 我为Button19添加了跳转至phone2事件，那么点击Button19之后会发生什么呢？ Duang~Duang~Duang~ 我为“点击进入”设置了跳转至phone1事件，点击之后 开始演示 单击项目-演示。 记住：一个layer为一个界面 在演示之前 我们需要设置好启动界面 备注： 因为个人是安卓开发，所以UI设计工具是手机的，所以，和电脑的UIDesigner工具有些差异（电脑更复杂，但大体一致） 电脑的可以多人团队共同开发设计，只不过资源和稿件需放在服务器内。 学习时间不长，有错之处且望包容指正。 谢谢观赏，演讲完毕！