iOS 客戶端界面設計

來自專欄如何獨立開發一個完整應用

在前面的小節中我們已經設計了 App 的功能，現在我們就根據功能來設計界面。因為，界面所需要承載的就是將一堆服務端數據轉換成用戶喜歡的數據呈現形式。

這裡首先推薦一款 App 原型設計工具 Sketch。

下圖是上線 App 的主要界面預覽圖：

接下來，我們來一步步拆分成單元控制項，分析界面是如何組成的。

控制項

如上圖所示，框1、框2、框3可以歸納為統一卡片類型控制項。布局分為：title、desc、subtitle、image。但是在框2和框3中只有 title 和 image，其餘部分則隱藏。而框2和框3使用的位置也是類似的，完全可以重用。有一點需要注意，框2中的卡片是可以左右滑動的，也就是說它們被嵌套在另一個容器控制項中。

根據上面的分析，框1用在 UITableView 中做為卡片控制項，框2用在 UITableViewCell 中嵌套的 UICollectionView 中，框3用在 UICollectionView 中。

至於框4，則是另外一個獨立的卡片控制項，也可以說是一個輪播圖（多張卡片按照既定邏輯顯示）。這個控制項主要用來顯示當前人氣爆款菜譜，數據雖然不多，但是也需要考慮重用機制，以節省不必要的內存開銷。

上圖主要落眼於內容呈現。如圖，框1和框2都是文本顯示，布局分為：title、button、labels。不同的是，button 會根據需要而隱藏。框3則是純粹的圖文展示，且可重複。框4是自定義工具欄，每個 item 都是一個 button（由 image 和 title 組成）。

實現

按照上面的控制項思路分析，我們可以將其他功能拆機分析完畢。接下來就是如何實現界面。在 iOS 開發中有兩種方式：純代碼布局、storyboard。

純代碼布局，通過純粹代碼實現布局，實現起來比較辛苦。需要考慮兼容各種尺寸的設備，還需要考慮轉屏適配。

storyboard，可視化操作，輕鬆拖拽實現界面布局。添加約束條件，系統實現屏幕自適應。

兩者的差異在於：純代碼實現可控性強，可閱讀性強，多人合作代碼衝突易解決，兼容性好，工作量大。storyboard 實現操作輕鬆簡單，但不易於解決代碼衝突，不便於管理，文件佔用空間大。

在項目中，筆者選擇純代碼實現界面。

小結

本小節介紹了如何根據功能設計界面，拆分組成單元。介紹多種界面實現方式，並簡要說明各方式優缺點。

推薦閱讀：