刚开始做一个APP原型的时候，页面布局很简单，状态切换也不难。预览的时候得到了想要的效果，但是后来发现框架根本没有搭建好，导致所有的事情都在一个页面中完成，嵌套了太多的动态面板。这篇文章记录了自己制作APP原型的第一步，希望对Axure的新品小白有所帮助。
01框架建筑
在这里，我用自己的APP原型来说明。
版本:Axure RP9企业版
1.创建新页面
底部导航分为五个部分，所以也对应五个页面。制作时不考虑登录等其他页面，只考虑主界面。
1.在页面部分添加一个文件夹(注意不是汇总部分)，命名为主界面，放置主界面的页面。
2.在文件夹下添加一个页面，在底部导航，在每个图标跳转后点击相应的页面。因为原型的底部导航分为五个部分，主界面下有五个子页面。每个子页面都可以继续添加子页面，类似于下图我的个人主页，代表页面内跳转的页面。这里就不赘述了。
2.页面布局
一个简单的页面基本包括状态栏、导航栏和标签栏(即底部导航)。
一般来说，移动终端的页面大小设置为375*667。
状态栏20高(状态栏可以通过下载AXURE组件库导入，也可以自己制作。)
导航栏高度44
底部导航高度49
除了这些位置，就是可以放置主要内容的地方。
建议初学者可以直接使用矩形工具，包括中间部分，然后设置为动态面板。(下图蓝色边框是主要内容放置的地方。右键设置动态面板，双击动态面板进入编辑状态。)
请注意，在右侧的样式部分，您需要为动态面板选择“按需滚动”，这样您就可以在预览时看到所有编辑过的部分。
02底部导航+页面跳转
了解了大致的框架搭建和页面布局后，开始制作底部导航。很多在线教程都是状态转换。虽然预览效果一样，但是对于制作一个APP来说还是不对的。
1.首先，添加一个母版，命名为底部导航。
2.然后选择好的图片和文字，巧妙运用组合、居中等。整齐地安排导航。
一个图标和它对应的文字是一个组合，方便添加下面的交互情况。
3.五页，对应底部导航的五种状态。因此，有必要在选择之前和之后都选择图标。这里，我只更改了图标来指示选择。一般来说，文字颜色会相应改变。
4.在状态1中交互设置其他图标组合。选择商店组合并将其设置在右侧。
5.以此类推，相应地设置页面的最后四个图标组合。然后再***四个状态，选中后再改变图标样式。注意，在每种状态下，都要保证其他四种图标组合有交互的情况，这样页面才能跳转成功。
6.右键单击母版-添加到页面，将此底部导航的母版设置到每个页面，并注意位置的放置。
7.打开工作区中的每个页面，并以交互方式设置页面。例如，打开商店页面，设置如下。
8.给页面设置不同的内容，预览一下，就可以看到切换的效果。
本文由@峰峰原创发布。每个人都是产品经理。未经许可，禁止***。
来自Unsplash的图像，基于CC0协议。
本文来自半邊陽光投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/620634.html
微信扫一扫 
