浮木云学习日志（5）---APP页面搭建

上次分享了浮木云的交互编排，帮助我们实现了页面一些简单交互操作，而这些简单的交互操作已经基本能够覆盖完整的页面交互了。剩下一些复杂的交互编排我准备在后续用到的过程中再给大家一一分享。

今天我准备进军APP端静态页面搭建了，可能我这人对任何事都充满好奇，在看到浮木云可以直接给我提供手机壳效果，辅助我能够做APP端页面，此时我已经不满足于仅会制作web端的静态页面了。说句实在话，工作这么多年我还没做过app端的页面，因此对于app端页面设计我也是地地道道纯小白了。

本次我搭建的页面还是仿照浮木云平台浮木云-产品设计开发智能助手模版中心浮木云-产品设计开发智能助手模版页面，大家不要见怪哈。接下来，让我们共同见证这个小众平台还能给我们带来多少惊喜。

1、创建应用

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

2、尺寸选择

创建应用过后，页面会自动创建一个名字叫“首页”的页面，系统自动会提供一个初始的手机壳页面。当然，如果你对系统给出的手机壳外形不满意，可以自己选择你喜欢的手机型号，来适配你要搭建的原型页面。啊啊啊啊~~~这个小众平台又再次惊艳到我了，这里我选择iphone12/13/14。

3、导航设置

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

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

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

最后的页面的呈现效果是这样滴：

4、框架搭建

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

5、内容填充

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

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

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

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

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

接下来就是对项目进度的内容填充，首先放置两个弹性容器，分别表示“流程审批”和“需求分析”。在“流程审批”弹性容器内放置一个图片组件和一个弹性容器，该弹性容器是用来放置文字组件的，保证文字的表示更加规范。最后呈现的效果是这样滴。

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

今天的学习分享就到这里了，如果感兴趣的话，请一键三连哦。