More Related Content
Similar to UiGathering Talk - Motion User Interface / by Ivan Wei (20)
More from UXTW(Taiwan User Experience Professional Association) (20)
UiGathering Talk - Motion User Interface / by Ivan Wei
- 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)
- 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
- 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
- 46. 層級架構的示意
利用具方向性的Transition揭露UI的架構邏輯。
- 51. 加減速的細微差異
漸慢就像煞車,有 ”到達” 的意思;漸快則像 ”加速離開”!
- 54. 動態的Spec如何描述?
值
位移
縮放
旋轉
透明度
函數圖形
在不確定裝置上效能如何的情況下,
Implement的時間單位一律以毫秒計算。
時間
毫秒、格數(FPS)
- 83. 螢幕密度對視覺編排的影響
18px 10px
8mm height 8mm height
326 ppi 163 ppi
- 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
- 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/