Axure教程 | 移动端APP原型框架搭建

15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

本分给大家分享:在Axure软件中,如何搭建移动端APP原型的框架。

做好后,可以通过内嵌框架实现各个界面的跳转,可以设置不同的头部类型,返回时自动识别来时的界面,自动识别界面名称等。专注于:APP原型动效库、APP原型元件库、Axure原型动效库、Axure原型元件库、高保真原型设计。

原型在线地址:http://u.pmdaniu.com/N9wN

原型屏幕尺寸375*667px(iphone6/iphone6s/iphone7)

一、功能点

1、通过内嵌框架,实现手机壳内打开原型界面;

2、自动获取当前界面的标题名称,无需手动输入;

3、返回时自动识别来时的界面,无需手动添加链接;

4、通过全局变量,设置当前界面是否需要返回箭头;

5、通过母版+中继器,设置不同的头部底色,标题、返回箭头和顶部信息栏颜色自动匹配。

二、准备工作

1、素材:手机壳、顶部信息栏、头部背景图片、各个界面所需图片,下载文件中已包含所有素材;

2、新建【index】、【发现】等原型中的界面,将手机壳导入【index】界面;

3、在【index】界面拖入1个内嵌框架,尺寸375*667px,放在手机壳中间;

4、新建母版【头部_App】,在母版中拖入一个【中继器】(Rpt_Head);

5、在中继器中,拖入一个图片元件(Background_Rpt_Head,375*65px),一个文字编辑元件(Title_Rpt_Head,375*45px),两个动态面板,其中一个显示头部信息栏(Info_Rpt_Head,375*20),另一个显示返回箭头(Return_Rpt_Head,60*45px)。

三、实现步骤

1、通过内嵌框架,实现手机壳内打开原型界面

在【index】界面,找到并双击内嵌框架,选择【发现】界面为默认打开界面。

2、自动获取当前界面的标题名称,无需手动输入

在【头部_App】母版界面,选中中继器,设置“每项加载时”事件,如下图,完成后将该母版拖入各个界面并发布,即可预览效果。

3、返回时自动识别来时的界面,无需手动添加链接

#、在【头部_App】母版界面,双击中继器进入并选中返回箭头元件(Return_Rpt_Head),设置“鼠标单击时”事件,如下图,完成后将该母版拖入各个界面并发布,即可预览效果。

4、通过全局变量,设置当前界面是否需要返回箭头

#、逻辑说明:【头部_App】加载时,如果全局变量“class”等于“空”时,显示返回箭头,如果等于“一级界面”时,隐藏返回箭头。

5、通过母版+中继器,设置不同的头部底色,标题、返回箭头和顶部信息栏颜色自动匹配

逻辑说明:在中继器color列设置值,如果背景图片为深色,则设置值为“浅色”,那么发布后“顶部信息栏”、“返回箭头”、“标题栏文字”都为白色。如果背景图片为浅色,则设置值为“深色”,那么发布后“顶部信息栏”、“返回箭头”、“标题栏文字”都为黑色。

对于时间比较紧的朋友,可以直接复制去用,无需学习怎么去做。

原型在线地址:http://u.pmdaniu.com/N9wN

 

作者:亮亮,公众号:亮亮原型

本文由 @亮亮 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pexels,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 收藏了

    回复
    1. 谢谢支持

      回复
    2. 移动端APP下拉刷新:http://www.pmdaniu.com/rp/detail/34859

      回复
  2. 作者好厉害,我学的给我再次巩固! 10086:oops:

    回复
    1. 很高兴能帮到你。

      回复
  3. 很厉害,赞。
    前面3个我一直在用,有选择的在用。源文件和视频教程里面都讲过。
    后面2个我看了一下你的思路,感觉比较复杂。感觉原型设计工作中用起来比较难。
    不过真心很厉害,把Axure本身的功能研究提炼成可复用的方法。
    器到术的提升,真心牛。

    回复
    1. 其实第1次做好之后,后面反复调用就好了。
      时间久了,我都不知道怎么做的了,需要写这篇文章的时候,才重新看之前是怎么做的。
      谢谢你的支持。

      回复
    2. 做这些,最终是为了高保真原型?
      还是啥。。。。

      回复
    3. 很多常用的功能做好后,只需要调用或配置一下就好了(例如第2篇的底部导航),不用每次都做一遍,那么高保真原型所耗费的时间也就不会那么多了。
      如果有一天能做到极致,或许耗费的时间可能比低保真更少。类似于可配置的程序后台。
      欢迎加QQ群:235415403

      回复
    4. 忘了回答你的问题了,做这些是为了画原型更有效率,更省时间。

      回复
  4. 不用动态面板的原因是什么呢?

    回复
    1. 中继器里面是可以再套一个动态面板的,这样的话,修改的时候,又要多1个步骤了,所以去掉了。

      回复
    2. 或者说最重要的是实现效果,能简单的实现更好的效果,用什么不用什么都不是重点。

      回复
圈子
关注微信公众号
大家都在问