Axure教程:如何实现无痕，拒绝丑丑的默认滚动条
xsobi 2024-12-05 17:29 1 浏览
编辑导语：无痕滚动条相比与传统滚动条舒适感好了很多，整体也较为美观简洁，本篇文章作者分享了制作无痕滚动条的具体方法，感兴趣的小伙伴们一起来学习一下吧，希望对你有帮助。
在使用Axure制作滚动页面效果的时候，大家第一时间，肯定会想到使用动态面板去实现效果。
但是动态面板自带的滚动条，样式实在是有点丑丑的。有没有办法让这个丑丑的滚动条消失呢？今天就和大家分享一下如何制作无痕滚动条。
一、演示效果
二、制作步骤
1. 第一步：绘制需要滚动的内容
使用Axure自带的元件绘制出需要需要滚动的内容，这部分的内容所主要用于动态面板滚动时显示。
2. 第二步：转化动态面板
绘制完成后，选中所有的元件，在元件上点击右键，选中“转换为动态面板”，也可以使用“Ctrl+Shift+Alt+D”进行。
3. 第三步：设置面板尺寸&显示滚动条
首选，我们需要将动态面板的高度设置成500，这里的500是一个参考值，随意设置，只需要比动态面板中内容的高度小即可，只有这样才会在滚动时才会出现滚动条。
其次，在动态面板上点击右键，依次选择“滚动条/垂直滚动条”，这里选择垂直滚动条是因为我们绘制的内容是需要垂直滚动的。
当勾选“垂直滚动”后，你会发现一个问题，滚动条盖住了动态面板中的部分内容（如下图所示），也就是说我们需要增加默认动态面板的宽度，以调整被滚动条盖住的部分能够显示。
这里我们将动态面板的宽度增加18就正常了，因为18是axure滚动条的宽度，调整前后对比如下。
4. 第四步：隐藏滚动条
这里隐藏滚动条的方法，也许有朋友会使用一个新的矩形，将矩形颜色调整为和底色相同，直接覆盖在动态面板上，这的确也是一个方法，但是如果底色复杂，是背景图，或者渐变色，这种方法就不行了。
我使用的方法也很简单，在现有动态面板的基础上，再套一个动态面板，并且将新面板的尺寸设置成250×500，也就是默认动态面板的原始尺寸，以达到隐藏滚动条的目的。
也就是说这里包含了2层动态面板，内层是真正的包含滚动条的动态面板；外层是通过尺寸隐藏滚动条的动态面板。
上图可以看出虚线框，也就是外层动态面板的区域范围，可以看到内层动态面板的滚动条已经在虚线框外了。
刷新预览一下页面感受一下效果吧！
三、结尾
其实Axure虽然在原型上功能还算比较强大的，但是在美观度的控制上，依然不如代码，所以在制作高保真原型的时候，肯定会需要一些奇特的方法来实现最终的效果。
感谢阅读，希望我的文章，能够帮助到你！
本文由 @IMZQZ 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
相关推荐
- Android Studio 导入项目出现缺失解决
-
很多朋友安装好Androidstudio后准备试一把，但是导入项目的时候出现错误Cannotfindfile"...../project_name/settings.jar"这个错误是因为导入...
- 首个安卓12开发者预览版发布:隐私保护升级、更新UI、优化性能
-
来源：环球网2月20日消息，据engadget报道，来到二月，惯例也是谷歌发布安卓12开发者预览版的时候，以便于让开发者提前查看下一版安卓系统的新属性。谷歌工程副总裁戴夫·波尔克（DaveBurke...
- 推荐几个非常有用的开发工具之Android Studio插件
-
我们都知道Eclipse开发Android将在今年年底google不再继续提供相应的开发支持，转而开始强烈发展AndroidStudio，现在我就分享几款能帮助团队提升工作效率的几个Android...
- Android Studio下的应用性能优化总结-内存优化
-
上一篇文章总结的布局优化的问题，如果对布局优化不是很熟悉的，可以看一下AndroidStudido下的应用性能优化总结–布局优化，这周一直筹划总结一下内存优化的问题，因为现在对于应用优化的文章很...
- 安卓开发之环境搭建「图文教程」 安卓应用开发环境搭建
-
安卓（Android）是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。接下来开始第一个安卓应用吧！需要用到的软...
- Android APP性能测试上篇--启动时长、内存
-
如图所示，列出了目前app主要的一些性能指标，以及对应使用的测试工具。普遍的app性能测试，主要是以下几类：启动时长、内存、cpu、FPS(app使用的流畅度)、GPU过度渲染、耗电、耗流、cras...
- AndroidStudio下的依赖管理 安卓依赖管理
-
在开发中用第三方库是很常见的事，如何在AndroidStudio下管理这些依赖呢？这就是这篇文章的目的。目录Maven/Ivy仓库依赖Module依赖aar文件依赖jar文件依赖例子完整代码一、Mav...
- 基于Android的师生学习交流平台:Android课程设计
-
基于Android的师生学习交流平台（Androidstudio毕业设计，Android课程设计）一、项目介绍系统分为学习资料，作业，师生交流，个人资料四大模块（1）学生端：新用户需要填写真实姓名，...
- Android Studio 贴士 - 综述#3 android studios
-
（点击上方公号，可快速关注)英文原文：http://www.developerphil.com/android-studio-tips-of-the-day-roundup-3注：文中链接皆为国外链接...
- Android 11 Developer Preview首次更新发布:修复诸多问题
-
此前在2月19日，谷歌放出了Android11DeveloperPreview（安卓11开发者预览版），并表示Beta版本将于5月份推出，最终发行版将于2020年Q3面世。如今距离Android...
- Android12 支持无线usb调试应用 安卓 usb调试
-
背景在android12版本中已经支持wifiusb调试了，再也不用查数据线了，下面主要说下连接步骤：1.在开发者启动无线调试...
- InstantRun原理--深度剖析AndroidStudio2.0
-
http://crash.163.com/#news/!newsId=8推荐理由AndroidStudio2.0开始支持InstantRun特性，使得在开发过程中能快速将代码变化更新到设...
- 集成开发环境Android Studio整合Gemini:可生成、补全代码
-
IT之家4月9日消息，谷歌近日发布新闻稿，宣布在AndroidStudio中集成Gemini1.0Pro，从而帮助开发人员更快、更好地写出代码。谷歌表示目前相关整合仍处于预览阶段，...
- Android studio 最新版本下Gradle的一些配置
-
当我们把Androidstudio版本更新到Bumblebee版本时，我们会发现创建新的项目时，有了一些改变。项目根目录下面的build.gradle变了：旧版本下的是这样子的：setting.gr...
- Android Studio最新版下载安装:Android Studio模拟器怎么启动
-
目录第一部分：AndroidStudio软件介绍...
- 一周热门
- 最近发表
-
- Android Studio 导入项目出现缺失解决
- 首个安卓12开发者预览版发布:隐私保护升级、更新UI、优化性能
- 推荐几个非常有用的开发工具之Android Studio插件
- Android Studio下的应用性能优化总结-内存优化
- 安卓开发之环境搭建「图文教程」 安卓应用开发环境搭建
- Android APP性能测试上篇--启动时长、内存
- AndroidStudio下的依赖管理 安卓依赖管理
- 基于Android的师生学习交流平台:Android课程设计
- Android Studio 贴士 - 综述#3 android studios
- Android 11 Developer Preview首次更新发布:修复诸多问题
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)