User Interface 101 by Silicon Strats Saigon Tu Bui

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 năm
Graphic
designer
ĐH năm 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 làm việc
5. Output cho Dev
6. Resources

9. Tool sử dụng chính
Sketch3

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. 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. Số liệu kỹ thuật
1

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. Kích thước màn hình
Số liệu kỹ thuật

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. normal
retina
6plus
1x
2x
3x

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 màn 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 hành 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 hành 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 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. 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 file 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 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

36. Bo góc radius số chẵn
Lý tưởng nhất là radius = 6

37. 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

38. Đặt tên
Những điều lưu ý

39. • Group rõ ràng các cụm lại
• Nhớ đặt tên theo đúng chức năng
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 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

42. Splash Screen Login Map
Map Route
A B
Map Directions
Form Success

43. • 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

44. Screenshot
Những điều lưu ý

45. 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

46. • iOS vs Android
• Số liệu
• Đặt tên
• Screenshots
Những điều nên nhớ

47. Input để design
3

48. 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?

49. Quy trình làm việc
4

50. 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

51. Output cho Dev
5

52. 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

53. Resources
6

54. Tool sử dụng chính

55. UI: Sketch 3

56. Prototype: Marvelapp

57. Prototype Animation: Flinto

58. Tham khảo UI

59. http://pttrns.com/

60. https://www.pinterest.com/robklaiss/uiux/

61. https://instagram.com/gifux/

62. https://github.com/zmalltalker/sketch-android-assets
Plugin cắt asset cho android

63. http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
Cắt 9-patches cho android

64. http://makeappicon.com/
Xuất icon app

65. http://www.sketchappsources.com/
Free stock - icon cho UI

66. Q&A

67. tubui@siliconstraits.vn
Cảm ơn