Cùng tìm hiểu về User Interface cơ bản

Nội dung :

1. Số liệu kĩ thuật
2. Những điều lưu ý
3. Input để Design
4. Output cho Dev
5. Quy trình làm việc
6. Resources

1. Số liệu kĩ thuật

• Kích thước màn hình
• Font size
• Padding
• Kích thước các elements

Kích thước màn hình

Kích thước màn hình iphone
Những số liệu luôn có

• Chiều cao status bar: 40px
• Chiều cao navigation bar: 88px

thông số cơ bản
Chúng ta dùng thường dùng kích thước 720×1280(HD) phổ biến


Độ phân giải màn hình android
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

Thông số cơ bản Android
Font size
Hệ điều hành iOS:

• Font size tiêu đề ở Navigation bar: 32px
• Font size body bình thường: 24px
• Font size body nhỏ nhất: 20px

Hệ điều hành Android

• Font size tiêu đề ở Navigation bar: 40px
• Font size body bình thường: 28px
• Font size body nhỏ nhất: 24px

Padding
Khoảng cách lý tưởng thụt lề

• Của cả 2 hệ điều hành là 40px

Khoảng cách giữa các đối tượng khác loại

• Trung bình 20px

vd: chữ cách button 20px

Kích thước các elements
Button

• Lý tưởng nhất là cao 80px

Icon trên Navigation

• Lý tưởng nhất là cao 30px

App icon

• 1 file kích thước 1024×1024 px

2. Những điều cần lưu ý

• Số liệu
• Đặt tên
• Screenshots

Số liệu
Tất cả các size của 2 hệ điều hành đều phải là số chẵn
Lý do

• Màn hình Retina là x2, khi scale xuống màn hình thường phải chia hết cho 2
• Dễ tính, dễ nhớ
• Đều, đẹp

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

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 ( ít nhất 1 góc là shape lạ )



Đặt tên
Về layer

• Group rõ ràng các cụm lại
• Nhớ đặt tên theo đúng chức năng

Về Artboard

Đặt tên artboard theo tên của screen

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

Về file Sketch

• Làm tất cả các UI trong một file Sketch
• Lưu 1 bản backup khác trong máy

(làm hết một ngày thì replace trên dropbox)

Screenshot
Làm được UI nào thì export ra thành screenshot liền

Mục đích:

• Để mọi người dễ theo dõi
• Lỡ app crash còn hình mẫu để đồ lại

3. Input để Design

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?

4. Output cho Dev

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ó )

5. Quy trình làm việc

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 )
10. Bàn giao cho bên Dev

6. Resources

Tool sử dụng chính

• Thiết kế UI: Sketch 3
• Tạo prototype: Marvel App

Tham khảo UI

• http://pttrns.com/
• https://www.pinterest.com/robklaiss/uiux/
• https://www.instagram.com/gifux/

Plugin cắt asset cho android

• https://github.com/zmalltalker/sketch-android-assets

Cắt 9-patches cho android

• http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

Xuất icon app

• http://makeappicon.com/

Free stock – icon cho UI

• http://www.sketchappsources.com/

Làm prototype

• https://marvelapp.com/

Tự liệu trong bài viết được lấy từ nhiều nguồn trên internet bao gồm google images, slideshare, pinterest.

Tác giả : Hoàng Cường​