UiGathering Talk - Motion User Interface / by Ivan Wei
本文讨论了GUI设计中的动态思考与视觉细节的重要性，从魏铭信的职业背景展现设计流程的各个阶段，包括构思、评估、实施等。强调在设计过程中不仅要关注功能性，更要创造出引人入胜的动态互动体验，同时也探讨了图标、主题和肤色设计的细节与技巧。最后提出了激发动态设计思维的方法，以鼓励设计师在GUI设计中创新。
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 AdvanceProject IRIS, 2010
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 常常只是照著UI Spec的步驟化完成視覺設計？ Pircture sourcefrom: http://pandion.pbworks.com/f/1258329378/signin-flow.png
- 14.
- 15.
- 16.
- 17. Purpose of Today A.如何由動態思考切入介面設計？ 流程/動態的隱喻/動態的描述 B.靜在視覺細節，你察覺了多少？ Skin/Theme/Icon的設計 C.激發動態思考的方法。
- 18. Chapter. A 如何由動態思考 切入介面設計？
- 19.
- 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
- 22.
- 23.
- 24.
- 25.
- 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
- 28.
- 29. Lock及Home的Flash互動原型設計 Windows Mobile 5.5Launcher, 2007
- 30.
- 31.
- 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
- 34.
- 35.
- 36. Movie Storyboard Pircture sourcefrom: http://asm201.files.wordpress.com/2010/09/chun_li_movie_storyboard.jpg
- 37.
- 38.
- 39.
- 40.
- 41. Life after Deathby PowerPoint
- 42.
- 43.
- 44. 動得有意義 - Metaphorof Motion
- 45. 動得有意義 - Metaphorof Motion • 功能性的表達 • 情緒上的感受
- 46. 層級架構的示意 利用具方向性的Transition揭露UI的架構邏輯。
- 47. 提示操作行為或方式 預先使用動畫來提示介面的操作行為或方式
- 48. 隱性指令的記憶 動態的回饋可以幫助使用者記憶隱性的指令。
- 49. 隱性指令的記憶 動態的回饋可以幫助使用者記憶隱性的指令。
- 50. 動畫時間差揭露導覽動線 利用時間差的效果揭露操作動線或Navigation的主從關係
- 51. 加減速的細微差異 漸慢就像煞車，有 ”到達” 的意思；漸快則像 ”加速離開”！
- 52.
- 53.
- 54. 動態的Spec如何描述？ 值 位移 縮放 旋轉 透明度 函數圖形 在不確定裝置上效能如何的情況下， Implement的時間單位一律以毫秒計算。 時間 毫秒、格數（FPS）
- 55. 函數圖形 值 平移 時間
- 56. 函數圖形 值 減速度移動 時間
- 57. 函數圖形 值 加速度移動 時間
- 58. 函數圖形 值 彈力效果 時間
- 59.
- 60.
- 61.
- 62. Chapter. B 靜在視覺細節， 你察覺了多少？
- 63.
- 64.
- 65.
- 66. 視覺的亮點靠對比堆砌出層次 Windows Mobile Homescreen design, 2008
- 67. 細節就在每1px裡！ Windows XP applicationdesign, 2006
- 68. 細節就在每1px裡！ Windows XP applicationdesign, 2006
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 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
- 84.
- 85.
- 86.
- 87.
- 88. Icon設計 • Icon的主要功能 • 隱喻的適切性 •如何經營Icon的細節 • 如何創造Family look
- 89.
- 90.
- 91. Brand Identity /品牌識別
- 92.
- 93.
- 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.
- 97. 如何經營Icon的細節 不要老是急著進電腦畫圖！ 手繪Sketch定骨架
- 98.
- 99.
- 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 systemUI design, 2007
- 103.
- 104. 細節與質感的統一 PND phone GUIdesign, 2007
- 105. 色系與視角的統一 Yahoo Knowledge+ icondesign, 2008
- 106. 色系與視角的統一 Yahoo emotion faceicon design, 2008
- 107. 利用框架Template統一 Apple iOS iconprinciple
- 108. 整體視覺大小的比例要一致 Android launcher iconguideline 除了顏色、透視角度、質感、細節， 在大小的比例上更為關鍵！
- 109.
- 111. Chapter. C 激發動態思考的方法。
- 112. Motion Graphic Animation/ MusicVideo/ VX
- 113.
- 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 sourcefrom: http://vglounge.com/wp-content/uploads/2011/02/gt5.jpg
- 117. After 回顧今日…
- 118. 今天分享了什麼？ • 動態思考介面設計的Process • MotionDesign的隱喻 • 如何琢磨視覺的細節 • 電子產品GUI設計的Tip • 刺激動態思考的方法
- 119.
- 120.