![Page 1: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/1.jpg)
UI 101
prepared by Tú Bùi
![Page 3: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/3.jpg)
Chapter lead UI
4 năm
Graphicdesigner
ĐH năm 3
UI designer
Tốt nghiệp
![Page 4: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/4.jpg)
Sau buổi hôm naybạn sẽ được những gì?
![Page 5: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/5.jpg)
- Kiến thức cơ bản- Chuyên nghiệp hơn- Kinh nghiệm xương máu của mình
![Page 6: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/6.jpg)
UI là gì?
![Page 7: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/7.jpg)
Contrast Repetition Alignment Proximity
Dễ nhìn
Sự thống nhất
Chỉnh chu
Chặt chẽ
![Page 8: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/8.jpg)
Mục lục1. 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
![Page 9: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/9.jpg)
Tool sử dụng chính
Sketch3
![Page 10: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/10.jpg)
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
![Page 11: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/11.jpg)
Màn hình design chính
iPhone 5retina
720 x 1280 px
- Đa số ngườidùng đang xài
- Size màn hình ởmức trung bình
- xhdpi- Rất nhiều sizekhác nhau
![Page 12: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/12.jpg)
Số liệu kỹ thuật
1
![Page 13: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/13.jpg)
• 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
![Page 14: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/14.jpg)
Kích thước màn hìnhSố liệu kỹ thuật
![Page 15: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/15.jpg)
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
![Page 16: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/16.jpg)
normalretina6plus
1x2x3x
![Page 17: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/17.jpg)
128px 40px88px
Những số liệu luôn có• Chiều cao status bar: 40px
• Chiều cao navigation bar: 88px
![Page 18: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/18.jpg)
Android: 720 x 1280 px
Lưu ý: đơn vị đo của Android là dp( 1dp=2px khi màn hình là xhdpi )
![Page 19: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/19.jpg)
px = dp * (dpi / 160)
dp: Density-independent Pixelsdpi: Dots per Inch
smallnormallargex-large
ldpi (120 dpi)mdpi (160 dpi)hdpi (240 dpi)xhdpi (320 dpi)
![Page 20: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/20.jpg)
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
160px48px112px
96px
![Page 21: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/21.jpg)
Font sizeSố liệu kỹ thuật
![Page 22: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/22.jpg)
Dựa trên kinh nghiệm cá nhân
• Dễ tính, dễ nhớ -> Nhanh
• Đều -> Đẹp
![Page 23: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/23.jpg)
• 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
![Page 24: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/24.jpg)
• 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 inSetting -> Privacy -> Location Services
12:30
Setting
![Page 25: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/25.jpg)
Margin, PaddingSố liệu kỹ thuật
![Page 26: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/26.jpg)
• 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
![Page 27: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/27.jpg)
Kích thước các elementsSố liệu kỹ thuật
![Page 28: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/28.jpg)
• 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ì đó
![Page 29: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/29.jpg)
• 1 file kích thước 1024x1024px
App icon
![Page 30: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/30.jpg)
Những điều lưu ý
2
![Page 31: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/31.jpg)
• iOS vs Android
• Số liệu
• Đặt tên
• Screenshots
Những điều lưu ý
![Page 32: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/32.jpg)
iOS vs AndroidNhững điều lưu ý
![Page 33: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/33.jpg)
![Page 34: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/34.jpg)
Số liệuNhững điều lưu ý
![Page 35: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/35.jpg)
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
![Page 36: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/36.jpg)
Bo góc radius số chẵnLý tưởng nhất là radius = 6
![Page 37: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/37.jpg)
9-patches trong androidLà 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
![Page 38: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/38.jpg)
Đặt tênNhững điều lưu ý
![Page 39: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/39.jpg)
• Group rõ ràng các cụm lại
• Nhớ đặt tên theo đúng chức năng
Về Layer
![Page 40: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/40.jpg)
![Page 41: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/41.jpg)
Đặ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
![Page 42: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/42.jpg)
Splash Screen Login Map
Map Route
A B
Map Directions
Form Success
![Page 43: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/43.jpg)
• 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
![Page 44: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/44.jpg)
ScreenshotNhững điều lưu ý
![Page 45: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/45.jpg)
Làm được UI nào thì export rathà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
![Page 46: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/46.jpg)
• iOS vs Android
• Số liệu
• Đặt tên
• Screenshots
Những điều nên nhớ
![Page 47: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/47.jpg)
Input để design
3
![Page 48: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/48.jpg)
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?
![Page 49: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/49.jpg)
Quy trình làm việc
4
![Page 50: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/50.jpg)
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
![Page 51: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/51.jpg)
Output cho Dev
5
![Page 52: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/52.jpg)
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
![Page 53: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/53.jpg)
Resources
6
![Page 54: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/54.jpg)
Tool sử dụng chính
![Page 55: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/55.jpg)
UI: Sketch 3
![Page 56: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/56.jpg)
Prototype: Marvelapp
![Page 57: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/57.jpg)
Prototype Animation: Flinto
![Page 58: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/58.jpg)
Tham khảo UI
![Page 62: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/62.jpg)
https://github.com/zmalltalker/sketch-android-assets
Plugin cắt asset cho android
![Page 63: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/63.jpg)
http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
Cắt 9-patches cho android
![Page 66: User Interface Slides - Silicon Straits Saigon / SHIELD](https://reader033.vdocuments.pub/reader033/viewer/2022051709/5877047c1a28ab890e8b5101/html5/thumbnails/66.jpg)
Q&A