讀後感:UI/UX哪裡不同?白話文一次搞懂UX/UI

更新 發佈閱讀 3 分鐘

每周一篇文章的讀書會心得報告摘要與筆記,主要段落分成:

1. 為什麼選這篇文章分享?
2. 作者為什麼要寫這篇文章?
3. 內容重點
4. 心得

原文網址:UI/UX哪裡不同?白話文一次搞懂UX/UI

vocus|新世代的創作平台

為什麼分享這篇文章?

  • 資訊軟體業常聽到的名詞UI/UX,透過本篇文章對UI/UX有粗略了解
  • 新概念的啟蒙

作者想表達甚麼?

  • 何謂UI/UX?
UX:使用者體驗 User Experience
UI:使用者介面 User Interface
  • UI/UX兩者關聯
  • UX、UI 設計師職能差異

重點內容

UX 和 UI 有什麼不一樣?

vocus|新世代的創作平台
  • UI 是馬鞍、拴繩;UX 則是騎馬奔馳的感受
  • 有 UI 沒 UX:就像畫家不經思考就隨意潑墨到畫布上,沒人看得懂
  • 有 UX 沒 UI:就像雕像有了雛形,卻沒塗上混凝土

UX:使用者體驗 User Experience

  • User Experience(UX)
  • 一詞出現於 1990 年代,由尼爾森諾曼公司發明
  • 指的是使用者和一間公司「全面的互動體驗」(包括產品和服務)
  • UX 不僅限於數位產品
車子、街燈、刮鬍刀等都應該重視使用者體驗,才能不斷改善產品,端出更好的內容。

UI:使用者介面 User Interface

  • User Interface(UI)
  • 是 UX 的其中一環
  • 聚焦於視覺層面,透過美化設計加強產品質感
  • 做 UI 非常重視設計美感
網站和 App 的按鈕、打字系統、整體配色都是重點
  • 如何做好視覺引導
讓用戶使用產品時不會產生疑惑,能夠「一看就懂」

UX 和 UI 如何影響彼此?

  • 開發一款還沒人做過、可以解決許多人困擾的 App
  • 一開始先找 UX 設計師
  1. 替你做市場調查,了解用戶的困擾後
  2. 再開始規劃一連串使用者行為
  3. 最終期望的使用者體驗。
  • App 做出來後,卻發現用戶在使用時
  1. 覺得介面上的字體非常不易閱讀、按鈕距離太近、很容易按錯等…
  • 好的 UI 設計就像蛋糕上的草莓,畫龍點睛

UX、UI 設計師職能大不同

vocus|新世代的創作平台

個人心得

  • 使用者體驗(UX)很像傳統強調人體工學的延伸
只是人體工學強調產品對於人類使用上的舒適性,但沒有考量到「服務面」
  • 使用者體驗針對市場調查、用戶行為分析,與行銷、產品企劃有異曲同工之妙
  • UI使用者介面就像人機互動的探討
  • 以機車角度來看
UX:騎乘奔馳感受、騎乘舒適度等
UI:油門、煞車把手、燈具開關、喇叭、飛旋踏板、啟動開關、儀表顯示圖示…
  • 以網站的角度來看
UX:開啟速度、頁面風格、功能便利性等
UI:文字/圖面設計、功能連結互動


留言
avatar-img
Patrick.Wong的沙龍
266會員
545內容數
一位在因緣際會之下,動了想去紐西蘭的念頭,卻陰錯陽差跑到澳洲打工度假的背包客。 脫離台灣世俗的期待,踏上打工度假的不歸路,第二人生正式在澳洲啟航。 如果人生很短,那青春就是短暫一瞬間,屬於你的第二人生,下一站在哪呢?還沒開始的理由,又是什麼呢? 歡迎來到我的澳洲故事館,分享我在澳洲的旅程故事。
Patrick.Wong的沙龍的其他內容
2025/02/28
敝人在方格子推出第一號數位商品-三陽PM生涯《讀後感系列文章》之摘要筆記正式上架拉! 即便沒有買這份筆記,讀者同樣能透過筆者在方格子發布的內容,免費看到〈讀後感〉系列文章,以及筆記參考的文章出處。 內容本身無價,讀者單純買的是:筆者梳理內容與整理筆記的過程,以及出於對筆者的一份信任與支持。
Thumbnail
2025/02/28
敝人在方格子推出第一號數位商品-三陽PM生涯《讀後感系列文章》之摘要筆記正式上架拉! 即便沒有買這份筆記,讀者同樣能透過筆者在方格子發布的內容,免費看到〈讀後感〉系列文章,以及筆記參考的文章出處。 內容本身無價,讀者單純買的是:筆者梳理內容與整理筆記的過程,以及出於對筆者的一份信任與支持。
Thumbnail
2023/09/20
交通部針對台灣使用交通運具的統計,有許多面向的統計專題分析,針對機車的部分,交通部的統資料庫有釋出歷年的機車使用狀況調查報告。 由於維度眾多,本文僅分享幾個私心認為比較重要的數據供大家參考。未提及的數據,就由有心人自己去鑽研了。 至於下次的調查重點,可能就會落在「疫情前後變化」以及「電動機車」上。
Thumbnail
2023/09/20
交通部針對台灣使用交通運具的統計,有許多面向的統計專題分析,針對機車的部分,交通部的統資料庫有釋出歷年的機車使用狀況調查報告。 由於維度眾多,本文僅分享幾個私心認為比較重要的數據供大家參考。未提及的數據,就由有心人自己去鑽研了。 至於下次的調查重點,可能就會落在「疫情前後變化」以及「電動機車」上。
Thumbnail
2023/06/29
不論是本地異動或跨縣市移動,移動方式不會只有機車一種,透過《109年機車使用狀況調查報告》機車通勤(學)者居住與使用機車縣市比率當基準,來更進一步計算跨縣市通勤的機車台數。 最後得出結論:雙北通勤台數宛如動物大遷徙,中台灣為台中獨大。
Thumbnail
2023/06/29
不論是本地異動或跨縣市移動,移動方式不會只有機車一種,透過《109年機車使用狀況調查報告》機車通勤(學)者居住與使用機車縣市比率當基準,來更進一步計算跨縣市通勤的機車台數。 最後得出結論:雙北通勤台數宛如動物大遷徙,中台灣為台中獨大。
Thumbnail
看更多
你可能也想看
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
視覺,是吸引我們目光的第一要素。 感受,是決定我們願意停留多久的關鍵。 生活中大大小小的事都脫離不了視覺,映入我眼中的所有畫面都像是 UI 使用者介面;打開抽屜衣服的擺設、晚餐餐桌上的擺盤、汽車上的儀表版、個人的穿著以及給人的感受,都能夠用 UI 、UX 做解析。
Thumbnail
視覺,是吸引我們目光的第一要素。 感受,是決定我們願意停留多久的關鍵。 生活中大大小小的事都脫離不了視覺,映入我眼中的所有畫面都像是 UI 使用者介面;打開抽屜衣服的擺設、晚餐餐桌上的擺盤、汽車上的儀表版、個人的穿著以及給人的感受,都能夠用 UI 、UX 做解析。
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享文章為:UI/UX哪裡不同?白話文一次搞懂UX/UI。 1.UX 和UI有什麼不一樣? 2.UX:使用者體驗 User Experience 3.UI:使用者介面 User Interface 4.UX 和UI如何影響彼此? 5.UX 和UI職能大不同
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享文章為:UI/UX哪裡不同?白話文一次搞懂UX/UI。 1.UX 和UI有什麼不一樣? 2.UX:使用者體驗 User Experience 3.UI:使用者介面 User Interface 4.UX 和UI如何影響彼此? 5.UX 和UI職能大不同
Thumbnail
UX Writer(UX寫作)是什麼?你也是UX的學習新手嗎?看過來了解文字在UX裡的重要性和要怎麼學習UX寫作!
Thumbnail
UX Writer(UX寫作)是什麼?你也是UX的學習新手嗎?看過來了解文字在UX裡的重要性和要怎麼學習UX寫作!
Thumbnail
今年我們家實習生執行了一個訪談計畫,要去研究 UX 的自學者在學習過程中遇到的困難。 在聆聽幾場訪談後,我更明確感受到許多朋友對於 UX 領域有這麼多方法論,不知道該如何下手學習的焦慮。 其中一個核心關鍵,也包括囫圇吞棗了這麼多理論方法之後,不知道該如何用一個作品來表達出來。 我認為在這個過程中,我
Thumbnail
今年我們家實習生執行了一個訪談計畫,要去研究 UX 的自學者在學習過程中遇到的困難。 在聆聽幾場訪談後,我更明確感受到許多朋友對於 UX 領域有這麼多方法論,不知道該如何下手學習的焦慮。 其中一個核心關鍵,也包括囫圇吞棗了這麼多理論方法之後,不知道該如何用一個作品來表達出來。 我認為在這個過程中,我
Thumbnail
《人本×互動設計》有溫度的思考,讓設計滿足使用需求 發布第一篇《【UI閱讀筆記】UI設計大進擊!》文章時,因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了!並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書!),就這樣,這篇文章就誕生啦🎉。
Thumbnail
《人本×互動設計》有溫度的思考,讓設計滿足使用需求 發布第一篇《【UI閱讀筆記】UI設計大進擊!》文章時,因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了!並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書!),就這樣,這篇文章就誕生啦🎉。
Thumbnail
本篇整理至 edX UX Research 線上免費課程。 UX (user experience),也有人稱 UE,指的是一個產品所帶給使用者的感受。在這個「以人為本」的時代,機器是用來服務人類,因此要創造宜人的產品便是首要目標。 UX writing 是 UX writer 使用語言達到提升
Thumbnail
本篇整理至 edX UX Research 線上免費課程。 UX (user experience),也有人稱 UE,指的是一個產品所帶給使用者的感受。在這個「以人為本」的時代,機器是用來服務人類,因此要創造宜人的產品便是首要目標。 UX writing 是 UX writer 使用語言達到提升
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News