人人都能上手的UI 工具 :Figma/Sketch/AdobeXD 教學

你可以學到

1. 分析業界主流三大設計軟體特色，為你指點迷津
2. Figma基本與進階功能教學
3. Sketch基本與進階功能教學
4. Adobe XD基本與進階功能教學

課程內容

你想要成為UI設計師嗎，卻不知道該從哪個軟體開始著手學習嗎？這堂課將會深入簡出的介紹市面上三大主流設計軟體「Figma」、「Sketch」、「Adobe XD」，課程圍繞在三個軟體的軟體差異、工作區操作、資源應用等三大面向，系統化的方式帶你快速上手，扎實掌握業界最常使用的三大設計軟體的基本和進階功能。

哪些人需要這門課程

1. 第一次接觸 UI 設計的新手
2. 具 UI 設計經驗但缺乏軟體轉換能力者
3. 想一次學習三大軟體並快速上手者

作業說明

此堂課程設計，從單元二開始都有相對應的作業，請學員在結束課程後務必試著完成以下作業，讓學習效益最大化。

一、繳交方式說明:

請掃描以下Qr Code加入匿名的作業社群，老師會在群組中為大家批改作業，並回答大家在課程中的疑問。

二、單元二作業：以「美食部落格」為主題設計一組產品介面

1. APP 或網頁形式皆可
2. 至少要有三個功能頁面
3. 請應用課程中所教的「樣式（Color Styles、Text Styles、Effect Styles）」功能
4. 請嘗試在各個設計階段建立版本紀錄，並以文字敘述說明（ex: 第一個功能頁設計完、完成樣式新建、最後完成版）
5. 若你在設計上有一些想法，也可以在設計稿旁邊加上註釋或設計理念
6. 請用「save local copy」的方式，將 Figma 檔案存成 local 檔來繳交作業

作業重點：這個作業主要著重在功能應用上，確認你了解各個工具如何操作，並能確實應用，以完成介面設計。

注意事項：介面上的文字內容盡量使用看起來像是真實的資料，避免使用假字

三、單元三作業：以「旅遊平台」為主題設計一組產品介面

1. APP 或網頁形式皆可
2. 至少要有三個功能頁面
3. 請應用課程中所教的「色票（Colors）及文字樣式（Character Styles）」功能
4. 若你有 Illustrator 或 Photoshop，請利用他們（擇一即可）設計一組 icon，透過 Creative Cloud 置入 Adobe XD 並應用
5. 若你在設計上有一些想法，也可以在設計稿旁邊加上註釋或設計理念

作業重點：這個作業主要著重在功能及與整合 Adobe 其他軟體的設計上，確認同學了解各個工具如何操作，並能確實應用，以完成介面設計。

注意事項：介面上的文字內容盡量使用看起來像是真實的資料，避免使用假字

四、單元四作業：以「線上點餐系統」為主題設計一組產品介面

1. APP 或網頁形式皆可
2. 至少要有三個功能頁面
3. 請應用課程中所教的「樣式（Text Styles、Layer Styles）」功能
4. 請將設計稿輸出至 Zeplin，把應用的顏色與文字樣式新增到 Styleguide，並截圖「Dashboard」、Styleguide 中的「Color Palette」及「Text Style Catalog」（共 3 張截圖），連同作業一併繳交
5. 若你在設計上有一些想法，也可以在設計稿旁邊加上註釋或設計理念

作業重點：這個作業主要著重在功能應用上，確認同學了解各個工具如何操作，並能確實應用，以完成介面設計與設計交付。

注意事項：介面上的文字內容盡量使用看起來像是真實的資料，避免使用假字

五、額外練習作業：加分題 - 臨摹一個線上產品

1. 從手機或電腦中，找到想臨摹的產品並截圖，使用 Figma / Sketch / Adobe XD 其中一種工具進行臨摹，盡可能將原圖細節呈現出來
2. 若你覺得原設計有可以優化的地方，可以在臨摹時做微調，並在旁邊加上註釋
3. 請將產品截圖與作業一併繳交

作業重點：這個作業主要著重在視覺設計上，確認在畫面呈現有清楚的視覺層級、有邏輯性的編排及清晰的顏色對比。

注意事項：介面上的文字內容盡量使用看起來像是真實的資料，避免使用假字

常見問題