Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

[Ebook] UI Document - Tú Bùi

11.090 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1url.pw/p1DFk ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1url.pw/p1DFk ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • cho mình hỏi khi vẽ trên PTS thì ppi của file mình có cần đặt giống của thiết bị mobile ko hay để 72 là được rồi!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • bài viết thật sự khai sáng cho mình trong bước đầu làm quen với UI, cảm ơn bạn Tú rất là nhèo, mong bạn có những chia sẽ thú vị và quý báu như vậy nữa nhé ^^
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

[Ebook] UI Document - Tú Bùi

  1. 1. UI Document prepared by Tú Bùi
  2. 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. 3. Số liệu kỹ thuật 1
  4. 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. 5. Kích thước màn hình Số liệu kỹ thuật
  6. 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. 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. 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. 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. 10. Font size Số liệu kỹ thuật
  11. 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. 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. 13. Padding Số liệu kỹ thuật
  14. 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. 15. Kích thước các elements Số liệu kỹ thuật
  16. 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. 17. • 1 file kích thước 1024x1024px App icon
  18. 18. Những điều lưu ý 2
  19. 19. • Số liệu • Đặt tên • Screenshots Những điều lưu ý
  20. 20. Số liệu Những điều lưu ý
  21. 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. 22. Bo góc radius số chẵn Lý tưởng nhất là radius = 6
  23. 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. 24. Đặt tên Những điều lưu ý
  25. 25. • Group rõ ràng các cụm lại • Nhớ đặt tên theo đúng chức năng Về Layer
  26. 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. 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
  28. 28. Screenshot Những điều lưu ý
  29. 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
  30. 30. Input để design 3
  31. 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. 32. Output cho Dev 4
  33. 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. 34. Quy trình làm việc 5
  35. 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. 36. Resources 6
  37. 37. • Thiết kế UI: Sketch 3 • Tạo prototype: Marvel App Tool sử dụng chính
  38. 38. • http://pttrns.com/ • https://www.pinterest.com/robklaiss/uiux/ • https://instagram.com/gifux/ Tham khảo UI
  39. 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
  40. 40. • http://makeappicon.com/ Xuất icon app
  41. 41. • http://www.sketchappsources.com/ Free stock - icon cho UI
  42. 42. • https://marvelapp.com/ Làm prototype
  43. 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. 44. Hết giồi!

×