axure怎么设计手机屏幕的滚动条原型?

axure想要设计一个手机屏幕滚动条的效果,该怎么制作呢?下面我们就来看看详细的教程。

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

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

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

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

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

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

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

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

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

以上就是axure中制作手机滚动条效果的教程,希望大家喜欢,请继续关注我们。

(0)

相关推荐

  • axure怎么设计手机app的侧边栏原型?

    axure想要设计一款手机app的侧边栏,该怎么设计呢?下面我们就来看看详细的教程. 1.我们先打开我们的axure软件,点击新建,然后将我们的手机模型拖拽进我们的axure,点击我们的“动态面板”将 ...

  • Axure怎么设计手机短信倒计时效果?

    填写手机号码,发送短信验证码这一功能已经非常普遍了,对原型设计来说,制作出较好的类似动态效果,无论是对开发还是对测试,都会有很大的帮助. 1.首先新建一个动态面板,该动态面板要有两个状态,状态一.状态 ...

  • axure怎么设计手机版知乎注册页面?

    axure中想要制作一个手机软件的登录页面,比如知乎的登录页面,下面我们就来看看详细的教程. 1.在工作区先建立一个矩形框,可以设置矩形的宽高属性以及坐标位置 2.在上面建立名称或者建立logo图片 ...

  • 手机屏幕有何不同?九大手机屏幕材质分析

    我们天天都在用手机,但每个手机屏幕有何不同?今天小编就来为大家带来九大手机屏幕材质分析. 一,TFT屏幕 TFT(Thin Film Transistor)即薄膜场效应晶体管,属于有源矩阵液晶显示器中 ...

  • VisualStudio 2015怎么设计手机网站?

    VisualStudio 2015中想要编辑一款手机网站,手机网站与普通的PC端有很大的不同,设计手机网站有哪些技巧呢?下面我们就来看看详细的教程. 1.电脑桌面上双击Visual Studio 20 ...

  • 手机屏幕十大品牌排行榜

    排行榜123网依托全网大数据,根据品牌评价以及销量评选出了2019年手机屏幕十大品牌排行榜,前十名分别是华为/HUAWEI.hidog数码.洛克/ROCK.Moshi摩仕.benks数码.亿色/ESR ...

  • 移动页面自适应手机屏幕宽度

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设 ...

  • 苹果x手机屏幕碎了怎么办

    最近很多朋友咨询关于苹果x手机屏幕碎了怎么办的问题,今天的这篇就和大家聊一聊这个话题,希望可以帮助到大家. 操作方法 01 第一步我们自然会想到去维修.但是如果你没有购买苹果价值1688元的apple ...

  • wpsPPT如何设置适应手机屏幕的版面比例

    电脑端制作的文件如何能在手机端进行完美展现就是一个问题了,由于电脑屏幕和手机屏幕比例不同意导致画面变形了,今天给大家介绍一下 wpsPPT如何设置适应手机屏幕的版面比例 方法 01 编辑完成后如图所示 ...