快好知 kuaihz

Axure:如何快速“回到顶部”?

今天我们来分享一个浏览网页时经常会遇到的一个操作,“回到顶部”。有了这个操作,浏览网页时就非常方便了,特别是商城类的网站,这个操作是必不可少的了,一起来看看~

这个原型一共用到两个页面:“首页”和“内容页面”。

第一步:首页组件

一个矩形框,尺寸1024×120,作为网页头部,可放置logo和标题(尺寸大小不要求,自己喜欢就好);

一个内联框架,尺寸1024×520,作为网页主体(宽度与网页头部一致,高度不要求)。

第二步:内容页面组件

可以放置一些灰色方框,代表网页内容,要有错开放置,显示的时候有回到顶部的效果就可以了(注意:放置的内容总高度要大于内联框架的高度);

一条水平线放置在y轴为0的位置,命名为“顶部”;

一个50×50的动态面板放置在右下角,命名为“回到顶部”,动态面板state面板状态中,放置一个50×50的箭头,设置图标颜色为浅灰色(icons 图标中可找到)。

第三步:为内联框架添加链接属性,设置内联框架链接到“页面内容”

双击内联框架勾选链接页面,并确定。

第四步:为“回到顶部”设置固定到浏览器

右键“回到顶部”设置固定到浏览器,水平固定位置右边距15,垂直固定位置下边距15,始终保持顶部

最后一步:为“回到顶部”添加鼠标点击时用例

设置为垂直滚动到“顶部”,线性,500毫秒。

好啦,拥有火箭速度的回到顶部已经完成了,快去预览看看效果吧!!

可以先瞧瞧完成的效果https://k7ig8o.axshare.com

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:顶部  顶部词条  回到  回到词条  快速  快速词条  如何  如何词条  Axure  Axure词条  
原型

 如何正确的画出功能逻辑图?

当我们需要设计任务型功能的时候,除了基础的线框图和交互,更需要提前搞清楚整个功能的内部逻辑流程,简称功能逻辑图。举几个大家熟悉的任务型功能作为例子,方便大家理解...(展开)

原型

 Axure案例:QQ音乐播放界面

本文通过讲解制作QQ音乐交互原型的过程,了解如何实现旋转、计时器以及拖动等常见的交互效果。案例中综合运用了动态面板的循环、状态改变、拖动、文本改变以及旋转等事件...(展开)

原型

 善用Axure写PRD,把原型放...

前几天讲了《为什么375667是移动端原型设计的最佳分辨率》,然后《如何生成适配手机的原型》,以及《如何设置手机APP原型尺寸》。这一篇讲解如何将原型放到手机里...(展开)