Axure交互设计操作（一）

写在前面，

因为工作需要，需要利用Axure进行网站的原型设计，现在把一些遇到的交互案例和操作办法进行一个汇总，算一个简单的教程，以及以后的操作手册。（使用软件：Axure 8）

基础的其实很容易学会，操作无非就是拖动一个个原件完成页面布局。
刚开始的时候可以从静态页面开始，熟悉网站布局的框架，一般在某个区域需要进行什么样子的交互；然后熟悉每个控件的名字，比如什么叫动态面板，可以做什么。
做交互的时候，可以直接找一些网站来练习而不是网上那些案例，先把网站的静态布局做出来，可以用占位符先替代，然后看原网站每个区域都有什么样的交互，尝试用Axure做出来，这个时候会有具体的问题，按照自己的思考，根据自己了解的控件功能尝试解决，实在不行可以求助。当然在练习的时候尽最大可能的做高保真，Axure功能强大，基本上所有能想到的交互都可以实现。

最后再考虑产品的风格，简约至上，Axure只是一个帮你实现自己产品想法的一个工具，真正的好产品不必过于追求视觉表现。
从设计上来讲更重要的是想法、逻辑和思路（还有交互流程、页面内交互、布局结构的创新和优化等等）；
从上班角度讲就是要注重效率，怎么把模块做成可以复用的模块，怎么让一组人原型设计风格一致，组件格式统一，怎么通过Axure完成一个多人协作项目。

好了，下面开始总结：

1、鼠标移入文本变色、图片变色

image.png

1）可以使用动态面板；2）文字类的可以从右侧交互设计栏中，选择鼠标悬停字体颜色改变；

2、菜单栏鼠标移入显示二级菜单，附加动画效果，二级菜单字体变色

image.png
用动态面板作为二级菜单，在state1中做好二级菜单的内容，然后字体变色如例1两种办法，动态面板设置为隐藏；
一级菜单栏首先添加交互鼠标悬停变色（也可以用动态面板，鼠标移入进入state2状态，可以加入别的交互），添加用例鼠标移入显示，并且可以加入动画效果。加入移入事件时，注意对应的加入移出事件。
image.png

3、下拉搜索框，选中类别，在搜索框中有相应文本提示

image.png

Axure基本控件里就有下拉框，我这里直接用了。动态面版作为搜索框，中间加上一行文本，下拉框中有几个选项就对应设置几个面板状态。在下拉框中选中某个选项的时候，显示对应的动态面板状态。

image.png
移入照相图标，图片变色，点击图片打开文件。
可以使用动态面板，两个状态，移入触发状态2，显示state2中的相应图片；点击图片时，添加用例，鼠标单击时，打开文件夹。
image.png

4、这个说下自动显示大图

image.png

用动态面板做成大图，设置隐藏；然后小图加入鼠标移事件，移入显示大图。

image.png

5、轮播交互效果

我们要知道网页的整体布局，当一个网页加载成功时，它的轮播图一般都是直接显示一定时间，然后才变化，而且每次图片变化之后都要等待一定时间。用动态面板来实现，你所设置的轮播图有几张图片，那这个动态面板就需要几个状态，轮播效果其实就是在这个几个状态之间切换的效果。载入时添加用例先等待一段时间来展示，然后在几张图片之间切换，状态Next就是下一个，设置循环，就不会停止，再加入动画效果，让这个交互看起来更舒服。

image.png

上一篇：暂无
下一篇：Axure交互设计操作（二）