情境影片 創造價值 X 傳遞體驗

2014/9/16 @ Taipei, Taiwan

DIONA LINThink ahead, work hard, stay positive.

dionalin.com

Siemens USA! UX Design Intern! | 2014 Jan - July HearMe! ! ! Chief Design Officer | 2013 - Present AJA Creative!! UI Design Intern | 2013 Summer

3+ Years of UX Design

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

National Taiwan University of Science and TechnologyMaster of Industrial and Commercial Design

“Design is not just what it looks like and feels like.!

Design is how it works.” — by Steve Jobs

People

Product Background

MovementMusic

Sequence

People

Product Background

MovementMusic

Sequence

Create a scenario!you want

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

影⽚片基本製作流程 !

作品實例 !

市場優秀案例與分析 !總結

影⽚片基本製作流程!!

作品實例 !

市場優秀案例與分析 !總結

1

拍攝前的準備⼯工作。!包括初步構想、腳本撰寫、分鏡腳本、決定演員與⼯工作⼈人員等。

拍攝階段前置作業 後製作業

1

正式的拍攝⼯工作。!除了演員外，幕後的導演、攝影、道具、燈光、錄⾳音、場景佈置等也

是很重要的。

拍攝階段前置作業 後製作業

2

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

拍攝完的後續處理。!包括剪接、配⾳音、配樂、特效、合成等。

拍攝階段前置作業 後製作業

3

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

題外話：!你所看到的真實，不⼀一定是真正的真實>>> 後製的影響。例如：電視新聞。

拍攝階段前置作業 後製作業

-

拍攝時的注意事項： • 依事先準備好的腳本、分鏡，分段拍攝。 • 如需在不同地點拍攝，可先將同⼀一地點的部分先拍完再拍下⼀一個地點，再做事後的剪接即可，不必按照腳本的順序拍。

• 拍壞的 NG 畫⾯面不必洗掉，可在事後於電腦上剪掉即可，亦可供做幕後花絮。

只要有⼼心，⼈人⼈人都是藝術指導： • 藝術指導 - 負責影⽚片中佈景設計的⼈人，負責協調燈光、攝影、特效、服裝、道具、剪接各組⼈人員的⼯工作設計整體的視覺⾵風格。

• 學習攝影、多看電影 • 參考書籍：鏡頭之後

影⽚片基本製作流程 !

作品實例 !

市場優秀案例與分析 !總結

2

Joyful Learning

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

RagBroom & Dustpan Mop & Bucket

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

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

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

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

Problem - Cleanup works are not interesting.

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

TRIP TALK APP

TripTalk

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

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

/CETQ�5�'�6 2TQFWEV�+FGCU /KPF�/CRRKPI 5EGPCTKQ�5KVWCVKQPU %JCTCEVGT�/CRRKPI 5VQT[�$QCTF 2TQFWEV�%QPEGRV 2TQFWEV�2TQVQV[RG

休閒旅遊盛⾏行，⽽而來⾃自於網路的資訊太過繁雜，藉由使⽤用者訪談，我們發現許多⼈人的旅⾏行經驗，多是由親友的推薦敘述為基準來作準備，單靠⼝口頭描述卻⼜又難以紀錄下地點、⾏行程、注意的⼩小細節等等。

TripTalkTake you beyond the guide books

1.景點過濾!搜尋鄰近景點並過濾，旅⾏行者能快速找到⺫⽬目標。

4QWVG�/CRReflect the itinerary route instantlyCheck if your are on the route

#VVTCEVKQP�(KNVGTFilter your preferencesMake a personal travel wish list

6TCPUXGTUG�6KOG�2NCPPKPI�+PVGTHCEGBrowse smoothly and edit easilyMake comments on the attractionsGet the recommendation from your friends

2.⾏行程編輯結合互動平台!橫向的時間編輯模式能將景點快速的在時間軸上規劃，輕鬆的完成⾏行程準備。!與友⼈人討論，藉由與地圖結合的溝通平台，朋友也可直接推薦他的祕密景點給你。

3.即時旅程路徑地圖!⾏行程規劃完成後，各個景點將直接於地圖上標⽰示出路線，在修改的過程中，路線也會及時依改變的景點重新作路線規劃。結合電⼦子地圖功能與導航，你可以⾺馬上確認⾃自⼰己是否正沿著預定的路線遊玩。!

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

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

AUO AMOLED

© 2010 AU Optronics Corporation – Proprietary and Confidential 1

AUO flexible AMOLED display panel dimension: 4.3 inch

OVSS

63.26mm

106.8

7m

m

4.9mm 4.9mm

53.46mm

95.0

4m

m

4.9mm

1.1mm

AA

TOP view

3.28mm

3.65mm

34.8mm

友達產學和作案!可撓式顯⽰示器科技之應⽤用提案，專案過程與友達之硬體⼯工程師合作，在短短數個⽉月之內提出五概念，對可撓式顯⽰示器未來科技創新應⽤用的提案。並貢獻於友達對內對外之商業⽤用途。

Wrist&Phone&�Using&the&flexible&feature&of&the&AMOLED,&we&design&the&phone&to&be&worn&like&a&watch.&By&this&new&form,&we&expect&lots&of&new&and&interesEng&interacEon&between&users&and&this&whole&new&type&of&phone.�

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.�

So#$Wrist$allows&people&to&operate&by&him/herself.&In&addi6on&to&the&relevant&informa6on,&the&flexible&display&obviously&indicate&user&their&blood&pressure&status.�

So>&Wrist&�

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

HearMe

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

HEARMEfor the visually impaired

需求訪談

X5產⽣生初步設計

需求驗證 + 概念設計驗證

全盲者（10位），重度弱視者（2位）全盲者（3位），重度弱視者（2位）

X12

聲⾳音檔案整理困難⽣生活資訊難以紀錄 只能⽤用聽覺 回憶過往

無法便利地與友⼈人分享聲⾳音

問題發現

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

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

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

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

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

IOS Magic Tap - Right Swipe Right Swipe 10-sec Greeting Search Nearby Voice

user designanalysis

影⽚片基本製作流程 !

作品實例 !

市場優秀案例與分析 !總結

3

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

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

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

影⽚片基本製作流程 !

作品實例 !

市場優秀案例與分析 !總結

4

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

* 內容盡量保持簡短。

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

Metrics can tell you what users like and dislike, but they can’t tell you what they dream about. — by Scott Gursky

!

最棒的產品是能符合⼈人們真實的需求與渴望， 延伸出的影⽚片才能真正感動⼈人⼼心。

Thank You Question Session