从矩形框开始说起

矩形框是最简单的组件，也是最有用的组件之一，可别小看它，通过灵活地使用方法，你可以用它来做很多事。

1、基本样式设置

就是设置矩形组件的交互样式，这样通过简单的设置就能模拟很好的按钮点击效果了。好，我们来试一下：

拖一个矩形框到右边的页面上，矩形的样式别搞默认黑色的太土了吧叽的，比如给它设置一下边框颜色：

好，右键组件弹出菜单，选择“交互样式...”开始设置。

我们一般只要设置鼠标悬停时和鼠标按键按下时两种状态就行了。

1）、鼠标悬停时

看看属性，要设置的挺多，也用不着，就设置一下填充颜色，如果你喜欢尝试，可以试试其它的属性，都一个意思

2）鼠标按键按下时

切换到另外一个TAB页面，设置一下鼠标左键按下时的效果，为了区分当然会搞一个不一样的颜色，这里设置一下比经过时的颜色深一点的灰色

好了，鼠标移到这里预览一下：

或者，直接F5键在浏览器里预览一下。

扩展：在交互样式里同样可以设置禁用和选中的状态，禁用当然就是你设置它的enabled=false的状态，选中这个效果在表现切换状态效果时特别有用，后面会涉及到这块。其它这两个状态简单，但也特别好用，在界面上表现一些状态时效果很好。

这样，你只要通过简单设置矩形框的交互样式就可以完成按钮的效果了，连事件都用不上，你甚至可以把它做一个自定义的组件，免得每次设置。

2、化身为按钮

前上面的第一点你可以看得出来，矩形框多数情况下被用来当作按钮使用，因为很好用，设置背景色、边框、渐变背景色、圆角等属性，就能做一个完美的按钮了。

3、和其它形状组合使用

有时候我们想表现一个特别的形状，因为它有可能是不规则的，所以现有的组件没有一个能满足，这时候就要想办法使用多个形状来组合实现，最后把它Ctrl+G后放到一个组里形成复杂的组件。举个栗子吧：

比如我想要下面的一个图标，可是我又不会PS来搞，度娘也没度到合适的图标，不行就自己在axure里搞一下吧。

比如这个放大镜图标，怎么实现呢？把它拆解一下，不就是一个圆和一条线嘛，那就用两个形状组件。拖一个矩形到设计界面上，把形状改成椭圆形（当然，你要把它调成圆形的），再拖一个水平或者垂直线到界面上，剩下的就是设置它们的属性，线条宽带、颜色、以及角度，注意，形状都可以旋转的！(ctrl键+鼠标移到最边上的选中点会出现旋转鼠标样式)

照葫芦画瓢，其实很多图标都可以使用几个形状组合而成。

4、添加事件支持

常用的事件当然是单击事件了，添加了事件支持才是真正体现交互效果的时候，原型图的效果就是要能体现你点击后的响应。

5、巧用选中状态

形状的选中状态非常用用，典型的例子是做一个开关组件，你也可以使用动态面板来实现，但是动态面板来得比这个复杂。

下面看个最简单的例子：

1）设置形状的样式

为了表现选中状态的样式，这里除了设置背景色外，也添加了内阴影效果

2）添加事件支持

需要用户在点击这个圆时能在两个状态间切换（给组件起个名字——开关）

F5预览一下吧！

最后，还是要小结一下，别看矩形简单，其实通过设置样式，形状，加上事件的支持，它以完成很多的功能。

希望能给你一点思路。

（完）

Axure原型设计工场——让每个产品经理都熟练使用axure