Axure教程:如何实现无痕,拒绝丑丑的默认滚动条

2022-10-0909:36:45原型设计Comments4,124 views字数 914阅读模式

使用Axure制作滚动页面效果的时候,大家第一时间,肯定会想到使用动态面板去实现效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

但是动态面板自带的滚动条,样式实在是有点丑丑的。有没有办法让这个丑丑的滚动条消失呢?今天就和大家分享一下如何制作无痕滚动条。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

一、演示效果

Axure教程:如何实现无痕,拒绝丑丑的默认滚动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

二、制作步骤

1. 第一步:绘制需要滚动的内容

使用Axure自带的元件绘制出需要需要滚动的内容,这部分的内容所主要用于动态面板滚动时显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

Axure教程:如何实现无痕,拒绝丑丑的默认滚动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

2. 第二步:转化动态面板

绘制完成后,选中所有的元件,在元件上点击右键,选中“转换为动态面板”,也可以使用“Ctrl+Shift+Alt+D”进行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

Axure教程:如何实现无痕,拒绝丑丑的默认滚动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

3. 第三步:设置面板尺寸&显示滚动条

首选,我们需要将动态面板的高度设置成500,这里的500是一个参考值,随意设置,只需要比动态面板中内容的高度小即可,只有这样才会在滚动时才会出现滚动条。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

其次,在动态面板上点击右键,依次选择“滚动条/垂直滚动条”,这里选择垂直滚动条是因为我们绘制的内容是需要垂直滚动的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

Axure教程:如何实现无痕,拒绝丑丑的默认滚动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

当勾选“垂直滚动”后,你会发现一个问题,滚动条盖住了动态面板中的部分内容(如下图所示),也就是说我们需要增加默认动态面板的宽度,以调整被滚动条盖住的部分能够显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

这里我们将动态面板的宽度增加18就正常了,因为18是axure滚动条的宽度,调整前后对比如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

Axure教程:如何实现无痕,拒绝丑丑的默认滚动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

4. 第四步:隐藏滚动条

这里隐藏滚动条的方法,也许有朋友会使用一个新的矩形,将矩形颜色调整为和底色相同,直接覆盖在动态面板上,这的确也是一个方法,但是如果底色复杂,是背景图,或者渐变色,这种方法就不行了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

我使用的方法也很简单,在现有动态面板的基础上,再套一个动态面板,并且将新面板的尺寸设置成250×500,也就是默认动态面板的原始尺寸,以达到隐藏滚动条的目的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

也就是说这里包含了2层动态面板,内层是真正的包含滚动条的动态面板;外层是通过尺寸隐藏滚动条的动态面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

Axure教程:如何实现无痕,拒绝丑丑的默认滚动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

上图可以看出虚线框,也就是外层动态面板的区域范围,可以看到内层动态面板的滚动条已经在虚线框外了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

刷新预览一下页面感受一下效果吧!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

三、结尾

其实Axure虽然在原型上功能还算比较强大的,但是在美观度的控制上,依然不如代码,所以在制作高保真原型的时候,肯定会需要一些奇特的方法来实现最终的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

作者:IMZQZ文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/28253.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/28253.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定