2009/04/19 ui gathering專題演講-ui prototype實作經驗分享
DESCRIPTION
前 華碩電腦 手機界面互動設計師 林秉舒(Maso Lin)於UI Gathering 2009年4月份聚會的專題演講TRANSCRIPT
![Page 1: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/1.jpg)
UI prototype實作經驗分享
Maso Lin2009/4/19
![Page 2: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/2.jpg)
關於Maso...
電機、傳播、多媒體
漫畫、動畫、遊戲、RIA、手機介面
網路公司、SOHO、資策會、BenQ、Asus...
Designer、Programer、講師
Flash, Flash, Flash
![Page 3: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/3.jpg)
關於今天的簡報…
不談技術,今天時間不夠做軟體教學
沒太多可秀的demo,因為這個是機密,那個也是機密…(囧)
有點像閒聊、講故事
就從跑一小段專案開發流程的方式來分享我的心得
![Page 4: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/4.jpg)
為什麼要做Prototype?(為什麼為什麼、你說說看、你說說看啊!)
![Page 5: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/5.jpg)
為什麼要做Prototype?
因為老板說:冇prototype、冇fu啊~
因為 挖今含慢拱喂,直接做給你看比較快
因為你怎麼動怎麼炫,用講的聽不懂啦
因為有些東西是 只可意會,不可言談
![Page 6: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/6.jpg)
為什麼要做Prototype?
因為老板說:你就弄個XXX來看看吧,明天交哦!
因為我總是一邊做才能一邊想出更多idea
因為做了之後,才發現原來有OOO問題,好險
![Page 7: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/7.jpg)
為什麼要做Prototype?
因為RD說需要有東西參考才懂怎麼做
因為RD一做下去就要幾個月半年,不先模擬一下怎行?
因為很多細節用文字寫會不清楚,到時做錯怎辦?
![Page 8: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/8.jpg)
我覺得Prototyping是…
創意溝通的最佳手段
驗証創意的好工具
動態UI開發流程上的重要環節
![Page 9: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/9.jpg)
好吧,開始來做Prototype(第一次prototyping就上手!快快樂樂做婆陀泰普!)
![Page 10: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/10.jpg)
要用什麼樣的方式來做呢?
紙本草圖
>>Twitter in Plait English
![Page 11: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/11.jpg)
要用什麼樣的方式來做呢?
UI flow
![Page 14: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/14.jpg)
要用什麼樣的方式來做呢?
Flash
(通常一片空白就是要秀東西)
![Page 15: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/15.jpg)
要用什麼樣的方式來做呢?
Adobe Flash Catalyst
>>Flash Catalyst at Web 2.0 Expo
![Page 16: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/16.jpg)
在開始做Prototype之前…
![Page 17: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/17.jpg)
企業三大種族
豬頭
嘴炮
米蟲
![Page 18: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/18.jpg)
開始製作Prototype之前…
要表達的重點?
有多少時間?
有多少人?哪些人參與?
定出功能清單或spec.
重點是每個參與的人員都是認同此idea,並且有興趣參與的。 (跟 米蟲公務員合作是非常危險的一件事)
![Page 19: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/19.jpg)
做Prototype時的注意事項
挑重點實作 重點取決於你要給觀眾的感覺,而非功能的完整 (常常不小心就想愈做愈完整,導致時間不夠)
細節不可輕忽 不好做的部份就省略,有做的部份一定要做到最好
![Page 20: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/20.jpg)
為什麼細節很重要?
![Page 21: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/21.jpg)
"這個UI很讚!"
![Page 22: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/22.jpg)
像是哪些細節?
流暢
圖形
動態
![Page 23: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/23.jpg)
不然你一定會聽到…
嘖…這個,不知該怎麼說耶,反正就是怪怪的…
是不錯啦,但這個idea用在這裏好像不太對…
看起來不錯,但總覺得少了些什麼…
我猜客戶要的不是這個,他應該是要比較XX的
![Page 24: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/24.jpg)
細節真的很重要!切記!
![Page 25: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/25.jpg)
開始Demo了
![Page 26: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/26.jpg)
開始Demo了
配合簡報演出
可能會出現各種 豬頭問題及 嘴炮攻勢
所以盡可能事先想好應對招式
懂得適時隱惡揚善
(例:在device上效能不佳,建議就改採PC模擬的方式呈現)
![Page 27: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/27.jpg)
你的idea不錯,但我覺得…
準備進入嘴炮戰,謹慎應對
不要被嘴炮以A方向來審視B方向的concept
每個人都可以說個人觀感
但不是每個人都有能力提出正確的修改建議
![Page 28: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/28.jpg)
你的idea不錯,但我覺得…
好不好用,跟好不好看,有時是差不多主觀的東西
別盲目地想讓所有事物都用理性的方式去分析
這樣的想法,是十分不理性的。(如google設計師憤而離職的新聞)
一旦答應了你自己都覺得不好的修改建議後,就準備進入可怕的修改漩渦了!
![Page 29: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/29.jpg)
回去修改
開新project,好開心哦
concept + prototype開發
這樣不好,我覺得應該…
來不及了,就這樣出貨吧
修改漩渦示意圖
這樣不好,我覺得應該…
回去修改
回去修改
這樣不好,我覺得應該…
![Page 30: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/30.jpg)
所以應該怎麼辦?
![Page 31: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/31.jpg)
你的建議不錯,但我認為…
不要批評觀眾的感官,並多傾聽他的感想
多去分析觀眾感想裏的意含,找出問題徵結
多溝通,多傾聽
分析出真正的因素,才能提出正確的修正方案
一邊修改,一邊也要多與User/客戶/上級 溝通,是否修改方向無誤
![Page 32: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/32.jpg)
總算達到共識了!
進入軟體開發流程
但要有心理準備,等待某天發生下面的狀況:某RD:因為那個XXX原因,所以你的這個OOO無法實作,看是不是要改成@@@這樣啊?
盡可能了解技術原因,與RD建立良好互動,提出雙贏的解決方法
(理想上是如此囉~)
![Page 33: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/33.jpg)
與RD做好朋友
遇到 米蟲RD只能認命
遇到好RD可多從他們身上學習程式運作背後的邏輯
當然也要分享關於設計的一些原則給他
好的互動UI一定是設計與程式良性合作才能 產出的(這是重點!)
![Page 34: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/34.jpg)
真的沒辦法這樣做嗎?
不論你的idea多好多棒多炫多讚
請一定都先要有最壞結果的心理準備
就是這個idea目前做不出來
勿因此自暴自棄,這表示(有可能)其他人也做不出來
設計,本來就是在有限的條件下進行的創作(否則就是自爽的藝術表達了)
先想想有無變通實作方式,但卻能達到同樣效果的 (需先了解技術面)
拋開包袱,重新提案(需心理建設)
![Page 35: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/35.jpg)
完成
![Page 36: 2009/04/19 UI Gathering專題演講-UI prototype實作經驗分享](https://reader036.vdocuments.mx/reader036/viewer/2022081716/54c806664a795991148b4590/html5/thumbnails/36.jpg)
結語
在整個流程上,最重要還是:
溝通
就Prototype製作上,最重要的還是:
細節