生活分享

UI 與 UX 入門：介面、任務與使用者研究

UI 與 UX 常出現在同一個職稱裡，但學習時仍需要分清楚介面、任務與研究各自解決的問題。本文以原創衣物修改店取件服務為例，說明視覺與互動、完整服務體驗及使用者研究的關係，整理入門練習、學習成果比較表與原創圖解。協助台灣初學者建立能說明設計理由的學習路徑，選課前也能檢查課程是否提供實作與回饋。

更新日期: 閱讀時間約 7 分鐘

Mokaair 原創介面畫面、任務文件與資料夾插圖，代表用完整任務學習 UI 與 UX。
圖片：Mokaair (© Mokaair)

想學 UI／UX，打開課程清單卻看到介面設計、研究訪談、原型、設計系統與程式開發，容易以為必須一次學會全部工具。比較有用的起點，是先知道每種工作在回答什麼問題，再用一個小題目練習把它們接起來。

本文以原創衣物修改店取件服務為例，整理 2026 年 9 月 14 日查閱的一手設計與職能資料。情境、練習安排和示例內容均自行設計，沒有實際店家研究或就業成果；文中職能參考也不代表台灣所有公司的職稱都採相同分工。

UI 著重人如何看懂並操作介面

UI 是使用者介面。對網站來說，包含畫面上的文字、色彩、按鈕、欄位與互動回應，不只是把配色和字型修漂亮。使用者點擊後是否知道有沒有成功、欄位出錯時能不能理解原因，都需要透過介面表達。

衣物修改店的取件頁，可以練習呈現訂單編號、預計完成時間與取件須知。若時間尚未確認，應設計待確認的狀態；查不到編號時，也要提供下一步。只畫出一張所有資料都齊全的畫面，還不足以說明這個介面如何應付實際使用情境。

學習 UI 時，可先練習文字層級、間距、對齊與狀態，再逐步加入可重用元件和不同螢幕布局。每次都問自己：這個視覺差異在傳達什麼？例如醒目的文字代表尚未完成，還是代表可採取的行動？若規則前後不一致，讀者就得重新猜測。

UX 看的是使用產品與服務的整體經驗

UX 是使用者經驗，涵蓋人和產品、服務及組織互動的整體經驗。Norman 與 Nielsen 的定義把範圍放得比單一畫面更廣；介面是其中一部分，容易操作也不等於整段服務必然令人滿意。學習時應把畫面放回使用者的情境。

假設顧客看懂取件頁，卻在到店後才知道需要帶收據，而收據留在家裡，問題可能出在提醒內容與店內流程的銜接。把按鈕放大未必能解決這件事。你需要確認顧客何時得知規則、店員如何核對，以及有哪些可接受的替代方式。

這不表示每位初學者都要改造整家店。可以先界定本次練習只處理取件前的資訊確認，並列出會影響它的店務條件。清楚範圍後，才能區分自己可修改的介面、需要協作確認的服務規則，以及尚未有資料支持的想法。

研究幫助團隊理解需求，設計把理解轉成做法

使用者研究需要先釐清想知道什麼，再選擇合適的觀察、訪談或測試方法。英國政府的使用者研究職能說明，將研究定位為幫助團隊深入理解服務使用者，並影響內容、互動與服務決策；本文借用這個工作方向，不套用其公務職等。

取件練習可先列出問題：顧客通常何時確認完成時間？找不到收據時怎麼處理？再把已知店家規則、自己的推測和需要詢問的部分分開。若尚未接觸真實使用者，就保留為研究問題，不先製作一份看似精準的人物誌來當證據。

互動設計則需要思考完成任務的路徑與每一步的反應。研究和設計可能由不同人負責，也可能在小團隊中重疊；工作仍需要內容、開發及服務人員共同參與。能說清自己的判斷依據與需要誰協作，比用職稱把工作完全切開更實用。

用小型練習建立可檢查的學習成果

先選一個清楚的任務，例如確認衣物是否可取件，寫下開始條件與完成條件。接著列出資料已確認、處理中、查無訂單等狀態，畫簡單流程，再做能表達內容順序的畫面。範圍小一些，才能有時間檢查失敗與返回的情況。

每次練習都留下三種資料：你想解決的問題、目前的設計，以及選擇這個做法的理由。若理由只是看起來比較好，可以補問視覺改動如何幫助閱讀或操作。若某項判斷尚待驗證，就假設，並說明需要觀察什麼才能決定是否修改。

等基本流程能說明清楚，再加入配色、元件及響應式畫面，最後整理交接註記。可用紙筆或自己熟悉的設計工具完成第一版，不需要先購買所有課程和外掛。練習重點是建立可討論的方案，工具熟練度則透過反覆操作逐步累積。

  1. 選定單一使用任務，寫出情境、開始條件與完成條件。
  2. 把已知資訊、個人假設與待研究問題分開記錄。
  3. 畫出主要流程和例外狀態，再安排文字、按鈕與互動回應。
  4. 取得具體回饋後修正，保留修改理由與尚未驗證的限制。

安排學習順序，也練習與開發溝通

入門可先建立閱讀與資訊層級、任務流程、研究基本觀念，再練習互動原型與元件。這是本文建議的練習安排，不是每個人都必須依循的課綱。已有平面設計經驗者，可加強操作狀態；已有程式背景者，可多練習理解需求與文字表達。

理解 HTML、CSS、瀏覽器及無障礙基本概念，能幫助你和開發人員討論設計限制。MDN 的前端學習資料可作為這部分的公開起點，但學過幾個章節不代表立即具備完整開發能力。學習深度應配合自己的工作目標與合作方式。

檢查課程時，除了工具名稱，也看是否有明確作業、講評方式、研究倫理與真實範圍說明。要求保證錄取、用固定天數宣稱人人轉職成功，或只提供大量範本卻沒有回饋，都不適合拿來當能力證據。選課前先確認自己最需要補哪一種成果。

以能解釋與修正的能力檢查進步

把作品交給他人看時，可以請對方說明他理解的任務、預期下一步與困惑之處。若安排正式使用者研究，應事先說明目的、參與方式、資料使用與退出安排，再依同意的範圍收集資料。課堂練習也不應把未同意公開的個人故事直接貼進作品集。

檢討時分清楚意見和觀察。朋友說顏色不好看是一種偏好，參與者找不到取件狀態則是可追查的操作問題；兩者都可記錄，但需要不同方式分析。不要把少量回饋推成所有顧客的偏好，也不要為了作品完整而填入不存在的測試結果。

一份入門成果若能說明情境、流程、介面狀態、決策理由與待驗證問題，就已具備繼續討論的基礎。之後可依興趣深入視覺設計、研究或互動領域，再把學到的內容用在下一次練習。評估自己的進步時，看能否更清楚地發現問題並修正，比收集工具證書更有幫助。

三張卡片分別呈現了解情境、安排流程及表達介面，說明初學者可用具體任務串起 UI 與 UX。
先能解釋問題與決定，再逐步增加工具、視覺與研究的深度。 · 圖片：Mokaair (© Mokaair)
原創學習成果對照，不是統一職稱定義或就業門檻。
學習方向取件服務練習可檢查的成果
介面設計安排狀態、文字與操作畫面層級與元件狀態
互動設計處理查詢、返回及錯誤任務流程與互動說明
使用者研究了解確認時間的情境研究問題與資料限制
服務體驗銜接到店與核對規則接觸點及協作需求
開發溝通交代布局與資料條件可理解的交接註記

同主題延伸閱讀

  • 生活分享

    Wix 架站指南：編輯網站、選擇方案與網址

    第一次使用 Wix，先釐清網站要完成什麼，再選擇版型與付費方案。本文以原創修鞋工作室介紹站為例，整理 Wix Editor 的頁面編輯、手機檢查、儲存預覽與發布流程，並說明自訂網域、續費、台灣付款工具及平台搬遷限制。附操作步驟、比較表和自繪圖解，協助把網站內容、功能需求與長期管理成本一起考慮，避免只看首頁完成就急著升級。

  • 生活分享

    線框圖與原型怎麼用：先驗證流程再修視覺

    線框圖、視覺稿與互動原型各有用途，重點是目前需要驗證哪一個問題。本文用原創到府植栽照護預約情境，說明如何挑選保真度、補齊流程與例外狀態，準備不暗示答案的操作任務，再將測試觀察轉成修改紀錄。附操作步驟、比較表及原創圖解，協助設計初學者與小型團隊，在投入正式開發前先看懂使用上的困難。

  • 生活分享

    www、子網域與子目錄：網站網址結構怎麼決定

    網站要不要加 www，部落格該放 blog.example.com 還是 example.com/blog/，需要從平台支援與維護方式一起判斷。本文先拆解網址中的主機名稱和路徑，再比較子網域與子目錄的內容分工、DNS 設定、HTTPS 憑證及網址一致性。附上原創決策表與上線檢查步驟，協助台灣小型網站建立容易使用、管理和交接的網址結構。

  • 生活分享

    網站維護要做什麼：備份、更新與故障回報的日常安排

    網站維護不只是更新外掛，也包含確認內容、帳號、備份、寄信與到期服務。本文以小型 WordPress 內容網站為例，把維護工作拆成日常觀察、更新前後檢查、備份還原及故障回報，提供可以分配給站主、編輯與維護者的工作表。你可以依網站更新頻率安排合適節奏，知道什麼情況要立即處理，並保留足以讓下一位協作者接手的紀錄。

引用本文的文章

最新旅遊情報攻略

資料來源

生活分享