Home / Desktop — 1440

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

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

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

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

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

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

今日展覽

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

研究方向 / Research · Experiment · Application

About the Lab · 研究 → 實驗 → 應用 → 再研究

每一個「好難用」，
都是我們的研究題目。

我們從使用者卡住的地方出發：找出問題、做出原型、找人測試、修到真的好用，再把成果變成下一個新問題。課堂專案、畢業專題、設計競賽與產學合作，都在同一個循環裡不停轉動。

ROUND 01研究使用者真正卡在哪裡？
跟著一個案例走一圈 →

成果與回饋，會變成下一輪的研究起點 ↻

  1. Stage 1 · Research

    研究

    使用者真正卡在哪裡？

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

  2. Stage 2 · Experiment

    實驗

    這個解法真的比較好嗎？

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

  3. Stage 3 · Application

    應用

    如何落地成真實的作品？

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

我們正在研究的題目

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

循環轉出來的成果

  • RED DOT 2022特輯土產德國紅點設計大獎（手機使用者介面等類別）· 教育部技專校院學生實務專題競賽 出版與語文群第一名
  • 2023 · 教育部最熟悉的陌生星球教育部技專校院學生實務專題競賽 出版與語文群佳作 · 法國蕭蒙國際海報節學生競賽入選
  • BEHANCE課程 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》

    互動圖鑑 / UI × UX Playbook

    UI/UX Playbook · 8 個一玩就懂的設計原則

    好介面不是「好看」而已，
    是讓人不用想就會用。

    每張卡片都可以直接操作：找出壞介面的問題、按按看微互動、拉拉看間距與層級，體驗設計師每天在思考的事。

    01

    找碴：這個註冊表單哪裡難用？可用性

    點你覺得有問題的地方，共有 5 個。全部找到後，看看改善後的版本。

    建立帳號

      找到 0 / 5

      使用者不會讀說明書。標籤要一直在、錯誤要說人話、主要按鈕要最明顯——這就是「可用性」。

      02

      微互動：讓介面「有回應」Micro-interaction

      按讚、開關、送出、載入——每一個 0.3 秒的小動態，都在告訴使用者「收到了」。

      按讚 · 彈跳＋粒子
      通知：關閉
      按鈕狀態 · 載入→完成
      王小明 發佈了作品2 分鐘前 · 介面設計

      沒有回饋的按鈕，會讓人一直重按。好的微互動短（0.2–0.5 秒）、有目的、不搶戲。

      03

      格式塔：靠得近，就是一組Gestalt

      拉動滑桿改變中間的距離，同樣 8 個方塊，你看到的是「一組」還是「兩組」？

      12px

      介面裡的卡片、表單、選單，都靠「接近」與「相似」讓人不用讀就知道哪些東西是一起的。

      04

      資訊層級：眼睛先看哪裡？Visual Hierarchy

      拉高「層級對比」，看大小、粗細、顏色怎麼決定視線的順序。

      123
      畢展限定・夜行城市地圖帆布袋
      NT$ 390
      以互動地圖插畫製作，限量 100 個，展期間於 2F 服務台領取。
      加入購物車
      弱

      什麼都一樣大，就等於什麼都不重要。先決定「最想讓人看到什麼」，再用對比把它放大。

      05

      Hick 定律：選項越多，越難決定Hick's Law

      增加選單數量，看決策時間怎麼變長；按「挑戰」實際找找看。

      選單有 6 個選項。

      預估決策時間0.6s
      T = a + b·log₂(n+1)

      所以 APP 的主選單通常只有 3–5 個，其他功能用分類、搜尋或「更多」收起來。

      06

      使用者旅程：情緒最低點＝設計機會Journey Map

      以「用 APP 看畢業展」為例。上下拖曳表情調整心情，點階段名稱看痛點與改善點子。

      UX 設計師不是先畫畫面，而是先畫出使用者在哪一步卡住、哪一步不開心。

      07

      A/B 測試：讓數據幫你選Testing

      同一個預約頁、兩種按鈕。你會點哪一個？

      設計師的直覺要用測試來驗證。數據為示意，實務上會讓兩組真實使用者各看一個版本再比較。

      08

      無障礙：換一雙眼睛看介面Accessibility

      台灣約每 12 位男性就有 1 位色覺辨識不同。切換模擬模式，看看只靠紅綠色會發生什麼事。

      ✓付款成功✕付款失敗✓已出貨
      達標未達標

      只用顏色傳達資訊，有些人會看不到。顏色＋圖示＋文字一起用，所有人都看得懂。

      互動實驗 / 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 線上展覽

      課程專區

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

      設計師的資源庫