前幾天完成Wireframe，並開始將畫面轉換成正式的UI Design後，我發現一個新的問題。
雖然目前每個頁面都已經有基本的UI設計，但網站中有很多重複出現的元素，例如按鈕、輸入框、卡片等。
如果每個頁面的按鈕都重新製作一次，之後想修改按鈕樣式，就必須一個一個修改。
因此這一天開始學習Figma的Component，嘗試將網站中會重複使用的UI元件整理起來。
簡單來說，可以把Component想成一個「可以重複使用的UI元件」。
例如網站中會有很多按鈕，會有不同狀態：
Button
-Default
-Hover
-Pressed
如果直接複製一般圖形，每個按鈕其實都是獨立的。
但如果把按鈕建立成Component，就可以建立很多個Instance使用。
之後如果修改主要Component的設計，就可以同步影響使用這個Component的地方。
這讓我開始理解，UI Design不只是把畫面畫漂亮，也需要考慮之後修改與維護的方式。
主要是整理一些在不同頁面會重複使用的元件像是，常用的按鈕、Header、輸入框、卡片等。
如果每個頁面都重新製作，不但花費時間，也容易造成不同頁面的樣式不一致。
因此我開始嘗試把這些常用元素整理成可以重複使用的Component。
因為導覽列每個頁面都要有，所以我把Header做成Component
且有登入和未登入兩個版本
首先是網站中最常使用的按鈕。
因為按鈕不只有一種狀態，所以我開始思考如何把不同狀態整理在同一個Component中，讓之後製作其他頁面時可以直接重複使用。
例如：
Button
** Default 是按鈕的一般狀態。
當滑鼠移動到按鈕上方時，使用Hover狀態。
點擊按鈕時，則使用Pressed**狀態。
我也將這些狀態加入到首頁的按鈕設計中，讓之後其他頁面可以直接使用相同的按鈕元件。
我也將這些不同狀態加入首頁的按鈕設計中，建立好 Button Component 後，之後其他頁面就可以直接使用相同的按鈕元件。
這樣不需要每個頁面重新設計按鈕，也能讓整個網站的按鈕樣式保持一致。如果之後需要修改按鈕的樣式，也可以直接修改 Component，再同步套用到其他頁面。
主要按鈕是頁面中較重要的操作，例如「立即預約」、「查看醫師」、「查看詳情」及「登入」等。
由上到下依序為Default->Hover->Pressed，顏色由淺藍色逐漸變為深藍色，並統一使用白色文字。
次要按鈕主要用於「科別篩選」、「預約時段篩選」等操作。
由上到下依序為，Default->Hover->Pressed
* Default：白色背景、深藍色框線、灰色文字
* Hover：淺藍色背景、深藍色框線、藍色文字
* Pressed：深藍色背景、白色文字
透過三種狀態的變化，讓使用者可以清楚感受到按鈕目前的互動狀態。
登入按鈕同樣建立 Default、Hover、Pressed 三種狀態。
由上到下依序為，Default->Hover->Pressed
* Default：白色背景、深藍色框線、灰色文字
* Hover：淺藍色背景、灰色文字
* Pressed：深藍色背景、黑色文字
取消按鈕也建立 Default、Hover、Pressed 三種狀態。
由上到下依序為，Default->Hover->Pressed，顏色由淺藍色逐漸變為深藍色，並統一使用白色文字。
除了按鈕之外，輸入框也是網站中很常使用的元件。
例如醫師查詢頁就有搜尋醫師的輸入框。
因此我也將輸入框建立成共用的Component，並設計不同的互動狀態。
Input
Default是一般狀態。
Hover是滑鼠移動到輸入框上方時的狀態。
Selected則是使用者點擊輸入框後，準備輸入文字時的狀態。
透過這樣的方式，可以讓不同頁面的輸入框維持相同的設計。
* Default：白色背景、灰色框線、淺灰色提示字
* Hover：白色背景、深藍色框線、淺灰色提示字
* Pressed：白色背景、深藍色框線、淺灰色提示字**(使用Effects的Drop shadow增加陰影效果)**
網站中也有很多資訊是使用卡片呈現。
例如醫師查詢頁會使用醫師卡片，而醫院介紹頁則會使用醫療服務卡片。
雖然兩種卡片呈現的內容不同，但整體上都有類似的資訊區塊結構。
因此在設計UI時，也開始思考哪些部分可以整理成共用元件。
例如：
Card
透過Component的方式，可以讓相同類型的卡片維持一致的間距、文字大小與版面結構。
後來在製作就醫資訊頁時，又遇到另一個Component的問題。
就醫資訊頁需要放很多FAQ，如果每一個問題都重新製作一個展開/收合的FAQ，會產生很多重複的工作。
因此我開始嘗試製作一個可以重複使用的FAQ Component。
原本建立Component後，我直接複製多個Instance，結果發現每個Instance裡面的問題和答案文字沒有辦法直接修改。
這也是我第一次真正遇到Component使用上的問題。
使用Text Property讓Component可以重複使用
後來詢問AI後，我了解到Figma可以使用Text Property(文字屬性)。
因此我將FAQ Component裡面的文字設定成Text Property，並分別命名為：
這樣建立Instance後，就可以直接在右側的屬性面板修改Question和Answer。
例如：
FAQ Component
Question -> 如何預約掛號？
Answer -> 可以透過網站進行線上預約。
另一個Instance則可以修改成：
Question -> 看診前需要準備什麼？
Answer -> 請依照就醫資訊中的說明準備相關資料。
這樣只需要製作一個FAQ Component，就可以產生很多不同內容的FAQ。
這讓我開始理解Component不只是「複製東西」而已，而是可以建立一套可以重複使用的設計規則。
在實際操作Component的過程中，我也慢慢接觸到幾個新的概念。
主要的元件。
可以把它想成「原始模板」。
由Component建立出來的使用版本。
例如建立一個Button Component後，可以產生很多個Button Instance。
用來表示同一個Component的不同狀態。
例如按鈕：
Button
這些就可以使用Variant來管理。
後來在個人檔案頁設計查看/編輯功能時，我也使用Variant建立：
Profile
讓同一組Component可以呈現不同狀態，而不需要製作兩個幾乎完全相同的畫面。
在學習Component的過程中，我遇到比較大的問題就是：
「明明已經建立Component，為什麼複製出來的Instance還是不能直接修改內容？」
一開始我以為只要建立Component，再複製很多份就可以了。
實際操作後才發現，如果Component裡面的文字沒有設定成可以修改的屬性，Instance就無法直接替換內容。
另外，我也不太清楚：
這些都是第一次實際製作Component時遇到的問題。
遇到問題後，我沒有直接把Component刪掉重新製作，而是先確認問題出在哪裡，再詢問 AI。
透過AI的說明，我逐漸搞懂：
再依照這些概念重新調整自己的設計。
例如FAQ使用Text Property：
FAQ Component
而個人檔案查看/編輯則使用Variant：
Profile Component
這樣可以減少重複製作，也讓整個設計更容易管理。
這次主要學習：
這次在製作Component時，主要透過AI協助釐清Figma的功能與使用方式。
例如：
在遇到問題時，我會先自己操作並確認問題，再整理目前的設計需求詢問AI。
參考AI提供的解決方式後，再依照實際專案需求進行調整與實作，而不是直接套用AI的建議。
iThome鐵人賽
看影片追技術