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

axure想要设计一款手机app的侧边栏,该怎么设计呢?下面我们就来看看详细的教程。

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

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

3、然后双击我们的“内层动态面板”下面的state1,然后点击“矩形”,并将其图案拖拽到我们的内层动态面板中,调整好位置,并给其填充颜色。

4、在拖进一个占位符,并调整其位置,如图所示。

5、然后点击我们导航栏上面的“外层”,并将我们的“内层”图案拖拽平移一段距离,如下图。

6、然后点击“矩形”,用来量我们“外层”和“内层”之间的距离,方便我们的侧边栏的移动。如下图。量出距离之后,即可将其删掉。

7、点击我们导航栏的“内层”,然后在我们选中我们刚才的“占位符”,然后点击我们的“鼠标单击时”选项,如下图。

8、进入我们的“单击鼠标时”之后,点击“移动”,勾选“内层”,然后在下面的“y”内输入我们刚才量出来的距离,即“-134”

9、点击上面的“添加条件”选项,选择“变量值”、“!=”“0”,然后点击确定。

10、再次重复第八和第九步骤,“y”值改为“134”,其他不变,然后点击上面的“添加条件”选项,选择“变量值”、“==”“0”,然后点击确定。

11、然后再次点击我们的“case1”,找到并点击下面的“设置变量值”,勾选“变量”,然后将变量值设为“0”,点击确定,“case2”我们也重复此动作,只是在设置变量值时,不设为0即可

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

以上就是axure制作手机app的侧边栏的教程,希望大家喜欢,请继续关注我们。

(0)

相关推荐

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

    axure想要设计一个手机屏幕滚动条的效果,该怎么制作呢?下面我们就来看看详细的教程. 1.我们先打开我们的axure软件,点击新建,然后将我们的手机模型拖拽进我们的axure,点击我们的“动态面板” ...

  • 用ps怎么设计手机app登录页面教程

    下面小编教大家怎么用ps设计手机app登录页面,手机软件登录的时候都有登录界面的,该怎么使用ps设计一个手机app登录界面,下面我们就来看看详细的教程,需要的朋友可以参考下. 操作方法 01 1.开P ...

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

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

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

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

  • “手把手教你设计”—12个最佳手机APP界面设计教程

    UI/UX 设计确实是需要一定的和学识才能真正在这个行业立足,并不是所有想成为设计师的人最后都能如愿以偿.他需要对设计有基本的了解,清楚设计的基本原则. 用户界面设计师和其他行业设计面临一样的挑战,那 ...

  • 热门网页及手机APP UI KIT素材

    小编:2014年主流的设计风格,还将在15年的近期延续,至少它不会来个急刹大转弯对吧?以下的UI KIT值得大家揣摩. 回顾2014年,有几个流行的设计风格,比如扁平化.iOS8.Material D ...

  • 手机app制作流程

    手机app现在可以说是在移动互联网最为活跃.也是企业在移动互联网领域宣传自主品牌的最佳工具.手机app制作流程是很大一部分企业在开发过程中最想了解的.对此,蓝凌科技整理以下制作流程: 操作方法 01 ...

  • 最高效快捷安全 五大银行手机APP详细的对比体验报告

    前言 手机已经成了现代人离不开的一个产品,而手机上离不开的软件应用有哪些呢?相信几乎每个人的手机上都少不了微信.地图导航.QQ.浏览器.新闻资讯(今日头条或者一点资讯)这些类型的APP. 不过除了这些 ...

  • 2014年11月最新的手机APP界面(UI PSD免费下载)

    今天小编给大家带来的是2014年11月最新的手机APP界面合集,是当下流行的扁平风格界面设计,绝对值得拥有.这些都是很有用的.有很多漂亮的APP界面,也有很多漂亮的网页界面,有些极简,有些质感 , 还 ...