关于交互设计（Axure）的一些简单流程

Axure的预览链接：https://dmu9a8.axshare.com

Axure的介绍

一、Axure的绘图方法比ps要简单许多，在下图左下角的元件库里面可以选择你需要的元件，然后摁住鼠标拖动到画面中去，在右上角的xywh参数值处可以调整所需要的元件的参数。元件库里面有各种各样的形状，分为以下几种类型。

二、元件库的上面就是所需要绘制的图的一些思维导图和包含关系，可以使用XMind软件将思维导图理清楚再在Axure里面添加。右键即可添加。

三、检视部分可以用来添加链接、更近一步的更改图形的样式等等。

四、概要部分和ps里面的图层有点相似。可以这么理解。

五、工具栏可以更改图形或文字等的各种参数。

关于Axure的一些注意事项

一、在Axure里面摁住ctrl+鼠标滚轮是放大和缩小，摁住ctrl拖动图像可以复制。
二、摁住空格+鼠标左键拖动画面。
三、在对齐和排列命令是以先选中的图像为主。
四、Axure是用来绘制原型图的，在绘制原型图的时候最重要的是要保持比例的大小。
五、右键设计交互样式，然后再检视部分添加链接最后F5预览可生成链接。

关于上面的链接所涉及的操作

一、基本操作

由于750* 1334页面过大，先新建一个320* 568的矩形，这个部分是使用的一组高保真组件。

然后再下面创建320*44的矩形，拖动文本标签，在这里设置好文本的参数，使用对齐命令，将文本在之前创立的矩形中水平居中对齐。

再拖住一个矩形，在选中的前提下摁住左上角的这个部分往里拖可以变成圆角，当然也可以在检视的样式处进行圆角的数值设置，四个角都可以更改，也可以单独更改。单击选中，单击取消。

绘制的时候要确定大概的位置，不用太精确，因为Axure的交互设计只是给UI设计师做一个参考。

在这下面绘制一条分割线，可以使用基本元件里面的水平线，也可以将矩形的h调为1px。分割线的颜色不用太深。

这三个矩形其实都是一样的，看你习惯用哪个来表示什么而已。而且可以在工具栏更改它们的参数。

继续绘制出广告位，给到320*144的大小，紧贴着放在下面。
接下来是星巴克的热销饮品或食物。
注意比例和位置，同一列的要对齐。

比如精品饮料和后面的矩形要一起调整时可以同时选中然后ctrl+g打组，然后单击选中它们，进行调整。右键取消打组。
其他的部分都是一样的。绘制出来的首页大概就完成了，其余的页面的基本操作上面都提及了。

二、交互操作

在菜单列表选择购买的时候会弹出这个页面。

要实现选中或者鼠标掠过等等的样式，可以在选中图像的同时右键，找到交互样式，在弹出的窗口进行设置。

比如点击这个按钮可以变化成这种样式可以这样设计：在只选中字体的前提下右键-交互样式-选中标签下-字体颜色：白色；在只选中矩形框的前提下右键-交互样式-选中标签下-填充颜色：绿色（#009900）

将字体框和矩形框成组，在检视窗口处-属性-鼠标单击时：双击进去-设置选中-选中，将要实现的组的前面打勾（这个时候一定要在之前就命名，不然会出现找不到自己要设置的组的情况：在选中组的前提下，检视下面会显示组的名字，单击进去就可以更改。），然后再设置选中状态中分别选中值和toggl。（true的意思是确定，false的意思的取消，toggle的意思是循环。在用户选中的时候如果想取消，如果这个时候设置的是true则无法取消，如果是toggle则可以取消。）
在一些单选的选项时，不能只设置一组，要将其他的组设置为false，就能实现单选的情况，当然不要忘记要其他的组的除本身外都设置为false。

要实现单击某个按钮跳转到另一个画面则需要添加链接。
在选中需要操作的图形下，在检视窗口找到创建链接，在弹出来的页面进行选择就可以了。

创建完毕会生成这个画面，双击进去能进行再次修改。

三、其他功能

1. 如果要在没有按钮或者没有图像或几个没有成组的图像的情况下创建链接，则需要用到元件库里面的一个工具：热区。

将热区拖动至画面中，设置需要点击的大小，然后在选中热区的情况下，在检视窗口创建链接即可。（不用担心热区的颜色，在生成的页面中，它会自动变成透明色。）

2. 实现外部链接的接入：内联框架

将内联框架拖动至画面中，然后双击进去选中链接到url或文件，输入超链接即可。