Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

User Interface Slides - Silicon Straits Saigon / SHIELD

988 Aufrufe

Veröffentlicht am

User Interface 101 by Silicon Strats Saigon
Tu Bui

Veröffentlicht in: Mobil
  • Als Erste(r) kommentieren

User Interface Slides - Silicon Straits Saigon / SHIELD

  1. 1. UI 101 prepared by Tú Bùi
  2. 2. Chapter lead UI from Silicon Straits tubui@siliconstraits.vn Tú Bùi
  3. 3. Chapter lead UI 4 năm Graphic designer ĐH năm 3 UI designer Tốt nghiệp
  4. 4. Sau buổi hôm nay bạn sẽ được những gì?
  5. 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. 6. UI là gì?
  7. 7. Contrast Repetition Alignment Proximity Dễ nhìn Sự thống nhất Chỉnh chu Chặt chẽ
  8. 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 làm việc 5. Output cho Dev 6. Resources
  9. 9. Tool sử dụng chính Sketch3
  10. 10. Lý do - Tạo ra để làm UI - Quản lý UI dễ dàng - Cực kì nhanh - Rẻ - Có bản quyền
  11. 11. Màn hình design chính iPhone 5 retina 720 x 1280 px - Đa số người dùng đang xài - Size màn hình ở mức trung bình - xhdpi - Rất nhiều size khác nhau
  12. 12. Số liệu kỹ thuật 1
  13. 13. • Kích thước màn hình • Font size • Margin, Padding • Kích thước các elements Số liệu kỹ thuật
  14. 14. Kích thước màn hình Số liệu kỹ thuật
  15. 15. iOS: 640 x 1136 px ( màn hình iPhone 5 retina ) Lưu ý: tất cả size đã được x2 để design cho đúng với màn hình retina
  16. 16. normal retina 6plus 1x 2x 3x
  17. 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. 18. Android: 720 x 1280 px Lưu ý: đơn vị đo của Android là dp ( 1dp=2px khi màn hình là xhdpi )
  19. 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. 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. 21. Font size Số liệu kỹ thuật
  22. 22. Dựa trên kinh nghiệm cá nhân • Dễ tính, dễ nhớ -> Nhanh • Đều -> Đẹp
  23. 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 hành iOS
  24. 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 hành Android Location services disabled Please turn on location services in Setting -> Privacy -> Location Services 12:30 Setting
  25. 25. Margin, Padding Số liệu kỹ thuật
  26. 26. • Của cả 2 hệ điều hành 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. 27. Kích thước các elements Số liệu kỹ thuật
  28. 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. 29. • 1 file kích thước 1024x1024px App icon
  30. 30. Những điều lưu ý 2
  31. 31. • iOS vs Android • Số liệu • Đặt tên • Screenshots Những điều lưu ý
  32. 32. iOS vs Android Những điều lưu ý
  33. 33. Số liệu Những điều lưu ý
  34. 34. Tất cả các size của 2 hệ điều hành đều phải là số chẵn • Màn hình Retina là x2, khi scale xuống màn hình thường phải chia hết 2 • Màn hình xhdpi của Android 1dp = 2px Lý do
  35. 35. Bo góc radius số chẵn Lý tưởng nhất là radius = 6
  36. 36. 9-patches trong android Là file 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
  37. 37. Đặt tên Những điều lưu ý
  38. 38. • Group rõ ràng các cụm lại • Nhớ đặt tên theo đúng chức năng Về Layer
  39. 39. Đặt tên artboard theo tên của screen Về Artboard Cách đặt số: ‣ Số đầu tiên là thứ tự trong flow chính của wireframe ‣ Số thứ hai trở đi là số thứ tự trong nhánh của screen chính ví dụ: 2.3 nghĩa là screen con thứ 3 trong screen chính thứ 2
  40. 40. Splash Screen Login Map Map Route A B Map Directions Form Success
  41. 41. • Làm tất cả các UI trong 1 file Sketch • Lưu 1 bản backup khác trong máy ( làm hết 1 ngày thì replace trên dropbox) Về file Sketch
  42. 42. Screenshot Những điều lưu ý
  43. 43. Làm được UI nào thì export ra thành 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
  44. 44. • iOS vs Android • Số liệu • Đặt tên • Screenshots Những điều nên nhớ
  45. 45. Input để design 3
  46. 46. 1. Userflow của app 2. Wireframe của toàn bộ app 3. Brand của app ( nếu có ) 4. Mục đích chính của app 5. User là ai ( miêu tả càng rõ càng tốt ) 6. iOS hay Android, cái nào ưu tiên hơn?
  47. 47. Quy trình làm việc 4
  48. 48. 1. Tham gia buổi họp kickstart project 2. Khi UX đang làm userflow…..thì mình bắt đầu research UI ( tham khảo trên mạng, xài các app đối thủ ) 3. Trao đổi và góp ý về wireframe với UX 4. Bắt đầu làm UI 5. Trao đổi trực tiếp với UX ( để biết về mong muốn, idea này nọ ) 6. Làm keyvisual 2, 3 trang UI chính ( 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 để confirm với client 9. Chốt xong keyvisual thì chiến cho hết ( song song với việc làm prototype & animation) 10. Bàn giao cho bên Dev
  49. 49. Output cho Dev 5
  50. 50. 1. file UI.sketch ( nhớ sao lưu 1 file ở chỗ khác để làm 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. file prototype của Marvelapp 7. folder chứa stock hình ( nếu có ) 8. prototype animation
  51. 51. Resources 6
  52. 52. Tool sử dụng chính
  53. 53. UI: Sketch 3
  54. 54. Prototype: Marvelapp
  55. 55. Prototype Animation: Flinto
  56. 56. Tham khảo UI
  57. 57. http://pttrns.com/
  58. 58. https://www.pinterest.com/robklaiss/uiux/
  59. 59. https://instagram.com/gifux/
  60. 60. https://github.com/zmalltalker/sketch-android-assets Plugin cắt asset cho android
  61. 61. http://romannurik.github.io/AndroidAssetStudio/nine-patches.html Cắt 9-patches cho android
  62. 62. http://makeappicon.com/ Xuất icon app
  63. 63. http://www.sketchappsources.com/ Free stock - icon cho UI
  64. 64. Q&A
  65. 65. tubui@siliconstraits.vn Cảm ơn

×