首页 > 产品经理必会工具Axure元件之样式
头像
人人都是产品学徒
编辑于 2021-02-01 16:03
+ 关注

产品经理必会工具Axure元件之样式

内容摘要:元件样式分为九大功能,分别为元件名称、元件位置/尺寸….,本文将对这九大功能一次展开进行讲解。
我文章中提到的我汇总的文件,内容实在太多。关注公众号:人人都是产品学徒    ,里面可以免费领取

元件名称

元件名称通常为英文名称,采用驼峰式的编写方式。

编写规则为 元件用途+元件类型+元件序号。

例如:UsernameInput01 表示的含义为 序号为01的用户名输入框。

建议大家都写上名称,就像是给代码打上注释一样,方便大家以后再设置交互的时候可以快速找到该元件。


元件位置/尺寸

元件的位置为元件的左上角相对于画布左上角的位置的距离。

X表示横坐标的距离

Y表示纵坐标的距离

W表示元件的宽度

H表示元件的高度

当我们选择蓝色的小锁头的时候,高度和宽度的变化会随着比例的变化而变化。

可以通过修改旋转的数值来修改元件的旋转的角度(旋转角度为顺时针旋转),当然,我们也可以通过ctrl+左键,点击元件节点进行旋转。


通过修改小眼睛的状态来进行是否可见,默认情况下元件隐藏后会在编辑区县市淡黄色阴影。


元件样式

将元件拖入画布后,默认会给一个元件样式,默认的样式为该元件的样式,也可以通过修改样式来完成样式的修改,例如我需要元件的外形为矩形,但是它有一级标题的属性,则可以通过修改来实现。


通过修改透明性来修改元件内部的透明性,默认为100%显示,当透明性为0%时为元件不显示。



元件排版

元件排版是对元件内部输入的文字进行排版,类似于word中的排版工具,特别要注意的是axure中 提供了阴影工具,可以通过阴影来实现立体的效果。


元件填充

Axure支持元件的填充,填充包括颜色填充和图片填充。


颜色填充包括:

单色填充:应用场景为纯色的banner

线性填充:应用场景为渐变色

径向填充:应用场景为以某一点为扩展的渐变色

通过RGB来调节填充色,类似于画图工具


图片填充支持重复、不重复、填充等多种形式。


元件阴影

元件阴影分为内部阴影和外部阴影,通过调节阴影与元件之间的位置来显示出不同的状态。通过调节阴影的模糊状态调整阴影的效果。

多用于立体效果的呈现。


元件线段

元件的线段支持多种不同种类的线段,通过修改类型来调整实线、虚线等。

通过修改线宽和颜色可以制作出相框效果。


矩形的边框可以在样式中设置显示全部或部分。


元件圆角

可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现


也可以通过调整一个角是否可见来控制圆角的变化形式。


元件边距

元件边距是指元件中的文字到形状边缘的距离,通过填充空隙来实现。

全部评论

(4) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期精华帖

热门推荐