UI设计师培训_天津平面设计培训精品设计课程推荐

UI设计中的axure的简单交互4_天津博奥教育UI设计培训学习辅助资料

本文章摘自天津平面设计培训全程实例教学小班精讲十多年教学经验的天津博奥教育官网www.boaoit.com

 

UI设计在使用过程中会遇到很多问题，为了更好的使用UI设计软件，天津博奥教育培训为大家提供一些UI设计使用心得。

 

UI设计学习技巧-axure的简单交互

Axure里的交互大致有四种：1.定义连接；2.设置动作；3.多个条件场景；4.页面上的交互

目前AxureRP5支持的事件如下：OnClick：鼠标点击?OnMouseEnter：鼠标的指针移动到对象上?OnMouseOut：鼠标的指针移动出对象外?OnFocus：鼠标的指针进入文字输入状态（获得焦点）?OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点）?OnPageLoad：页面或模块载入OnKeyUp:释放按键：事件、场景、动作

定义链接：定义链接可以让一个组件响应一个动作时（如鼠标点击、飘过）链接到其他页面。

Axure里提供了四种链接方式：1.链接到设计中的页面；2.连接到外部网址或文件；3.重新载入当前页面；4.返回上个页面

设置动作：除了定义链接之外，Axure里还可以设置丰富的动作，在Axure里，任何可以出发的事件中都可以执行这些动作。Axure里提供的动作在执行时是自上而下顺序执行的，在基本编辑器里，勾选一些动作后，Axure会按照默认的方法生成动作的执行顺序。当这些顺序不能满足需求时，可以尝试使用高级编辑器，可以自定义添加动作、改变执行顺序。

Axure里的动作

Open Link in Current Window：在当前窗口打开一个页面；Open Link in Popup Window：在弹出的窗口中打开一个页面

Open Link in Parent Window：在父窗口中打开一个页面；Close Current Window：关闭当前窗口 

Open Link in Frame：在框架中打开链接；

Open Link in Parent Frame：在父框架中打开链接

Set Panel state(s) to State(s)：设置动态面板的状态转换

Show Panel(s)：显示动态面板；Hide Panel(s)：隐藏动态面板

Toggle Visibility for Panel(s)：切换动态面板的可见属性（显示/隐藏）

Move Panel(s)：根据绝对坐标或相对坐标来移动动态面板

Bring Panel to Front：将动态面板置为最前端

Set Variable and Widget value(s) equal to Value(s)：设定变量值或控件值 

Open Link in Parent Frame：在父页面的嵌框架中打开一个页面 

Scroll to Image Map Region：滚动页面到Image Map所在位置；Enable Widget(s)：把对象状态变成可用状态 

Disable Widget(s)：把对象状态变成不可用状态；Set Focus on Widget：设置焦点

Wait Time(s)：等待多少毫秒(ms)后再进行这个动作；Expand Tree Node：展开树状节点

Collapse Tree Node：折叠树状节点；Other：显示动作的文字说明

设置场景：一个事件发生在不同的场景中结果是不一样的，比如发送信息，发送失败和成功返回的结果是不一样的，在Axure里，这样多个场景的事件，可以通过条件设置来编辑，不同的条件会触发不同的场景。在发送信息时有发送成功和发送失败两个场景：对于发送成功来说，有这样的一连串事件：显示正在发送、输入框变为空白、等待一段时间后、显示发送成功。类似的，发送失败时也有这样一串动作，而判断消息发送是否成功则是根据实际应用中发送的情况而定。

页面交互：Axure还支持页面层级的触发事件，当载入一个页面时就会触发OnPageLoad事件。OnPageLoad事件可以为我们设置页面在载入时初始状态，并可以触发一些我们需要的场景的条件。例如一个导航会有一个初始状态和一个选中状态，当我们从一个入口进入到一个页面时，希望那个对应的导航按钮时处于选中状态，此时就需要使OnPageLoad事件来设置。

动态面板：Axure中很多的交互是由动态面板来实现的。动态面板里面可以包含多个状态，所以通过一些事件可对动态面板的状态进行切换，以此来实现交互效果。但任何时候都是只有一个状态是可见的，或者整个动态面板是被隐藏的。动态面板管理面板。在这里也可以对动态面板进行添加、删除、组织等操作。双击可以对其进行编辑，有时动态面板较多时，在屏幕上的显示会让人觉得不方便，此时可以通过点击蓝色的方块对其取消显示（不会改变它的可见属性）。

动态面板有6种动作：1.设置动态面板的转换状态；2.显示动态面板；3.隐藏动态面板；4.切换动态面板可见属性；5.移动动态面板；6.将动态面板置为最前；其中前3个用到的最多。第5个经常配合等待时间一起使用。可以制作一些动态效果。

 

 

UI设计中的axure的简单交互2

UI设计中的axure的简单交互3

 

 

天津设计技能相关培训：天津市天津平面设计培训、天津市天津平面设计培训就业班、天津UI设计培训、天津PS培训、天津C4D培训、天津AI培训、天津犀牛Rhino培训、 天津Solidworks培训、SolidWorks培训全科班、天津素描培训、天津CAD培训、天津室内设计培训、天津建筑Rhino参数化设计培训、天津办公软件培训、天津各所大学到天津博奥教育的乘车路线