如何在axure上实现类似于微信朋友圈那样的滚动效果

新手学堂045

如何在axure上实现类似于微信朋友圈那样的滚动效果,第1张

拉一个屏幕大小的动态模板a,当做屏幕显示的区域;

双击a编辑,在a里面拉一个白色的底,宽和a一样,高随便,可以无限高,然后在白色底上面放上你的内容;

回到a,右键a-滚动条-显示垂直滚动条,预览,ok。

上面的方法会显示一条滚动条,不是很美观,可以:

拉一个屏幕大小的动态模板a,当做屏幕显示的区域;

双击a编辑,在a里面拉一个跟a一样大的动态面板b;

双击b编辑;

在b里面拉一个白色的底,宽和b一样,高随便,可以无限高,然后在白色底上面放上你的内容;

右键b-滚动条-显示垂直滚动条,调整b的宽度,直至滚动条超过面板a的那条边界,这样b的滚动条就会超过a的显示区域,就看不到啦!

预览~

一、Open Link in Current Window:在当前窗口打开一个页面

二、Open Link in Popup Window:在弹出的窗口中打开一个页面

三、Open Link in Parent Window:在原窗口中打开一个页面

四、Close Current Window:关闭当前窗口

五、Open Link in Frame:在框架中打开一个页面

六、Set Panel state(s) to State(s):为动态面板设定要显示的状态

七、Show Panel(s):显示动态面板

八、Hide Panel(s):隐藏动态面板

九、Toggle Visibility for Panel(s):切换动态面板的显示状态(显示/隐藏)

十、Move Panel(s):根据绝对坐标或相对坐标来移动动态面板

十一、Set Variable and Widget value(s) equal to Value(s):设定变量值或控件值

十二、Open Link in Parent Frame:在父页面的嵌框架中打开一个页面

十三、Scroll to Image Map Region:滚动页面到

十四、Image Map:所在位置

十五、Enable Widget(s):把对象状态变成可用状态

十六、Disable Widget(s):把对象状态变成不可用状态

十七、Wait Time(s):等待多少毫秒(ms)后再进行这个动作

十八、Other:显示动作的文字说明

很简单,首先,你的按钮必须在一个动态面板A中,然后设置交互动作,点击某个按钮时,在该面板中的另一个动态面板B由隐藏变为显示,并线性移动到绝对位置500毫秒,该隐藏的动态面板B中放置子按钮的图标,动态面板B初始位置需要在面板A的范围之外。

方法/步骤

我们可以在百度上直接搜索到axure软件,或到axure中文网进行下载和安装。

安装好后,我们在应用程序里面可以看到axure软件,并打开它。

打开后新建一个空白文档。

从左边元件库里面选『流程图』,出现流程图元素,然后把需要画流程图的元素拖到中间空白区域,并双击写入文字。

以此类推增加所有流程元素,若需要更改流程元素的属性、样式等,可从右边属性框里面进行修改。固定好元素的外观等,可以直接按住MAC电脑上的ALT键用鼠标左键拖动复制出一个一样的元素进行更改。

从左上角选中连接模式,可以把元素通过箭头连接起来,以标明流程的走向。

做好流程后可以点击上面的『预览』按钮,axure会启动默认浏览器进行设计预览。

最后我们把做好的流程图保存成Axure格式以便下次编辑,也可以把需要的流程图导出格式以进行使用。

打开axure软件,进入体统页面,点击如图位置新建文档

2、axure界面是这样的,最上面是菜单栏,靠下位置为属性栏,中间是操作区域,右侧有交互效果

3、我们点击左上角的主页位置,首先我们修改左上方菜单的名字,修改名的时候单机下稍等片刻后再点击一下,就可以修改名字了,我们将index修改为中文“主页”

4、下面的三个文件名称修改方法一样

5、将名称修改完成后,双击主页文件,找到左下方的,拖入中间,然后双击将自己的微信主页拖入

6、将位置调整为 0,0,位置后面为大小,也可以根据画面修改为合适尺寸