user interface in the jungle ( xuite )
Post on 21-Oct-2014
2.975 Views
Preview:
DESCRIPTION
TRANSCRIPT
hlb aka 布丁
HappyDesigner
Handlino http://handlino.com
User Interface Designin the Junglehlb, the designer of Handlino Inc.
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
☹
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 wrong.
motion blurhttp://www.flashden.net/item/horizontal-scroller-motion-blur/23377
和多繽紛樂
more: 2, 3
沒有做不到，只有想不到！
之前看過的...
in Flash
in CSS (safari 4 only)
New Era
Design Pattern
accessibility
Only the fearless can be great!
Pitfallthink twice before doing
1UI CustomizationDO NOT obey browser’s default behavior
(example)
11OS-like UI
right mouse key, desktop, ...(Canny Valley)
111UI Inconsistency
1111Make it perfect
keep changing and evolving
DO YOUR BEST
Best web UI is not the best UI
mashup
人
人人
人人 人
How Projects Really Work (version 1.5) Create your own cartoon at www.projectcartoon.com
How the customerexplained it
How the project leaderunderstood it
How the analystdesigned it
How the programmerwrote it
What the beta testersreceived
How the businessconsultant described it
How the project wasdocumented
What operationsinstalled
How the customer wasbilled
How it was supported What marketingadvertised
What the customerreally needed
亂
Idea Wireframe Mockup Prototype Product
Handlino http://handlino.com
示意圖wireframe: function & layout
能看不能開
能看不能開
polypage
ご清聴ありがとうございましたhttp://handlino.com/
hlb@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
top related