#2 UI 元件初相見(上)
第二個作業，彼得潘教我們直接在Xcode上製作storyboard！其實整個介面跟以往工作上面用的figma或是Sketch蠻像的，最大差別應該是Xcode上的可以直接畫完就讓他在模擬器或是自己的手機上跑起來，立刻體會真實觸感(?)
這次總共要體驗九個元件，話不多說，咱們來瞧瞧吧！
首先，我先把所有元件通通排到App上來，為了研究每個元件當中彼得潘指定要看的項目，我就盡可能地把顏色弄的很對比，比較能看出項目上差異，先來看看全部弄一起之後跑起來的樣子：
接下來，讓我一一來介紹一下這些元件：
Segmented Control
切換分類的元件，比方選擇不同戲劇種類。
研究欄位
1 Segments：表示這個元件總共要有幾種分類，像上面我所做的就是三種分類：台劇排行榜/日劇排行榜/韓劇排行榜
2 Segment：可以選擇現在要編輯的是哪一種分類，他會決定你下面的title是在編輯哪一欄，像圖一畫面中的Segment就選擇了最右邊的韓劇排行榜
3 Title：延續第二點，所以這時候編輯的title就是這個元件最右邊的名稱
4 Image：分類的項目除了可以輸入文字，也可插入圖片！像這裡就是顯示我中間那一類，插入的是一個日曆的圖案。這功能我覺得挺神奇的，從來沒想過分類的標示可以用圖片來代表，不過我剎那間也還真想不到在哪個App有這樣的設計。
5 Selected：表示的是當這個分類被選起來的時候，他的底色會變成什麼顏色，目的當然是讓顧客在點選的時候透過顏色的改變達到動作反饋的目的。
Slider
滑動設定數值的元件，比方控制音樂的音量，螢幕的亮度等。
研究欄位
1 Value：整條bar中，預設的中間點要在哪裡(也就是紫色點點的位置）
2 Minimum：整條bar的最小值
3 Maximum：整條bar的最大值
4 Min Image：最小值的圖案(最左邊)
5 Max Image：最大值的圖案(最右邊)
6 Min Track：紫色點點左邊的bar的顏色
7 Max Track：紫色點點右邊的bar的顏色
8 Thumb Tint：紫色點點的顏色 （沒錯！就是紫色XD)
Switch
開關，比方設定是否打開 9:30 起床的鬧鐘。
研究欄位
1 State：預設的開關是關/開
2 On Tint：開關的底色(此處的紅色）
3 Thumb Tint：開關的顏色(此處的綠色）
Activity Indicator View
代表正在做某件事的進度條，比方資料下載中。這個功能也是PM們又愛又恨的設計，愛的是他讓顧客知道App還在動…請他們先冷靜的耐心等候，恨的是轉沒三秒鐘，顧客就覺得轉太久….App一定是壞了 Orz
研究欄位
1 Style：轉圈圈的這個圖案的大小
2 Color：轉圈圈的顏色（此處選了個大膽的桃紅色…應該沒有App敢用XD)
3 Animating：動起來的時候會不會有動畫 （沒有動畫就沒有動起來的感覺啦，所以我很好奇有App選這個然後不要動畫的嗎？）
本集就先到這，剩下的下集待續 ^^
