Axure RP 8怎么设计立体的圆角矩形按钮?

一、利用Axure RP 8自带元件设计立体圆角矩形按钮

1. 创建按钮元件
   • 双击打开Axure RP 8软件工具，在基本元件中拖曳一个按钮到空白页，修改默认的文字内容，如将其改为“查询”等需要在按钮上显示的文字。
2. 调整按钮尺寸和位置
   • 将按钮的宽度和高度分别调成合适的数值，例如200*60，并调整坐标位置，使其处于合适的页面布局位置。
3. 设置填充颜色
   • 选中按钮元件，设置填充的颜色为想要的颜色，例如蓝色，然后保存原型图。
4. 调整按钮上显示内容字体大小及圆角半径
   • 根据需求调整按钮上显示内容字体大小，然后将按钮角度半径调成合适的值，如10，使按钮成为圆角矩形按钮。
5. 设置阴影效果
   • 设置按钮的阴影模糊角色、颜色和范围，将不透明度调成80%，阴影可以增加按钮的立体感，使其看起来像是立体的按钮。
6. 去除边框
   • 选中按钮元件，去掉按钮元件的边框，再次保存之后，预览该页面模型，就可以看到设计好的立体的圆角矩形按钮了。

二、利用矩形组件制作立体圆角矩形按钮

1. 创建矩形并调整为圆角矩形
   • 拖动矩形组件到页面编辑区域。在Axure RP 8中，对于不同版本调整圆角的方式有所不同，如在Axure2022可以调节右侧的数值直接更改圆角的大小程度，也可以打开右侧设置栏，针对某一个角进行改变圆角大小，选中的部分呈现蓝色，不选中的是白色，然后对选择的部分进行调节圆角角度；在早期版本可以将鼠标移动到矩形元件左上角有一个向下的三角形那边，然后拖动来设置圆角，也可以直接在样式面板中设置圆角的大小，将矩形调整为圆角矩形形状。
2. 设置填充颜色和立体效果相关属性
   • 选中刚刚调整好的圆角矩形，设置填充的颜色为想要的颜色，如蓝色。
   • 通过设置阴影模糊角色、颜色和范围、不透明度等属性来增加立体效果，例如设置阴影模糊值、选择合适的阴影颜色、调整阴影范围，并将不透明度设置为80%左右，使其看起来具有立体感，就像立体的按钮了。