UI Gathering July, 2011.
魏銘信                   Ivan Wei學經歷 2004 / 畢業於台科大工商業設計系 2006, 2 - 2008, 5 / 明基電通設計中心、GUI設計師 2008, 5至今 / 華碩電腦設計中心、資深UE設計師專業 G...
GUI DesignIcon / Theme / Skin Design
Scenario PrototypingASUS Advance Project IRIS, 2010
Design Communication
手機上的GUI的演進
單純功能字元顯示
靜態黑白圖像
動態圖像選單設計
Seamless的操作介面
從簡單到豐富、從靜止到躍動
在這些變化過程中,GUI做了什麼?
常常只是照著UI Spec的步驟化完成視覺設計?Pircture source from:http://pandion.pbworks.com/f/1258329378/signin-flow.png
其實是被UI-Spec制約了?
好的介面要素除了功能與使用性,GUI最大的發揮則在創造精彩的…
動態互動體驗!
Purpose of TodayA.如何由動態思考切入介面設計?  流程/動態的隱喻/動態的描述B.靜在視覺細節,你察覺了多少?  Skin/Theme/Icon的設計C.激發動態思考的方法。
Chapter. A             如何由動態思考             切入介面設計?
設計步驟、由動而靜永遠要考慮介面動起來的樣子
這是一個常見的UI設計流程Ideation             Evaluation           Implementation                    VerificationInformation Survey   ...
這是一個常見的UI設計流程Ideation             Evaluation           Implementation                    VerificationInformation Survey   ...
設計步驟、由動而靜當Prototype完成後,RD卻告訴你許多設計的細節是Feasibility沒有評估到的!
設計步驟、由動而靜所以來不及、先這樣!視覺設計只好盡量妥協…
設計步驟、由動而靜動態設計與軟體開發的Frame work及Structure息息相關,Implement前的溝通更為重要!
設計步驟、由動而靜回過頭來調整一下流程!
設計步驟、由動而靜Ideation             Evaluation           Implementation                    VerificationInformation Survey     Fe...
設計步驟、由動而靜Ideation                          Evaluation           Implementation    VerificationInformation Survey          ...
設計步驟、由動而靜在Design Proposal前,就開始Animated prototyping。
Lock及Home的Flash互動原型設計Windows Mobile 5.5 Launcher, 2007
在Device上實際體驗
設計步驟、由動而靜設計初期不要花太多時間處理視覺上的細節,重點放在設計互動的過程!
設計步驟、由動而靜Ideation                          Evaluation           Implementation    VerificationInformation Survey          ...
設計步驟、由動而靜            Ideation            Information Survey                  Brain Storm                  Prototyping     ...
設計步驟、由動而靜或許你會問,Schedule很趕的案子怎麼有時間做這些Prototype?
設計步驟、由動而靜試試Sketch Prototype吧!
Movie StoryboardPircture source from:http://asm201.files.wordpress.com/2010/09/chun_li_movie_storyboard.jpg
設計步驟、由動而靜只要想好每個Key Frame,也可以達到溝通的目的!
Sketch Prototype
設計步驟、由動而靜這都是由動態思考介面設計的方法!
不做沒有意義的Motion Design
Life after Death by PowerPoint
不做沒有意義的Motion Design想表現得越多,越不容易聚焦!
1996年的Windows Bob
動得有意義 - Metaphor of Motion
動得有意義 - Metaphor of Motion• 功能性的表達• 情緒上的感受
層級架構的示意          利用具方向性的Transition揭露UI的架構邏輯。
提示操作行為或方式       預先使用動畫來提示介面的操作行為或方式
隱性指令的記憶          動態的回饋可以幫助使用者記憶隱性的指令。
隱性指令的記憶          動態的回饋可以幫助使用者記憶隱性的指令。
動畫時間差揭露導覽動線     利用時間差的效果揭露操作動線或Navigation的主從關係
加減速的細微差異     漸慢就像煞車,有 ”到達” 的意思;漸快則像 ”加速離開”!
一般人對Motion的敏銳度比想像高。所有”動”的經驗,都來自真實世界的物理變化。
動態的Spec如何描述?
動態的Spec如何描述?                         值                    位移                    縮放                    旋轉                  ...
函數圖形       值平移           時間
函數圖形        值減速度移動            時間
函數圖形        值加速度移動            時間
函數圖形       值彈力效果           時間
動態的Spec如何描述?透過RD了解的語言進行溝通,較能達到期望的效果!
由”動”的思考切入介面設計…
而”靜”,才是視覺經營的開始!
Chapter. B             靜在視覺細節,             你察覺了多少?
Skin/Theme設計
Skin/Theme的設計• 整體畫面的對比• 色彩的運用• 常見的問題
整體畫面的對比
視覺的亮點靠對比堆砌出層次Windows Mobile Home screen design, 2008
細節就在每1px裡!Windows XP application design, 2006
細節就在每1px裡!Windows XP application design, 2006
立體感的細微差異!
立體感的細微差異!
工藝精神的精雕細琢
色彩的運用
搶眼不一定是好事,耐不耐看才是王道!
搶眼不一定是好事,耐不耐看才是王道!
偏低的彩度較不易膩
偏低的彩度較不易膩
避免濁色的產生,顯得髒髒的!
圖放到Device上的顏色效果不如預期?LCD Panel的顯色範圍!16   色   256   色   65535 1670萬                       色         色
利用Pattern相疊減少漸層斷差      千萬色       32色   32色
常見的問題
螢幕密度對視覺編排的影響       326 ppi   163 ppi
螢幕密度對視覺編排的影響       326 ppi   163 ppi
螢幕密度對視覺編排的影響     18px                        10px8mm height                       8mm height             326 ppi   163 ppi
考慮Dynamic background時的辨識性
Multilingual User Interface / 多國語言
Multilingual User Interface / 多國語言
Icon設計
Icon設計• Icon的主要功能• 隱喻的適切性• 如何經營Icon的細節• 如何創造Family look
Icon的主要功能
幫助User記憶而不是執著於意義的詮釋Pircture source from:http://bensoncheng.files.wordpress.com/2010/11/brain-postit.jpg
Brand Identity / 品牌識別
隱喻的適切性
隱喻的適切性Pircture source from:http://www.janeteresa.com/wp-content/uploads/2010/10/remember.jpg,http://us.123rf.com/400wm/400...
隱喻的適切性                                                           RemindPircture source from:http://www.janeteresa.com/wp-c...
不同的文化背景有不同的解讀                                        ServicePircture source from:http://wordpress.savemymachine.com/wp-con...
如何經營Icon的細節
如何經營Icon的細節    不要老是急著進電腦畫圖!      手繪Sketch定骨架
掌握表現技法的原則Pircture source from:http://fc08.deviantart.net/fs9/i/2006/061/7/1/Mini_Cooper_S_Marker_drawing_by_auto_concept.jpg
掌握表現技法的原則Pircture source from:http://fc08.deviantart.net/fs9/i/2006/061/7/1/Mini_Cooper_S_Marker_drawing_by_auto_concept.jpg
Highlight / Reflection / GlowCar entertainment system UI design, 2007
Highlight / Reflection / GlowCar entertainment system UI design, 2007                 100%                      50%   20%縮...
如何經營Icon的細節Car entertainment system UI design, 2007
如何創造Family Look
細節與質感的統一PND phone GUI design, 2007
色系與視角的統一Yahoo Knowledge+ icon design, 2008
色系與視角的統一Yahoo emotion face icon design, 2008
利用框架Template統一Apple iOS icon principle
整體視覺大小的比例要一致Android launcher icon guideline除了顏色、透視角度、質感、細節,在大小的比例上更為關鍵!
視覺設計的細節很多,一個也不能錯過!因為…
Chapter. C             激發動態思考的方法。
Motion GraphicAnimation/ Music Video/ VX
TypographyPircture source from:http://diagram360.co.uk/wp-content/uploads/2010/12/365-helvetica_1920.png
Movie Visual Effect / 電影特效Pircture source from:http://monomoda.com/wp-content/uploads/2010/08/stranger-then-fiction-1.jpg
Title Sequence / 片頭動畫Pircture source from:http://monomoda.com/2010/quantum-of-solace-intro/
Video GamePircture source from:http://vglounge.com/wp-content/uploads/2011/02/gt5.jpg
After        回顧今日…
今天分享了什麼?• 動態思考介面設計的Process• Motion Design的隱喻• 如何琢磨視覺的細節• 電子產品GUI設計的Tip• 刺激動態思考的方法
激發各位有不同的GUI設計思維
Ivan Weiwww.ivangraphic.idv.tw
UiGathering Talk - Motion User Interface / by Ivan Wei
Upcoming SlideShare
Loading in …5
×

UiGathering Talk - Motion User Interface / by Ivan Wei

11,020
-1

Published on

UiGathering 2011 July

Published in: Design, Technology, Business
2 Comments
61 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,020
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
2
Likes
61
Embeds 0
No embeds

No notes for slide

UiGathering Talk - Motion User Interface / by Ivan Wei

  1. 1. UI Gathering July, 2011.
  2. 2. 魏銘信 Ivan Wei學經歷 2004 / 畢業於台科大工商業設計系 2006, 2 - 2008, 5 / 明基電通設計中心、GUI設計師 2008, 5至今 / 華碩電腦設計中心、資深UE設計師專業 GUI design (Icon, theme, skin) UI and scenario prototyping Design communication (Motion graphic)
  3. 3. GUI DesignIcon / Theme / Skin Design
  4. 4. Scenario PrototypingASUS Advance Project IRIS, 2010
  5. 5. Design Communication
  6. 6. 手機上的GUI的演進
  7. 7. 單純功能字元顯示
  8. 8. 靜態黑白圖像
  9. 9. 動態圖像選單設計
  10. 10. Seamless的操作介面
  11. 11. 從簡單到豐富、從靜止到躍動
  12. 12. 在這些變化過程中,GUI做了什麼?
  13. 13. 常常只是照著UI Spec的步驟化完成視覺設計?Pircture source from:http://pandion.pbworks.com/f/1258329378/signin-flow.png
  14. 14. 其實是被UI-Spec制約了?
  15. 15. 好的介面要素除了功能與使用性,GUI最大的發揮則在創造精彩的…
  16. 16. 動態互動體驗!
  17. 17. Purpose of TodayA.如何由動態思考切入介面設計? 流程/動態的隱喻/動態的描述B.靜在視覺細節,你察覺了多少? Skin/Theme/Icon的設計C.激發動態思考的方法。
  18. 18. Chapter. A 如何由動態思考 切入介面設計?
  19. 19. 設計步驟、由動而靜永遠要考慮介面動起來的樣子
  20. 20. 這是一個常見的UI設計流程Ideation Evaluation Implementation VerificationInformation Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping Proposal UI Animation/ Interactive Media Deliver RD Implement
  21. 21. 這是一個常見的UI設計流程Ideation Evaluation Implementation VerificationInformation Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping Proposal UI Animation/ Interactive Media Deliver RD Implement
  22. 22. 設計步驟、由動而靜當Prototype完成後,RD卻告訴你許多設計的細節是Feasibility沒有評估到的!
  23. 23. 設計步驟、由動而靜所以來不及、先這樣!視覺設計只好盡量妥協…
  24. 24. 設計步驟、由動而靜動態設計與軟體開發的Frame work及Structure息息相關,Implement前的溝通更為重要!
  25. 25. 設計步驟、由動而靜回過頭來調整一下流程!
  26. 26. 設計步驟、由動而靜Ideation Evaluation Implementation VerificationInformation Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping Proposal UI Animation/ Interactive Media Deliver RD Implement
  27. 27. 設計步驟、由動而靜Ideation Evaluation Implementation VerificationInformation Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine PrototypingUI Animation/ Interactive Media RD Implement Deliver Proposal
  28. 28. 設計步驟、由動而靜在Design Proposal前,就開始Animated prototyping。
  29. 29. Lock及Home的Flash互動原型設計Windows Mobile 5.5 Launcher, 2007
  30. 30. 在Device上實際體驗
  31. 31. 設計步驟、由動而靜設計初期不要花太多時間處理視覺上的細節,重點放在設計互動的過程!
  32. 32. 設計步驟、由動而靜Ideation Evaluation Implementation VerificationInformation Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine PrototypingUI Animation/ Interactive Media RD Implement Deliver Proposal
  33. 33. 設計步驟、由動而靜 Ideation Information Survey Brain Storm Prototyping UI Animation/ Interactive Media Proposal
  34. 34. 設計步驟、由動而靜或許你會問,Schedule很趕的案子怎麼有時間做這些Prototype?
  35. 35. 設計步驟、由動而靜試試Sketch Prototype吧!
  36. 36. Movie StoryboardPircture source from:http://asm201.files.wordpress.com/2010/09/chun_li_movie_storyboard.jpg
  37. 37. 設計步驟、由動而靜只要想好每個Key Frame,也可以達到溝通的目的!
  38. 38. Sketch Prototype
  39. 39. 設計步驟、由動而靜這都是由動態思考介面設計的方法!
  40. 40. 不做沒有意義的Motion Design
  41. 41. Life after Death by PowerPoint
  42. 42. 不做沒有意義的Motion Design想表現得越多,越不容易聚焦!
  43. 43. 1996年的Windows Bob
  44. 44. 動得有意義 - Metaphor of Motion
  45. 45. 動得有意義 - Metaphor of Motion• 功能性的表達• 情緒上的感受
  46. 46. 層級架構的示意 利用具方向性的Transition揭露UI的架構邏輯。
  47. 47. 提示操作行為或方式 預先使用動畫來提示介面的操作行為或方式
  48. 48. 隱性指令的記憶 動態的回饋可以幫助使用者記憶隱性的指令。
  49. 49. 隱性指令的記憶 動態的回饋可以幫助使用者記憶隱性的指令。
  50. 50. 動畫時間差揭露導覽動線 利用時間差的效果揭露操作動線或Navigation的主從關係
  51. 51. 加減速的細微差異 漸慢就像煞車,有 ”到達” 的意思;漸快則像 ”加速離開”!
  52. 52. 一般人對Motion的敏銳度比想像高。所有”動”的經驗,都來自真實世界的物理變化。
  53. 53. 動態的Spec如何描述?
  54. 54. 動態的Spec如何描述? 值 位移 縮放 旋轉 透明度函數圖形在不確定裝置上效能如何的情況下,Implement的時間單位一律以毫秒計算。 時間 毫秒、格數(FPS)
  55. 55. 函數圖形 值平移 時間
  56. 56. 函數圖形 值減速度移動 時間
  57. 57. 函數圖形 值加速度移動 時間
  58. 58. 函數圖形 值彈力效果 時間
  59. 59. 動態的Spec如何描述?透過RD了解的語言進行溝通,較能達到期望的效果!
  60. 60. 由”動”的思考切入介面設計…
  61. 61. 而”靜”,才是視覺經營的開始!
  62. 62. Chapter. B 靜在視覺細節, 你察覺了多少?
  63. 63. Skin/Theme設計
  64. 64. Skin/Theme的設計• 整體畫面的對比• 色彩的運用• 常見的問題
  65. 65. 整體畫面的對比
  66. 66. 視覺的亮點靠對比堆砌出層次Windows Mobile Home screen design, 2008
  67. 67. 細節就在每1px裡!Windows XP application design, 2006
  68. 68. 細節就在每1px裡!Windows XP application design, 2006
  69. 69. 立體感的細微差異!
  70. 70. 立體感的細微差異!
  71. 71. 工藝精神的精雕細琢
  72. 72. 色彩的運用
  73. 73. 搶眼不一定是好事,耐不耐看才是王道!
  74. 74. 搶眼不一定是好事,耐不耐看才是王道!
  75. 75. 偏低的彩度較不易膩
  76. 76. 偏低的彩度較不易膩
  77. 77. 避免濁色的產生,顯得髒髒的!
  78. 78. 圖放到Device上的顏色效果不如預期?LCD Panel的顯色範圍!16 色 256 色 65535 1670萬 色 色
  79. 79. 利用Pattern相疊減少漸層斷差 千萬色 32色 32色
  80. 80. 常見的問題
  81. 81. 螢幕密度對視覺編排的影響 326 ppi 163 ppi
  82. 82. 螢幕密度對視覺編排的影響 326 ppi 163 ppi
  83. 83. 螢幕密度對視覺編排的影響 18px 10px8mm height 8mm height 326 ppi 163 ppi
  84. 84. 考慮Dynamic background時的辨識性
  85. 85. Multilingual User Interface / 多國語言
  86. 86. Multilingual User Interface / 多國語言
  87. 87. Icon設計
  88. 88. Icon設計• Icon的主要功能• 隱喻的適切性• 如何經營Icon的細節• 如何創造Family look
  89. 89. Icon的主要功能
  90. 90. 幫助User記憶而不是執著於意義的詮釋Pircture source from:http://bensoncheng.files.wordpress.com/2010/11/brain-postit.jpg
  91. 91. Brand Identity / 品牌識別
  92. 92. 隱喻的適切性
  93. 93. 隱喻的適切性Pircture source from:http://www.janeteresa.com/wp-content/uploads/2010/10/remember.jpg,http://us.123rf.com/400wm/400/400/robnroll/robnroll1006/robnroll100600003/7231852-female-hand-holding-a-small-alarm-clock-isolated-on-white.jpg
  94. 94. 隱喻的適切性 RemindPircture source from:http://www.janeteresa.com/wp-content/uploads/2010/10/remember.jpg,http://us.123rf.com/400wm/400/400/robnroll/robnroll1006/robnroll100600003/7231852-female-hand-holding-a-small-alarm-clock-isolated-on-white.jpg
  95. 95. 不同的文化背景有不同的解讀 ServicePircture source from:http://wordpress.savemymachine.com/wp-content/uploads/2011/06/j0408881.jpg
  96. 96. 如何經營Icon的細節
  97. 97. 如何經營Icon的細節 不要老是急著進電腦畫圖! 手繪Sketch定骨架
  98. 98. 掌握表現技法的原則Pircture source from:http://fc08.deviantart.net/fs9/i/2006/061/7/1/Mini_Cooper_S_Marker_drawing_by_auto_concept.jpg
  99. 99. 掌握表現技法的原則Pircture source from:http://fc08.deviantart.net/fs9/i/2006/061/7/1/Mini_Cooper_S_Marker_drawing_by_auto_concept.jpg
  100. 100. Highlight / Reflection / GlowCar entertainment system UI design, 2007
  101. 101. Highlight / Reflection / GlowCar entertainment system UI design, 2007 100% 50% 20%縮小後仍舊看得到細節
  102. 102. 如何經營Icon的細節Car entertainment system UI design, 2007
  103. 103. 如何創造Family Look
  104. 104. 細節與質感的統一PND phone GUI design, 2007
  105. 105. 色系與視角的統一Yahoo Knowledge+ icon design, 2008
  106. 106. 色系與視角的統一Yahoo emotion face icon design, 2008
  107. 107. 利用框架Template統一Apple iOS icon principle
  108. 108. 整體視覺大小的比例要一致Android launcher icon guideline除了顏色、透視角度、質感、細節,在大小的比例上更為關鍵!
  109. 109. 視覺設計的細節很多,一個也不能錯過!因為…
  110. 110. Chapter. C 激發動態思考的方法。
  111. 111. Motion GraphicAnimation/ Music Video/ VX
  112. 112. TypographyPircture source from:http://diagram360.co.uk/wp-content/uploads/2010/12/365-helvetica_1920.png
  113. 113. Movie Visual Effect / 電影特效Pircture source from:http://monomoda.com/wp-content/uploads/2010/08/stranger-then-fiction-1.jpg
  114. 114. Title Sequence / 片頭動畫Pircture source from:http://monomoda.com/2010/quantum-of-solace-intro/
  115. 115. Video GamePircture source from:http://vglounge.com/wp-content/uploads/2011/02/gt5.jpg
  116. 116. After 回顧今日…
  117. 117. 今天分享了什麼?• 動態思考介面設計的Process• Motion Design的隱喻• 如何琢磨視覺的細節• 電子產品GUI設計的Tip• 刺激動態思考的方法
  118. 118. 激發各位有不同的GUI設計思維
  119. 119. Ivan Weiwww.ivangraphic.idv.tw

×