Axure教程:使用内联框架来实现页面滚动附小案例

2018-07-1810:06:10原型设计Comments3,295 views字数 2089阅读模式

看看 天猫 首页 顶部栏 的效果 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

(以上图片已是上传的极限, 各位看官要是看不清,请自行下载天猫,打开首页观看)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

所以今天我们就拿天猫首页的顶部栏为例子,来讲解在 Axure 里面是如何制作的 !!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

一、准备元件

先看图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

(以上图片分三部分讲,背景元件色值为:#E4E4E4,下面不重复讲)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

1.首先新建 Axure 文件,顶部电量条可由大家随意制作( w:375 ,h:20 ),如果有相关组件库的小伙伴可直接拖入 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

2.顶部栏区域,拖进一个元件当做背景( w:375 ,h:44 ),从 阿里巴巴矢量图标库 ( http://www.iconfont.cn )下载以下 icon 如图摆放即可 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

3.在顶部栏区域的下面,拖进一个元件当做背景( w:375 ,h:44 ),再在该元件上面放置一个纯白色矩形( w:335 ,h:30 ),命名:“ 输入框背景 ”、一个文本框( w:290 ,h:28 ),命名:“ 输入框 ” 、一个搜索 icon ( w:14 ,h:14 ),命名:“ 搜索 icon ” 。把 输入框背景、输入框、搜索icon 选中右键点击组合,命名:“ 输入框控件 ” ,完成 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

完成以上的元件准备,然后我们先把他放置在一旁,等待使用…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

4.然后把第一个页面命名为:“ 外页 ” ,在新增一个页面命名为:“ 内页 ” ,拖动 “ 内页 ” 为 “ 外页 ” 的子级,如图 :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

5.然后我们双击进入 外页 的页面,从左侧组件库拖进一个内联框架( w:375 ,h:667 ),为了美观我们在这个内联框架底部再拖进一个矩形( w:377 ,h:669 ),然后我们点击内联框架,在右侧属性 – 内联框架 – 选择框架目标 – 内页 – 确定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

继续点击内联框架,右键点击 – 转换成动态面板 ,把该面板“ 自动调整为内容尺寸 ”,然后进入该动态面板,把内联框架的宽高都增加 17 px,如图 :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

6.把刚才步骤 1 – 3 的内容,放入到内页里面( x :0 ,y :0 ),内页的内容比较紧靠左上角,这样才不会出现待会移动的时候体验不好,如图 :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

7.全选以上图片所有内容,右键点击 转换为动态面板 ,在右侧属性设置 – 固定在浏览器 – 水平固定:左 、垂直固定:上 。如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

8.然后我们在该原型的下方任意放置矩形,在每个矩形里添加 1、2、3 文字,增加识别度 :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

完成以上的所有部分,可以先生成预览看一下效果了 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

以上就做好了所有的元件准备,内容比较多( 因为有些小伙伴刚接触 Axure ,拆分得比较细,各位老司机将就一下 ~ ),弄完之后我们就可以开始下一步操作了 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

二、设置交互用例

1.双击进入内页,在页面的空白处设置 窗口滚动时(Case 1) :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

a.设置条件:值 – [[Window.scrollY]] – 大于等于 – 5 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

b.移动输入框控件 – 移动:绝对 – x 为:60 ,y 为:27 – 动画:线性 – 时间:250 毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

c.设置尺寸:“ 输入框 ” w :170 ,h :28 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 、“ 输入框背景 ” w :215 ,h :30 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

d.设置 “ 背景 ” – 隐藏 – 动画:向上滑动 – 时间:500毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

2.双击进入内页,在页面的空白处设置 窗口滚动时(Case 2) :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

a.设置条件:值 – [[Window.scrollY]] – 小于 – 5 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

b.设置 “ 背景 ” – 显示 – 动画:向下滑动 – 时间:500毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

c.移动输入框控件 – 移动:绝对 – x 为:20 ,y 为:71 – 动画:线性 – 时间:250 毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

d.设置尺寸:“ 输入框 ” w :290 ,h :28 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 、“ 输入框背景 ” w :335 ,h :30 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

以上完成之后就可以得到以下效果了,是不是很简单?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

然后我们完成以上步骤之后,我们还可以在该页面的下面放置一个 “ 返回顶部 ” 的 icon ,意为:当我们下滑到一定位置时,显示 “ 返回顶部 ” icon ,点击该 icon 时,返回至顶部并隐藏 “ 返回顶部 ” icon …文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

下面我们来开始制作 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

三、进阶

1.从左侧元件库拉出一条横向水平线,长度小于 375 px 即可,命名为:“ 顶部 ” ,然后置于底层;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

2.拉入一个作为 “ 返回顶部 ” 的 icon ( w:40,y:40 ),或者随意拉一个矩形代替都可以;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

3.点击 icon 右键转换为动态面板,右侧设置固定到浏览器(此处跟以上相同设置即可);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

4.设置 “ 返回顶部 ” icon 交互用户,鼠标单击时 – 滚动到元件<锚链接> – 勾选:顶部 – 仅垂直滚动 – 动画:线性 – 时间:250 毫秒 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

5.把 “ 返回顶部 ” icon 放置在内页( x:315,y:586 )的位置,点击隐藏 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

6.在内页的空白处设置 窗口滚动时(Case 3) :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

a.设置条件:值 – [[Window.scrollY]] – 大于等于 – 500 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

b.显示 “ 返回顶部 ” icon – 动画:逐渐 – 时间:250 毫秒;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

7.在内页的空白处设置 窗口滚动时(Case 4) :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

a.设置条件:值 – [[Window.scrollY]] – 小于 – 500 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

b.隐藏 “ 返回顶部 ” icon – 动画:逐渐 – 时间:250 毫秒;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

完成以上设置就可以了,下面我们来看一下效果 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

Axure教程:使用内联框架来实现页面滚动附小案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

好的,以上就是本次的所有讲解,谢谢大家!!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

该文件百度云链接:https://pan.baidu.com/s/1OqQuVDe5HclUm6f6NyH30A  密码:05wb文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4158.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/4158.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定