2009/04/19 ui gathering專題演講-ui prototype實作經驗分享

37
UI prototype實作經驗分享 Maso Lin 2009/4/19

Upload: justin-lee

Post on 28-Jan-2015

146 views

Category:

Design


0 download

DESCRIPTION

前 華碩電腦 手機界面互動設計師 林秉舒(Maso Lin)於UI Gathering 2009年4月份聚會的專題演講

TRANSCRIPT

Page 1: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

UI prototype實作經驗分享

Maso Lin2009/4/19

Page 2: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

關於Maso...

電機、傳播、多媒體

漫畫、動畫、遊戲、RIA、手機介面

網路公司、SOHO、資策會、BenQ、Asus...

Designer、Programer、講師

Flash, Flash, Flash

Page 3: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

關於今天的簡報…

不談技術,今天時間不夠做軟體教學

沒太多可秀的demo,因為這個是機密,那個也是機密…(囧)

有點像閒聊、講故事

就從跑一小段專案開發流程的方式來分享我的心得

Page 4: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

為什麼要做Prototype?(為什麼為什麼、你說說看、你說說看啊!)

Page 5: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

為什麼要做Prototype?

因為老板說:冇prototype、冇fu啊~

因為 挖今含慢拱喂,直接做給你看比較快

因為你怎麼動怎麼炫,用講的聽不懂啦

因為有些東西是 只可意會,不可言談

Page 6: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

為什麼要做Prototype?

因為老板說:你就弄個XXX來看看吧,明天交哦!

因為我總是一邊做才能一邊想出更多idea

因為做了之後,才發現原來有OOO問題,好險

Page 7: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

為什麼要做Prototype?

因為RD說需要有東西參考才懂怎麼做

因為RD一做下去就要幾個月半年,不先模擬一下怎行?

因為很多細節用文字寫會不清楚,到時做錯怎辦?

Page 8: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

我覺得Prototyping是…

創意溝通的最佳手段

驗証創意的好工具

動態UI開發流程上的重要環節

Page 9: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

好吧,開始來做Prototype(第一次prototyping就上手!快快樂樂做婆陀泰普!)

Page 10: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

要用什麼樣的方式來做呢?

紙本草圖

>>Twitter in Plait English

Page 11: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

要用什麼樣的方式來做呢?

UI flow

Page 12: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

要用什麼樣的方式來做呢?

Balsamiq >>操作影片

Page 13: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

要用什麼樣的方式來做呢?

影片 

Page 14: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

要用什麼樣的方式來做呢?

Flash

(通常一片空白就是要秀東西)

Page 15: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

要用什麼樣的方式來做呢?

Adobe Flash Catalyst

>>Flash Catalyst at Web 2.0 Expo

Page 16: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

在開始做Prototype之前…

Page 17: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

企業三大種族

豬頭

嘴炮

米蟲

Page 18: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

開始製作Prototype之前…

要表達的重點? 

有多少時間?

有多少人?哪些人參與?

定出功能清單或spec.

重點是每個參與的人員都是認同此idea,並且有興趣參與的。 (跟        米蟲公務員合作是非常危險的一件事)

Page 19: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

做Prototype時的注意事項

挑重點實作 重點取決於你要給觀眾的感覺,而非功能的完整 (常常不小心就想愈做愈完整,導致時間不夠)

細節不可輕忽 不好做的部份就省略,有做的部份一定要做到最好

Page 20: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

為什麼細節很重要?

Page 21: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

"這個UI很讚!"

Page 22: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

像是哪些細節?

流暢

圖形

動態

Page 23: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

不然你一定會聽到…

嘖…這個,不知該怎麼說耶,反正就是怪怪的…

是不錯啦,但這個idea用在這裏好像不太對…

看起來不錯,但總覺得少了些什麼…

我猜客戶要的不是這個,他應該是要比較XX的

Page 24: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

細節真的很重要!切記!

Page 25: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

開始Demo了

Page 26: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

開始Demo了

配合簡報演出

可能會出現各種               豬頭問題及                          嘴炮攻勢

所以盡可能事先想好應對招式

懂得適時隱惡揚善

(例:在device上效能不佳,建議就改採PC模擬的方式呈現)

Page 27: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

你的idea不錯,但我覺得…

準備進入嘴炮戰,謹慎應對

不要被嘴炮以A方向來審視B方向的concept

每個人都可以說個人觀感

但不是每個人都有能力提出正確的修改建議

Page 28: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

你的idea不錯,但我覺得…

好不好用,跟好不好看,有時是差不多主觀的東西

別盲目地想讓所有事物都用理性的方式去分析

這樣的想法,是十分不理性的。(如google設計師憤而離職的新聞)

一旦答應了你自己都覺得不好的修改建議後,就準備進入可怕的修改漩渦了!

Page 29: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

回去修改

開新project,好開心哦

concept + prototype開發

這樣不好,我覺得應該…

來不及了,就這樣出貨吧

修改漩渦示意圖

這樣不好,我覺得應該…

回去修改

回去修改

這樣不好,我覺得應該…

Page 30: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

所以應該怎麼辦?

Page 31: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

你的建議不錯,但我認為…

不要批評觀眾的感官,並多傾聽他的感想

多去分析觀眾感想裏的意含,找出問題徵結

多溝通,多傾聽

分析出真正的因素,才能提出正確的修正方案 

一邊修改,一邊也要多與User/客戶/上級 溝通,是否修改方向無誤

Page 32: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

總算達到共識了!

進入軟體開發流程

但要有心理準備,等待某天發生下面的狀況:某RD:因為那個XXX原因,所以你的這個OOO無法實作,看是不是要改成@@@這樣啊?

盡可能了解技術原因,與RD建立良好互動,提出雙贏的解決方法

(理想上是如此囉~)

Page 33: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

與RD做好朋友

遇到          米蟲RD只能認命

遇到好RD可多從他們身上學習程式運作背後的邏輯

當然也要分享關於設計的一些原則給他

好的互動UI一定是設計與程式良性合作才能 產出的(這是重點!)

Page 34: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

真的沒辦法這樣做嗎?

不論你的idea多好多棒多炫多讚

請一定都先要有最壞結果的心理準備

就是這個idea目前做不出來

勿因此自暴自棄,這表示(有可能)其他人也做不出來

設計,本來就是在有限的條件下進行的創作(否則就是自爽的藝術表達了)

先想想有無變通實作方式,但卻能達到同樣效果的 (需先了解技術面)

拋開包袱,重新提案(需心理建設)

Page 35: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

完成

Page 36: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

結語

在整個流程上,最重要還是:

溝通

就Prototype製作上,最重要的還是:

細節

Page 37: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享

Q&A感謝

[email protected]://masolin.blogspot.com

歡迎來信討論或到這裏留言