Home / Desktop — 1440

選取工具：點選標題文字可檢視尺寸，拖曳物件可移動；游標在此區時按 / 可開啟對話。

UI 使用者介面 × UX 使用者經驗 · CUTE DVCD

以介面設計梳理視覺，
以體驗設計解決痛點。

UI 讓資訊看得懂、按得到；UX 讓任務走得通、用得安心。
好的設計，從理解使用者卡在哪裡開始。

隸屬中國科技大學視覺傳達設計系，是以使用者介面與使用者經驗為核心的研究與實作平台。我們從真實的使用者痛點出發，透過研究、實驗、應用三個階段，把 UI/UX 方法延伸到課程專案、畢業專題、設計競賽與跨領域設計，探索數位產品如何被看懂、被使用，進而被喜愛。

研究 Research 實驗 Experiment 應用 Application 主持人｜王曉今 助理教授 ↗
了解研究方向 ↓ 看作品案例
▦ 畢展導覽 APP / Home — 375×812
9:41●●● ▮

今日展覽

⌕ 搜尋作品、作者
全部介面插畫品牌

研究方向 / Research · Experiment · Application

About the Lab

一個持續運轉的 UI × UX 研究場域

實驗室以使用者介面（UI）與使用者經驗（UX）為研究主軸，把課堂專案、畢業專題、設計競賽與產學合作視為同一條研究路徑：先理解使用者的問題，再以原型驗證解法，最後把方法落地成真實可用的設計成果——成果再回饋成下一輪研究的起點。

  1. Research

    研究

    使用者真正卡在哪裡？

    • 使用者訪談、觀察與問卷
    • Persona 人物誌與使用者旅程圖
    • 競品分析與介面設計趨勢
    • 可用性評估與人因原則
    看 UX 五層模型 →

  2. Experiment

    實驗

    這個解法真的比較好嗎？

    • 低保真到高保真原型驗證
    • 互動模式、微互動與動態轉場
    • 設計系統與 Design Tokens
    • AI 輔助生成與 AR、360° 等新介面
    玩互動實驗 →

  3. Application

    應用

    如何落地成真實的作品？

    • 課程 APP／WEB ReDesign 專案
    • 畢業專題的介面與數位延伸
    • 國內外設計競賽
    • 產學合作與專業作品集
    看作品案例 →

↻ 應用成果與使用者回饋，成為下一輪研究的起點

研究議題

行動介面可用性無障礙與包容性設計設計系統與 Design Tokens動態設計與微互動AI 輔助介面設計地方文化的數位體驗AR／沉浸式介面情緒與健康照護類 APP資訊架構與導覽設計

代表成果

  • 特輯土產2022 德國紅點設計大獎（手機使用者介面等類別）· 教育部技專校院學生實務專題競賽 出版與語文群第一名
  • 最熟悉的陌生星球2023 教育部技專校院學生實務專題競賽 出版與語文群佳作 · 法國蕭蒙國際海報節學生競賽入選
  • 課程 ReDesign 專案125+ 位修課學生，期末作品陸續於 Behance 公開發表
認識 UI/UX / 五層模型

What is UI / UX

介面是看得見的那一層，體驗是整座冰山。

UI 使用者介面

User Interface——使用者與產品互動的視覺與操作層，涵蓋版面配置、色彩、字體、圖示與元件系統，決定資訊「如何被看見、如何被操作」。

UX 使用者經驗

User Experience——使用者接觸產品全程的感受與成效，涵蓋需求動機、任務流程、易用性與情感回饋，決定產品「是否真正解決問題」。

LAYERS 圖層5
使用者經驗 UX
↑ 具體 · UI抽象 · UX ↓
具體 · 偏 UI ↑
抽象 · 偏 UX ↓

這一層的產出

    在課程中學到

    點圖層清單、立體圖層，或用 ↑↓ 鍵切換 · 參考 Jesse James Garrett《The Elements of User Experience》

    互動實驗 / Playground

    Try it yourself

    不用登入，先在這裡玩玩 Figma 的基本功

    實驗是研究與應用之間的橋梁。以下互動模組對應 UI 實務的核心工作流程——畫布操作、自動佈局、元件變體、設計變數與互動原型；另以 Fitts 定律與 WCAG 色彩對比兩項實驗，說明介面設計背後可量化的人因原則。

    Figma 基本功 設計原則

    ▦ Frame 1 — 點選後拖曳移動、拉四角縮放 · 方向鍵微調 · Delete 刪除

    設計畫布 Canvas
    介面設計的基本操作：建立圖形、調整位置與尺寸、設定填色與圓角，並透過圖層面板管理物件層級。

    Layers 圖層

    位置與尺寸

    Fill 填色

    Corner radius 圓角 0

    Opacity 不透明度 100%

    文字內容

    作品案例 / Cases

    Cases · 研究成果的應用

    從畢業專題到課堂專案與 ReDesign

    同一套 UI/UX 方法，應用在不同尺度的題目上：畢業專題從文化、情緒與生活議題出發，將介面設計延伸為完整的產品體驗；課程專案則針對日常 APP 的使用痛點，提出可驗證的 ReDesign 方案。

    畢業專題 Graduation Projects

    學生作品｜課程 ReDesign 使用者介面設計 · Behance 線上發表

    想看完整的專案結構？打開學長姐的 Figma 檔與簡報範本，從期中的前置作業一路看到期末精稿。

    Figma 範例檔 ↗ 簡報範本 ↗
    課堂互動學習 / Studio Learning

    Studio · 學生課程互動學習單元

    把研究方法帶進教室：動手做、一起想、當場回饋

    課堂以工作坊形式進行：學生分組走完「研究 → 發想 → 原型 → 評圖」的循環，用便利貼、草圖與數位原型把想法外化，在討論與回饋中快速迭代。每個單元都對應一項可交付的設計產出。

    學生在白板上以便利貼分類「族群」與「景點」資訊
    親和圖工作坊：歸納族群與景點資訊Affinity Diagram
    學生對照投影畫面上的草圖演繹，進行圖形發想
    草圖演繹：從手繪到數位圖形Sketching
    學生以筆電與平板展示原型並進行小組討論
    小組提案與即時回饋Critique

    1. 使用者研究工作坊

      訪談、觀察與便利貼親和圖，從零散資訊中找出使用者的真實需求。

      產出｜需求洞察、Persona

    2. 發想與草圖演繹

      心智圖與快速草圖大量發散，再逐步收斂成可行的視覺與介面方向。

      產出｜概念草圖、情緒板

    3. 架構與線框

      以 FigJam 繪製流程圖與 UI Flow，在 Figma 排出第一版線框。

      產出｜Flow Chart、Wireframe

    4. 原型實作與測試

      建立設計系統、完成高保真精稿與互動原型，邀請同學實際操作測試。

      產出｜Mockup、Prototype

    5. 評圖與線上發表

      小組提案、同儕互評與教師回饋，修正後於 Behance 公開發表。

      產出｜提案簡報、Behance 作品

    課後自主練習：線上互動實驗 →

    教學課程 / 核心課程

    Teaching · 研究方法的傳承

    核心課程《使用者介面設計》：18 週，從一張白紙到一個能點的 APP

    實驗室的研究方法，透過課程系統化地傳遞給學生。《使用者介面設計》是 UI/UX 能力養成的核心課程：從產業趨勢與實務案例切入，經過介面企劃、設計流程與設計系統訓練，以全新專案或 ReDesign 提案完成一份具互動原型的數位產品介面，並銜接網頁、數位行銷與畢業專題的進階應用。

    視覺傳達設計 Ⅰ・Ⅱ→ 使用者介面設計→ 網頁設計・進階網頁設計→ 內容行銷數位設計→ 畢業專題
    13+課程單元
    125+修課學生
    18週 · 期中＋期末發表

    點單元名稱或色條可開啟該週講義 · 斜紋為發表週

    學期評量

    01平時作業及出席表現
    W9期中發表：APP / WEB 提案與 Wireframe
    W17期末發表與 Behance 線上展覽

    課程專區

    作業區 課程規範 資源專區 影音專區 課程區

    設計師的資源庫