UiGathering Talk - Motion User Interface / by Ivan Wei
•
61 likes•7,436 views
UiGathering 2011 July
Recommended
More Related Content
Similar to UiGathering Talk - Motion User Interface / by Ivan Wei
Similar to UiGathering Talk - Motion User Interface / by Ivan Wei (20)
More from UXTW（Taiwan User Experience Professional Association）
More from UXTW（Taiwan User Experience Professional Association） (20)
UiGathering Talk - Motion User Interface / by Ivan Wei
- 1. UI Gathering July, 2011.
- 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. GUI Design Icon / Theme / Skin Design
- 4. Scenario Prototyping ASUS Advance Project IRIS, 2010
- 6. 手機上的GUI的演進
- 7. 單純功能字元顯示
- 8. 靜態黑白圖像
- 9. 動態圖像選單設計
- 10. Seamless的操作介面
- 11. 從簡單到豐富、從靜止到躍動
- 13. 常常只是照著UI Spec的步驟化完成視覺設計？ Pircture source from: http://pandion.pbworks.com/f/1258329378/signin-flow.png
- 14. 其實是被UI-Spec制約了？
- 16. 動態互動體驗！
- 17. Purpose of Today A.如何由動態思考切入介面設計？ 流程/動態的隱喻/動態的描述 B.靜在視覺細節，你察覺了多少？ Skin/Theme/Icon的設計 C.激發動態思考的方法。
- 18. Chapter. A 如何由動態思考 切入介面設計？
- 20. 這是一個常見的UI設計流程 Ideation Evaluation Implementation Verification Information Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping Proposal UI Animation/ Interactive Media Deliver RD Implement
- 21. 這是一個常見的UI設計流程 Ideation Evaluation Implementation Verification Information Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping Proposal UI Animation/ Interactive Media Deliver RD Implement
- 26. 設計步驟、由動而靜 Ideation Evaluation Implementation Verification Information Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping Proposal UI Animation/ Interactive Media Deliver RD Implement
- 27. 設計步驟、由動而靜 Ideation Evaluation Implementation Verification Information Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping UI Animation/ Interactive Media RD Implement Deliver Proposal
- 29. Lock及Home的Flash互動原型設計 Windows Mobile 5.5 Launcher, 2007
- 30. 在Device上實際體驗
- 32. 設計步驟、由動而靜 Ideation Evaluation Implementation Verification Information Survey Feasibility Test UI-Spec Define Review Performance/ Functional Brain Storm GUI Design Refine Prototyping UI Animation/ Interactive Media RD Implement Deliver Proposal
- 33. 設計步驟、由動而靜 Ideation Information Survey Brain Storm Prototyping UI Animation/ Interactive Media Proposal
- 36. Movie Storyboard Pircture source from: http://asm201.files.wordpress.com/2010/09/chun_li_movie_storyboard.jpg
- 38. Sketch Prototype
- 41. Life after Death by PowerPoint
- 44. 動得有意義 - Metaphor of Motion
- 45. 動得有意義 - Metaphor of Motion • 功能性的表達 • 情緒上的感受
- 46. 層級架構的示意 利用具方向性的Transition揭露UI的架構邏輯。
- 47. 提示操作行為或方式 預先使用動畫來提示介面的操作行為或方式
- 48. 隱性指令的記憶 動態的回饋可以幫助使用者記憶隱性的指令。
- 49. 隱性指令的記憶 動態的回饋可以幫助使用者記憶隱性的指令。
- 50. 動畫時間差揭露導覽動線 利用時間差的效果揭露操作動線或Navigation的主從關係
- 51. 加減速的細微差異 漸慢就像煞車，有 ”到達” 的意思；漸快則像 ”加速離開”！
- 53. 動態的Spec如何描述？
- 54. 動態的Spec如何描述？ 值 位移 縮放 旋轉 透明度 函數圖形 在不確定裝置上效能如何的情況下， Implement的時間單位一律以毫秒計算。 時間 毫秒、格數（FPS）
- 55. 函數圖形 值 平移 時間
- 56. 函數圖形 值 減速度移動 時間
- 57. 函數圖形 值 加速度移動 時間
- 58. 函數圖形 值 彈力效果 時間
- 60. 由”動”的思考切入介面設計…
- 61. 而”靜”，才是視覺經營的開始！
- 62. Chapter. B 靜在視覺細節， 你察覺了多少？
- 63. Skin/Theme設計
- 64. Skin/Theme的設計 • 整體畫面的對比 • 色彩的運用 • 常見的問題
- 65. 整體畫面的對比
- 66. 視覺的亮點靠對比堆砌出層次 Windows Mobile Home screen design, 2008
- 67. 細節就在每1px裡！ Windows XP application design, 2006
- 68. 細節就在每1px裡！ Windows XP application design, 2006
- 69. 立體感的細微差異！
- 70. 立體感的細微差異！
- 71. 工藝精神的精雕細琢
- 72. 色彩的運用
- 75. 偏低的彩度較不易膩
- 76. 偏低的彩度較不易膩
- 77. 避免濁色的產生，顯得髒髒的！
- 78. 圖放到Device上的顏色效果不如預期？ LCD Panel的顯色範圍！ 16 色 256 色 65535 1670萬 色 色
- 79. 利用Pattern相疊減少漸層斷差 千萬色 32色 32色
- 80. 常見的問題
- 81. 螢幕密度對視覺編排的影響 326 ppi 163 ppi
- 82. 螢幕密度對視覺編排的影響 326 ppi 163 ppi
- 83. 螢幕密度對視覺編排的影響 18px 10px 8mm height 8mm height 326 ppi 163 ppi
- 85. Multilingual User Interface / 多國語言
- 86. Multilingual User Interface / 多國語言
- 87. Icon設計
- 88. Icon設計 • Icon的主要功能 • 隱喻的適切性 • 如何經營Icon的細節 • 如何創造Family look
- 89. Icon的主要功能
- 91. Brand Identity / 品牌識別
- 92. 隱喻的適切性
- 94. 隱喻的適切性 Remind 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
- 95. 不同的文化背景有不同的解讀 Service Pircture source from: http://wordpress.savemymachine.com/wp-content/uploads/2011/06/j0408881.jpg
- 96. 如何經營Icon的細節
- 97. 如何經營Icon的細節 不要老是急著進電腦畫圖！ 手繪Sketch定骨架
- 100. Highlight / Reflection / Glow Car entertainment system UI design, 2007
- 101. Highlight / Reflection / Glow Car entertainment system UI design, 2007 100% 50% 20% 縮小後仍舊看得到細節
- 102. 如何經營Icon的細節 Car entertainment system UI design, 2007
- 103. 如何創造Family Look
- 104. 細節與質感的統一 PND phone GUI design, 2007
- 105. 色系與視角的統一 Yahoo Knowledge+ icon design, 2008
- 106. 色系與視角的統一 Yahoo emotion face icon design, 2008
- 107. 利用框架Template統一 Apple iOS icon principle
- 108. 整體視覺大小的比例要一致 Android launcher icon guideline 除了顏色、透視角度、質感、細節， 在大小的比例上更為關鍵！
- 111. Chapter. C 激發動態思考的方法。
- 112. Motion Graphic Animation/ Music Video/ VX
- 114. Movie Visual Effect / 電影特效 Pircture source from: http://monomoda.com/wp-content/uploads/2010/08/stranger-then-fiction-1.jpg
- 115. Title Sequence / 片頭動畫 Pircture source from: http://monomoda.com/2010/quantum-of-solace-intro/
- 116. Video Game Pircture source from: http://vglounge.com/wp-content/uploads/2011/02/gt5.jpg
- 117. After 回顧今日…
- 118. 今天分享了什麼？ • 動態思考介面設計的Process • Motion Design的隱喻 • 如何琢磨視覺的細節 • 電子產品GUI設計的Tip • 刺激動態思考的方法
- 119. 激發各位有不同的GUI設計思維