#4 研究各種 UI 元件
認識一些常用的 UI 元件：Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date Picker，Visual Effect View with Blur，Color Well
除了手動操作之外，iOS app 設計相關文章和 Apple 開發官網也一併研究。
Segmented Control
選擇不同的選項或類別的元件，如不同分頁或功能切換使用。
- Segments — 設定總共要幾個區塊。
- Segment — 選擇指定區塊進行詳細的個別設定。
(Segment 是從 0 開始遞增數字) - Title — 設定指定區塊顯示的文字。
- Image —設定指定區塊顯示的圖片。
(Title 和 Image 只能二擇一，選了其中一個，另一個會自動被清除) - Selected — 設定預設選項。
- Momentary — 設定有沒有滑塊在上面移動的效果。
human-interface-guidelines：
Apple 開發官網：
Slider
以滑動的方式設定數值的元件，如控制音量、螢幕亮度。
- Value — 設定目前的數值(預設值)。
- Minimum — 設定範圍的最小值(最左側)。
- Maximum — 設定範圍的最大值(最右側)。
- Min Image — 設定最左側(最小值)顯示的圖示。
- Max Image — 設定最右側(最大值)顯示的圖示。
- Min Track — 設定預設值(圓點)左側滑桿的顏色。
- Max Track — 設定預設值(圓點)右側滑桿的顏色。
- Thumb Tint — 設定預設值(圓點)的顏色。
human-interface-guidelines：
Apple 開發官網：
Switch
控制開關兩種狀態切換的元件，如打開鬧鐘。
- State — 預設開關的狀態(On/Off、Enable / Disable)。
- On Tint — 設定On 的底色。
- Thumb Tint — 設定控制開關(圓點)的顏色。
human-interface-guidelines：
Apple 開發官網：
Activity Indicator View
正在處理某件事而沒有停止狀態的元件，讓使用者可以衡量並瞭解可能處理該工作還需要多久，如資料下載中、頁面切換中。
- Style — 設定狀態圈的顏色及樣式大小。
- Color — 自訂顏色。
- Animating — 勾選後會有動畫效果。
(使用模擬器實際執行才看得到圖示轉動) - Hide When Stopped — 勾選後當進度跑完時動畫就會消失。
human-interface-guidelines：
Apple 開發官網：
Progress View
顯示當前任務進度的水平進度條的元件，對使用者來說比 activity indicator view 更直觀、清楚，如資料下載的進度。
- Style — 設定樣式(Default/Bar)
Bar：未完成的進度條(右邊)是透明的 - Progress — 設定目前進度，數值範圍位於0~1之間(Float)。
- Progress Tint — 設定已完成進度的顏色。
- Track Tint — 設定尚未處理進度的顏色。
- Progress Image — 設定已完成進度的圖案。
- Track Image — 設定尚未處理進度的圖案。
human-interface-guidelines：
Apple 開發官網：
Visual Effect View with Blur
透過模糊背景的內容來強調前景的內容(毛玻璃效果)的元件，讓使用者專注於前景內容的效果，如 iPhone 的控制中心。
- Blur Style — 設定模糊化效果。
(Regular 預設的模糊效果、Prominent 突出的模糊效果、Dark 深色的模糊效果、Light 淺色的模糊效果、Extra Light 非常淺色的模糊效果)
Apple 開發官網：
Page Control
顯示有幾個分頁以及目前在第幾個分頁的元件，如圖片輪播。
- # of Pages — 設定總共要幾個分頁。
- Current — 設定目前在第幾頁。
(Current 是從 0 開始遞增數字) - Hides for Single Page — 勾選後當只有一頁時會被隱藏。
- Tint Color — 設定其他頁面(圓點)的顏色。
- Current Page — 設定當前頁面(圓點)的顏色。
human-interface-guidelines：
Apple 開發官網：
Date Picker
日期時間選擇的元件，如訂機票的出發日期或返回日期。
- Preferred Style — 設定樣式。
(Automatic 系統自動選擇、Wheels 滾輪樣式操作介面、Compact 點擊後日期成日曆樣式和時間成滾輪樣式、Inline 日曆樣式操作介面) - Mode — 設定顯示 Time、Date、Date And Time 或 Count Down Timer。
- Locale — 設定語言與地區。
- Interval — 設定時間的間隔。
- Date — 設定初始日期與時間。
- Minimum Date — 設定最小日期與時間。
- Maximum Date — 設定最大日期與時間。
human-interface-guidelines：
Apple 開發官網：
Color Well
顏色選擇的元件，如主題設置、數據可視化。
human-interface-guidelines：
Apple 開發官網：
作業來源：
參考
1. https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57
