1.
情境影片
創造價值 X 傳遞體驗
2014/9/16 @ Taipei, Taiwan

2.
DIONA LIN
Think ahead, work hard, stay positive.
dionalin.com

3.
3+ Years of UX Design
National Taiwan University of Science and Technology
Master of Industrial and Commercial Design
Siemens USA! UX Design Intern! | 2014 Jan - July
HearMe! ! ! Chief Design Officer | 2013 - Present
AJA Creative!! UI Design Intern | 2013 Summer
2014 Red Dot Communication Design - Best of the Best
Chinese CHI Conference - Paper selected & presented
2013 Italy, Milan Design Week - Salone Satellite Young Designer Exhibition
China UXD Award - Golden Award
2012 IDEA - Finalist

4.
“Design is not just what it looks like and feels like.!
Design is how it works.” — by Steve Jobs

5.
People
Product Background
Music Movement
Sequence

6.
People
Product Background
Create a scenario!
you want
Music Movement
Sequence

7.
設計與製作產品原型影⽚片呈現

8.
影⽚片基本製作流程
!
作品實例
!
市場優秀案例與分析
!
總結

9.
1
影⽚片基本製作流程!
!
作品實例
!
市場優秀案例與分析
!
總結

10.
前置作業拍攝階段後製作業
1
拍攝前的準備⼯工作。!
包括初步構想、腳本撰寫、分鏡腳
本、決定演員與⼯工作⼈人員等。

11.
前置作業拍攝階段後製作業
2
正式的拍攝⼯工作。!
除了演員外，幕後的導演、攝影、
道具、燈光、錄⾳音、場景佈置等也
是很重要的。

12.
使⽤用器材：
• 單眼相機：有HD⾼高畫質錄影功能即可，可租借
• 定焦鏡頭：以畫質為優先考量，畫⾯面對⽐比、⾊色彩、解析度有較好的表現
• 變焦鏡頭：可變化焦距，使⽤用性多元，節省拍攝換鏡頭時間

13.
前置作業拍攝階段後製作業
3
拍攝完的後續處理。!
包括剪接、配⾳音、配樂、特效、合成等。

14.
編輯軟體：
• 專業：Aftereffect, Premiere Pro
• 基本：imovie、final cut pro

15.
前置作業拍攝階段後製作業
-
題外話：!
你所看到的真實，不⼀一定是真正的真實
>>> 後製的影響。例如：電視新聞。

16.
拍攝時的注意事項：
• 依事先準備好的腳本、分鏡，分段拍攝。
• 如需在不同地點拍攝，可先將同⼀一地點的部分先拍完再拍下⼀一個地點，再做事後
的剪接即可，不必按照腳本的順序拍。
• 拍壞的 NG 畫⾯面不必洗掉，可在事後於電腦上剪掉即可，亦可供做幕後花絮。

17.
只要有⼼心，⼈人⼈人都是藝術指導：
• 藝術指導 - 負責影⽚片中佈景設計的⼈人，負責協調燈光、攝影、特
效、服裝、道具、剪接各組⼈人員的⼯工作設計整體的視覺⾵風格。
• 學習攝影、多看電影
• 參考書籍：鏡頭之後

18.
2
影⽚片基本製作流程
!
作品實例
!
市場優秀案例與分析
!
總結

19.
Joyful Learning

20.
樂學是⼀一套專為兒童設計的打掃⽤用具組。!
以兒童⼼心理學發展為基礎，加⼊入富有成就感的學習元素，將原本
複雜的過程變得簡單。造型以海洋⽣生物故事情境為發想，激發兒
童想像⼒力，並符合兒童⼈人體⼯工學，讓兒童操作起來更輕鬆有趣。

21.
清潔產品中，孩⼦子的打掃⽤用具這⼀一市場區塊是被忽略的，然⽽而打
掃其實是最好訓練孩⼦子⽣生活的應⽤用能⼒力，促使他們⾃自動⾃自發責任
感、⾃自信⼼心、邏輯、耐⼼心。

22.
深度訪談 洞悉需求!
1. 市⾯面上找不到適合孩⼦子們⽤用的掃具!
2. 現有產品尺⼨寸不合、危險!
3. 缺乏吸引孩⼦子學習使⽤用的魅⼒力!
4. 藉打掃動作可訓練⼿手眼協調能⼒力!
5. ⼀一套能幫助兒童學習打掃的產品，將引導⼈人們重新思考訓練孩⼦子的教育問題

23.
產品模型：CNC 塑料製作、布料縫製!
製作時間：兩個禮拜!
開銷成本：七萬

24.
⺫⽬目的：激發孩⼦子的興趣，並讓⽗父⺟母理解產品優點!
影⽚片⾵風格：故事書情節＋產品使⽤用特⾊色!
困難：產品模型費⽤用⾼高昂

25.
2012 新⼀一代設計展 佳作!
2012 美國⼯工業設計⼤大獎IDSA ⼊入圍!
2013 ⽶米蘭設計展

26.
TRIP TALK APP
TripTalk

27.
Triptalk 團隊結合資⼯工與設計的專業，從問題發現到使⽤用
者經驗設計，藉由完整的設計流程完成設計作品，從課程
開始到結束到後續的持續合作 ，耗時六個⽉月完成。

28.
Problem /!
休閒旅遊盛⾏行，⽽而來⾃自於網路的資訊太過繁雜，
藉由使⽤用者訪談，我們發現許多⼈人的旅⾏行經驗，
多是由親友的推薦敘述為基準來作準備，單靠⼝口
頭描述卻⼜又難以紀錄下地點、⾏行程、注意的⼩小細
節等等。!
!
Scenario /!
A：我禮拜六要去嘉義，可以去哪兒呢？!
B：唉呀，我那天剛好不在嘉義啊。!
A：你直接跟我說哪兒好玩，什麼好吃？!
B：你要先租⾞車，中午到的話可以去吃⼤大同⽕火雞⾁肉
飯，然後去公園⾛走⼀一⾛走，然後……!
A：欸！你講這麼多我聽不懂啦！先讓我抄下來、
查查地圖……

29.
休閒旅遊盛⾏行，⽽而來⾃自於網路的資訊太過繁雜，藉
由使⽤用者訪談，我們發現許多⼈人的旅⾏行經驗，多是
由親友的推薦敘述為基準來作準備，單靠⼝口頭描述
卻⼜又難以紀錄下地點、⾏行程、注意的⼩小細節等等。
/CETQ5'6 2TQFWEV+FGCU /KPF/CRRKPI 5EGPCTKQ5KVWCVKQPU %JCTCEVGT/CRRKPI 5VQT[$QCTF 2TQFWEV%QPEGRV 2TQFWEV2TQVQV[RG

30.
TripTalk
Take you beyond the guide books
1.景點過濾!
搜尋鄰近景點並過濾，旅⾏行者能快速找到
⺫⽬目標。
4QWVG/CR
Reflect the itinerary route instantly
Check if your are on the route
#VVTCEVKQP(KNVGT
Filter your preferences
Make a personal travel wish list
2.⾏行程編輯結合互動平台!
橫向的時間編輯模式能將景點快速的在時間
軸上規劃，輕鬆的完成⾏行程準備。!
與友⼈人討論，藉由與地圖結合的溝通平台，
朋友也可直接推薦他的祕密景點給你。
6TCPUXGTUG6KOG2NCPPKPI+PVGTHCEG
Browse smoothly and edit easily
Make comments on the attractions
Get the recommendation from your friends
3.即時旅程路徑地圖!
⾏行程規劃完成後，各個景點將直接於地圖上
標⽰示出路線，在修改的過程中，路線也會及
時依改變的景點重新作路線規劃。結合電⼦子
地圖功能與導航，你可以⾺馬上確認⾃自⼰己是否
正沿著預定的路線遊玩。!

31.
⺫⽬目的：帶出產品真正的獨特性!
影⽚片⾵風格：旁⽩白介紹＋使⽤用情境!
困難：Prototype 完成度

32.
2012通訊⼤大賽 ⽤用⼾戶體驗設計 佳作

33.
AUO AMOLED

34.
友達產學和作案!
可撓式顯⽰示器科技之應⽤用提案，專案過程與友達之硬體⼯工程師合
作，在短短數個⽉月之內提出五概念，對可撓式顯⽰示器未來科技創
新應⽤用的提案。並貢獻於友達對內對外之商業⽤用途。
AUO flexible AMOLED display panel dimension: 4.3
inch
OVSS
63.26mm
106.87mm
4.9mm
4.9mm 4.9mm
53.46mm
95.04mm
1.1mm
AA
3.28mm
3.65mm

35.
WristPhone
UsingtheflexiblefeatureoftheAMOLED,we
designthephonetobewornlikeawatch.Bythis
newform,weexpectlotsofnewandinteresEng
interacEonbetweenusersandthiswholenew
typeofphone.

36.
Smart SMART*func/ons*as*a*learning*device,*which*combines*
the*school*system*and*a*variety*of*resources*to*help*
students*learn*new*things*and*facilitates*parents*to*know*
more*about*their*children.

37.
SoWrist
So#$Wrist$allowspeopletooperatebyhim/
herself.Inaddi6ontotherelevant
informa6on,theflexibledisplayobviously
indicateusertheirbloodpressurestatus.

38.
⺫⽬目的：呈現未來創新概念性產品!
影⽚片⾵風格：界⾯面互動＋使⽤用情境!
困難：學習⾼高階動畫合成

39.
HearMe

40.
HEARME
for the visually impaired
「聽，⾒見」以視障者的⽤用⼾戶體驗為設計
出發點，為發掘聲⾳音與⾏行動裝置結合的
可能性。輕巧簡單的⼿手勢在錄製與聆聽
時提供迅捷的操作，條列式清單⽅方便⾳音
訊的分類整理，並結合地點分享平台，
讓⽤用⼾戶能夠輕鬆愉悅地探索⽣生活周遭中
的信息，享受美好的聲⾳音體驗。

41.
X5
需求訪談
產⽣生初步設計
X12
需求驗證 + 概念設計驗證
全盲者（3位），重度弱視者（2位） 全盲者（10位），重度弱視者（2位）

42.
問題發現
⽣生活資訊難以紀錄只能⽤用聽覺
聲⾳音檔案整理困難
回憶過往
無法便利地與友
⼈人分享聲⾳音

43.
即時記錄感動時刻
- 錄⾳音功能的即時性
- 快捷鍵的⼿手勢
- 震動與語⾳音回饋
- 掌握⺫⽬目前的狀態

44.
重點事項⽴立即標註
重要段落反覆聆聽
- 輕鬆的進⾏行重點標記
- ⾃自訂的段落標籤
- 操作⼿手勢易記
- 重點位置播放
- 節省時間

45.
簡潔分類與快速瀏覽
- 清楚的分類
- 瀏覽項⺫⽬目聲⾳音內容
- 減少檔案切換的時間

46.
愉悅探索精彩⽣生活
- 公開分享結合地點標註
- 搜尋附近聲⾳音
- 更了解⾃自⼰己⾝身處的所在地

47.
⺫⽬目的：感動⼈人⼼心的⽤用⼾戶體驗!
影⽚片⾵風格：真⼈人真事＋產品體驗!
困難：無法邀請實際⽤用⼾戶拍攝

48.
user analysis design
IOS Magic Tap -
10-sec Greeting Search Nearby Voice

49.
3
影⽚片基本製作流程
!
作品實例
!
市場優秀案例與分析
!
總結

50.
• 由 Berghs School of Communication 瑞典⾏行銷系學⽣生所製作的概念影⽚片。
• 軟硬體整合的設計，幫助聾啞⼈人⼠士與⼈人溝通。
• 完全的概念產品藉由影⽚片呈現，成功在網路上達到宣傳效果

51.
• 完全創新的產品，UCD設計流程
• 真實、說服⼒力
• 原本⺫⽬目標募資20萬元，10天募資破1500萬

52.
• 創作者旁⽩白、情境故事、產品細節、設計流程
• 三個⽉月創業：原型機、 KickStarter 影⽚片、機票錢、⽣生活費，⼀一共60 萬
• 台灣⼈人在 Kickstater 募資最快最多的記錄，39 萬美⾦金（約 1200 萬台幣）

53.
4
影⽚片基本製作流程
!
作品實例
!
市場優秀案例與分析
!
總結

54.
影⽚片解構
• 產品拍攝：瀏覽產品→特寫細節
• ⼈人物採訪：⾃自我介紹→產品介紹→闡述創作理念→使⽤用步驟
• 使⽤用情境：什麼情況下會使⽤用到你的產品，特點介紹
• 創作過程：開會的情況；在設計室、實驗室研發產品；科學實驗
• 操作步驟：產品使⽤用的流程，組裝教學
• 實際操作與成品：ending⽤用，演員開⼼心的使⽤用，呈現成品
• 其他：3D輔助、舉辦活動體驗的實況⋯⋯
* 內容盡量保持簡短。

55.
產品影⽚片影響⼒力
• 好的產品，好的情境體驗，打造⾜足夠說服⼒力。
• 藉反覆產品情境打造過程中也可⾃自我檢視產品是否達到滿⾜足使⽤用者的期待或需求。
• 在產品未實際開發前便說服消費者願意投資。

56.
Metrics can tell you what users like and dislike,
but they can’t tell you what they dream about. — by Scott Gursky
!
最棒的產品是能符合⼈人們真實的需求與渴望，
延伸出的影⽚片才能真正感動⼈人⼼心。

57.
Thank You
Question Session