您现在的位置:   首页 >> 新闻中心 >> 原型设计

Axure 8.0 RP:制作一个“美美哒”的滚动条

发布人:www.yunke.ai 发布时间:2021-01-01 184 次浏览

在实际生产过程中我们发现Axure的动态面板原件可以提供强大的功能,比如滚动条,但是滚动条只能以原生效果展示,无法对其展示样式进行编辑。Axure的滚动条的丑就属于结构性问题,我们无法解决这个问题但是可以绕过,即让别人看到的Axure原型滚动条是我们想让对方看到的滚动条。

一、准备素材

这里用微信的界面来做展示,准备素材(笔者这里主要用了动态面板和中继器,嗯,在动态面板中充当内容的中继器),拼搭出微信的界面,并准备好你想要的滚动条样式,长度随意,因为我们会在其载入时来控制具体的长度。

接下来将该动态面板的滚动条展示出来,“右键”->“滚动条”->“自动显示垂直滚动条”

增加动态面板的宽度(原宽度+18),然后在用一块宽17的控件将整个滚动条覆盖住,并调整颜色,使其重新恢复第一张图的效果

此时你就会发现你已经获得了一个隐藏了滚动条的动态面板

二、准备交互

从这一步开始是相对比较重要的工作,这里我们需要清楚如何进行交互达到让别人看到我们想给他们看到的“滚动条”的目的,可能有点绕,但简单来说,就是具体实现的逻辑。

说出来你可能不信,这比把大象关进冰箱里要简单,因为逻辑上只需要两步:

  1. 在页面载入时,将滚动条调整为制定的比例
  2. 在页面滚动时,相应的移动滚动条的位置

是不是很简单?

正式开始准备交互: