Axure 教程:使用内联框架制作页面滚动
发布日期:2020-06-21 11:39   

  本次教列位小伙伴应用内联框架来告终页面滚动,除此以外还会有少少小案例 ~

  (以上图片已是上传的极限, 列位看官如果看不清,请自行下载天猫,掀开首页观望)

  因此本日咱们就拿天猫首页的顶部栏为例子,来解说正在 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 ),内页的实质比拟紧靠左上角,如许才不会映现待会搬动的光阴体验欠好,如图 :

  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小米网易等出名互联网公司产物总监和运营总监,他们正在这里与你沿途发展。

« 上一篇:上一篇:凤凰玩彩平台新手制作网站教程
Copyright © 2019 zjytljp.com 凤凰玩彩平台 版权所有  网站地图