Axure进阶修炼---常用技巧记录手册

 合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。知识和能力是一点一点积累起来的,要留意有扎实的基础,要留意温习和巩固,不能急于求成。

不怕读得少,只怕记不牢

 看到我作图的很多人,都会对我说一句:“呀!RP都会用啊~我之前也用过! 这个不难,一会儿就学会了~”So......确实是很容易上手的一个工具软件,但它不是叫Axure吗?

 这次的学习视频实在B站上找的,虽然是基础到不能再基础的内容,然而受益颇多,up主非常认真,做了很多的web网站和app界面,为了纪念这九十多节课,所以决定将比较常用的技术记录下来,方便日后查看并与君共享。

1. 富文本

设置字体效果时使用。比如想要鼠标移入时设置字体变大:

点击鼠标移入时 ->添加动作:设置文本 -> 配置动作:选择设置文本的元件 ->设置文本为:富文本  -> 设置文本:编辑文本 -> 即可在下图编辑框中设置文字效果

注意:编辑文本弹出框弹出后要想编辑文本样式,一定要将弹出框输入文本中的字体全选之后才能进行编辑,否则无效,如下要选中“三级标题”这四个字,然后再选择字体加粗、颜色等样式,点击确定后即可生效。

图1.1

2. 灯箱

灯箱效果可以呈现出弹出框后面出现全屏遮挡罩的效果,方便:

鼠标单击时 -> 添加动作:显示-> 配置动作:选择要显示的内容 -> 更多选项:灯箱效果-> 确定即可

图2.1

3. 母版

母版的使用可以减少不同页面相同内容的制作时间,每个页面重复的部分设置为模板,其他页面直接拖拽过来即可使用:

选择想要设置母版的内容,右键 -> 转换为模板 -> 可以选择使用母版时的放置位置 -> 点击继续即可

注意:在设置母版和使用母版之后,要右键选择脱离母版,才可以对母版内容进行编辑。

图3.1
图3.2

4. 固定悬浮

如果想要设置一直悬浮在页面某个部位的内容,可使用该功能,比如置顶图标、联系客服等功能按钮等:

选择想要设置悬浮的动态面板,右键 -> 弹出框中设置上下左右居中位置 -> 点击确定即可

注意:

(1)这里设置固定悬浮的元件,一定是动态面板,其他元件没有此功能;

(2)如下图所示可知,元件一开始的位是“67,66”,设置固定到浏览器后默认“左,上”这个位置,但是坐标不能更改,如果设置到其他固定位置,是可以更改坐标的。

图4.1
图4.2

5. 滚动到部件(锚点链接)

点击某一元件,整个页面滚动到某一位置。例如:点击置顶按钮,页面滚动到顶部:

选择置顶按钮,鼠标单击时 ->  添加动作:滚动到元件<锚链接>  -> 配置动作:要滚动到那个位置的元件名称  ->  选择滚动方式 ->  点击确定即可

图5.1

6. 对齐分布

设置图片位置的绝佳利器:

全选要对齐的内容  ->  分布:水平分布

全选要对齐的内容  ->  对齐:上下居中

这样这四个图标就均匀对齐的分布了。

注意:四个图标只在第一个和第四个之间的距离平均分布哦。

图6.1
图6.2

7. 元件库

这是个好东西啊!在网上找现成的元件库下载,然后载入,直接用,很多大神都做好了许多功能元件或者常用小图标,简直是小白利器!

单击元件库右侧三条小杠杠的按钮 -> 选择载入元件库  -> 选择下载好的rplib结尾的元件库文件进行载入

注意:百度搜索小楼老师的元件库,做的很漂亮很实用呢!

图7.1
图7.2

8. 上下左右滑动回到原位置

二级导航或其他内容显示不全,可以用此方法,上下左右滑动查看:

选取动态面板  -> 点击拖动时 -> 添加动作:移动时  -> 配置动作:选取动态面板  -> 移动:垂直拖动 -> 点击确定;这步是保证动态面板可以上下移动

选取动态面板  -> 点击拖动时结束时 ->  点击添加条件 -> 第一个条件选择“值”,第二个点击“f(x)”,如图设置条件,找到“元件”,选择“y”,第四个条件选择“>”, 最后一个条件输入“400” -> 添加动作:移动时 -> 配置动作:动态面板 ,选择移动方式,这里选择回到拖动前的位置;这步的意思是,如果动态面板移动到向下400的位置时,动态面板会移动回到拖动前所在的位置。

图8.1
图8.2
图8.3
图8.4
图8.5
图8.6
图8.7

9.滑动到某一位置出现某元件

步骤:

制作一个长一点的背景,确保页面能够下滑,在x:400下面设置一个隐藏的图片;

点击页面滚动时 ->  选择添加条件 -> 第一个选择“值”,第二个选择“f(x)”,在弹出框中点击“插入变量或函数”,选择窗口下面的window.scrollY,第三个选择大于号,最后一个添加数字400,点击确定 -> 添加动作:显示 -> 配置动作:图片 -> 点击确定即可;

预览出的效果是往下滑动窗口到400的时候,显示图片,如果向上滑动想让图片消失,可以在窗口滚动时添加case2,设置隐藏图片即可。

图9.1
图9.2
图9.3
图9.4
图9.5

10. 变量传递

网站登录后到首页,会出现欢迎信息“用户xxx,您好!”,这个用户昵称,来自登录网页的用户输入内容,这个变量值实现了在网页间的传递:

设置如图元件,将文本框命名为usernameinput,并且在项目 -> 全局变量中新建全局变量username -> 点击登录按钮,添加用例,选取当鼠标单击时 -> 添加动作:设置变量值 -> 配置动作:勾选username -> 点击右下角f(x),在弹出框下方添加局部变量中,最后一个选择框选择usernameinput这个选项,这一步是将usernameinput这个文本框中的文字赋予局部变量LVAR1,然后在上面插入变量或函数中,选择局部变量LVAR1,点击确定即可 ->  然后选择打开链接到page1页面;

打开page1页面,拖选一个矩形框,命名为c,添加用例:页面载入时  ->  添加动作:设置文本 -> 配置动作:矩形c,点击右下角f(x),在弹出框插入变量或函数中,输入文字:用户 x x x您好!将xxx处插入全局变量username替代,点击确定即可。

这样我们在index页面输入的用户名就会传递到page页面了。

图10.1
图10.2
图10.3
图10.4

11. 中继器

中继器真的是个很牛的元件,列表类的内容,还有类似数据库增删改查的功能它都可以实现,下面简单演示一下,有兴趣想深入学习的朋友可以找找相关视频看看:

从元件库中拽入一个中继器元件,在右侧中继器列表中插入数据 -> 双击中继器列表进入中继器页面 -> 删除原有的方框,编辑显示的内容布局  ->  如图所示将四个文本框命名 -> 添加用例:每项加载时 -> 添加动作:设置文本 -> 勾选文本框:sexinput -> 单击右下角f(x),在弹出框插入变量或函数中,选择中继器Item.sex -> 单击确定 -> 将四个值都绑定后即可出现以下效果。

注意:中继器中插入的行标题,只能是英文。

图11.1
图11.2
图11.3
图11.4

快捷键:

快速复制:Ctrl+D

撤销:Ctrl+Z

重做:Ctrl+Y

替换:Ctrl+H

隐藏网格:Ctrl+'

生成原型预览:F5

生成原型文件:F8

在原型中重新生成当前页面:Ctrl+F8

对齐网格:Ctrl+Shift+'

对齐辅助线:Ctrl+Shift+,

隐藏全局辅助线:Ctrl+.

隐藏页面辅助线:Ctrl+,

除上述以外,还有一些其他的小内容需要掌握,比如在颜色选择上,PM最好选取不超过三个颜色,最好使用灰色绘制,这样可以避免干扰和限制美工小姐姐的思路,;为了突出页面重点内容,可以设置大小、样式不同的按钮加以区分等;有些小一点的图标除了元件库之外,还可以去阿里矢量图网站上找;动态面板有很多其他元件没有的功能,还可以制作轮播图、切换的头部标签等;如果热区添加后,在网页上点击出现篮框,那是浏览器的锅,Axure表示不背哦~