[ebook] ui document - tú bùi

UI Document

prepared by Tú Bùi

Mục lục1. 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

Số liệu kỹ thuật

1

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

• Font size

• 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

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( màn hình xịn nhất hiện tại )

Lưu ý: đơn vị đo của Android là dp ( 1dp=2px )

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

• 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 iOS

• Font size tiêu đề ở Navigation bar: 40px

• Font size body bình thường: 28px

• Font size body nhỏ nhất: 24px

Hệ điều hành Android

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

BELL 100%4:21PM

App gì đó VND

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

Button

30px• 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

• Số liệu

• Đặt tên

• Screenshots

Nhữ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

• Dễ tính, dễ nhớ

• Đều, Đẹp

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 ( ít nhất 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

• 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

• Để mọi người dễ theo dõi

• Lỡ app crash còn hình mẫu để đồ lại

Mục đích

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?

Output cho Dev

4

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

Quy trình làm việc

5

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

Resources

6

• Thiết kế UI: Sketch 3

• Tạo prototype: Marvel App

Tool sử dụng chính

• http://pttrns.com/

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

• https://instagram.com/gifux/

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

• http://makeappicon.com/

Xuất icon app

• http://www.sketchappsources.com/

Free stock - icon cho UI

• https://marvelapp.com/

Làm prototype

Tất cả thông tin trong slide nàyđược tổng hợp từ kinh nghiệm cánhân của Tú Bùi. Nếu bạn có bất kìgóp ý hay câu hỏi nào hãy liên hệ

với mình qua emailtubui@siliconstraits.vn.

Hết giồi!