iOS 7 扁平化設計語言風靡一時，其標誌性的細線圓環進度條極具辨識度。本教學將帶你從零繪製一套完整的 iOS 7 風格倒數計時器界面，涵蓋向量形狀、旋轉複製、漸層蒙版、文字排版等核心技巧。

最終效果預覽

步驟 1：畫布與基準線

新建 730×410 px 文件，視圖 → 新建參考線，添加水平垂直中心線輔助對齊。

步驟 2：繪製基礎圓環

橢圓工具 (U) 按 Shift 繪製 120×120 px 正圓，填充「無」、描邊 5 px、顏色 #e1e1e1，置於畫布中心。

步驟 3：繪製刻度基準線

放大至 1200%，直線工具 (U) 從圓心向頂點繪製 1 px 直線。

步驟 4：旋轉複製生成 36 道刻度

1. Ctrl+Alt+T 進入自由變形複製模式，按住 Shift+Alt 拖動參考點至直線底端 (旋轉中心)。
2. 選項欄旋轉角度輸入 10°，按 Enter 確認兩次。
3. Shift+Ctrl+Alt+T 連續複製，直至閉合成完整圓環 (共 36 道)。

步驟 5：漸層蒙版製作進度動畫基礎

1. 複製原始圓環圖層置頂，添加「漸層疊加」樣式：角度 0°、反向、雙色停點 (透明 → 白)。
2. 添加圖層蒙版，黑色畫筆繪除 1/4 區域 (對應 0 秒位置)，剩餘 3/4 白色區域顯示漸層，模擬進度條「已走過」段落。

步驟 6：時間文字排版

文字工具 (T) 輸入「天、時、分、秒」標籤與數字，字重、顏色與漸層色停點一一對應 (如紅色對應秒、藍色對應分)，字體建議 Helvetica Neue UltraLight/Thin。

步驟 7：組裝四組計時單元

將所有圖層編組 (Ctrl+G) 命名「Day」，複製 3 組分別改為「Hour」「Min」「Sec」，水平間距 20 px，修改對應數值與漸層蒙版遮罩範圍，形成完整倒數計時器。

步驟 8：iOS 7 風格壁紙背景

導入 iOS 7 系統壁紙 (鋼鐵人、紙飛機、風車等)，濾鏡 → 模糊 → 高斯模糊 (半徑 15-20 px) 作為背景，瞬間提升界面質感與沉浸感。

設計師手記

此教學核心在於「旋轉複製」批量生成等角刻度，與「漸層蒙版」動態控制進度顯示——兩大技巧廣泛適用於儀表盤、進度環、Loading 動畫等 UI 元件設計。掌握向量非破壞流程，隨時可調整顏色、粗細、刻度數量，極大提升複用效率。