资源描述
单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,产品组,2010.09.25,大家好,1,基本功能介绍,2,目录,界面介绍,常用组件,简单交互实现,基本功能介绍,3,基本功能介绍,界面介绍,工作区,站点地图,组件,模块,页面注释,页面交互,动态面板管理,控件交互面板,位置与大小,4,基本功能介绍,站点地图,站点地图是一个页面导航面板, 在这里面可以对所设计的页面进行添加、删除、重命名和组织,5,基本功能介绍,组件面板中有线框图组件和流程图组件，用这些组件进行线框图和流程图的设计。这里显示的是所有的组件,后面的一部分是流程图组件,常用组件,6,基本功能介绍,线框图组件中,常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中，在完成一些交互动作时，动态面板用的最多。,组件的使用：,所有的组件都是用鼠标单击选中后拖入到工作区域.,对组件的编辑除了交互动作的设置之外,还可以对这些组件进行填充颜色或渐变、设置边框颜色或粗细、以与编辑文字。,常用组件,动态面板,7,基本功能介绍,常用组件,图片,双击,图片的操作比较简单，双击，选择一张图片打开即可。,需要重新添加图片是，在原来的图片上双击再选择。,8,基本功能介绍,常用组件,矩形、占位符、输入框、形状按钮、按钮,这几个组件的操作都比较简单，直接拖入到工作区域使用即可。,可以改变尺寸、颜色、边框，可以输入文字。由于对中文支持不好,所以有时在矩形、占位符里输入中文时会出现问题。,矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。,9,基本功能介绍,常用组件,文字编辑,组合、顺序对齐、分布,填充、边框,文字分布,锁定控件,改变形状,右键菜单,10,基本功能介绍,常用组件,矩形的形状变化，其中，圆角的大小是可以控制的，使用不同的形状得到一些组合形状。,11,基本功能介绍,常用组件,矩形的形状变化，其中，圆角的大小是可以控制的; 使用不同的形状进行组合可以得到一些组合形状。,12,基本功能介绍,模块面板,模块是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过模块来调用。,使用模块的好处是：修改模块时，原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。,模块的面板和站点地图有点类似。可以添加、组织、编辑。,13,基本功能介绍,模块面板,模块的行为有三种：,正常、作为背景、自定义组件,正常：这是默认状态，就是修改模块时，引用到页面的模块会跟着一起修改。,作为背景：当把模块调用到页面时会放置底层并且锁定。,自定义：这种模块可以在页面中进行修改而不会引起其他模块变化，类似于复制。,根据不同版本不一定有这个行为,14,基本功能介绍,简单交互,里的交互大致有四种：,定义连接,设置动作,多个条件场景,页面上的交互,目前 支持的事件如下：, ：鼠标点击, ：鼠标的指针移动到对象上, ：鼠标的指针移动出对象外, ：鼠标的指针进入文字输入状态（获得焦点）, ：鼠标的指针离开文字输入状态 （失去焦点）, ：页面或模块载入,: 释放按键,15,基本功能介绍,简单交互,事件、场景、动作,16,基本功能介绍,简单交互,定义链接,定义链接可以让一个组件响应一个动作时（如鼠标点击、飘过）链接到其他页面。,在里提供了四种链接方式：,.链接到设计中的页面,.连接到外部网址或文件,.重新载入当前页面,返回上个页面,设计中的页面,外部网址,重新载入,返回,17,基本功能介绍,简单交互,定义链接,方法,方法,18,基本功能介绍,简单交互,设置动作,除了定义链接之外，里还可以设置丰富的动作，在里，任何可以出发的事件中都可以执行这些动作。,点击后打开高级编辑器,19,基本功能介绍,简单交互,设置动作,里提供的动作在执行时是自上而下顺序执行的，在基本编辑器里，勾选一些动作后，会按照默认的方法生成动作的执行顺序。当这些顺序不能满足需求时，可以尝试使用高级编辑器，可以自定义添加动作、改变执行顺序。,添加动作,编辑动作顺序,20,基本功能介绍,简单交互,里的动作,：在当前窗口打开一个页面,：在弹出的窗口中打开一个页面,：在父窗口中打开一个页面,：关闭当前窗口,：在框架中打开链接,：在父框架中打开链接,() ()：设置动态面板的状态转换,()：显示动态面板,()：隐藏动态面板,()：切换动态面板的可见属性（显示隐藏）,()：根据绝对坐标或相对坐标来移动动态面板,21,基本功能介绍,简单交互,里的动作,：将动态面板置为最前端,() ()：设定变量值或控件值,：在父页面的嵌框架中打开一个页面,：滚动页面到 所在位置,()：把对象状态变成可用状态,()：把对象状态变成不可用状态,：设置焦点,()：等待多少毫秒()后再进行这个动作,：展开树状节点,：折叠树状节点,：显示动作的文字说明,22,基本功能介绍,简单交互,设置场景,一个事件的发生在不同的场景中结果是不一样的，比如发送信息，发送失败和发送成功返回的结果是不一样的。,在里，这样的多个场景的事件，可以通过条件设置来编辑，不同的条件会触发不同的场景。,添加删除条件,23,基本功能介绍,简单交互,设置场景,在发送信息时，有,“,发送成功,”,和,“,发送失败,”,两个场景：对于,“,发送成功,”,来说，有这样的一连串事件：显示,“,正在发送,”,、输入框变为空白、等待一段时间后、显示,“,发送成功,”,。,类似的，发送失败时也有这样一串动作。,而判断消息发送是否成功则是根据实际应用中发送的情况而定。,24,基本功能介绍,简单交互,页面交互,还支持页面层级的触发事件，当载入一个页面时，就会触发事件。,事件可以为我们设置页面在载入时的初始状态，并可以触发一些我们需要的场景的条件。,例如，一个导航会有一个初始状态和一个选中状态，当我们从一个入口进入到一个页面时，我们希望那个对应的导航按钮时处于选中状态，此时就需要使用事件来设置。,25,基本功能介绍,简单交互,动态面板,动态面板,中很多的交互是由动态面板来实现的。,动态面板里面可以包含多个状态，所以通过一些事件可以对动态面板的状态进行切换，以此来实现交互效果。但任何时候都是只有一个状态是可见的，或者整个动态面板是被隐藏的。,26,基本功能介绍,简单交互,动态面板,双击动态面板的线框图，会有一个动态面板状态管理的对话框，,在这里可以添加、删除、重命名、组织动态面板。,动态面板的第一个状态时它的默认状态。选择编辑之后可以对其进行设计，像画线框图一样。,动态面板的显示范围是在一个蓝色的虚线框内，这个也是动态面板对事件的响应范围。,27,基本功能介绍,简单交互,动态面板,动态面板管理面板。在这里也可以对动态面板进行添加、删除、组织等操作。双击可以对其进行编辑。,有时，动态面板较多时，在屏幕上的显示会让人觉得不方便，此时可以通过点击蓝色的方块对其取消显示（不会改变它的可见属性）。,不显示,显 示,28,基本功能介绍,简单交互,动态面板,动态面板有种动作：,设置动态面板的转换状态,显示动态面板,隐藏动态面板,切换动态面板可见属性,移动动态面板,将动态面板置为最前,其中前个用到的最多。第个经常配合,“,等待时间,”,一起使用。可以制作一些动态效果。,29,基本功能介绍,简单交互,简单例子,翻转效果,签,30,
展开阅读全文