原型设计基础与案例实战第4章

《原型设计基础与案例实战第4章》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第4章交互动画做交互动画是Axure的强项，简单的几步设置就可以让原型动起来实现创意的交互效果。用Axure做原型常常会引来同事的惊呼“快看！他的原型会动！”。下面就介绍交互动画的制作方法。4.1基础概念Axure屮可以设置多种交互动画。用Axure做交互动画的过程就是选择合适的交互动画，设置合适的参数，让交互动画发生。关的基础概念。在开始作交互动画之前，先来了解一卞Axure屮与交互动画相4.1.1了解4个概念用户操作会“触发”交互动画“用例”，交互动画可以设置发生“条件”和具体“动作”。触发事件、用例、条件、交互动作四者的关系如图4-1所示。图4・1Axu

2、re内部运行流程1•触发事件生成原型网页后，Axure会监控每个元件的状态。若用户的操作改变了元件状态，则元件会向Axure报告白己被怎样操作了，发生了什么样的变化。这个过程就是“触发事件”。常见的触发事件有：元件被单击、元件被拖拽、元件失去焦点，元件大小改变等。2.用例发牛触发事件后，Axure会检查有没有应对这个“触发事件”的应对方案。如果有，则执行应对方案。这个应对方案称为"用例”。用例是条件和交互动作的集合。3.条件条件是指执行用例中的交互动作前必须满足的前提。Axure在执行用例中的交互动作前，会先判断用例的条件是否满足，条件满足才开始执行用例。2.

3、交互动作交互动作是指原型针对用户操作做出的反应。常见的交互动作有：移动元件、打开链接、显示/隐藏元件等。4.1.2举例理解4个概念下面介绍一个简单的交互案例。例如，用Axuro做一个登录页的原型，交互效果是一一用户在登录页面输入密码，然后单击“下一步”按钮。这时分两种情况，如图4-2所示：•如果用户输入了正确的密码，则跳转到下一个页面（显示“登录成功”）；•如果用户输入了错误的密码，则弹出“密码错误”提示窗口。鉀刪！图4-2输入密码流程1.用户操作产生“触发事件”。•用户输入密码，“输入框”产生了一个“文本改变”的触发事件；•用户单击“下一步”按钮，“按钮”产

4、生了一个“鼠标单击”的触发事件。2.Axure查找事件对应的“用例”。针对下一步按钮的“鼠标单击”事件，有两个用例一一用例1、用例2,分别实现输入正确和输入错误这两种悄况。3.执行用例前先检查“条件”o用例1的条件是用户密码输入止确。用例2的条件是用户密码输入错误。4.执行用例的“交互动作”o用例1的交互动作是一一跳转到“登录成功”页面。用例2的交互动作是一一弹出“密码错误”窗口。下面会一步一步把这个例子从零开始做一遍，同时把四个概念讲清楚。后文的所有案例都会按这四个概念的顺序讲解。4.1.3触发事件用户操作会产生触发事件，例如单击、拖拽等。先来看看在Axur

5、e中“事件”这个概念是怎么体现的。(1)打开Axure；(2)添加一个文字元件、一个输入框元件、一个矩形元件；(3)简单设置元件样式；(4)选中矩形元件，如图4-3中的左图所示；(5)观察“属性”区域，如图4-3中的右图所示。■■■■1下卡图4-1矩形元件的事件图中红框屮的就是“事件”一一“鼠标单击时”、“鼠标移入时”、"鼠标移出时”……事件有个特点，就是名字都以“时”字结尾。“事件”的作用就如其名，事件可以用来是控制交互效果发生的“时机”。例如：•要让单击“注册”按钮时产生交互效果。就要在按钮的“鼠标单击时”事件中添加用例。•要让鼠标移动到按钮上时产生交互效

6、果。就要在“鼠标移入时”中添加用例。Axure屮有很多种事件。先看看矩形元件有哪些事件。选中矩形元件，单击“更多事件”按钮，可以看到如图4-4所示的菜单。鼠标操作产生的事件键盘操作产生的事件元件变化产生的事件图4・2矩形元件的更多事件其中，鼠标产生的事件和键盘操作产生的事件都比较好理解。1.元件变化产生的事件下血主要介绍“元件变化产生的事件”。•移动：是指元件位置坐标发生变化。通常发牛在元件被拖拽时。•旋转：是指元件发生顺时针或逆时针转动。执行交互动作“旋转”时会触发这个事件。•尺寸改变：是指元件宽度、高度发空改变。执行交互动作“设置尺寸”时会触发这个事件。•

7、显示、隐藏：是指元件是否能被用户所见。执行交互动作“显示/隐藏元件”或“切换可见性”吋会触发这个事件。•获取焦点、失去焦点：是指选中了某个元件。比如单击输入框，输入框中出现光标了，这就是获取焦点了。如果此时再点一下其他区域，输入框中不再显示光标了，那就是失去焦点了。•载入时：是指刚打开原型页面，页血上的元件刚刚加载出来时触发的事件。提示：在手机上看原型时，手指单击相当于鼠标单击，手指长按相当于鼠标长按。“矩形元件”中包含了大多数元件通用的事件。除此之外，一些特殊类型的元件会产生独特的事件，2.一些特殊类型的元件产生的事件例如：•单选按钮元件会产生事件：“选中时

8、”、“取消选中时”，如图4-5所示。选