Axure 教程:内联框架滚动效果 获赏30金币 案例教程 基础教程

Donny 普通用户 2019-12-12 3951

先来看看 天猫 首页 顶部栏 的效果 ~




今天就拿天猫首页的顶部栏为例子,来讲解在 Axure 里面是如何制作的 。


一、准备元件


先看图:




1.首先新建 Axure 文件,顶部电量条可由大家随意制作( w:375 ,h:20 ),如果有相关组件库的小伙伴可直接拖入 ;




2.顶部栏区域,拖进一个元件当做背景( w:375 ,h:44 ),从 阿里巴巴矢量图标库 ( http://www.iconfont.cn )下载以下 icon 如图摆放即可 ;




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




完成以上的元件准备,然后我们先把他放置在一旁,等待使用…

4.然后把第一个页面命名为:“ 外页 ” ,在新增一个页面命名为:“ 内页 ” ,拖动 “ 内页 ” 为 “ 外页 ” 的子级,如图 :




5.然后我们双击进入 外页 的页面,从左侧组件库拖进一个内联框架( w:375 ,h:667 ),为了美观我们在这个内联框架底部再拖进一个矩形( w:377 ,h:669 ),然后我们点击内联框架,在右侧属性 – 内联框架 – 选择框架目标 – 内页 – 确定。




继续点击内联框架,右键点击 – 转换成动态面板 ,把该面板“ 自动调整为内容尺寸 ”,然后进入该动态面板,把内联框架的宽高都增加 17 px,如图 :




6.把刚才步骤 1 – 3 的内容,放入到内页里面( x :0 ,y :0 ),内页的内容比较紧靠左上角,这样才不会出现待会移动的时候体验不好,如图 :




7.全选以上图片所有内容,右键点击 转换为动态面板 ,在右侧属性设置 – 固定在浏览器 – 水平固定:左 、垂直固定:上 。如图:




8.然后我们在该原型的下方任意放置矩形,在每个矩形里添加 1、2、3 文字,增加识别度 :




完成以上的所有部分,可以先生成预览看一下效果了 ~




以上就做好了所有的元件准备,内容比较多( 因为有些小伙伴刚接触 Axure ,拆分得比较细,各位老司机将就一下 ~ ),弄完之后我们就可以开始下一步操作了 ~


二、设置交互用例


1.双击进入内页,在页面的空白处设置 窗口滚动时(Case 1) :

a.设置条件:值 – [[Window.scrollY]] – 大于等于 – 5 ;

b.移动输入框控件 – 移动:绝对 – x 为:60 ,y 为:27 – 动画:线性 – 时间:250 毫秒 ;

c.设置尺寸:“ 输入框 ” w :170 ,h :28 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 、“ 输入框背景 ” w :215 ,h :30 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 ;

d.设置 “ 背景 ” – 隐藏 – 动画:向上滑动 – 时间:500毫秒 ;


2.双击进入内页,在页面的空白处设置 窗口滚动时(Case 2) :

a.设置条件:值 – [[Window.scrollY]] – 小于 – 5 ;

b.设置 “ 背景 ” – 显示 – 动画:向下滑动 – 时间:500毫秒 ;

c.移动输入框控件 – 移动:绝对 – x 为:20 ,y 为:71 – 动画:线性 – 时间:250 毫秒 ;

d.设置尺寸:“ 输入框 ” w :290 ,h :28 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 、“ 输入框背景 ” w :335 ,h :30 – 锚点:左上角 – 动画:线性 – 时间:250 毫秒 ;


以上完成之后就可以得到以下效果了,是不是很简单?




然后我们完成以上步骤之后,我们还可以在该页面的下面放置一个 “ 返回顶部 ” 的 icon ,意为:当我们下滑到一定位置时,显示 “ 返回顶部 ” icon ,点击该 icon 时,返回至顶部并隐藏 “ 返回顶部 ” icon …


做完以上步骤的,可以继续看看下面


三、进阶


1.从左侧元件库拉出一条横向水平线,长度小于 375 px 即可,命名为:“ 顶部 ” ,然后置于底层;


2.拉入一个作为 “ 返回顶部 ” 的 icon ( w:40,y:40 ),或者随意拉一个矩形代替都可以;


3.点击 icon 右键转换为动态面板,右侧设置固定到浏览器(此处跟以上相同设置即可);


4.设置 “ 返回顶部 ” icon 交互用户,鼠标单击时 – 滚动到元件<锚链接> – 勾选:顶部 – 仅垂直滚动 – 动画:线性 – 时间:250 毫秒 ;


5.把 “ 返回顶部 ” icon 放置在内页( x:315,y:586 )的位置,点击隐藏 ;

6.在内页的空白处设置 窗口滚动时(Case 3) :

a.设置条件:值 – [[Window.scrollY]] – 大于等于 – 500 ;

b.显示 “ 返回顶部 ” icon – 动画:逐渐 – 时间:250 毫秒;

7.在内页的空白处设置 窗口滚动时(Case 4) :


a.设置条件:值 – [[Window.scrollY]] – 小于 – 500 ;

b.隐藏 “ 返回顶部 ” icon – 动画:逐渐 – 时间:250 毫秒;


完成以上设置就可以了,下面我们来看一下效果 ~




需要的可以下载看看。同时有相关问题的可在以下留言区留言,我将第一时间回复 ~



上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 20金币
第2名 沈十三 10金币
最新回复 (59)
  • linsansui 普通用户 2021-9-27
    0 引用 60
    感谢分享
  • 亿元盈盈 普通用户 2021-9-26
    0 引用 59
    xx
  • 米古 普通用户 2020-10-20
    0 引用 58
    666,大神
  • 有味 普通用户 2020-9-28
    0 引用 57
    感谢分享
  • 汪富贵儿 普通用户 2020-9-28
    0 引用 56
    感谢分享
  • lxy1120 普通用户 2020-9-28
    0 引用 55
    感谢
  • cuian 普通用户 2020-9-28
    0 引用 54
    1
  • 好好做个产品狗 普通用户 2020-9-6
    0 引用 53
    二七王
  • luo1026 普通用户 2020-9-3
    0 引用 52
    感谢分享
  • antante 普通用户 2020-9-1
    0 引用 51
    谢谢分享
  • Eric_1598164004 普通用户 2020-8-23
    0 引用 50
    感谢分享
  • Jerold 普通用户 2020-8-12
    0 引用 49
    感谢分享
  • yizionline 普通用户 2020-8-11
    0 引用 48
    感谢分享1
  • Caroline周11 普通用户 2020-8-9
    0 引用 47
    感谢感谢
  • 632508968 普通用户 2020-8-7
    0 引用 46
    感谢分享
  • mewow 普通用户 2020-8-4
    0 引用 45
    感谢分享
  • 九丝城主 普通用户 2020-8-2
    0 引用 44
    感谢分享
  • 宋国骄 普通用户 2020-7-31
    0 引用 43
    谢谢
  • 暖暖_1594784296 普通用户 2020-7-21
    0 引用 42
    感谢分享
  • Dwan. 普通用户 2020-6-30
    0 引用 41
    2
  • 鸭梨大小萌 普通用户 2020-6-30
    0 引用 40
    66
  • hainou 普通用户 2020-6-23
    0 引用 39
    谢谢
  • 宸枫 普通用户 2020-6-23
    0 引用 38
    谢谢分享
  • haha1243 普通用户 2020-6-14
    0 引用 37
    xiexie
  • 安风 普通用户 2020-6-12
    0 引用 36
    666
  • Apeng. 普通用户 2020-6-12
    0 引用 35
    感谢
  • A谢大家智慧人才网何 普通用户 2020-5-28
    0 引用 34
    感谢分享
  • 我爱小鸭子 普通用户 2020-5-28
    0 引用 33
    6666
  • Mr鲷 普通用户 2020-5-28
    0 引用 32
    谢谢分享,太细致了,对我这样的新人太友好了,十分感谢
  • 15079208394 普通用户 2020-5-19
    0 引用 31
    谢谢
  • meihao 普通用户 2020-5-15
    0 引用 30
    666
  • A4 普通用户 2020-5-12
    0 引用 29
    666
  • ECHO_HE 普通用户 2020-5-11
    0 引用 28
    感谢分享
  • 千山飞鸟 普通用户 2020-4-26
    0 引用 27
    感谢分享,膜拜大神
  • 羽栖萧云 普通用户 2020-4-22
    0 引用 26
    非常棒
  • 爱看星星的周宇宙 普通用户 2020-4-21
    0 引用 25
    谢谢
  • 小小的小小L 普通用户 2020-3-31
    0 引用 24
    这个教程用心了!谢谢分享!
  • Meeko 普通用户 2020-3-30
    0 引用 23
    thanks
  • 阿杰_1584770012 普通用户 2020-3-21
    0 引用 22
    谢谢
  • 单单 普通用户 2020-3-20
    0 引用 21
    谢谢
  • 程维维 普通用户 2020-3-11
    0 引用 20
    感谢分享
  • vigo 普通用户 2020-3-11
    0 引用 19
    6666666
  • liangcc1989 普通用户 2020-3-11
    0 引用 18
    666
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 17
    感谢分享
  • 晓_1578985800 普通用户 2020-1-14
    0 引用 16
    4
  • feifei956998 普通用户 2020-1-13
    0 引用 15
    谢谢分享
  • 莫得闲 普通用户 2020-1-6
    0 引用 14
    这个教程用心了!谢谢分享!
  • 晨曦2020 普通用户 2020-1-4
    0 引用 13
    66
  • zsj123 普通用户 2019-12-26
    0 引用 12
    感谢分享
  • 土豆0419 普通用户 2019-12-24
    0 引用 11
    感谢分享
  • 帆_1577065961 普通用户 2019-12-23
    0 引用 10
    感谢分享
  • DiZi 普通用户 2019-12-23
    0 引用 9
    感谢分享
  • 飞天球 普通用户 2019-12-22
    0 引用 8
    6
  • 65435591 普通用户 2019-12-20
    0 引用 7
    感谢分享
  • 花生了什么树 普通用户 2019-12-20
    0 引用 6
    1
  • Fly_1576550209 普通用户 2019-12-17
    0 引用 5
    学习一下
  • kevin1981 普通用户 2019-12-17
    0 引用 4
    感谢分享
  • 黯黄老师 管理员 2019-12-12
    0 引用 3
    这个教程用心了!谢谢分享!
  • 沈十三 管理员 2019-12-12
    0 引用 2
    感谢分享,已获得10金币奖励!
返回