User Interface Slides - Silicon Straits Saigon / SHIELD
67
UI 101 prepared by Tú Bùi
Transcript of User Interface Slides - Silicon Straits Saigon / SHIELD
UI 101
prepared by Tú Bùi
Chapter lead UI
4 năm
Graphicdesigner
ĐH năm 3
UI designer
Tốt nghiệp
Sau buổi hôm naybạn sẽ được những gì?
- Kiến thức cơ bản- Chuyên nghiệp hơn- Kinh nghiệm xương máu của mình
UI là gì?
Contrast Repetition Alignment Proximity
Dễ nhìn
Sự thống nhất
Chỉnh chu
Chặt chẽ
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
Tool sử dụng chính
Sketch3
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
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
Số liệu kỹ thuật
1
• 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
Kích thước màn hìnhSố liệu kỹ thuật
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
normalretina6plus
1x2x3x
128px 40px88px
Những số liệu luôn có• Chiều cao status bar: 40px
• Chiều cao navigation bar: 88px
Android: 720 x 1280 px
Lưu ý: đơn vị đo của Android là dp( 1dp=2px khi màn hình là xhdpi )
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)
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
Font sizeSố liệu kỹ thuật
Dựa trên kinh nghiệm cá nhân
• Dễ tính, dễ nhớ -> Nhanh
• Đều -> Đẹp
• 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
• 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
Margin, PaddingSố liệu kỹ thuật
• 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
Kích thước các elementsSố liệu kỹ thuật
• 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ì đó
• 1 file kích thước 1024x1024px
App icon
Những điều lưu ý
2
• iOS vs Android
• Số liệu
• Đặt tên
• Screenshots
Những điều lưu ý
iOS vs AndroidNhững điều lưu ý
Số liệuNhững điều lưu ý
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
Bo góc radius số chẵnLý tưởng nhất là radius = 6
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
Đặt tênNhững điều lưu ý
• Group rõ ràng các cụm lại
• Nhớ đặt tên theo đúng chức năng
Về Layer
Đặ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
Splash Screen Login Map
Map Route
A B
Map Directions
Form Success
• 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
ScreenshotNhững điều lưu ý
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
• iOS vs Android
• Số liệu
• Đặt tên
• Screenshots
Những điều nên nhớ
Input để design
3
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?
Quy trình làm việc
4
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
Output cho Dev
5
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
Resources
6
Tool sử dụng chính
UI: Sketch 3
Prototype: Marvelapp
Prototype Animation: Flinto
Tham khảo UI
https://github.com/zmalltalker/sketch-android-assets
Plugin cắt asset cho android
http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
Cắt 9-patches cho android
Q&A
