上次分享了浮木雲的交互編排，幫助我們實現了頁面一些簡單的動態交互，而這些簡單的交互編排已經基本能夠覆蓋完整的頁面交互了。剩下一些複雜的交互編排我準備在後續用到的過程中再給大家一一分享。今天我準備進軍APP端靜態頁面搭建了，可能我這人對任何事都充滿好奇，在看到浮木雲可以直接給我提供手機殼效果，輔助我能夠做APP端頁面，此時我已經不滿足於僅會製作web端的靜態頁面了。説句實在話，工作這麼多年我還沒做過app端的頁面，因此對於app端頁面設計我也是地地道道純小白了。本次我搭建的頁面還是仿照浮木雲平台模版中心模版頁面，搭建APP靜態頁面。

1、創建應用

搭建頁面之前必不可少的步驟，創建應用，輸入應用名稱和行業分類，選擇APP應用類型，頁面佈局根據具體需求選擇，這裏我選擇的是底部導航。

2、尺寸選擇

創建應用過後，系統自動會提供一個初始的手機殼頁面。當然，如果你對系統給出的手機殼外形不滿意，可以自己選擇你喜歡的手機型號，來適配你要搭建的原型頁面，這裏我選擇iphone12/13/14。

3、導航設置

這裏就是對剛才選擇的底部導航進行配置，根據具體需求確定底部導航有幾個字段，這裏我按照模版中心的頁面，也選擇添加四個菜單字段。

頁面呈現效果是這樣滴，為什麼這四個字段的顏色都是一樣的，跟模版中心是有點不太一樣？

終於找到問題所在了，因為我的頁面只有一個，在配置導航菜單數據時，跳轉頁面只能選擇這一個初始化頁面，導致四個菜單字段都是選中狀態。因此我多複製了幾個頁面，並在導航菜單數據的每一個菜單選中對應的跳轉頁面，具體步驟如下：

完成頁面菜單的配置之後，頁面的呈現效果是這樣滴：

4、框架搭建

仿照模版中心的“項目管理”頁面，依次在頁面從上層到下層放置彈性容器、下拉篩選框和列表容器，將整個框架佈局定義好。

5、內容填充

框架搭建好之後，分別對上述的框架進行內容填充，上層的彈性容器直接放入搜索框組件。

對下拉篩選框進行下拉子項設置：

同時在屬性配置中對背景顏色、下拉框的選中顏色，以及下拉框動畫時長進行相應的屬性設置。

接着在列表容器中放置兩個彈性容器，分別在彈性容器中填充對應的內容，在填充內容之前，設置彈性容器的內間距和外間距，同時在該彈性容器內的框架搭建好，分別在放置的文字組件內填寫文字名稱。

在第二個彈性容器內放入兩個彈性容器，分別表示“參與人數”和“項目補貼”的內容。接下來就是在兩個小的彈性容器內再次放置圖片組件和文字組件，並對圖片組件和文字組件設置相應的尺寸，同時通過圖片組件上傳圖片。

接下來就是對項目進度的內容填充，分別放置兩個彈性容器來填充“流程審批”和“需求分析”的內容。在“流程審批”彈性容器內放置一個圖片組件和一個彈性容器，圖片組件就是用來放置那個小圓圈的，彈性容器用來放置兩個文字組件的，填充“流程審批”的組件水平對齊調整成居左，填充“日期”的文字組件水平對齊調整成居右，兩個文字組件的垂直對齊都調整成居中，這樣就跟模板上一樣啦。

好了，一個稍微糊弄的APP端頁面就這樣搭建好了，雖然在製作過程中一直在嵌套容器，於我個人而言，正是通過這些容器的嵌套，才確保了頁面的規範性。想想以前用Axure設計的頁面，簡直不忍直視，不是Axure用不起，而是浮木雲更有性價比，哈哈哈。