SlideShare a Scribd company logo
1 of 37
設計理論與技法
臺灣科技大學. 2022.5.20.王思如
已上線的同學請於對話區報到
組別_姓名
課程
規劃 2/18
設計的本質
設計
思維
2/25
平面構成
3/4
色彩構成
造型
法則
3/11
視覺美感
3/18
傳達設計
3/25
傳達設計
測試
4/8
立體構成
4/15
造型語言
4/29
生活經驗
收集
設計
思考
5/6
洞察與命題
5/20
概念原型
5/27
原型測試
6/10
概念調整與
提案
4/22
隱喻設計
5/13
設計概念與
情境
課堂筆記與心得
請以小組為單位,彙整該堂課的上課筆記
評分的重點是「心得收穫」
整理成1~2頁A4檔案(word, pdf皆可)
隔天17:00前放上
雲端硬碟/課堂筆記與心得
(檔名格式:Week 1_Team 1)
遲交者視同沒交
筆記與心得成績將影響該階段組員的成績
第1週 第2週 第3週 第4週 第5週
- Team 1 Team 2 Team 3 Team 4
第6週 第7週 第8週 第9週 第10週
Team 1 Team 2 Team 3 Team 4 Team 1
第11週 第12週 第13週 第14週 第15週
Team 2 Team 3 Team 1 Team 2 Team 3
筆記資料不只是把白板上的紀錄重現
更需要梳理成自己的詮釋。
智慧閱讀
“
Reference: https://www.g-mark.org/award/describe/50039?locale=en
設計思考主題
分組
每週的小組角色
都可以調整
組別 1 2 3
導演 張睿麟 徐克祈 林炯勛
副導演
李靖彤
劉美娟
蔡晏慈 林雅璇
研究員 林子愉 吳冠儀 胡博翔
設計師
林威均
黃如玨
陳品涵 邱戴萌
看護人
張琪悅
陳主安
馮品瑄 林楷哲
設計思考
雙鑽結構
機會
研究
破 立
解構符號 建造符號
解方
洞察 創意 原型
探索 定義 發展 產出
概念原型
• 顧客歷程元素地圖
• 體驗分鏡
• 使用者故事對照
Reference: https://www.boldare.com/blog/first-version-of-your-app-mvp-vs-prototype/
顧客歷程
元素地圖
以其中一個概念為主
其他的概念為輔
串成智慧閱讀的概念體驗
透過顧客歷程地圖
描繪顧客使用
智慧閱讀產品服務的歷程
他的造型和我
們臥室的風格
很搭
很漂亮的包裝,
擺哪都賞心悅
目
比想像中還容
易
是該好好休息
了
看到專櫃展示
的燈具
百貨專櫃前
櫃姐
專櫃展示架
放置在臥房
主臥房
老公
包裝盒
設定情境燈的
互動模式
臥室的床邊
-
手機app
睡前
輔助閱讀
睡前
昏暗的臥房
夫妻倆
情境燈
週末早晨被輕
柔地喚醒
早晨
窗簾還沒拉開
的臥房
-
情境燈
週末就該放慢
步調醒來
IG分享
早餐的
餐桌上
網友
手機
炫耀一下新玩
具
透過櫃姐解說
這款新型桌燈
的互動功能
買回家就讓老
公先把包裹放
在床邊
開箱用手機
app的指引來
設定他的情境
模式
睡前模式下只
提供30分鐘的
燈光
漸亮的燈光和
越來越大聲的
音樂把我喚醒
用IG分享產品
的體驗,tag品
牌名
範例:智慧檯燈
執行方式
從歷程活動到用戶故事
1. 從顧客歷程元素地圖中,
定義出與產品服務相關的
使用情境
2. 將使用情境拆解成數個用
戶與系統服務的使用步驟
3. 把每一個互動步驟,轉化
成具體的用戶故事
1
2
3
執行方式
用戶故事的描述
4. 用戶故事的描述:
身為 什麼樣的角色
我想要透過 使用某服務
讓我能夠 獲得某種利益
5. 在描述用戶的過程中,可
以再增添一些不同的用戶
與旁枝的故事
用戶故事
身為 家裡的技術大臣
我想要透過 app的指引說明
讓我能夠 了解情境燈的設定方式
As (role),
I want (functionality),
so that (value)
身為 什麼樣的角色
我想要透過 使用某功能/服務
讓我能夠 獲得某種利益/目的
執行方式
檢視你的設計
6. 幫助你把用戶故事更
細節化
• 實際上拿來做什麼:用戶想要用這個軟體服務做什麼?
• 為什麼:用戶為什麼想使用它?有哪些原因?
• 軟體之外的事:用戶都什麼時候、在哪裡使用它?還有誰在場?
• 出錯會如何:使用上可能遇到什麼問題?那他還能怎麼完成任務?
• 質疑假設:他們真的會使用這個方案嗎?
執行方式
最小可行性方案
7. 以用戶價值與執行資源作
為評估依據
定義最小可行性方案,作
為第一版的設計
功能地圖
將使用者需求變成功能規格圖表的方法。
主要用於與開發人員確認功能,通常以心智圖方式呈現。
“
執行方式
盤點功能
1. 從用戶故事裡
我想要透過 使用某功能
拆解並盤點系統裡的功能
新增
量測設備
使用指引
情境燈
配對
執行方式
組織關係
2. 將功能進行分類
畫成樹狀圖 範例主題:智慧閱讀
互動原型設計
各種幫助設計討論的
方法工具
應用情境
分鏡圖
初步描繪產品服務被體
驗的歷程感受
使用者
故事對照
對應顧客歷程活動,進
行更細節的步驟與使用
故事描繪
功能地圖
從使用故事描繪中,提
煉出功能項目,分類展
開後以心智圖呈現
線框稿
將功能配置在使用者的
互動介面上
UI flow /
Wireflow
規劃各畫面間的流程關
係
Flow
Chart
將主軸的功能操作,以
特定符號標示其步驟、
程序和狀態
互動原型
依據設計規劃,將原型
透過原型模擬的方式,
呈現其互動狀態
設計規劃
關鍵線框稿
從使用步驟中
拆解用戶的互動畫面
再依據功能使用的需求
以及基本互動的邏輯
規劃出關鍵頁面的結構
UI Flow
頁面之間的操作流程
知道使用者怎麼操作
一項功能後
才能去規劃動線
Wireflow
有頁面的線框稿呈現
也有頁面間的動線
適合擅長視覺
思考的設計師使用
Flow Chart
使用了特定圖形符號
來表示解決問題的步驟和程序
可以用來檢驗使用者操作時
可能發生的所有功能狀態
互動原型
可以擁有完整互動
體驗與設計
甚至呈現產品
真實資料的高保真原型
原型測試
透過原型讓用戶建立對未來概念的想像
利用測試讓用戶為你的概念給予實務面的回饋
“
原型設計的
基本原則
• 用手思考
• 透過製作原型,讓點子、概念、解決方案
能夠被看得到、聽得見、摸得著。
• 保持低解析度,以快速修改與回應。
開發初期
透過原型測試
能獲得
1. 功能需求性的確認
確認功能設計的合理性,存在的必要性
移除多餘的功能,節省開發成本
2. 介面互動的優化
用戶對開法者規劃的資訊佈局,是否有相同的理解邏輯
交互方式與操作流程,是否符合他們的期待
狩野分析
日本品管大師狩野紀昭(Kano)跟他的同事所提出的二維品質模式。
“
Reference: https://www.dascoin168.com/archives/11470.html
方法特質
• 可以透過分析調查、訪談,找出客戶真正重視
的功能、訴求
• 用量化的方式快速決定,開發的優先順序
• 清楚明確定義需求的特質
執行方式
1. 使用質量特性評價表,找用戶進行概念評分
1-1. 準備好一個概念對應一組評量表單
1-2. 上一組的同學以Persona的角度思考
1-3. 針對別組的3個概念進行擁有與沒有的
評量,完成橘色區域的評量
1.
user 1 user 2 user 3 user 4 user 5
如果擁有這個產品/服務,你覺得如何?
1.喜歡 2.應該的 3.無所謂 4.能忍受 5.不喜歡
如果沒有這個產品/服務,你覺得如何?
1.喜歡 2.應該的 3.無所謂 4.能忍受 5.不喜歡
需求類型
A 魅力型需求 O 期望 M 基本需求
I 無差異需求 R 不需要 Q 有疑問
得票佔比:(類型票數/總票數)% M O A I R Q
%
假設你是 喜歡分享閱讀和生活感受的文青女大學生(Persona)
受測者名單
依據分配移動到該組進行評價
組別 1 2 3
User 1 徐克祈 張睿麟 林子愉
User2 林炯勛 林威均 蔡晏慈
User 3 胡博翔 陳主安 吳冠儀
User 4 林楷哲 黃如玨 陳品涵
User 5 邱戴萌 李靖彤 馮品瑄
執行方式
2. 對照「KANO 評價結果分類對照表」,
針對每位用戶的評分進行分析,取得
需求類型代號
3. 針對每個概念,計算每一需求類型的
得票佔比
1.
2.
3.
概念編號:1-1 user 1 user 2 user 3 user 4 user 5
如果擁有這個產品/服務,你覺得如何?
1.喜歡 2.應該的 3.無所謂 4.能忍受 5.不喜歡
2 1 1 3 1
如果沒有這個產品/服務,你覺得如何?
1.喜歡 2.應該的 3.無所謂 4.能忍受 5.不喜歡
5 4 3 3 5
需求類型
A 魅力型需求 O 期望 M 基本需求
I 無差異需求 R 不需要 Q 有疑問
M A A I O
得票佔比:(類型票數/總票數)% M O A I R Q
% 20 20 40 20 0 0
初步結果
針對單一功能或服務進行分析
可以有初步的判斷依據
優先順序為:
M > O > A > I
基
本
需
求
期
望
魅
力
型
需
求
無
差
異
需
求
敏感性分析
SI:滿意影響力
=(A+O) / (A+O+M+I)
DSI:不滿意影響力
= (O+M) / (A+O+M+I) × -1
在灰色圈子裡的就是質量特性敏感性不大,
可暫時不予以考慮的功能。
離原點越遠的優先程度越高。
課程作業
“
課堂筆記與心得
請以小組為單位,彙整該堂課的上課筆記
評分的重點是「心得收穫」
整理成1~2頁A4檔案(word, pdf皆可)
隔天17:00前放上
雲端硬碟/課堂筆記與心得
(檔名格式:Week 1_Team 1)
遲交者視同沒交
筆記與心得成績將影響該階段組員的成績
第1週 第2週 第3週 第4週 第5週
- Team 1 Team 2 Team 3 Team 4
第6週 第7週 第8週 第9週 第10週
Team 1 Team 2 Team 3 Team 4 Team 1
第11週 第12週 第13週 第14週 第15週
Team 2 Team 3 Team 1 Team 2 Team 3
筆記資料不只是把白板上的紀錄重現
更需要梳理成自己的詮釋。
主題報告|當代大師
一人挑選一位當代大師進行報告分享
3~5頁的簡報:
- 生平背景
- 經典作品、著作、專案
- 設計風格、理念思維
報告者準備5分鐘的PPT上台說明
(檔名格式:自選主題_報告者姓名)
報告前一天中午12:00前上傳至 Google Drive
當代大師 報告
日期
報告同學
原研哉 2/25 Winny
塩田千春 3/4 Winny
草間彌生 3/11 邱戴萌
Jonathan Hoefle (Netflix) 3/18 徐克祈
Ian Spalter (Netflix) 3/25 李靖彤、林威均
Ludwig Mies van der Rohe 4/8 張琪悅、林雅璇
Philippe Starck 4/15 馮品瑄、劉美娟
深澤直人 4/22 陳品涵、黃如玨
村田智明 4/29 吳冠儀、胡博翔
Tim Brown (TED) 5/6 林楷哲、林炯勛
Timothy Prestero (TED) 5/13 蔡晏慈
Tony Fadell (TED) 5/20 張睿麟
Paul Bennett (TED) 5/27 張育瑋
Don Norman (TED) 6/10 林子愉
課程
預告
當代大師
Don Norman
設計思考
原型測試
設計理論與技法
臺灣科技大學. 2022.王思如

More Related Content

What's hot

【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】schoowebcampus
 
자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드RightBrain inc.
 
PMI Certfication (1).pdf
PMI Certfication (1).pdfPMI Certfication (1).pdf
PMI Certfication (1).pdfFelipeMacedo67
 
ตัวอย่างโครงงานคอมพิวเตอร์
ตัวอย่างโครงงานคอมพิวเตอร์ตัวอย่างโครงงานคอมพิวเตอร์
ตัวอย่างโครงงานคอมพิวเตอร์Why'o Manlika
 
ตัวอย่างโครงงานคอม
ตัวอย่างโครงงานคอมตัวอย่างโครงงานคอม
ตัวอย่างโครงงานคอมScott Tape
 

What's hot (9)

【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
 
자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
 
Thairadio
ThairadioThairadio
Thairadio
 
PMI Certfication (1).pdf
PMI Certfication (1).pdfPMI Certfication (1).pdf
PMI Certfication (1).pdf
 
ตัวอย่างโครงงานคอมพิวเตอร์
ตัวอย่างโครงงานคอมพิวเตอร์ตัวอย่างโครงงานคอมพิวเตอร์
ตัวอย่างโครงงานคอมพิวเตอร์
 
TV Production 1
TV Production 1TV Production 1
TV Production 1
 
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
 
ตัวอย่างโครงงานคอม
ตัวอย่างโครงงานคอมตัวอย่างโครงงานคอม
ตัวอย่างโครงงานคอม
 

Similar to DMS 20220527

Design Method & Skill_20210527
Design Method & Skill_20210527Design Method & Skill_20210527
Design Method & Skill_20210527Winny Wang
 
Design Method_20210520
Design Method_20210520Design Method_20210520
Design Method_20210520Winny Wang
 
DMS 20220318.pptx
DMS 20220318.pptxDMS 20220318.pptx
DMS 20220318.pptxWinny Wang
 
DMS 20220408.pptx
DMS 20220408.pptxDMS 20220408.pptx
DMS 20220408.pptxWinny Wang
 
DMS 20220325.pptx
DMS 20220325.pptxDMS 20220325.pptx
DMS 20220325.pptxWinny Wang
 
Design Method & Skill_20220107
Design Method & Skill_20220107Design Method & Skill_20220107
Design Method & Skill_20220107Winny Wang
 
Design Method_20210527
Design Method_20210527Design Method_20210527
Design Method_20210527Winny Wang
 
Design Method & Skill_20210415
Design Method & Skill_20210415Design Method & Skill_20210415
Design Method & Skill_20210415Winny Wang
 
Design Method & Skill_20210408
Design Method & Skill_20210408Design Method & Skill_20210408
Design Method & Skill_20210408Winny Wang
 
Design Method & Skill_20210506
Design Method & Skill_20210506Design Method & Skill_20210506
Design Method & Skill_20210506Winny Wang
 
Design Method & Skill_20210513
Design Method & Skill_20210513Design Method & Skill_20210513
Design Method & Skill_20210513Winny Wang
 
Design Method & Skill_20210610
Design Method & Skill_20210610Design Method & Skill_20210610
Design Method & Skill_20210610Winny Wang
 
Design Method & Skill_20210520
Design Method & Skill_20210520Design Method & Skill_20210520
Design Method & Skill_20210520Winny Wang
 

Similar to DMS 20220527 (20)

DMS 20230324
DMS 20230324DMS 20230324
DMS 20230324
 
Design Method & Skill_20210527
Design Method & Skill_20210527Design Method & Skill_20210527
Design Method & Skill_20210527
 
Design Method_20210520
Design Method_20210520Design Method_20210520
Design Method_20210520
 
DM 20230511
DM 20230511DM 20230511
DM 20230511
 
DMS 20220610
DMS 20220610DMS 20220610
DMS 20220610
 
DMS 20220318.pptx
DMS 20220318.pptxDMS 20220318.pptx
DMS 20220318.pptx
 
DMS 20220408.pptx
DMS 20220408.pptxDMS 20220408.pptx
DMS 20220408.pptx
 
DMS 20220415
DMS 20220415DMS 20220415
DMS 20220415
 
DMS 20220325.pptx
DMS 20220325.pptxDMS 20220325.pptx
DMS 20220325.pptx
 
MDS 20220422
MDS 20220422MDS 20220422
MDS 20220422
 
Design Method & Skill_20220107
Design Method & Skill_20220107Design Method & Skill_20220107
Design Method & Skill_20220107
 
20211023_SDB
20211023_SDB20211023_SDB
20211023_SDB
 
Design Method_20210527
Design Method_20210527Design Method_20210527
Design Method_20210527
 
Design Method & Skill_20210415
Design Method & Skill_20210415Design Method & Skill_20210415
Design Method & Skill_20210415
 
Design Method & Skill_20210408
Design Method & Skill_20210408Design Method & Skill_20210408
Design Method & Skill_20210408
 
Design Method & Skill_20210506
Design Method & Skill_20210506Design Method & Skill_20210506
Design Method & Skill_20210506
 
Design Method & Skill_20210513
Design Method & Skill_20210513Design Method & Skill_20210513
Design Method & Skill_20210513
 
Design Method & Skill_20210610
Design Method & Skill_20210610Design Method & Skill_20210610
Design Method & Skill_20210610
 
Design Method & Skill_20210520
Design Method & Skill_20210520Design Method & Skill_20210520
Design Method & Skill_20210520
 
DM 20220505
DM 20220505DM 20220505
DM 20220505
 

More from Winny Wang

The handout of service innovation design_20240428
The handout of service innovation design_20240428The handout of service innovation design_20240428
The handout of service innovation design_20240428Winny Wang
 
design method and skill course 2024_04_19
design method and skill course 2024_04_19design method and skill course 2024_04_19
design method and skill course 2024_04_19Winny Wang
 
The handout of the design method 20240418
The handout of the design method 20240418The handout of the design method 20240418
The handout of the design method 20240418Winny Wang
 
design method and skill course 2024_03_22
design method and skill course 2024_03_22design method and skill course 2024_03_22
design method and skill course 2024_03_22Winny Wang
 
design method and skill course 2024_04_12
design method and skill course 2024_04_12design method and skill course 2024_04_12
design method and skill course 2024_04_12Winny Wang
 
The handout of the design method 20240411
The handout of the design method 20240411The handout of the design method 20240411
The handout of the design method 20240411Winny Wang
 
The handout of the design method 20240328
The handout of the design method 20240328The handout of the design method 20240328
The handout of the design method 20240328Winny Wang
 
The handout of the design method 20240321
The handout of the design method 20240321The handout of the design method 20240321
The handout of the design method 20240321Winny Wang
 
design method and skill course 2024_03_15
design method and skill course 2024_03_15design method and skill course 2024_03_15
design method and skill course 2024_03_15Winny Wang
 
The handout of the design method 20240314
The handout of the design method 20240314The handout of the design method 20240314
The handout of the design method 20240314Winny Wang
 
The handout of the design method 20240307
The handout of the design method 20240307The handout of the design method 20240307
The handout of the design method 20240307Winny Wang
 
design method and skill course 2024_03_08
design method and skill course 2024_03_08design method and skill course 2024_03_08
design method and skill course 2024_03_08Winny Wang
 
design method and skill course 2024_02_23
design method and skill course 2024_02_23design method and skill course 2024_02_23
design method and skill course 2024_02_23Winny Wang
 
The handout of the design method 20240229
The handout of the design method 20240229The handout of the design method 20240229
The handout of the design method 20240229Winny Wang
 
The handout of the design method 20240222
The handout of the design method 20240222The handout of the design method 20240222
The handout of the design method 20240222Winny Wang
 
design method and skill course 2024_02_23
design method and skill course 2024_02_23design method and skill course 2024_02_23
design method and skill course 2024_02_23Winny Wang
 
Persona 20231228
Persona 20231228Persona 20231228
Persona 20231228Winny Wang
 

More from Winny Wang (20)

The handout of service innovation design_20240428
The handout of service innovation design_20240428The handout of service innovation design_20240428
The handout of service innovation design_20240428
 
design method and skill course 2024_04_19
design method and skill course 2024_04_19design method and skill course 2024_04_19
design method and skill course 2024_04_19
 
The handout of the design method 20240418
The handout of the design method 20240418The handout of the design method 20240418
The handout of the design method 20240418
 
design method and skill course 2024_03_22
design method and skill course 2024_03_22design method and skill course 2024_03_22
design method and skill course 2024_03_22
 
design method and skill course 2024_04_12
design method and skill course 2024_04_12design method and skill course 2024_04_12
design method and skill course 2024_04_12
 
The handout of the design method 20240411
The handout of the design method 20240411The handout of the design method 20240411
The handout of the design method 20240411
 
The handout of the design method 20240328
The handout of the design method 20240328The handout of the design method 20240328
The handout of the design method 20240328
 
The handout of the design method 20240321
The handout of the design method 20240321The handout of the design method 20240321
The handout of the design method 20240321
 
design method and skill course 2024_03_15
design method and skill course 2024_03_15design method and skill course 2024_03_15
design method and skill course 2024_03_15
 
The handout of the design method 20240314
The handout of the design method 20240314The handout of the design method 20240314
The handout of the design method 20240314
 
The handout of the design method 20240307
The handout of the design method 20240307The handout of the design method 20240307
The handout of the design method 20240307
 
design method and skill course 2024_03_08
design method and skill course 2024_03_08design method and skill course 2024_03_08
design method and skill course 2024_03_08
 
design method and skill course 2024_02_23
design method and skill course 2024_02_23design method and skill course 2024_02_23
design method and skill course 2024_02_23
 
The handout of the design method 20240229
The handout of the design method 20240229The handout of the design method 20240229
The handout of the design method 20240229
 
The handout of the design method 20240222
The handout of the design method 20240222The handout of the design method 20240222
The handout of the design method 20240222
 
design method and skill course 2024_02_23
design method and skill course 2024_02_23design method and skill course 2024_02_23
design method and skill course 2024_02_23
 
DMS 20231222
DMS 20231222DMS 20231222
DMS 20231222
 
FDI 20231225
FDI 20231225FDI 20231225
FDI 20231225
 
Persona 20231228
Persona 20231228Persona 20231228
Persona 20231228
 
SD 20231222
SD 20231222SD 20231222
SD 20231222
 

DMS 20220527

Editor's Notes

  1. https://www.youtube.com/watch?v=r8YuhMk7OJI
  2. https://www.youtube.com/watch?v=r8YuhMk7OJI
  3. https://www.youtube.com/watch?v=r8YuhMk7OJI
  4. https://www.youtube.com/watch?v=r8YuhMk7OJI
  5. https://www.youtube.com/watch?v=r8YuhMk7OJI
  6. https://www.youtube.com/watch?v=r8YuhMk7OJI