

你可能常常在網路上看到「UI / UX 設計師」、「UI / UX 流程」，但心裡暗暗想：UI？UX？這兩個傢伙到底是什麼？是不是很高深？其實，它們和我們每天的生活息息相關，而且比你想像中更好懂。


UI 是什麼：使用者介面設計

UI 全名是 User Interface，中文叫「使用者介面

<html lang="en"><head><style> .article-container { width: 100%; font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif; } ul, ol { margin: 12px auto; max-width: 740px; color: #535150; line-height: 1.8; padding-left: 0px; } .graf--img { display: table; justify-content: center; align-items: center; text-align: center; color: gray; font-size: 14px; letter-spacing: 0px; margin: 10px auto 50px; width: 100%; position: relative; clear: both; } .graf--img.center img { width: 100%; max-width: 740px; margin: 10px auto 0px; display: block; margin: 0 auto; } .graf--img.full img { width: 100%; } .captionTheme__wrapper { width: 100%; font-style: normal; line-height: 22px; font-size: 16px; max-width: 600px; margin-top: 8px; display: inline-block; } .graf--img.full { max-width: 100%; margin: 40px 0px; display: block; margin: 0 auto; align-items: center; } .graf--figure { text-align: center; color: gray; font-style: italic; font-size: 15px; margin: 28px auto; box-sizing: border-box; } .graf--figure iframe { width: 100%; max-width: 740px; margin: 0 auto; } .graf--p { font-size: 16px; line-height: 1.8; font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 1px; font-weight: 400; max-width: 740px; color: #535150; text-align: left; } .graf--p > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--li > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--quotesSpecial > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--blockquote > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--h1 > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--h2 > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--h3 > a { color: #00B3C6 !important; text-decoration: none !important; } a.graf--mention { color: #535150 !important; text-decoration: underline !important; font-weight: 700; } .graf--h2 { font-size: 24px; padding: 0; max-width: 740px; text-align: left; letter-spacing: 1px; font-weight: 700; margin-top: 34px; line-height: 1.5; } .graf--h3 { font-size: 18px; padding: 0; max-width: 740px; text-align: left; letter-spacing: 1px; font-weight: 700; margin-top: 28px; line-height: 1.5; } .graf--li { font-size: 16px; padding: 0px 0px 0px 4px; font-weight: 400; letter-spacing: 0px; list-style-position: outside; text-align:left; margin-left: 24px; } .graf--hr { width: 100%; margin: 0px auto; transform: translateY(-50%); position: relative; padding: 0px; text-align: left; max-width: 740px; margin: 0 auto; } .graf--hr hr { height: 0; } .graf--blockquote { padding: 10px 0px 10px 16px; font-size: 16px; color: #7A7574; letter-spacing: 1px; margin: 28px 0px; border-left: 4px solid #DDD9D8; width: 100%; max-width: 740px; text-align: left; } .graf--quotesSpecial { display: table; color: #7A7574; position: relative; padding: 31.5px 40px; text-align: center; letter-spacing: 0px; position: relative; margin: 29px auto; font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; -webkit-box-ordinal-group: 1; -webkit-box-flex: 0; } .embed-wrapper { max-width: 740px; border: 1px solid #DDD9D8; display: block; padding: 12px; border-radius: 8px; margin: 12px 0px; text-decoration: none !important; } .embed-title { font-size: 16px; font-weight: 700; color: #535150; margin-bottom: 8px; text-align: left; line-height: 1.5; text-decoration: none !important; } .embed-description { width: 100%; font-size: 14px; color: #7A7574; line-height: 1.5; max-height: 150px; text-align: left; overflow: hidden; padding: 12px 0px; } .embed-url > a { width: 100%; font-size: 14px; color: #141413 !important; text-decoration: none !important; line-height: 1.5; text-align: left; } .embed-thumbnail-wrapper { padding-left: 12px; } .embed-thumbnail { width:100px; border-radius: 8px; } pre { background: #F6F6F6; border-radius: 8px; padding: 16px; font-size: 16px; color: #535150; line-height: 180%; text-align: left; } .lexical__textBold { font-weight: bold; } .lexical__textItalic { font-style: italic; } .lexical__textUnderline { text-decoration: underline; } .lexical__textStrikethrough { text-decoration: line-through; } .lexical__textUnderlineStrikethrough { text-decoration: underline line-through; } .lexical__textSubscript { font-size: 0.8em; vertical-align: sub; } .lexical__textSuperscript { font-size: 0.8em; vertical-align: super; } .lexical__textCode { background-color: rgb(240, 242, 245); padding: 1px 0.25rem; font-family: Menlo, Consolas, Monaco, monospace; font-size: 94%; } </style></head><body><div class="article-container"><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/de1a0bcd-5f70-4b9a-a4b4-441f2c474c2a.png" data-src="https://resize-image.vocus.cc/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2Fde1a0bcd-5f70-4b9a-a4b4-441f2c474c2a.png&width=740&sign=v2KQfYhyaviCqi8d5W9tSziyIlRwrGjAoW-6avxjVes" class="lazy" data-loaded="false" data-original-src="https://images.vocus.cc/de1a0bcd-5f70-4b9a-a4b4-441f2c474c2a.png" data-lowquality="false" data-width="2800" data-height="2100" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="false" alt="raw-image"></div><div></div></div> 你可能常常在網路上看到「UI / UX 設計師」、「UI / UX 流程」，但心裡暗暗想：UI？UX？這兩個傢伙到底是什麼？是不是很高深？其實，它們和我們每天的生活息息相關，而且比你想像中更好懂。<hr><h2 class="graf--h2" dir="ltr">UI 是什麼：使用者介面設計</h2>UI 全名是 User Interface，中文叫「使用者介面」。簡單來說，就是 你眼睛看到、手指碰得到的部分。<ul class="lexical__ul"><li value="1" class="graf--li">打開手機 App，你看到的按鈕、顏色、圖示、字體，就是 UI 設計師的成果。</li><li value="2" class="graf--li">UI 關心的是「這個按鈕要不要圓角？這個顏色看起來舒服嗎？版面有沒有層次？」</li></ul>UI 的重點在於 視覺和操作的呈現，讓使用者覺得畫面漂亮、元素清晰、好按好點擊。<hr><h2 class="graf--h2" dir="ltr">UX 是什麼：使用者體驗設計</h2>UX 全名是 User Experience，中文叫「使用者體驗」。它關注的不是畫面，而是 整體的體驗流程。<ul class="lexical__ul"><li value="1" class="graf--li">你打開叫車 App，從輸入地點、確認價格、等車、上車到付款，整個過程是否流暢順利，就是 UX 的範疇。</li><li value="2" class="graf--li">UX 關心的是「使用者會不會卡關？流程是否直覺？能不能快速達成目標？」</li></ul>UX 的重點在於 整體感受，希望讓使用者覺得方便、順暢，甚至愉快。<hr><h2 class="graf--h2" dir="ltr">UI vs UX：一對好搭檔</h2>UI 和 UX 常常被並列，是因為它們密不可分。<ul class="lexical__ul"><li value="1" class="graf--li">UX 是規劃路線的人：決定整個體驗流程，確保使用者能從 A 點走到 B 點。</li><li value="2" class="graf--li">UI 是打造外觀的人：讓路線上的每一個招牌、每一個門牌都看起來清楚又吸引人。</li></ul>如果只有 UX 沒有 UI，介面可能很實用，但醜到沒人想用；如果只有 UI 沒有 UX，介面再漂亮，使用者還是可能迷路、挫折離開。 最好的產品，就是兩者合作得天衣無縫。<hr><h2 class="graf--h2" dir="ltr">生活中的 UI / UX</h2>其實你每天都在體驗 UI / UX：<ul class="lexical__ul"><li value="1" class="graf--li">去超商結帳，櫃檯動線清不清楚？結帳流程快不快？→ UX</li><li value="2" class="graf--li">收據、會員卡、結帳螢幕的排版好不好看？→ UI</li></ul>如果結帳流程快速，螢幕又清楚明亮，你就會覺得「哇！這家超商好好逛」，這就是 UI / UX 共同創造的好體驗。<hr><h2 class="graf--h2" dir="ltr">結語：UI / UX 的價值</h2><h3 class="graf--h3" dir="ltr">UI </h3><ul class="lexical__ul"><li value="1" class="graf--li">視覺設計</li><li value="2" class="graf--li">排版</li><li value="3" class="graf--li">icon繪製</li><li value="4" class="graf--li">插圖繪製</li><li value="5" class="graf--li">動態效果</li><li value="6" class="graf--li">原型設計</li></ul><h3 class="graf--h3" dir="ltr">UX</h3><ul class="lexical__ul"><li value="1" class="graf--li">規劃Wireframe</li><li value="2" class="graf--li">互動設計</li><li value="3" class="graf--li">企劃資訊架構</li><li value="4" class="graf--li">使用者研究與調查</li><li value="5" class="graf--li">易用性測試</li></ul><hr>「UI 是視覺，UX 是感覺」——看完這篇文章，用這些生活化的例子告訴你，為什麼 UI / UX 是缺一不可的設計好搭檔。這樣一來你也能開始觀察身邊的產品設計，找出那些讓你覺得貼心或困擾的細節！ </div></body></html>

方格新手

「夢幻湖」就在台北陽明山七星山下，因為時常被山嵐霧氣籠罩，湖色山影雲霧縹緲，景色如夢境般，因而得名。本文分享免費秘密停車場還有路線建議



跟著Linko走走拍拍

《台北陽明山。夢幻湖》最平緩路線，訪國際認證寧靜步道，免費停車場&路線建議

面對0056元大高股息ETF，許多投資人猶豫不決，擔心買在高點套牢。本文分析0056的吸引力、套牢的心理因素，並從歷史股價、殖利率、大盤環境等角度判斷目前進場時機，提供定期定額、分批買進、波段操作等策略，以及心理建設，幫助投資人理性決策，避免情緒化交易。

《職場理財雙修：讓20年台外商經驗帶你避坑升級》

📒0056不到兩個月賺7萬！但現在再買會不會套牢？

台灣首座「國家檔案館」坐落於新北林口區，將於114年11月22日正式開館，現正試營運中，刻意避開首週人潮，今日來好好探索欣賞！

《新北林口新亮點》開箱台灣第一座國家檔案館，新美學建築，免費參觀。絕美咖啡廳、空間規劃、接駁巴士攻略

英國女王伊麗莎白一世與她被處死的母親安妮·博林之間，以珠寶為媒介傳遞著超越生死的深厚母女情誼。本文細述兩位女性透過字母項鍊、家族肖像畫及棋盤戒指等細節，娓娓道來一段關於愛、失去與傳承的動人故事。

文化拾見家

伊麗莎白一世終生不摘的戒指：王室珠寶隱藏什麼情感秘密?

對油性肌膚來說，夏天最怕的就是 出油脫妝、妝容土石流！因此挑選氣墊粉餅時，不僅要 控油力強，還需要兼顧 保濕、服貼與持妝力。

本篇精選 2025 開架平價氣墊粉餅推薦 TOP 5，從 成分、遮瑕力、妝感表現 全面解析，每一款都是網友一致好評的無雷單品，讓油肌女孩也能一整天保持乾淨、清爽又完美的妝容

以行動支持創作者！付費即可解鎖

美妝保養

老皮與小雲的旅遊/美食/省錢/理財天地

老皮與小雲的沙龍

2025底妝推薦｜5款油肌專用平價開架氣墊比較，控油霧感首選

草嶺古道是清代開闢作為聯繫台北與宜蘭的主要官道，屬於淡蘭古道的一部分，沿途風景秀麗，最高點啞口可遠眺龜山島與太平洋的壯闊海景，秋季時節芒花遍佈且路況維護甚佳，是非常熱門健行路線。

旅行美食

草嶺古道

喜歡健行、跑步、攝影、畫畫、威士忌、地方小吃，用心探索與紀錄生活

《宜蘭頭城。草嶺古道》必訪秋芒步道，盡收壯闊山海美景，開車路線建議，適合親子健行

一場由 AI 引爆的暖心風暴

開頭：從活動的起源開始講起，提到您在社群上看到這個點子，並決定親自用 AI 實踐。

成果展示：直接秀出幾張活動中最受歡迎、最成功的九宮格成品，用最驚豔的結果抓住讀者眼球。

文章預告：告訴讀者，這篇文章將毫無保留地分享從 0 到 1 的完整執行過程，包含您使用的工具

寵物

Lun.AI 🤖 玩轉 AI、聰明解題 ⚡️
以人人都能懂的方式，普及 AI 應用，讓技術真正服務於人的真實需求。
堅持用最平易近人的方式溝通，掃除學習障礙。
團隊 AI 賦能 · 培訓 × 工具 × 實戰✨ 
從焦慮到上手，打造可落地的 AI 能力 👇
Lun.AI 🤖 教你 #AI實作 #學習&職場升級 💪

Lun.AI 🤖 玩轉 AI ⚡️

我如何用 AI 繪製寵物表情包？(附完整流程與黃金提示詞)

方格新手村：讓 vocus 送你見面禮！

設計

平面設計初學必懂：從一張海報學排版與配色

【前端基礎】從零開始的 HTML 網頁結構

玩轉UI/UX

靈感工坊

在這裡，我讓程式碼與詩意共存，
生活不只有規則與邏輯，也有感受與想像，
有時是寫程式時的靈感，有時是半夜裡的一首詩，
願這些文字，帶給你一點溫度。




工程師的詩意午後

快樂出走

給我工具箱

書頁中的光

人生練習題

成長的篇章

Python 星站

前端小宇宙 

程式之路

來首詩吧

來幅畫吧

設計煉金室

體驗

設計師

結帳

中文

UI / UX 初學者必看：介面與體驗的差別與合作

<div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Fde1a0bcd-5f70-4b9a-a4b4-441f2c474c2a.png&amp;width=740&amp;sign=v2KQfYhyaviCqi8d5W9tSziyIlRwrGjAoW-6avxjVes" fetchpriority="high" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Fde1a0bcd-5f70-4b9a-a4b4-441f2c474c2a.png&amp;width=740&amp;sign=v2KQfYhyaviCqi8d5W9tSziyIlRwrGjAoW-6avxjVes" data-loaded="true" data-original-src="https://images.vocus.cc/de1a0bcd-5f70-4b9a-a4b4-441f2c474c2a.png" data-lowquality="false" data-width="2800" data-height="2100" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="true" alt="raw-image"></div><div></div></div> 你可能常常在網路上看到「UI / UX 設計師」、「UI / UX 流程」，但心裡暗暗想：UI？UX？這兩個傢伙到底是什麼？是不是很高深？其實，它們和我們每天的生活息息相關，而且比你想像中更好懂。<hr><h2 class="lexical__h2" dir="ltr">UI 是什麼：使用者介面設計</h2><div class="ad-placeholder" style="min-height: 124px;"></div>UI 全名是 User Interface，中文叫「使用者介面」。簡單來說，就是 你眼睛看到、手指碰得到的部分。<ul class="lexical__ul"><li value="1" class="lexical__listItem">打開手機 App，你看到的按鈕、顏色、圖示、字體，就是 UI 設計師的成果。</li><li value="2" class="lexical__listItem">UI 關心的是「這個按鈕要不要圓角？這個顏色看起來舒服嗎？版面有沒有層次？」</li></ul>UI 的重點在於 視覺和操作的呈現，讓使用者覺得畫面漂亮、元素清晰、好按好點擊。<hr><h2 class="lexical__h2" dir="ltr">UX 是什麼：使用者體驗設計</h2>UX 全名是 User Experience，中文叫「使用者體驗」。它關注的不是畫面，而是 整體的體驗流程。<ul class="lexical__ul"><li value="1" class="lexical__listItem">你打開叫車 App，從輸入地點、確認價格、等車、上車到付款，整個過程是否流暢順利，就是 UX 的範疇。</li><li value="2" class="lexical__listItem">UX 關心的是「使用者會不會卡關？流程是否直覺？能不能快速達成目標？」</li></ul>UX 的重點在於 整體感受，希望讓使用者覺得方便、順暢，甚至愉快。<hr><h2 class="lexical__h2" dir="ltr">UI vs UX：一對好搭檔</h2>UI 和 UX 常常被並列，是因為它們密不可分。<ul class="lexical__ul"><li value="1" class="lexical__listItem">UX 是規劃路線的人：決定整個體驗流程，確保使用者能從 A 點走到 B 點。</li><li value="2" class="lexical__listItem">UI 是打造外觀的人：讓路線上的每一個招牌、每一個門牌都看起來清楚又吸引人。</li></ul>如果只有 UX 沒有 UI，介面可能很實用，但醜到沒人想用；如果只有 UI 沒有 UX，介面再漂亮，使用者還是可能迷路、挫折離開。 最好的產品，就是兩者合作得天衣無縫。<hr><h2 class="lexical__h2" dir="ltr">生活中的 UI / UX</h2>其實你每天都在體驗 UI / UX：<ul class="lexical__ul"><li value="1" class="lexical__listItem">去超商結帳，櫃檯動線清不清楚？結帳流程快不快？→ UX</li><li value="2" class="lexical__listItem">收據、會員卡、結帳螢幕的排版好不好看？→ UI</li></ul>如果結帳流程快速，螢幕又清楚明亮，你就會覺得「哇！這家超商好好逛」，這就是 UI / UX 共同創造的好體驗。<hr><h2 class="lexical__h2" dir="ltr">結語：UI / UX 的價值</h2><h3 class="lexical__h3" dir="ltr">UI </h3><ul class="lexical__ul"><li value="1" class="lexical__listItem">視覺設計</li><li value="2" class="lexical__listItem">排版</li><li value="3" class="lexical__listItem">icon繪製</li><li value="4" class="lexical__listItem">插圖繪製</li><li value="5" class="lexical__listItem">動態效果</li><li value="6" class="lexical__listItem">原型設計</li></ul><h3 class="lexical__h3" dir="ltr">UX</h3><ul class="lexical__ul"><li value="1" class="lexical__listItem">規劃Wireframe</li><li value="2" class="lexical__listItem">互動設計</li><li value="3" class="lexical__listItem">企劃資訊架構</li><li value="4" class="lexical__listItem">使用者研究與調查</li><li value="5" class="lexical__listItem">易用性測試</li></ul><hr>「UI 是視覺，UX 是感覺」——看完這篇文章，用這些生活化的例子告訴你，為什麼 UI / UX 是缺一不可的設計好搭檔。這樣一來你也能開始觀察身邊的產品設計，找出那些讓你覺得貼心或困擾的細節！