Wireframe主要是在規劃「頁面要放什麼、功能要放在哪裡」，而今天開始進入下一個階段：
把 Wireframe 轉換成真正的 UI Design。
這也是整個設計過程中，我覺得變化最明顯的一個階段。
原本只有黑白灰的線框稿，開始加入色彩、字體、按鈕、卡片、輸入框等視覺元素，讓原本只有架構的網站逐漸變成一個真正的醫院網站。
在Wireframe階段，我主要關注的是：
到了UI Design，則需要進一步考慮：
因此這次並不是重新畫一個網站，而是以之前完成的Wireframe為基礎，逐步加入視覺設計。
以首頁做舉例，從兩張對比可以看到，Wireframe主要用來確認頁面架構，而UI Design則進一步加入色彩、文字、按鈕、卡片等視覺元素。
這也讓我更明顯感受到，Wireframe 和UI Design雖然都是設計介面，但解決的問題其實不太一樣。
在開始設計UI之前，我先決定整個網站的主要視覺方向。
這個專案是「智慧醫院管理平台」，第一階段又是以「醫院預約網站」為主，因此我希望網站看起來是：
專業、乾淨、簡潔、具有醫療感。
而不是比較像一般企業形象網站，使用大量裝飾性的圖片或複雜的視覺效果。
這次選擇：
Primary：#619FBE
並搭配：
白色
淺藍色
深藍色
淺藍色主要用在網站的主要功能與視覺元素，白色作為主要背景與資訊卡片，深藍色則用在Footer等區域。
希望透過這樣的配色，讓整個網站維持一致的醫療系統風格。
首頁最上方以深藍色標題作為視覺重點，右側搭配醫師圖片，營造專業且具有醫療服務特色的首頁視覺。
首頁主要分為以下四個區域：
將「預約掛號」、「醫師查詢」、「查詢預約」及「就醫資訊」設計為主要功能，並以四張卡片呈現，讓使用者能快速找到所需服務。
各功能卡片搭配「查看」按鈕，按鈕以深藍色為底色，搭配白色文字，提高按鈕的辨識度與操作性。
以輸入框呈現，採用白色背景搭配灰色邊框，並使用淺灰色提示文字，讓介面保持簡潔、清楚的視覺效果。
最新公告區域呈現近期的醫療相關公告，並將原本的「查看全部」按鈕改為分頁設計，讓使用者可以直接在首頁瀏覽不同頁面的公告內容，不需另外製作新的公告頁面。
Footer使用比首頁主要色調更深的藍色作為背景，搭配白色文字，與上方內容形成明顯對比，同時維持整體網站的色彩一致性。
頁面最上方顯示此頁面的標題，讓使用者能快速了解目前所在的頁面。
介紹頁主要分為以下五個區域：
以圖文並排的方式呈現醫院資訊，左側放置醫院相關圖片，右側搭配醫院介紹文字，讓使用者能快速了解醫院的基本資訊與特色。
呈現醫院的三項主要醫療理念：「專業醫療」、「智慧醫療」及「病人為中心」。
每項理念搭配一個具有代表性的Icon，透過圖像與文字的搭配，讓內容更加直觀，也提升整體視覺效果。
將醫療服務以卡片形式呈現，每張卡片介紹一項醫療服務。
卡片使用Auto Layout設計成橫向排列，使用者可以左右滑動瀏覽不同的醫療服務，讓有限的版面能呈現更多內容。
以醫師卡片呈現醫療團隊資訊，卡片中放置醫師頭像及基本資訊，並以白底搭配藍色框線呈現醫師專長。
「查看醫師」按鈕延續前面頁面的設計，使用深藍色底搭配白色文字，維持網站整體介面的一致性。
頁面底部放置交通與聯絡資訊，包含醫院地址、聯絡方式及交通資訊，並搭配 Google 地圖，方便使用者查看醫院位置及規劃前往路線。
頁面最上方顯示此頁面的標題，讓使用者能快速了解目前所在的頁面。
查詢頁主要分兩個區域 :
跟首頁的尋找醫師區域設計相同。
以卡片方式呈現，可切換分頁看更多醫師。
以6張醫師卡片作為範例，確認實際畫面中的排列方式與資訊量。
每張卡片讓使用者快速看到醫師的基本資訊，因此不放入過多內容，避免資訊太過複雜。
「查看醫師」按鈕延續前面頁面的設計，使用深藍色底搭配白色文字，維持網站整體介面的一致性。
頁面以卡片形式呈現醫師的基本資訊，包含醫師照片、姓名等內容，讓使用者可以快速了解醫師資料。
醫師詳細頁資訊分為「專長」、「學經歷」、「門診時間」等區域，讓使用者能進一步了解醫師的專業背景與看診資訊。
門診時間以深藍色的圓點表示有看診的時段，讓使用者能快速辨識可預約的時間。
頁面下方提供「立即預約」按鈕也是採用前面頁面的設計。
掛號頁主要分為4個區域 :
延續醫師詳細頁的設計，以卡片呈現預約醫師的基本資訊，讓使用者在掛號時可以再次確認目前選擇的醫師。
使用者可以自行選擇想要的看診日期與時段。
日期使用下拉式選單進行選擇，時段則以按鈕呈現，讓使用者可以直接點擊選擇可預約的看診時間。
病人資料會自動帶入目前登入會員的基本資料，減少使用者重複輸入的操作。
另外提供「修改會員資料」按鈕，按鈕樣式延續前面頁面的設計，維持整體介面的一致性。
使用輸入框讓使用者填寫此次就診的原因，並以淺灰色提示文字說明輸入內容，協助使用者了解需要填寫的資訊。
頁面最下方放置兩個操作按鈕，左側為「返回上一頁」，右側為「確定預約」。
「確定預約」使用主要的深藍色按鈕樣式，作為頁面的主要操作；「返回上一頁」則作為次要操作，讓使用者可以返回前一個頁面修改預約內容。
頁面最上方顯示成功圖示，讓使用者可以直接觀看到預約已完成。
以卡片呈現預約資訊，內容包含預約編號、醫師、日期等就醫資訊，方便使用者確認預約內容。
下方放置「就診提醒」，提醒使用者看診時需要注意的事項。
頁面最下方提供兩個按鈕，分別為「查看我的預約」及「返回首頁」，按鈕樣式延續前面頁面的主要按鈕設計，維持整體UI的一致性。
預約頁分為2個區域 :
提供四種預約狀態讓使用者進行篩選，使用次要按鈕樣式呈現，採用白色背景搭配藍色邊框，讓使用者可以快速切換不同的預約狀態。
顯示目前共有幾筆預約，並以卡片呈現各筆預約的基本資訊。
每張預約卡片提供「查看詳情」按鈕，使用者可以點擊後進入預約詳細頁面，查看完整的預約資訊。
預約詳細資訊頁的背景使用淺藍色，主要預約資訊則以白色方形卡片呈現，讓內容更加集中，也與背景形成明顯對比。
頁面左上角提供「我的預約」按鈕，方便使用者返回我的預約頁面。
頁面上方顯示成功圖示，代表目前這筆預約已處於成功狀態。
就診提醒使用藍色框線區隔並特別呈現，讓使用者可以快速注意到重要的就診資訊。
頁面下方提供紅色的「取消預約」按鈕，透過紅色與其他介面元素形成明顯區別，提醒使用者這是一項會影響目前預約狀態的操作。
取消預約設計為彈出視窗（Modal），讓使用者在取消前可以再次確認預約資訊。
視窗最上方顯示警示圖示，提醒使用者目前正在進行取消預約的操作。整體採用白色背景，主要預約資訊則以藍色方形區塊呈現，方便使用者再次確認預約內容。
資訊框下方加入橘色提示文字，提醒使用者取消預約相關的注意事項。
視窗最下方提供兩個操作按鈕，左側為「保留預約」，右側為紅色的「取消預約」。
其中「保留預約」作為次要操作，而「取消預約」使用紅色強調，讓兩個操作的差異更加明確，降低使用者誤操作的可能性。
視窗最上方顯示成功圖示，讓使用者可以確認預約已成功取消。
主要預約資訊以藍色方形區塊呈現，方便使用者再次確認已取消的預約內容。
資訊框下方加入橘色提示文字，提醒使用者取消預約後相關的注意事項。
視窗最下方提供「返回我的預約」按鈕，讓使用者可以直接回到我的預約頁面查看目前的預約狀態。
就醫資訊頁主要分為三個區域 :
將就醫流程以卡片形式呈現，每個步驟搭配相應的圖示與文字，並使用藍色箭頭連接各個步驟，讓使用者可以清楚了解完整的就醫流程。
提供「初診須知」、「看診前準備」及「預約掛號須知」等資訊，讓使用者在就醫前可以先了解相關注意事項。
常見問題區域採用淺藍色框搭配深藍色文字，維持網站整體的視覺風格。
使用者點擊問題後，下方會展開顯示對應的答案；再次點擊則可以收合內容，讓頁面在維持整潔的同時，也能提供完整的問題解答。
登入頁的背景使用淺藍色，中間以白色卡片呈現登入區域，讓主要操作內容更加集中。
帳號與密碼使用白色背景搭配藍色框線的輸入框，並在輸入框內加入淺灰色提示文字，協助使用者了解需要填寫的資訊。
密碼輸入框下方提供「記住我」及「忘記密碼」兩項功能，方便使用者進行登入操作。
「登入」按鈕使用前面頁面的主要按鈕樣式，以深藍色搭配白色文字，維持整體介面的一致性。
卡片最下方提供「立即註冊」連結，讓尚未註冊的使用者可以直接前往註冊頁面。
註冊頁延續登入頁的整體設計，使用相同的淺藍色背景與白色卡片，讓登入與註冊頁面在視覺上保持一致。
各項輸入框同樣採用白色背景搭配藍色框線，部分欄位下方加入灰色提示文字，協助使用者了解填寫格式或相關注意事項。
在確認密碼下方提供隱私權及服務條款的勾選項目，讓使用者在建立帳號前確認相關內容。
「建立帳號」按鈕使用主要按鈕樣式，讓使用者能清楚辨識主要操作。
卡片最下方提供「登入」連結，讓已經有帳號的使用者可以直接返回登入頁面。
在進行UI Design的過程中，我發現原本的頁面規劃中還缺少一個功能：
使用者需要有一個地方可以查看與修改自己的個人資料。
因此我新增了「個人檔案頁」。
整體延續前面網站的設計風格，同樣使用卡片式設計，將會員的基本資料集中在卡片中呈現。
在查看資料的狀態下，使用者可以直接看到自己的會員資訊。
另外，在卡片中加入「編輯」按鈕，讓使用者可以進入資料修改狀態。
按鈕的設計則延續網站原本的按鈕規則：
一開始我有想過，是否要將「查看個人資料」與「編輯個人資料」拆成兩個不同頁面。
但如果這樣設計，使用者每次修改資料都需要進入另一個頁面，操作流程會比較繁瑣。
而且兩個頁面的內容其實非常接近，主要差別只是：
查看時顯示資料，編輯時則將資料變成可以輸入的欄位。
因此最後我決定不另外建立一個編輯頁面，而是讓同一個頁面可以切換兩種狀態。
這時候就可以使用Figma的Variant。
我將個人檔案設計成同一組Component，並建立兩個Variant：
Profile
View是一般的查看狀態。
使用者進入個人檔案頁時，可以直接看到自己的會員資料。
而當使用者點擊「編輯」後，就切換到Edit狀態。
在Edit狀態中，原本顯示資料的地方會改成輸入框，讓使用者可以直接修改內容。
同時，編輯狀態下也會提供取消編輯的操作。
1.Wireframe和UI的比例不完全一樣
Wireframe時比較專注在功能與版面，因此原本的區塊大小不一定適合直接套用到正式 UI。
加入文字、圖片和實際內容後，有些區塊會變得太大或太小。
2.不知道網站應該使用什麼顏色
一開始不確定醫院網站應該使用什麼樣的配色。
如果顏色太多，網站會顯得混亂；如果全部使用白色，又可能缺少視覺層次。
因此需要找到一個可以貫穿整個網站的主要色彩
3.不同頁面容易出現風格不一致
當頁面越畫越多後，也發現如果每一頁都單獨設計，很容易出現：
因此在設計過程中需要不斷回頭確認前面頁面的設計，避免不同頁面看起來像不同網站。
1.以Wireframe為基礎重新調整
沒有直接把Wireframe原封不動轉成UI，而是將Wireframe當作版面基礎，再重新調整：
讓實際內容加入後，畫面仍然保持平衡。
2. 建立主要配色
最後確定以：
#619FBE
作為主要色彩，再搭配白色、淺藍色與深藍色。
這樣之後製作不同頁面時，就有一個固定的視覺方向可以參考。
3. 維持一致的UI規則
在設計不同頁面時，不斷確認按鈕、文字、卡片與輸入框的視覺風格。
希望使用者從首頁進入其他頁面時，仍然可以感受到這些頁面屬於同一個網站。
這次主要學習到：
這次也讓我發現，UI Design並不是單純把Wireframe「上色」。
加入實際內容後，原本在Wireframe階段看不出來的問題，例如文字太多、區塊比例不平衡、間距不一致等，都會慢慢出現。
因此UI設計其實也是一個不斷調整與修正的過程。
這次主要透過AI協助進行：
在遇到問題時，我會先自己嘗試設計，再將目前遇到的問題整理後詢問AI。
例如在配色、頁面比例或資訊排列上，如果自己不確定，就會詢問AI是否有其他設計方向可以參考。
最後再依照自己的專案需求進行判斷與修改，而不是直接套用AI提供的設計。
iThome鐵人賽
看影片追技術