axure8屏幕滚动_使用axure设计出手机屏幕滚动条原型的具体操作方法

本文详细介绍了如何使用Axure8设计手机屏幕滚动条原型。首先,通过新建动态面板并复制来创建内外层动态面板。接着,设置内层动态面板的垂直滚动条,并添加占位符内容,确保内容长度超过面板显示范围。然后,通过预览功能查看滚动效果。最后,调整滚动条位置以优化视觉效果。
摘要由CSDN通过智能技术生成

4ba47421bf605787640c91e95af61ff8.png

软件大小: 34.93 MB

软件版本: 8.0.0.3605

软件类型:

办公工具

查看详情

直接下载

因工作需要得设计出手机屏幕滚动条原型,你们知道使用axure如何设计吗?下文就带来了使用axure设计出手机屏幕滚动条原型的具体操作方法。

ebd43e0d05ee7f239ae9b6a22837fad4.png

1、我们先打开我们的axure软件,点击新建,然后将我们的手机模型拖拽进我们的axure,点击我们的“动态面板”将其往编辑窗口拖拽。如下图

f252a7642360f304113fbf4667d36b0f.png

2、创建好我们的动态面板之后,按住“ctrl+c”将其复制下来,然后双击我们的“外层动态面板”下面的state1,然后按住“ctrl+v”将我们的“外层动态面板”复制下来

b25e75dbaee8c9f31ce8368806a4dc22.png

3、然后将我们复制下来的“外层动态面板”的名字改为“内层动态面板”,然后双击我们“内层动态面板”下面的“state1”,进入之后,将我们的光标放置于该编辑页内,然后点击鼠标右键,点击“滚动条”,“自动显示垂直滚动条”。这时候我们就会发现我们的“内层动态面板”下的“state1”已经有一个滚动条,如下图

0fc43b2aa10288890a938e2c1935ebee.png

4、我们的滚动条做好之后,我们需要给我们的动态面板添加内容,我们点击“占位符”,并将其拖到我们的动态面板内。

767089366ab58ee77619b6207b5da400.png

5、由于我们要体现的是一种滚动状态,所以我们的内容必须要长于我们的动态面板所显示的范围,所以我们需要多次添加内容,我们边按住“ctrl”边拖动我们刚才建立的“占位符”,即可复制。如下图。

d0dcecacfc8461034171c2d72072c2d6.png

6、如果我们想要区分这些占位符,我们可以双击该占位符,然后向其中输入自己想要的数据,如下图

9a2cb92594432200739314cec21e4dfe.png

7、然后我们可以预览我们做出来的效果了,我们按住F5,或者点击上面的“预览”,进入网页之后,我们上下滚动鼠标即可看出我们的效果了。

f5568986975781c924578af8673a0bad.png

8、这时候,有些人会不喜欢我们的滚动条那么难看,这时候我们返回我们的axure页面,直接点击“外层动态面板”,然后将我们的“内层”面板的滚动条拖拽到“外层动态面板”的外面,如下图。

d6c54d14be874be8f6f59621db2b70fa.png

9、然后我们可以预览我们做出来的效果了,我们按住F5,或者点击上面的“预览”,进入网页之后,我们上下滚动鼠标即可看出我们的效果了。

efd1f15bd9172b3efb794ef5c2f77311.png

根据上文为你们分享的使用axure设计出手机屏幕滚动条原型的具体操作方法,你们是不是都学会了呀!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值