合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。知识和能力是一点一点积累起来的,要留意有扎实的基础,要留意温习和巩固,不能急于求成。
看到我作图的很多人,都会对我说一句:“呀!RP都会用啊~我之前也用过! 这个不难,一会儿就学会了~”So......确实是很容易上手的一个工具软件,但它不是叫Axure吗?
这次的学习视频实在B站上找的,虽然是基础到不能再基础的内容,然而受益颇多,up主非常认真,做了很多的web网站和app界面,为了纪念这九十多节课,所以决定将比较常用的技术记录下来,方便日后查看并与君共享。
1. 富文本
设置字体效果时使用。比如想要鼠标移入时设置字体变大:
点击鼠标移入时 ->添加动作:设置文本 -> 配置动作:选择设置文本的元件 ->设置文本为:富文本 -> 设置文本:编辑文本 -> 即可在下图编辑框中设置文字效果
注意:编辑文本弹出框弹出后要想编辑文本样式,一定要将弹出框输入文本中的字体全选之后才能进行编辑,否则无效,如下要选中“三级标题”这四个字,然后再选择字体加粗、颜色等样式,点击确定后即可生效。
2. 灯箱
灯箱效果可以呈现出弹出框后面出现全屏遮挡罩的效果,方便:
鼠标单击时 -> 添加动作:显示-> 配置动作:选择要显示的内容 -> 更多选项:灯箱效果-> 确定即可
3. 母版
母版的使用可以减少不同页面相同内容的制作时间,每个页面重复的部分设置为模板,其他页面直接拖拽过来即可使用:
选择想要设置母版的内容,右键 -> 转换为模板 -> 可以选择使用母版时的放置位置 -> 点击继续即可
注意:在设置母版和使用母版之后,要右键选择脱离母版,才可以对母版内容进行编辑。
4. 固定悬浮
如果想要设置一直悬浮在页面某个部位的内容,可使用该功能,比如置顶图标、联系客服等功能按钮等:
选择想要设置悬浮的动态面板,右键 -> 弹出框中设置上下左右居中位置 -> 点击确定即可
注意:
(1)这里设置固定悬浮的元件,一定是动态面板,其他元件没有此功能;
(2)如下图所示可知,元件一开始的位是“67,66”,设置固定到浏览器后默认“左,上”这个位置,但是坐标不能更改,如果设置到其他固定位置,是可以更改坐标的。
5. 滚动到部件(锚点链接)
点击某一元件,整个页面滚动到某一位置。例如:点击置顶按钮,页面滚动到顶部:
选择置顶按钮,鼠标单击时 -> 添加动作:滚动到元件<锚链接> -> 配置动作:要滚动到那个位置的元件名称 -> 选择滚动方式 -> 点击确定即可
6. 对齐分布
设置图片位置的绝佳利器:
全选要对齐的内容 -> 分布:水平分布
全选要对齐的内容 -> 对齐:上下居中
这样这四个图标就均匀对齐的分布了。
注意:四个图标只在第一个和第四个之间的距离平均分布哦。
7. 元件库
这是个好东西啊!在网上找现成的元件库下载,然后载入,直接用,很多大神都做好了许多功能元件或者常用小图标,简直是小白利器!
单击元件库右侧三条小杠杠的按钮 -> 选择载入元件库 -> 选择下载好的rplib结尾的元件库文件进行载入
注意:百度搜索小楼老师的元件库,做的很漂亮很实用呢!
8. 上下左右滑动回到原位置
二级导航或其他内容显示不全,可以用此方法,上下左右滑动查看:
选取动态面板 -> 点击拖动时 -> 添加动作:移动时 -> 配置动作:选取动态面板 -> 移动:垂直拖动 -> 点击确定;这步是保证动态面板可以上下移动
选取动态面板 -> 点击拖动时结束时 -> 点击添加条件 -> 第一个条件选择“值”,第二个点击“f(x)”,如图设置条件,找到“元件”,选择“y”,第四个条件选择“>”, 最后一个条件输入“400” -> 添加动作:移动时 -> 配置动作:动态面板 ,选择移动方式,这里选择回到拖动前的位置;这步的意思是,如果动态面板移动到向下400的位置时,动态面板会移动回到拖动前所在的位置。
9.滑动到某一位置出现某元件
步骤:
制作一个长一点的背景,确保页面能够下滑,在x:400下面设置一个隐藏的图片;
点击页面滚动时 -> 选择添加条件 -> 第一个选择“值”,第二个选择“f(x)”,在弹出框中点击“插入变量或函数”,选择窗口下面的window.scrollY,第三个选择大于号,最后一个添加数字400,点击确定 -> 添加动作:显示 -> 配置动作:图片 -> 点击确定即可;
预览出的效果是往下滑动窗口到400的时候,显示图片,如果向上滑动想让图片消失,可以在窗口滚动时添加case2,设置隐藏图片即可。
10. 变量传递
网站登录后到首页,会出现欢迎信息“用户xxx,您好!”,这个用户昵称,来自登录网页的用户输入内容,这个变量值实现了在网页间的传递:
设置如图元件,将文本框命名为usernameinput,并且在项目 -> 全局变量中新建全局变量username -> 点击登录按钮,添加用例,选取当鼠标单击时 -> 添加动作:设置变量值 -> 配置动作:勾选username -> 点击右下角f(x),在弹出框下方添加局部变量中,最后一个选择框选择usernameinput这个选项,这一步是将usernameinput这个文本框中的文字赋予局部变量LVAR1,然后在上面插入变量或函数中,选择局部变量LVAR1,点击确定即可 -> 然后选择打开链接到page1页面;
打开page1页面,拖选一个矩形框,命名为c,添加用例:页面载入时 -> 添加动作:设置文本 -> 配置动作:矩形c,点击右下角f(x),在弹出框插入变量或函数中,输入文字:用户 x x x您好!将xxx处插入全局变量username替代,点击确定即可。
这样我们在index页面输入的用户名就会传递到page页面了。
11. 中继器
中继器真的是个很牛的元件,列表类的内容,还有类似数据库增删改查的功能它都可以实现,下面简单演示一下,有兴趣想深入学习的朋友可以找找相关视频看看:
从元件库中拽入一个中继器元件,在右侧中继器列表中插入数据 -> 双击中继器列表进入中继器页面 -> 删除原有的方框,编辑显示的内容布局 -> 如图所示将四个文本框命名 -> 添加用例:每项加载时 -> 添加动作:设置文本 -> 勾选文本框:sexinput -> 单击右下角f(x),在弹出框插入变量或函数中,选择中继器Item.sex -> 单击确定 -> 将四个值都绑定后即可出现以下效果。
注意:中继器中插入的行标题,只能是英文。
快捷键:
快速复制:Ctrl+D
撤销:Ctrl+Z
重做:Ctrl+Y
替换:Ctrl+H
隐藏网格:Ctrl+'
生成原型预览:F5
生成原型文件:F8
在原型中重新生成当前页面:Ctrl+F8
对齐网格:Ctrl+Shift+'
对齐辅助线:Ctrl+Shift+,
隐藏全局辅助线:Ctrl+.
隐藏页面辅助线:Ctrl+,
除上述以外,还有一些其他的小内容需要掌握,比如在颜色选择上,PM最好选取不超过三个颜色,最好使用灰色绘制,这样可以避免干扰和限制美工小姐姐的思路,;为了突出页面重点内容,可以设置大小、样式不同的按钮加以区分等;有些小一点的图标除了元件库之外,还可以去阿里矢量图网站上找;动态面板有很多其他元件没有的功能,还可以制作轮播图、切换的头部标签等;如果热区添加后,在网页上点击出现篮框,那是浏览器的锅,Axure表示不背哦~