Handlino http://handlino.com
User Interface Designin the Junglehlb, the designer of Handlino Inc.
Jungle ➔ 未開發 / 危險
Jungle ➔ 探險 ☺
Handlino http://handlino.com
• web site
• web app
• web application
• web service
Hardware
Software
Webware
making web UI *is* easy
Anyone can cook!
Save as Web Page
WYSIWYG
現實
Handlino http://handlino.com
• write HTML
• draw images
• borrow(copy) some javascript codes
Handlino http://handlino.com
• write HTML
• draw images
• borrow(copy) some javascript codes
• and write some CSS (OMG!)
uncertainty
devices
IPHONE WEB (V)
320 x 416
320 p
x
416 px
IPHONE FULL (V)
320 x 480
320 p
x
480 px
IPHONE WEB (H)
480 x 268
480 p
x
268 px
IPHONE FULL (H)
480 x 320480 p
x
320 px
MOBILE PHONE
320 x 240
320 p
x
240 px
MOBILE
PHONE
240 x 320
240 p
x
320 px
MOBILE
PHONE
240 x 240
240 p
x240 px
MOBILE
PHONE
240 x 176
240 p
x
176 px
MONITOR RESOLUTION
1024 x 768
1024 p
x
768 px
MONITOR RESOLUTION
800 x 600
800 p
x
600 px
Resolutions
We have browsers
Browsers have abilities
Browsers have disabilities
Browsers have bugs
Bugs even have their own names!
Handlino http://handlino.com
所見非所要WYSINWYW
What You See Is Not What You Want
Handlino http://handlino.com
所見天曉得WYSIWGK
What You See Is What God Knows
well,not that easy
☹
Only the fearless can be great!
Guideline?
Pros:More than one way to do it.CPU/memory usage and response time are the only limits
Cons:More than one way to do it.
和多繽紛樂
more: 2, 3
motion blurhttp://www.flashden.net/item/horizontal-scroller-motion-blur/23377
Pitfallthink twice before doing
1right mouse key
11OS-like UI
Canny Valley
111Make it perfect
keep changing and evolving
Design Pattern
accessibility
best UI
Web UI is not the best UI
ご清聴ありがとうございましたhttp://handlino.com/
謝謝
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。
Handlino http://handlino.com
• http://www.flickr.com/photos/77922700@N00/121752716/
• http://www.flickr.com/photos/9052666@N05/1795564765/
Thanks