第2节:APP原型动效库—底部导航

发布日期:2018-04-13    浏览量:16012

加入VIP社群,可终身免费下载本案例原型,及本站全部VIP原型,新增的原型不再收费。 查看VIP原型

一、功能点

  1. 可自行设置:1个导航或2个导航……5个导航(最多兼容5个)
  2. 载入时,根据导航的数量,自动获取各导航之间的间距;
  3. 载入时,通过界面名称,自动选中相应的导航标题。
  4. 原型预览地址:http://u.pmdaniu.com/59NY

二、准备工作

  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、新建可以在各个界面通用的【导航_APP】:

2、将【导航_APP】拖入各个一级界面:

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

原型预览地址:http://u.pmdaniu.com/59NY

Axure产品原型

Axure产品原型官网(pmyuanxing.com)—— 专注于提升Axure产品原型的效率与体验!
为产品经理、交互设计师、UI设计师提供:Axure原型模板下载、APP原型下载、电商原型下载、APP元件库等整站原型的下载,以及Axuer教程和Axure视频教程的服务。
欢迎加入VIP社群,与小伙伴一起学习交流,共同成长!

合作伙伴

  • 微信公众号
  • QQ交流群

Axure产品原型:专注于提升Axure产品原型的效率与体验! ©Axure产品原型,版权所有 侵权必究  粤ICP备18031656号-1