UI prototype實作經驗分享

      Maso Lin
      2009/4/19
關於Maso...

 電機、傳播、多媒體

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

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

 Designer、Programer、講師

 Flash, Flash, Flash
關於今天的簡報…

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

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

有點像閒聊、講故事

就從跑一小段專案開發流程的方式來分享我的心得
為什麼要做Prototype?
  (為什麼為什麼、你說說看、你說說看啊!)
為什麼要做Prototype?

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

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

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

 因為有些東西是 只可意會,不可言談
為什麼要做Prototype?

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

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

 因為做了之後,才發現原來有OOO問題,好險
為什麼要做Prototype?

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

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

 因為很多細節用文字寫會不清楚,到時做錯怎辦?
我覺得Prototyping是…



        創意溝通的最佳手段

        驗証創意的好工具

     動態UI開發流程上的重要環節
好吧,開始來做Prototype
(第一次prototyping就上手!快快樂樂做婆陀泰普!)
要用什麼樣的方式來做呢?

紙本草圖
要用什麼樣的方式來做呢?

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

Balsamiq




>>操作影片
要用什麼樣的方式來做呢?

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

Flash




        (通常一片空白就是要秀東西)
要用什麼樣的方式來做呢?

Adobe Flash Catalyst




>>Flash Catalyst at Web 2.0 Expo
在開始做Prototype之前…
企業三大種族


         豬頭




         嘴炮




          米蟲
開始製作Prototype之前…

 要表達的重點? 

 有多少時間?

 有多少人?哪些人參與?

 定出功能清單或spec.

 重點是每個參與的人員都是認同此idea,並且有興趣參與的。
 (跟        米蟲公務員合作是非常危險的...
做Prototype時的注意事項

 挑重點實作
 重點取決於你要給觀眾的感覺,而非功能的完整
 (常常不小心就想愈做愈完整,導致時間不夠)
 細節不可輕忽
 不好做的部份就省略,有做的部份一定要做到最好
為什麼細節很重要?
quot;這個UI很讚!quot;
像是哪些細節?


          流暢

          圖形

          動態
不然你一定會聽到…

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

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

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

我猜客戶要的不是這個,他應該是要比較XX的
細節真的很重要!切記!
開始Demo了
開始Demo了

 配合簡報演出

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

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

 懂得適時隱惡揚善
 (例:在device上效能不佳...
你的idea不錯,但我覺得…

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

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

 每個人都可以說個人觀感

 但不是每個人都有能力提出正確的修改建議
你的idea不錯,但我覺得…

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

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

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

 一旦答應了你自己都覺得不好的修改建議後...
修改漩渦示意圖
開新project,好開心哦



    concept + prototype開發
                            回去修改

                             這樣不好,我覺...
所以應該怎麼辦?
你的建議不錯,但我認為…

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

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

多溝通,多傾聽

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

一邊修改,一邊也要多與User/客戶/上級 溝通,是否修改方
向無誤
總算達到共識了!

進入軟體開發流程

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

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

(理想上...
與RD做好朋友

 遇到          米蟲RD只能認命

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

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

 好的互動UI一定是設計與程式良性合作才能   產出的
 (這是重點!)
真的沒辦法這樣做嗎?

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

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

就是這個idea目前做不出來

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

設計,本來就是在有限的條件下進行的創作
(否則就是自爽的藝術表達...
完成
結語

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

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

細節
Q&A
       感謝
    maso.lin@gmail.com
http://masolin.blogspot.com
歡迎來信討論或到這裏留言
Upcoming SlideShare
Loading in …5
×

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

4,102 views

Published on

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

Published in: Design, Technology, Business
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,102
On SlideShare
0
From Embeds
0
Number of Embeds
559
Actions
Shares
0
Downloads
118
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

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

×