UI/UX使用者介面與使用者經驗
UX（User Experience）使用者體驗
則是根據使用者的習慣，安排整個網站或APP頁面的內容規劃，像是哪些區塊的內容要先在網站上出現，網站的互動設計、行動呼籲按鈕（Call to Action, CTA）的位置應該擺在哪裡。包括使用者的研究（User Research）和情境分析（Scenario）。研究必須透過問卷調查、焦點團體調查，或是大量的研究資料背景調查，才能獲得潛在客群的使用習慣報告分析。
UI（User Interface）使用者介面
主要專業是設計頁面上的功能、顧及使用的便利性與整個設計的美學，網站的美觀性和他息息相關；UI可以是將UX理念實踐的美學工程師，包括整個網站的顏色、字型、字體大小、配置安排，讓網站或APP除了有好的使用者體驗，更有舒適美觀的視覺設計。
UI的工作流程大概如下
1.User story > 2.Functional Map > 3.Flow Chart > 4.UI Flow > 5.Wireframe > 6.Mockup > 7.Prototype
UI的學習與製作流程
UI/UX的興盛
這幾年UI、UX 設計師成為視覺設計師熱門的行業首選，這是由網路發達而誕生的新興職業，適應世界趨勢的數位轉型需求增加。近幾年遠距工作盛行，也成為新工作型態的最佳選擇，也有較為優渥的薪水，人格特質展現與相較多元的職涯發展，最近幾年隨著科技業對於 App 和 RWD 網頁設計的要求日益升高，每天都有無數的APP誕生以及被下載，大眾也越來越注重所謂的「使用者體驗」和「現代化美感」，使得「 UI/UX 設計師」的需求迅速增加，要會的技能比以往更加多樣、專業，儼然成了設計界耀眼的新興職位！
UI、UX設計也成為近年來視覺設計師必備的專長與技能，請大家好好的利用這門課的時間，讓自己擁有最厲害的設計武器，製作出屬於自己的UI作品履歷。
Design Thinking｜設計思考
設計思考（Design Thinking）是一個以人為本的解決問題方法論，透過從人的需求出發，為各種議題尋求創新解決方案，並創造更多的可能性。而設計思考早已廣泛地被應用在商業領域去發展具市場價值的產品與服務
本方法的創始者為美國知名設計公司IDEO創辦人—David Kelley，在擔任史丹佛大學設計學院院長時，把過去從設計角度思考解決問題的經驗，萃取成一門碩士學程，建立起「設計思考」的學術地位。
「設計思考」總共有5個步驟，分別是 同理(Emphathize)→定義(Define)→發想(Ideate)→原型(Prototype)→測試(Test)，透過這5個步驟的設計流程，不斷的反覆測試與回頭修改後，我們將可以更有效率的設計出更貼近使用者需求的產品。
Functional Map｜功能地圖
在面對開發時，首先要確認資訊架構，瞭解使用者從哪裡來、將往哪裡去；釐清產品脈絡、定義功能、分類與組織訊息、規劃層級。在確認使用者之後，需先繪製功能地圖。
Functional Map（功能地圖）也類似於心智圖，每一個功能是一個節點，事先預想有什麼運行的功能要建立，我需要得到什麼資訊才能讓功能運轉，方便事先告知後端工程師準備適當的API。同時也理清操作上的細節，有不清楚的地方趁開始做之前和客戶確認。任何一套心智圖軟體都可以使用，我們的重點在有視覺化的圖案能和別人討論，這份心智圖大概也只有自己會編輯，網路上有許多免費的資源可以借來用，像是 Coggle和 MindMeister，或者下載的軟體像是 XMind 及 MindNode。
AI世界中，也有許多線上心智圖軟體，如： Mapify 心智圖摘要器，在幾秒鐘內將 YouTube、PDF 文件/文檔、URL、播客和會議記錄摘要轉換為心智圖。由 GPT、Gemini 或其他頂尖大型語言模型提供支持。
Flow Chart｜流程圖
創建流程圖有助於我們思考之後畫Wireframe時的重要依據，包括連結頁面跟頁面之間的關係，並確認所有需要的功能，也有助於與開發人員討論與了解所有狀態如何運作，便於前端後端開發時的資訊顯示依據。流程圖是一種使用標準化符號與箭頭來表示流程、步驟、決策與資料流動的圖形化工具。它以直觀的方式展示一個系統、程序或作業的邏輯順序，幫助設計者或團隊理解並優化流程。
清楚呈現流程邏輯
幫助使用者快速理解整體作業流程。
找出問題與瓶頸
可視化流程中多餘或複雜的步驟，利於改善效率。
溝通與文件化
作為團隊討論、培訓與系統開發的標準文件。
支援系統設計或程式撰寫
在資訊系統與軟體開發中，流程圖常用於描述演算法或用戶操作路徑。
流程圖的功能與用途
起點／終點（橢圓形）
表示流程開始或結束
處理步驟（長方形）
表示動作或操作步驟
決策（菱形）
表示需要做判斷或分支的節點
箭頭
表示流程方向
資料輸入／輸出（平行四邊形）
表示資料輸入或結果輸出
流程圖的基本元素
Figma的使用者經驗研究範本中， UX Research Template 及 UX research kit 有許多接下來會探討的做法與樣本，供後續練習之用。
Figma介紹
Figma 是一款基於雲端的協作式 UI/UX 設計工具，廣泛用於網頁設計、App 介面設計、流程圖製作、元件系統規劃等。它支援多人即時編輯、版本控制與原型模擬，已成為設計教育與業界實務的重要平台之一。
Figma 產品功能模組介紹
Figma 現在包含下列模組，提供設計、協作、簡報與開發整合的一站式工作平台：
核心介面設計工具
用於 UI/UX 設計、排版、圖形創作與原型連結。
白板與協作思考
協作式白板工具，適用於頭腦風暴、流程圖、設計思考工作坊。
簡報製作
互動簡報工具，可結合設計與元件直接製作提案簡報。
互動設計開發中平台
開發中功能，為無程式碼設計互動原型與工作流程設計平台。
網站展示
一鍵將設計轉換為公開網站頁面，適用於展示作品或設計規範。
輕鬆製作資產
發布品牌模板，讓您的團隊快速建立社群媒體資產、展示廣告、單頁宣傳資料等。
插圖工具
使用插圖工具、改進的向量編輯和更多效果創建更具表現力的設計。使用向量畫筆、進階描邊設定、填充等功能創作插畫。無需切換工具，一切盡在 Figma。
開發者模式
開發者模式專為開發者打造，讓您輕鬆檢查設計並將其轉換為程式碼，無需更改設計文件。所有付費方案的完整版和開發者版用戶均可使用開發者模式。
Figma 的核心特色
雲端協作
無需安裝軟體，透過瀏覽器即可進行多人即時編輯，並支援即時共編、權限管理與留言系統。設計過程中的每一次變更都會自動儲存並即時更新，方便團隊成員在不同地點、不同裝置上共同進行設計討論與修改。
向量繪圖工具
Figma 採用向量為基礎的設計模式，可精確建立 UI 元件、圖示、排版、網格與圖形。支援布林運算、圖層遮罩與組件複用等設計技巧，讓畫面清晰且易於調整，適合 UI/UX 設計與圖像元件系統建立。
原型設計
使用者可在 Figma 中直接將設計稿連結成互動流程，模擬使用者點擊行為與畫面轉場效果，並支援 Smart Animate、Hover、After Delay 等動畫設定。原型可即時預覽與分享，適合用於簡報、測試與迭代。
元件系統與設計規範
Figma 可建立可重用的元件（Component）、變數（Variable）、樣式（Style）與圖層命名規則，並整合成 Design System。設計師與工程師可共享相同資源，提升設計一致性與跨團隊溝通效率。
社群資源豐富
Figma 社群（Figma Community）提供數以千計的免費設計模板、圖示、元件庫與實用插件（Plugin），學生與設計師可直接套用與改編，也可發表自己的作品與團隊共用。
Wireframe｜線框圖
Wireframe 是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。 初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面上只有方框和文字，沒有圖片和色彩。 繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。
定義
- Wireframe 是低保真介面草圖，用於規劃介面結構與資訊層級，著重於內容與操作邏輯而非視覺風格。
目的
- 讓團隊初步釐清畫面配置與使用者流程，便於後續設計與溝通。
常見元素
- 區塊架構、導覽列、按鈕位置、輸入欄位、標題層級等。
規格建議
- 每頁畫面不需有圖像細節與配色，專注於「功能與互動安排」。
UI Mockup｜視覺精稿
UI 設計師會根據產品經理(ＰＭ)確定好的 Wireframe介面，使用 Figma、Sketch、Photoshop 等繪圖軟體進行視覺設計上的配色、版面調整等，以增強使用者體驗產品功能的效果，也就所謂的視覺精稿。
定義
- Mockup 為高保真（High-Fidelity）介面設計稿，是在確立架構與互動後，加入品牌風格、圖像細節、色彩與排版的完整視覺呈現。
目的
- 模擬產品正式推出後的實際外觀，協助展示品牌感受與視覺一致性，也可提供工程端作為開發依據。
應包含
- 品牌標誌、字體與排版、色彩系統、圖片與插畫、按鈕與互動元件的最終狀態。
工具應用
- 透過 Figma 使用元件庫、樣式規則（Styles）與變數（Variables）統一視覺配置。
Prototype｜互動原型
發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用？可透過「使用者測試」這個方法驗證。我們可以透過 Prototype測試使用者想透過產品完成某項任務時，需經過哪些頁面的流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。
定義
- Prototype 是在 Wireframe 或 Mockup 基礎上，加入互動與動態效果的可操作模型，用於模擬實際使用情境。
目的
- 驗證介面流程的合理性與易用性，並在開發前進行可用性測試與迭代修正。
常見互動
- 頁面跳轉、按鈕點擊反饋、表單填寫、動態過場（Transition）等。
工具應用
- Figma Prototype 模式可直接設定畫面連結、動畫效果與互動觸發條件（如點擊、拖曳、滑動）。
示意重點
- 確保互動路徑完整、操作直覺，並可用錄影或即時分享讓測試者體驗。
- Prototype：互動連結設計 + 使用者路徑測試
- Mockup：高保真視覺設計，呈現整體風格與UI系統
DesignSystem｜設計系統
設計系統可以想像是一個資源庫，裡面有設計風格規範、重複使用的介面設計元素(UI element)、重複使用的互動設計元素(像是檔案管理)、大方向的設計方向，甚至是動畫設計元素或是檔案工具管理等等。設計系統不僅僅只是介面設計的規範而已，更是團隊的工作方式和團隊所注重的核心價值。設計系統(Design System)可以幫助不同產品有和諧的使用者體驗以及風格，不僅讓公司對闡述品牌的核心價值有幫助，使用者也可以預期他們怎麼去使用產品。
定義
- 設計系統（Design System）是一套可重複使用的設計與開發規範集合，通常包含元件(Component)、樣式(Style)、設計原則(Principles)與文件化的規範，幫助設計師與開發者在不同專案與平台間保持一致的使用者體驗。
- 簡單說，它是「設計的工具箱＋規則書」。
目的
- 一致性（Consistency）：確保產品不同頁面與功能的外觀、行為一致。
- 效率（Efficiency）：節省設計與開發時間，減少重複溝通與製作。
- 可擴展性（Scalability）：方便在產品迭代與多平台擴充時維護與更新。
- 跨團隊協作（Collaboration）：提供統一的語言與規範，減少誤解與返工。
常見設計項目
- 基礎規範（Foundation）
- 色彩（Color Palette）
- 字體（Typography）
- 間距（Spacing & Layout）
- 圖示（Iconography）
- 效果（Effects）
- 元件（UI Components）
- 表單元素（Form Elements）
- 導航（Navigation）
- 資訊呈現（Data Display）
- 回饋（Feedback）
- 互動模式（Interaction Patterns）
- 品牌規範（Brand Guidelines）
- 文件與指引（Documentation & Guidelines）
主色（Primary）、輔色（Secondary）、中性色（Neutral）、功能色（Success/Warning/Error）。
字型（Font Family）、字級（Font Size）、字重（Weight）、行高（Line Height）。
間距單位（如 4px、8px 系統）、網格系統（Grid System）、欄寬與邊距（Margins & Gutters）。
圖示集、線性／填色風格、尺寸規範。
陰影、圓角、模糊、透明度。
按鈕（Button）、輸入框（Input）、下拉選單（Dropdown）、單選/複選框（Radio/Checkbox）、切換開關（Toggle Switch）。
頂部導覽列（Navbar）、側邊選單（Sidebar）、分頁（Tabs）、麵包屑（Breadcrumbs）。
卡片（Card）、標籤（Tag/Badge）、清單（List）、表格（Table）。
訊息條（Banner/Toast）、對話框（Dialog/Modal）、載入狀態（Loading Spinner/Progress Bar）。
示意重點
- 分層架構圖：從設計原則 → 元件 → 模板 → 完整頁面。
- 色彩與字體規範表：主色、副色、字型與字階。
- 元件範例板：按鈕、表單、卡片、導航等 UI 元件展示。
- 互動流程圖：顯示元件的狀態變化與使用情境。
.jpg)
參考書目
- Design system設計系統概述
- 設計系統 101：什麼是設計系統？ Design system 101: What is a design system?
- Design System 101 - 介紹設計系統
- 設計系統 | 建立統一且高效的數碼生態系統
- 透過 Figma 實現設計與開發的設計系統(Design System) — Part.01 Why
- 透過 Figma 實現設計與開發的協同設計系統(Design System)— Part.02 How
- [講座記錄] DesignOps 04：設計系統——打造溝通無礙的統一語言
- 【講座筆記】設計系統實戰：案例解析與實用策略
- UI 使用者介面的設計系統(Design System)是什麼？
- 設計系統(Design System)分享
- Figma 設計系統實作基礎篇 – Color System
- 給設計師的設計系統必修課
- Figma 設計系統實作小學堂 #1: 樣式系統與變數 (Style sytem & variables)
- Figma 設計系統實作小學堂 #2: 排版 (Auto Layout & Grid Layout)
- Figma 設計系統實作小學堂 #3: 組件 (Component)
- Figma 設計系統實作小學堂 #5: 系統診斷與迭代 (Audit & Iteration)
- 設計系統小學堂 | Figma Design system 101
- iOS 16 UI Kit for Figma
- Material 3 Design Kit
- Microsoft Teams UI Kit
- FREE (2025) Ultimate Design System for Figma
- Figma's most Powerful Design System By The North Designs
UI ICON｜圖像設計
Icon 是人們對這款應用程式(APP)的第一印象，好的APP需有專屬的UI ICON，短暫時間內該如何吸引人們的注意？可從色彩、造型、文字、圖像等元素設計出好的 icon。
定義
- UI Icon 是在使用者介面中，以簡潔、易辨識的圖形符號表達功能、狀態或資訊的視覺語言。 它的目的不只是裝飾，而是協助使用者快速理解操作與導引行為。
- 一個好的 Icon，應該在沒有文字的情況下，也能被正確理解。
目的
- 快速辨識（Recognition）：減少閱讀文字的負擔，讓使用者立即明白功能用途。
- 節省空間（Space-saving）：在有限的介面中傳達更多資訊。
- 跨語言溝通（Cross-language Communication）：即使不懂文字，也能理解圖示含義。
- 美化介面（Aesthetic Enhancement）：提升產品的整體設計感與專業度。
工具應用
- Figma：製作向量圖示、管理圖示元件庫、套用樣式。
- Adobe Illustrator：精細繪製向量圖示，適合建立完整圖示集。
- Iconify / Noun Project / Iconfinder：快速搜尋並下載現成圖示。
示意重點
- 大小一致（Consistent Size）：確保所有圖示在相同像素格（如 24px × 24px）中繪製。
- 線條粗細統一（Stroke Weight）：保持圖示風格一致，避免混搭。
- 留白與間距（Padding & Spacing）：確保圖示不擁擠，周邊留有安全範圍。
- 顏色應用（Color Usage）：使用品牌主色或狀態色（Success、Warning、Error）。
- 狀態變化（States）：Hover、Active、Disabled 版本示例。
圖示字體(ICON FONT)
圖示字型(ICON FONT)指的是使用小圖示(ICON)做為字體，網頁製作者只要使用代碼或名稱，就可以在網頁上顯示對應的圖示，使用上需要搭配CSS樣式表，是近年來網頁製作上常見到的技術之一。這些字體通常用於在使用者介面、網頁等地方顯示圖示，以提供更直觀的視覺效果和更豐富的資訊。
常用圖示字體(ICON FONT)
Font Awesome
- 特色：整合 Font Awesome 免費與付費圖示集。
- 優點：方便需要和前端框架（Bootstrap、Tailwind）一致的 UI 圖示。
Bootstrap 官方圖示庫
- 特色：Bootstrap 官方圖示集。
- 優點：和 Bootstrap 前端框架完美對應，適合使用該框架的專案。
Material Design icon
- 特色：Google 官方 Material Icons/Symbols 集成，支援 Outlined、Rounded、Sharp 等風格。
- 優點：直接匯入最新 Material 版本，方便設計 Android / Google 風格介面。
Heroicons
- 特色：Tailwind 團隊開發，提供 Outline 與 Solid 版本。
- 優點：風格簡潔、適合現代 Web / SaaS UI。
UI職場
UI 設計師（User Interface Designer，使用者介面設計師）是專門負責數位產品（如網站、APP、智慧裝置介面）視覺與互動界面設計的專業人員。
UI 設計師的主要任務是設計並優化使用者與產品介面之間的互動，讓使用者在操作時能夠直覺、流暢、美觀地完成任務。 他們通常與 UX 設計師、前端工程師、產品經理密切合作，將需求轉換成具體的視覺設計。
主要工作內容
- 介面視覺設計：設計版面配置、按鈕、ICON、字體、顏色、插畫等。
- 建立設計系統：制定顏色、字體、間距、按鈕等規範，確保設計一致性。
- 元件與樣式製作：在 Figma、Sketch 等工具中建立可重用的 UI 元件。
- 與 UX 配合：將 UX 線框圖與使用流程轉換為最終視覺成品。
- 與前端協作：提供切圖、樣式規範，確保設計能精準落地。
所需技能
- 設計工具能力：Figma、Sketch、Adobe XD、Illustrator、Photoshop 等。
- 視覺設計基礎：色彩理論、字體排印、構圖、對齊與留白原則。
- UI/UX 理論；人機互動（HCI）、使用者心理、可用性原則。
- 設計系統與 ICON 設計：熟悉圖示字體（如 Font Awesome、Material Icons）。
- 跨部門溝通能力：與產品、工程、行銷人員有效溝通設計意圖。
學期作業說明
APP or WEB 專案設計 OR ReDesign改善方案
分組、資料搜集
1.動機與目的(問題定義) > 2.現況分析、數據分析 > 3.User story(用戶分析) > 4.競爭者分析 >5.Functional Map(功能地圖) > 6.Flow Chart (流程圖)> 7.Wireframe > 8.UI Flow (UI流程圖) > 9.Mockup > 10.Prototype
期中報告
期中報告
APP or WEB提案規劃，包含所有前置流程（動機與目的(問題定義) > 現況分析、數據分析 > User story(用戶分析) 、PERSONA 人物誌、使用者旅程圖 > 競爭者分析 > Flow Chart (流程圖)...）、Wireframe、Wireframe＋Prototype
期末報告
APP or WEB完整提案，含前置規劃、Design System、Mockup、Prototype、Behance線上發表
學長姐範例
- Redesign PChome 24h App
- Gifts of Taiwan Land – Application
- ReDesign主題｜PxPay (全聯支付)｜1085445013
- 期中報告檔案｜網址： 點我連結
- WF整合流程檔案網址： 點我連結
- [Behance] 線上發表
- [期末簡報] 完整檔案網址 含期中簡報、情緒板、Figma Mockup｜精稿設計及Design System｜設計系統、Prototype｜互動原型設計
- [Figma] 互動精稿播放網址
- ReDesign主題：中國信託行動銀行 Home Bank｜1081445083
- 期中報告檔案｜網址： 點我連結
- WF整合流程檔案網址： 點我連結
- [Behance] 線上發表
- [期末簡報] 完整檔案網址 含期中簡報、情緒板、Figma Mockup｜精稿設計及Design System｜設計系統、Prototype｜互動原型設計
- [Figma] 互動精稿播放網址
- Behance 期末作品展示
- PX-Pay-APP-UI-Redesign
- 中國信託行動銀行 ReDesign
- UI Redesign - 爭鮮
- 麥當勞歡樂送APP ReDesign
- MetroWalk ReDesign
- 肯德基重新設計APP
- MOS Order UI REDESIGN
- NITORI | UI REDESIGN PROJECT
- 博客來電子書-UI Redesign
- uniqlo APP UI design
- OB嚴選-UI Redesign
- ReDesign-Queen Shop App
- COSTCO APP ReDesign Project
- a.mart 愛買 ReDesign
- 石二鍋 ReDesign
-
期中發表
期末發表
-
期中發表
期末發表
專題範例
- 2022紅點設計獎｜Mobile User Interface 介面設計類｜特輯土產 Gifts of Taiwan Land – Application
- 2022全國技專校院實務專題競賽｜出版與語文類第一名｜特輯土產 Gifts of Taiwan Land – Application
- 法國蕭蒙國際海報節國際競賽學生展入選（教育部視覺傳達設計類 第一等）｜全國技專校院實務專題競賽｜語文與出版群｜佳作｜最熟悉的陌生星球-失智症者之陪伴探索計畫
- 最熟悉的陌生星球｜Figma 互動模型展示
- 2023金點新秀設計獎｜互動設計類｜廠商贊助獎｜KEEP 溝ING
- KEEP 溝ING｜Figma 互動模型展示
- EMO星情舒壓禮盒｜Figma 互動模型展示
- 2021紅點設計獎｜手機APP Mobility App, Service App｜台灣好機車 Oh My Scooter! Taiwan Only｜ Behance
- 2022金點新秀設計獎｜數位互動設計類｜臺鐵APP長者計畫
- 2021金點新秀設計獎｜數位互動設計類｜殭姿
- 2019金點新秀設計獎｜數位多媒體設計類｜來點熱炒
- 2017金點新秀設計獎｜數位多媒體設計類｜MONSLAND
- 2015金點新秀設計獎｜數位多媒體設計類｜快樂日記
HomeWork｜課後作業
第一週作業：