《UX 三刀流》課程筆記+心得整理 Week 10+11

更新於 發佈於 閱讀時間約 4 分鐘

Week 10 為期中報告:

  1. 本系列內容為 UX 三刀流 2024 春季班 課程進度內容
  2. 本篇依據自身當下手抄筆記再次統整歸納為貼文
  3. 心得依照講義影片頁面順序
  4. 對課程有興趣者可參考


Week 11:章節進度 2-5 使用者介面設計流程
筆記環節

1. 使用者介面設計的角色

(1) 介面設計師不是美工

 a. UI設計:視覺設計
 b. UI&UX設計共通:資訊設計/介面設計/導覽設計、互動設計/資訊架構
 c. UX設計:功能規格/內容需求、使用者需求/網站目標

(2) 介面設計的流程,從「需求」就已經開始

(3) UI設計師與UX設計師的分工

 a. UI設計師重視「互動細節的安排」:互動設計元素、視覺與感受(美學、主觀偏好)
 b. UX設計師合理「人與系統互動的邏輯」:功能架構與互動流程、滿足目標需求(數據導向)

(4) UX=看起來感覺很好+用起來感覺很好+可以達成操作易用性

ISO9241 定義的三個易用性指標:
有用(effectiveness)、效率(efficiency)、滿意(satisfaction)

2. 使用者介面設計流程 —— UX 設計師視角

(1) 使用者目標(User Goal)

情境中擷取問題和需求

(2) 任務流程(Task Flow)

操作任務的拆解(完成任務的需求分析)

(3) 線框流程(Wire Flow)

互動溝通的邏輯

(4) 使用者流程(User Flow)

具體互動的層級,包含互動、回饋、提示等。和線框流程的差別在於「加入了使用者的決策思考判斷等因素

(5) 任務流程(Task Flow)V.S. 線框圖(Wire Frame)

a. 任務流程「解析互動細節」,但缺少了「介面互動表現」
b. 線框圖有「完整介面考量」,但缺少了「前後關係」

(6) 兼顧 UX 互動邏輯與 UI 互動細節的介面設計方式:

線框流程(Wire Flow)


3. 使用者介面設計流程——UI 設計師視角

(1) 重視各頁的細節,在生成一個頁面前有著一連串的思考

 a. 縮圖(Thumbnail):單頁面層級
 b. 圖塊(Blockframe):元件佈局
 c. 線框圖(Wireframe):用以溝通頁面架構、內容、功能、行為、資訊階層
 d. 介面(Interface):視覺圖像 Mock Up→靜態視覺稿,最後產品視覺化
 e. 原型(Prototype):高擬真介面表現
提供完整、實際視覺設計,包含圖形、排版、網頁上大小元素等視覺表現


4. 介面規格書

進入開發流程之前,描述開發者需要的「互動規則和限制」,幫助工程師了解介面如何運作


5. 介面設計中,UI和UX工作者可以有不同關注點

依照大廠的介面設計規範:避免不符合被退件以及使用者更一致的操作體驗


心得環節

這個章節讓我更了解UI和UX設計師的工作範圍,和如何合作。
(UI 設計真的沒有只負責美麗而已😤😤😤)

我知道在很多地方這兩個職位都是合併,看完覺得介面設計這塊沒有UI組UX組(多人)一起切磋討論其實滿可惜滿寂寞的。

最後一段提到要依照大廠的介面設計規範很有道理。
畢竟有多少人就會有多少種介面被設計出來,要是沒有一個規範,整個使用流程就天下大亂啦!


關於我


留言
avatar-img
留言分享你的想法!
avatar-img
Lynn Li's
2會員
43內容數
產品設計|UX設計|設計思考 學習歷程,還有一些產品觀察跟讀書報告。
Lynn Li's的其他內容
2024/05/10
章節進度:3–7 運算式設計思考
Thumbnail
2024/05/10
章節進度:3–7 運算式設計思考
Thumbnail
2024/05/01
章節進度:3–8 使用性工程
Thumbnail
2024/05/01
章節進度:3–8 使用性工程
Thumbnail
2024/04/25
章節進度:1-8 使用者需求與研究分析
Thumbnail
2024/04/25
章節進度:1-8 使用者需求與研究分析
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這篇要整理 UX領域中常見的研究方法。 方法很多,寫太長易獨性低,使用者體驗會很差XD, 所以分成上下兩篇,請見下回分解~ 本篇內容整理至edX UX Research 免費線上課程,
Thumbnail
這篇要整理 UX領域中常見的研究方法。 方法很多,寫太長易獨性低,使用者體驗會很差XD, 所以分成上下兩篇,請見下回分解~ 本篇內容整理至edX UX Research 免費線上課程,
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
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
一個UX設計師在成長過程中,除了設計思維的提升外,對於細節的掌握也需要特別的注意,尤其交付Wireframe和UI Flow時。一個系統化的自查表可以避免許多曾犯的錯誤ㄧ再發生,減少設計稿來回次數,也不用再穿防彈衣跟開發技術人員討論了。
Thumbnail
一個UX設計師在成長過程中,除了設計思維的提升外,對於細節的掌握也需要特別的注意,尤其交付Wireframe和UI Flow時。一個系統化的自查表可以避免許多曾犯的錯誤ㄧ再發生,減少設計稿來回次數,也不用再穿防彈衣跟開發技術人員討論了。
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
週六(1/23)下午很開心參與了日更狂人「小金魚的人生實驗室」所號召的閉門課,她為了日更團的成員邀請了孫治華老師,重開一次內容創作的策略課程。 你可以能會以為這是一堂在教如何寫文章的課程,錯了,文章如何寫得好,不是這堂課的重點,這堂課真正的核心,是讓你井噴寫不完的題材。 課堂上的練習,從讀者角度出發
Thumbnail
週六(1/23)下午很開心參與了日更狂人「小金魚的人生實驗室」所號召的閉門課,她為了日更團的成員邀請了孫治華老師,重開一次內容創作的策略課程。 你可以能會以為這是一堂在教如何寫文章的課程,錯了,文章如何寫得好,不是這堂課的重點,這堂課真正的核心,是讓你井噴寫不完的題材。 課堂上的練習,從讀者角度出發
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
Thumbnail
深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
Thumbnail
《人本×互動設計》有溫度的思考,讓設計滿足使用需求 發布第一篇《【UI閱讀筆記】UI設計大進擊!》文章時,因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了!並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書!),就這樣,這篇文章就誕生啦🎉。
Thumbnail
《人本×互動設計》有溫度的思考,讓設計滿足使用需求 發布第一篇《【UI閱讀筆記】UI設計大進擊!》文章時,因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了!並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書!),就這樣,這篇文章就誕生啦🎉。
Thumbnail
本系列文章前面的「資訊架構的三種基本角色」、「事前準備與內容提供者」、以及「評估資訊內容的影響力」三篇,都是關於資訊架構前期規劃的討論,所以本文想談談執行過程的思考,包括進行網站地圖(sitemap)、框線架構(wireframe)等設計時犯過哪些錯誤、以及更理想的作法。
Thumbnail
本系列文章前面的「資訊架構的三種基本角色」、「事前準備與內容提供者」、以及「評估資訊內容的影響力」三篇,都是關於資訊架構前期規劃的討論,所以本文想談談執行過程的思考,包括進行網站地圖(sitemap)、框線架構(wireframe)等設計時犯過哪些錯誤、以及更理想的作法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News