iOS Clock — iOS的里程碑專案

Kyle X Swift
Apr 8, 2022

--

iOS時鐘是接觸iOS程式後第一個功能完整實踐的app專案,作為初步階段的自我挑戰。目標完整呈現iOS時鐘的所有功能和UI設計,包含了世界時鐘、鬧鐘、碼錶與計時器的功能,除了串接後台API的功能外,基本的Swift程式語言與UIKit框架技能都用上了。

未來會朝向SwiftUI的應用並結合UI設計,並將相關文章發佈在以下出版,有興趣的朋友歡迎追蹤。

儘管平時在設計UI便著重於資訊階層與細節的處理,在重新建構iOS時鐘的功能與設計過程中,因瞭解iOS UI 元件可提供的參數定義,相較以往能更全面地思索UI的可能性,回想到以前從事工業設計時很重要的一個觀念:「瞭解材質的特性與製造的原理,才能掌握你的設計。」,而呼應到現今的軟體能力與生態則是:

瞭解元件特性與程式原理,才能駕馭想像力與掌握設計。

以下是在執行iOS時鐘開發所體會到的幾項元件特性,可做為UI設計的原則參考:

  1. 畫面資訊階層,隨著使用者的瀏覽而動態的改變
  2. 區分畫面狀態,隱藏當前狀態不需要的功能資訊
  3. 資訊的視覺化,純文字數位資訊的視覺與圖像化

畫面資訊階層,隨著使用者的瀏覽而動態的改變

iOS 導航列的標題提供了largeTitleDisplayMode的參數,允許定義進入頁面時顯示large title,可一目了然知道當前頁面的功能;頁面向下滑時,標題變成small title,可專注在內文資訊。

區分畫面狀態,隱藏當前狀態不需要的功能資訊

一般清單提供資料的刪除、排序等的編輯功能,當沒有任何資料的時候不需要讓使用者看到編輯按鈕。可根據資料陣列isEmpty的布林參數作為顯示與否的判斷。

資訊的視覺化,純文字數位資訊的視覺與圖像化

以碼表與計時器功能來說,固然可以純數字顯示,透過數字的變化使用者也能感受到時間的改變。但透過圖像視覺的輔助,除了能傳遞更強烈的時間速度,透過刻度也能讓使用者意識到目前的時間階段,以更直覺的方式接收資訊。

Animation image, might take time for loading

以下是最終完整的程式碼,之後會嘗試用SwiftUI重新建構一次。

--

--