UI Document do UI Designer Tú Bùi tổng hợp từ kinh nghiệm cá nhân trong quá trình thực hiện project tại Silicon Straits Saigon. Tài liệu là nguồn tham khảo hữu ích cho các bạn UI/UX Designer, Mobile Developer, đặc biệt là những ai muốn tìm hiểu công việc của một UI Designer từ những bước cơ bản nhất.
UI Document được viết ngắn gọn dưới dạng slide, chắt lọc những thông tin cơ bản và tập trung nhất. Nội dung bao gồm các phần:
Mục lục
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
*Lưu ý: Tất cả thông tin trong slide UI Document đượ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 tác giả qua email tubui@siliconstraits.vn.
14. • 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
21. 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
25. • Group rõ ràng các cụm lại
• Nhớ đặt tên theo đúng chức năng
Về Layer
26. Đặ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
27. • 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
31. 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?
33. 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ó )
35. 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
43. 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 email
tubui@siliconstraits.vn.