Axure设计支付宝底部标签导航模板

Axure设计支付宝底部标签导航模板

我们之前也学了很多关于Axure功能的应用,今天带大家进行实例教程操作,先做一个支付宝APP低保真原型。现在很多APP都是采用了底部标签导航这种方式,像我们平时用到的很多软件都是,比如:银行类、理财类(支付宝)还有招聘类的(智联招聘)等软件,通过底部标签这种方式会把APP分为几个大的方面或者功能模块。

我们可以看一下支付宝这个界面,它分为了五个标签:首页、财富、口碑、朋友和我的。这个可以把它看成一级入口,通过这些标签很清晰的划分为五大功能模块。

Axure支付宝页面

标签导航一般会设计成3-5个标签,我们把这些标签导航设计成母版方式,这样我们只需制作一次,其他页面就可以直接复制应用。

为了防止一个页面内容太多,我们分为五个页面,我们只需设计一次,就可以引用到这个页面了。

首先我们打开Axure软件 ,找到母版,新建一个母版,命名为标签导航:

Axure母版

我们进入到这个页面,拖入一个矩形2元件。坐标位置设置为0-0,宽度设为320cm,高度为480cm:

Axure拖入矩形元件

这个作为一个背景,接着我们再拖入一个矩形3,宽度也320cm,高度50cm,颜色填充为浅一点的灰色

Axure再拖入一个矩形

接着拖入1个图片组建,作为标签导航的图标,宽度和高度都设置为25cm,然后在复制四个。拖动第一个和第五个位置,选中五个图标,水平分布,作为我们五个导航图标:

Axure分布图标

拖入一个本文标签,命名为首页,然后字号设为11号,连续复制四个,分别命名为财富、口碑、朋友和我的。

Axure文本标签

新建五个页面,分别命名,如下图所示:

Axure新建五个页面

然后给小图标命名

Axure命名

添加热区元件,宽高设为50cm

Axure热区元件

为了实现点击首页连接到首页页面时,设置鼠标单击时,选择呢当前页面-“首页”确定:

Axure新建窗口

以下操作重复。这样我们单击标签导航时就可以打开相应的页面:

Axure重复操作

我们打开相应页面之后想让当前的标签呈现选中状态,我们进入首页这个页面,比如我们想让首页这个标签导航为选中状态。

在这之前,我们需要先把母版添加到我们页面里面,鼠标右击选择添加到页面中,然后全部选中,点击确定。

Axure添加母版到页面中

点击进入“首页”这个页面中,交互选择“页面载入时”然后在“元件”下点击“设置文本”选中“首页”,通过“富文本”的方式,将文字加粗,另外四个页面也如此设置即可。

Axure页面载入时

这样我们单击标签导航,点击标签就会是选中的状态,我们可以预览一下看下效果,选中财富,财富就是选中状态,文字加粗。

Axure预览

这样支付宝的母版导航就设计完成了,更多详细案例教程可以点击文章:Axure如何设置底层辅助线的显示

2 comments so far

Axure元件库的简要介绍 | Axure 中文网Posted on10:39 上午 - 2月 2, 2019

[…] 以上内容就是今天对元件库的一些原本元素的讲解了,要想掌握一门软件,不能小瞧每一个功能,对软件更了解有助于我们更熟练的使用软件。更多感兴趣的教程,点击文章:Axure设计支付宝底部标签导航模板。 […]

Axure制作仿淘宝搜索原型 | Axure 中文网Posted on1:33 下午 - 1月 25, 2019

[…] 仿淘宝搜索框原型到这里就完成了,更多教程点击文章:Axure设计支付宝底部标签导航模板。 […]

在线客服
客服邮箱
客服电话
17051276424