User Interface 際際滷s - Silicon Straits Saigon / SHIELD
10 likes1,135 views
User Interface 101 by Silicon Strats Saigon Tu Bui
User Interface 際際滷s - Silicon Straits Saigon / SHIELD
- 1. UI 101 prepared by T炭 B湛i
- 2. Chapter lead UI from Silicon Straits tubui@siliconstraits.vn T炭 B湛i
- 3. Chapter lead UI 4 nm Graphic designer H nm 3 UI designer T畛t nghi畛p
- 4. Sau bu畛i h担m nay b畉n s畉 動畛c nh畛ng g狸?
- 5. - Ki畉n th畛c c董 b畉n - Chuy棚n nghi畛p h董n - Kinh nghi畛m x動董ng m叩u c畛a m狸nh
- 6. UI l g狸?
- 7. Contrast Repetition Alignment Proximity D畛 nh狸n S畛 th畛ng nh畉t Ch畛nh chu Ch畉t ch畉
- 8. M畛c l畛c 1. S畛 li畛u k畛 thu畉t 2. Nh畛ng i畛u l動u 箪 3. Input 畛 design 4. Quy tr狸nh lm vi畛c 5. Output cho Dev 6. Resources
- 9. Tool s畛 d畛ng 界鞄鱈稼鞄 Sketch3
- 10. L箪 do - T畉o ra 畛 lm UI - Qu畉n l箪 UI d畛 dng - C畛c k狸 nhanh - R畉 - C坦 b畉n quy畛n
- 11. Mn h狸nh design 界鞄鱈稼鞄 iPhone 5 retina 720 x 1280 px - a s畛 ng動畛i d湛ng ang xi - Size mn h狸nh 畛 m畛c trung b狸nh - xhdpi - R畉t nhi畛u size kh叩c nhau
- 12. S畛 li畛u k畛 thu畉t 1
- 13. K鱈ch th動畛c mn h狸nh Font size Margin, Padding K鱈ch th動畛c c叩c elements S畛 li畛u k畛 thu畉t
- 14. K鱈ch th動畛c mn h狸nh S畛 li畛u k畛 thu畉t
- 15. iOS: 640 x 1136 px ( mn h狸nh iPhone 5 retina ) L動u 箪: t畉t c畉 size 達 動畛c x2 畛 design cho 炭ng v畛i mn h狸nh retina
- 17. 128px 40px 88px Nh畛ng s畛 li畛u lu担n c坦 Chi畛u cao status bar: 40px Chi畛u cao navigation bar: 88px
- 18. Android: 720 x 1280 px L動u 箪: 董n v畛 o c畛a Android l dp ( 1dp=2px khi mn h狸nh l xhdpi )
- 19. px = dp * (dpi / 160) dp: Density-independent Pixels dpi: Dots per Inch small normal large x-large ldpi (120 dpi) mdpi (160 dpi) hdpi (240 dpi) xhdpi (320 dpi)
- 20. Nh畛ng s畛 li畛u lu担n c坦 Chi畛u cao status bar: 48px Chi畛u cao action bar: 112px Chi畛u cao navigation bar: 96px 160px 48px 112px 96px
- 21. Font size S畛 li畛u k畛 thu畉t
- 22. D畛a tr棚n kinh nghi畛m c叩 nh但n D畛 t鱈nh, d畛 nh畛 -> Nhanh 畛u -> 畉p
- 23. Font size ti棚u 畛 畛 Navigation bar: 34px Font size body b狸nh th動畛ng: 24px Font size body nh畛 nh畉t: 20px H畛 i畛u hnh iOS
- 24. Font size ti棚u 畛 畛 Action bar: 40px Font size body b狸nh th動畛ng: 28px Font size body nh畛 nh畉t: 24px H畛 i畛u hnh Android Location services disabled Please turn on location services in Setting -> Privacy -> Location Services 12:30 Setting
- 25. Margin, Padding S畛 li畛u k畛 thu畉t
- 26. C畛a c畉 2 h畛 i畛u hnh l 40px Kho畉ng c叩ch l箪 t動畛ng th畛t l畛 40px Trung b狸nh l 20px Kho畉ng c叩ch gi畛a c叩c 畛i t動畛ng kh叩c lo畉i vd: ch畛 c叩ch button 20px
- 27. K鱈ch th動畛c c叩c elements S畛 li畛u k畛 thu畉t
- 28. L箪 t動畛ng nh畉t l cao 80px Button BELL 100%4:21PM App g狸 坦 VND30px L箪 t動畛ng nh畉t l cao 30px Icon tr棚n Navigation 80px Button g狸 坦
- 29. 1 鍖le k鱈ch th動畛c 1024x1024px App icon
- 30. Nh畛ng i畛u l動u 箪 2
- 31. iOS vs Android S畛 li畛u 畉t t棚n Screenshots Nh畛ng i畛u l動u 箪
- 32. iOS vs Android Nh畛ng i畛u l動u 箪
- 34. S畛 li畛u Nh畛ng i畛u l動u 箪
- 35. T畉t c畉 c叩c size c畛a 2 h畛 i畛u hnh 畛u ph畉i l s畛 ch畉n Mn h狸nh Retina l x2, khi scale xu畛ng mn h狸nh th動畛ng ph畉i chia h畉t 2 Mn h狸nh xhdpi c畛a Android 1dp = 2px L箪 do
- 36. Bo g坦c radius s畛 ch畉n L箪 t動畛ng nh畉t l radius = 6
- 37. 9-patches trong android L 鍖le d湛ng cho nh畛ng element khi ph坦ng to ph畉i gi畛 4 g坦c c畛a element ( c坦 th畛 1 g坦c l shape l畉 ) 9-patches
- 38. 畉t t棚n Nh畛ng i畛u l動u 箪
- 39. Group r探 rng c叩c c畛m l畉i Nh畛 畉t t棚n theo 炭ng ch畛c nng V畛 Layer
- 41. 畉t t棚n artboard theo t棚n c畛a screen V畛 Artboard C叩ch 畉t s畛: S畛 畉u ti棚n l th畛 t畛 trong 鍖ow 界鞄鱈稼鞄 c畛a wireframe S畛 th畛 hai tr畛 i l s畛 th畛 t畛 trong nh叩nh c畛a screen 界鞄鱈稼鞄 v鱈 d畛: 2.3 ngh挑a l screen con th畛 3 trong screen 界鞄鱈稼鞄 th畛 2
- 42. Splash Screen Login Map Map Route A B Map Directions Form Success
- 43. Lm t畉t c畉 c叩c UI trong 1 鍖le Sketch L動u 1 b畉n backup kh叩c trong m叩y ( lm h畉t 1 ngy th狸 replace tr棚n dropbox) V畛 鍖le Sketch
- 44. Screenshot Nh畛ng i畛u l動u 箪
- 45. Lm 動畛c UI no th狸 export ra thnh screenshot li畛n v c湛ng t棚n v畛i artboard 坦 畛 m畛i ng動畛i d畛 theo d探i L畛 app crash c嘆n h狸nh m畉u 畛 畛 l畉i M畛c 鱈ch
- 46. iOS vs Android S畛 li畛u 畉t t棚n Screenshots Nh畛ng i畛u n棚n nh畛
- 47. Input 畛 design 3
- 48. 1. User鍖ow c畛a app 2. Wireframe c畛a ton b畛 app 3. Brand c畛a app ( n畉u c坦 ) 4. M畛c 鱈ch 界鞄鱈稼鞄 c畛a app 5. User l ai ( mi棚u t畉 cng r探 cng t畛t ) 6. iOS hay Android, c叩i no 動u ti棚n h董n?
- 49. Quy tr狸nh lm vi畛c 4
- 50. 1. Tham gia bu畛i h畛p kickstart project 2. Khi UX ang lm user鍖ow..th狸 m狸nh b畉t 畉u research UI ( tham kh畉o tr棚n m畉ng, xi c叩c app 畛i th畛 ) 3. Trao 畛i v g坦p 箪 v畛 wireframe v畛i UX 4. B畉t 畉u lm UI 5. Trao 畛i tr畛c ti畉p v畛i UX ( 畛 bi畉t v畛 mong mu畛n, idea ny n畛 ) 6. Lm keyvisual 2, 3 trang UI 界鞄鱈稼鞄 ( th畉y g狸 ko 畛n th狸 trao 畛i li畛n v畛i UX ) 7. Review v畛i team v畛 keyvisual 8. G畛i cho PM 畛 con鍖rm v畛i client 9. Ch畛t xong keyvisual th狸 chi畉n cho h畉t ( song song v畛i vi畛c lm prototype & animation) 10. Bn giao cho b棚n Dev
- 51. Output cho Dev 5
- 52. 1. 鍖le UI.sketch ( nh畛 sao l動u 1 鍖le 畛 ch畛 kh叩c 畛 lm backup ) 2. folder ch畛a asset c畛a app 3. folder ch畛a app icon 4. folder ch畛a font d湛ng trong app 5. folder ch畛a screenshot UI 6. 鍖le prototype c畛a Marvelapp 7. folder ch畛a stock h狸nh ( n畉u c坦 ) 8. prototype animation
- 53. Resources 6
- 54. Tool s畛 d畛ng 界鞄鱈稼鞄
- 55. UI: Sketch 3
- 58. Tham kh畉o UI
- 65. http://www.sketchappsources.com/ Free stock - icon cho UI
- 66. Q&A