由動而靜的新體驗 - Motion User Interface

• 講者 : 魏銘信 (Ivan Wei) 華碩電腦 , Senior UE Designer– 如何由動態思考切入介面設計

• 動態思考介面設計的 Process• Motion Design 的隱喻

– 靜在視覺細節，你察覺了多少 ?• 如何琢磨視覺的細節 ?• 電子產品 GUI 設計的 Tip

– 激發動態思考的方法 ?

UI 設計的流程

Ideation

Information Survey

Brain Storm

Proposal

Evaluation

Feasibility Tset

Implementation

UI-Spec Define

GUI Design

Prototyping

Verification

Review

Refine

Deliver

Icon 的功能

Icon 的功能

幫助 User 記憶而不是執著於意義的詮釋

品牌識別 (Brand Identity)

視覺的亮點靠對比堆砌出層次

立體感的些微差異• 細節就在每 1px 裡 !

避免混色• 耐看才值得被細細體會– 搶眼不一定是好事 , 耐不耐看才是王道 !!

圖放到 Device 上的顏色效果不如預期

利用 Pettern 相疊減少漸層斷差

螢幕密度對視覺編排的影響

隱喻的適切性

如何經營 icon 的細節

色系與視角統一

利用框架 Template 統一

如何創造 Family look

整體視覺大小的比例要一致• 除了顏色、透視角度、質感，整體視覺大

小的比例上更為關鍵 !

視覺化大師們的對話 -1 pixel 1 pixel 的改變世界

• 講者 : 詹智堯 (Allen Chan) Trend Micro, Senior UI Designer

設計的目的是什麼 ?

We lead & inspire

• Set the direction• Create excitement• Create emotions

Explore more…

• 色彩變化• 透明度掌握• 品牌置入• 考慮不同材質• 更高科技感和智慧感• 按鈕是否清楚

好的設計是什麼 ?

• 1. Technically feasible• 2. Have business value• 3. Sustainable/lasting• 4. Echoing to the audience• 5. Tells a story – Characters = Functions– Storyline = Flows– Audience = Users

好觀念分享

• Draw from everyday life• Step closer, feel everything• Look where LEAST expected• Make it part of YOU• Believe in yourself