今天我們要來介紹天氣 App 介面部分的設計,也就是各個畫面的 XIB 佈局。雖然邏輯在前幾篇都已經完成,但畫面的呈現同樣重要,因為它決定了使用者操作的直覺性與整體體驗。
在主畫面中,我們放置了 1 個 Button 和 1 個 PickerView。PickerView 主要讓使用者可以從列表中選擇台灣的縣市,而 Button 則用來確認選擇並跳轉至下一個畫面。這個畫面看似簡單,但它是整個資料流程的開端。
第二個畫面包含 1 個 Button、1 個 Label 與 1 個 TableView。Label 用來顯示當前選擇的城市名稱,而 TableView 則負責列出該地區未來幾個時段的天氣資料。返回按鈕讓使用者能輕鬆回到上一頁,整體設計乾淨、明確。
最後是自訂的 Cell,內含 5 個 Label 與 5 個 ImageView,分別顯示時間、溫度、天氣狀況與舒適度等資訊。這個 Cell 是整個介面的關鍵,負責將 API 資料清楚呈現給使用者,完成整個天氣資訊展示的最後一步。