上次分享了浮木云的交互编排，帮助我们实现了页面一些简单的动态交互，而这些简单的交互编排已经基本能够覆盖完整的页面交互了。剩下一些复杂的交互编排我准备在后续用到的过程中再给大家一一分享。今天我准备进军APP端静态页面搭建了，可能我这人对任何事都充满好奇，在看到浮木云可以直接给我提供手机壳效果，辅助我能够做APP端页面，此时我已经不满足于仅会制作web端的静态页面了。说句实在话，工作这么多年我还没做过app端的页面，因此对于app端页面设计我也是地地道道纯小白了。本次我搭建的页面还是仿照浮木云平台模版中心模版页面，搭建APP静态页面。

1、创建应用

搭建页面之前必不可少的步骤，创建应用，输入应用名称和行业分类，选择APP应用类型，页面布局根据具体需求选择，这里我选择的是底部导航。

2、尺寸选择

创建应用过后，系统自动会提供一个初始的手机壳页面。当然，如果你对系统给出的手机壳外形不满意，可以自己选择你喜欢的手机型号，来适配你要搭建的原型页面，这里我选择iphone12/13/14。

3、导航设置

这里就是对刚才选择的底部导航进行配置，根据具体需求确定底部导航有几个字段，这里我按照模版中心的页面，也选择添加四个菜单字段。

页面呈现效果是这样滴，为什么这四个字段的颜色都是一样的，跟模版中心是有点不太一样？

终于找到问题所在了，因为我的页面只有一个，在配置导航菜单数据时，跳转页面只能选择这一个初始化页面，导致四个菜单字段都是选中状态。因此我多复制了几个页面，并在导航菜单数据的每一个菜单选中对应的跳转页面，具体步骤如下：

完成页面菜单的配置之后，页面的呈现效果是这样滴：

4、框架搭建

仿照模版中心的“项目管理”页面，依次在页面从上层到下层放置弹性容器、下拉筛选框和列表容器，将整个框架布局定义好。

5、内容填充

框架搭建好之后，分别对上述的框架进行内容填充，上层的弹性容器直接放入搜索框组件。

对下拉筛选框进行下拉子项设置：

同时在属性配置中对背景颜色、下拉框的选中颜色，以及下拉框动画时长进行相应的属性设置。

接着在列表容器中放置两个弹性容器，分别在弹性容器中填充对应的内容，在填充内容之前，设置弹性容器的内间距和外间距，同时在该弹性容器内的框架搭建好，分别在放置的文字组件内填写文字名称。

在第二个弹性容器内放入两个弹性容器，分别表示“参与人数”和“项目补贴”的内容。接下来就是在两个小的弹性容器内再次放置图片组件和文字组件，并对图片组件和文字组件设置相应的尺寸，同时通过图片组件上传图片。

接下来就是对项目进度的内容填充，分别放置两个弹性容器来填充“流程审批”和“需求分析”的内容。在“流程审批”弹性容器内放置一个图片组件和一个弹性容器，图片组件就是用来放置那个小圆圈的，弹性容器用来放置两个文字组件的，填充“流程审批”的组件水平对齐调整成居左，填充“日期”的文字组件水平对齐调整成居右，两个文字组件的垂直对齐都调整成居中，这样就跟模板上一样啦。

好了，一个稍微糊弄的APP端页面就这样搭建好了，虽然在制作过程中一直在嵌套容器，于我个人而言，正是通过这些容器的嵌套，才确保了页面的规范性。想想以前用Axure设计的页面，简直不忍直视，不是Axure用不起，而是浮木云更有性价比，哈哈哈。