必威登录网站_西汉姆联必威

必威登录网站已成为一流的线上娱乐城,西汉姆联必威演绎了世界之中的各种生灵的使命与追求,因为目前很多玩家都还在排队等着进行betway必威官网备用下载,点击进入官网。

Axure:怎么样高效“回到顶上部分”?

2019-09-22 作者:科学动态   |   浏览(72)

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

回到顶部,这个功能基本每个长页面都会有,用户体验很好,主要是为了用户在浏览到网页底部的时候,能够快速地返回顶部去使用导航等重要功能。试想一下,如果在看一篇很长的文章,当看到底部的时候,想换一篇文章看,却要不断地滑动着鼠标的滚轮回到顶部找到导航……这得是惹让人烦的事啊。这一章就教大家如何使用axure8.0制作回到顶部功能。

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

第一步:拖拉摆放好“回到顶部”的相关控件

图片 1

第一个页面“回到顶部”,包括网页头部和网页主体两部分。头部是一个800X96白底黑框的矩形,上面放一个logo和两行文字。主体就是一个800X366的内联框架

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

图片 2

第一步:首页组件

第二步:拖拉摆放好“页面内容”的相关控件

  1. 一个矩形框,尺寸1024×120,作为网页头部,可放置logo和标题(尺寸大小不要求,自己喜欢就好);
  2. 一个内联框架,尺寸1024×520,作为网页主体(宽度与网页头部一致,高度不要求)。

1、一些灰色方框,以代表网页内容,但要注意摆放x轴的距离以及y轴的长度,保证“回到顶部”页面中的内联框架不出现横向的滚动条并且一定要出现纵向滚动条(主要是为了能够体现回到顶部的效果);

图片 3

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

第二步:内容页面组件

3、一个50X50的动态面板放在右下角,命名为“回到顶部”,动态面板的state1面板状态中,放置一个50X50灰底的框以及一个向上的白色尖头。

  1. 可以放置一些灰色方框,代表网页内容,要有错开放置,显示的时候有回到顶部的效果就可以了(注意:放置的内容总高度要大于内联框架的高度);
  2. 一条水平线放置在y轴为0的位置,命名为“顶部”;
  3. 一个50×50的动态面板放置在右下角,命名为“回到顶部”,动态面板state面板状态中,放置一个50×50的箭头,设置图标颜色为浅灰色(icons 图标中可找到)。

图片 4

图片 5

第三步:为内联框架添加链接属性

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

设置内联框架链接到“页面内容”

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

图片 6

图片 7

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

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

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

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

图片 8

图片 9

第五步:为“回到顶部”添加鼠标点击时用例

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

垂直滚动到“顶部”,线性动画,500毫秒

图片 10

图片 11

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

点击预览,然后点击右下角的回到顶部,就可以看到回到顶部的效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

可以先瞧瞧完成的效果:

效果图:axure原型设计之回到顶部

本文由 @方子 原创发布于人人都是产品经理。未经许可,禁止转载

更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

题图来自 Pixabay,基于 CC0 协议返回搜狐,查看更多

作者:维度

责任编辑:

转载请注明出处:http://weidublog.com/index.php/2017/04/14/427/

本文由必威登录网站发布于科学动态,转载请注明出处:Axure:怎么样高效“回到顶上部分”?

关键词: 必威登录网站 产品经理 0岁的