[Ebook] UI Document - Tú Bùi
26 likes11,699 views
Tài liệu cung cấp thông số kỹ thuật chi tiết cho thiết kế giao diện người dùng trên các nền tảng iOS và Android, bao gồm kích thước màn hình, kích thước font, padding và kích thước các phần tử. Nó cũng mô tả quy trình làm việc từ khởi động dự án, tạo wireframe đến hoàn thành giao diện và bàn giao cho phát triển. Các lưu ý về đặt tên, sử dụng tài nguyên và công cụ thiết kế cũng được nhấn mạnh để đảm bảo chất lượng và hiệu quả trong quá trình làm việc.
[Ebook] UI Document - Tú Bùi
- 1. UI Document prepared by Tú Bùi
- 2. 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
- 3. Số liệu kỹ thuật 1
- 4. • Kích thước màn hình • Font size • Padding • Kích thước các elements Số liệu kỹ thuật
- 5. Kích thước màn hình Số liệu kỹ thuật
- 6. 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
- 7. 128px 40px 88px Những số liệu luôn có • Chiều cao status bar: 40px • Chiều cao navigation bar: 88px
- 8. 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 )
- 9. 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 160px 48px 112px 96px
- 10. Font size Số liệu kỹ thuật
- 11. • 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
- 12. • 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
- 13. Padding Số liệu kỹ thuật
- 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
- 15. Kích thước các elements Số liệu kỹ thuật
- 16. 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ì đó
- 17. • 1 file kích thước 1024x1024px App icon
- 18. Những điều lưu ý 2
- 19. • Số liệu • Đặt tên • Screenshots Những điều lưu ý
- 20. Số liệu Những điều lưu ý
- 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
- 22. Bo góc radius số chẵn Lý tưởng nhất là radius = 6
- 23. 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ạ ) 9-patches
- 24. Đặt tên Những điều lưu ý
- 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
- 29. Làm được UI nào thì export ra thà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
- 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?
- 32. Output cho Dev 4
- 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ó )
- 34. Quy trình làm việc 5
- 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
- 36. Resources 6
- 37. • Thiết kế UI: Sketch 3 • Tạo prototype: Marvel App Tool sử dụng chính
- 38. • http://pttrns.com/ • https://www.pinterest.com/robklaiss/uiux/ • https://instagram.com/gifux/ Tham khảo UI
- 39. • 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
- 41. • http://www.sketchappsources.com/ Free stock - icon cho UI
- 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.
- 44. Hết giồi!