案例展示
当前位置: 主页 > 案例展示 >

Axure 教程:使用内联框架制作页面滚动

发布日期:2021-04-29 06:22

 

  本次教各位小伙伴使用内联框架来实现页面滚动,除此之外还会有一些小案例 ~

  (以上图片已是上传的极限, 各位看官要是看不清,请自行下载天猫,打开首页观看)

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

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

  2.顶部栏区域,拖进一个元件当做背景( w:375 ,h:44 ),从 阿里巴巴矢量图标库 ( )下载以下 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 ),内页的内容比较紧靠左上角,这样才不会出现待会移动的时候体验不好,usdt,如图 :

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

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

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

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

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

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

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

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

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理()是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。