Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Mobile ui

Download to read offline

Tổng quan về UI/UX

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Mobile ui

  1. 1. MOBILE UI/UX DESIGN
  2. 2. Mục lục 1. Khái niệm và quy trình 2. Xu hướng thiết kế UX di động 3. Đánh giá, phát hiện và lập kế hoạch UX 4. Chi tiết cho lên khung trong tạo mẫu giao diện 5. Thiết kế giao diện người dùng trung thực cao 6. Phát triển xây dựng UX
  3. 3. 1. KHÁI NIỆM VÀ QUY TRÌNH
  4. 4. KHÁI NIỆM UX là gì? UX (User Experience): trải nghiệm người dùng là những đề cập đến kinh nghiệm của một người có khi sử dụng một sản phẩm. UI là gì? UI (User Interface): giao diện người dùng đề cập đến không gian và phương pháp tạo ra để phục vụ như cầu nối giữa người sử dụng và sản phẩm.
  5. 5. KHÁI NIỆM Thiết kế giao diện UI/UX là gì? Đây là một quá trình kết hợp thiết kế giao diện người dùng và những kinh nghiệm từ việc sử dụng trước đó, nên tại sao nói UI và UX là không thể thiếu. Thiết kế UX chủ yếu liên quan đến kinh nghiệm sử dụng tổng thể của sản phẩm và cấu trúc của nó đáp ứng các mục tiêu thiết kế. Thiết kế UI giao diện người dùng rộng lớn hơn và tập trung vào cách sản phẩm được đặt ra thiết kế từng điểm của các giao diện và tất cả chi tiết của nó.
  6. 6. QUY TRÌNH Quá trình thiết kế gồm 4 giai đoạn: Đánh giá, phát hiện và nghiên cứu người dùng (Discovery/Assess ment/User Research) Vẽ khung hình (Wireframing) Thiết kế (Visual Design) Sản xuất và phát triển (Production & Development)
  7. 7. Một số câu hỏi cần được hỏi và trả lời trong suốt quá trình • UI / UX sẽ làm thế nào đáp ứng những mục tiêu thiết kế? • Mục đích của ứng dụng là gì? • Ứng dụng sẽ làm gì? • Điều gì sẽ có trong ứng dụng? • Sự mong đợi của người sử dụng là gì? • Ứng dụng sẽ làm những gì để người dùng muốn và cần đến nó? • Làm thế nào để chức năng của ứng dụng được thể hiện rõ ràng? • Người sử dụng sẽ làm gì để thúc đẩy tính năng của ứng dụng? • Làm thế nào để các tương tác của ứng dụng được rõ ràng?
  8. 8. What makes a “Bad UX”? • Cấu trúc điều hướng khó hiểu • Giao diện bố trí gây nhầm lẫn • Quá nhiều lựa chọn • Những tín hiệu khó hiểu hoặc khó phân biệt với thị giác người dùng • Nội dung xấu • Thành phần giao diện bị hỏng, lỗi
  9. 9. Thiết kế lấy người dùng là trung tâm Quá trình thiết kế trải nghiệm người dùng dựa trên: • Các tiêu chuẩn trong các ẩn dụ hoặc trung bình mà các ứng dụng sẽ sử dụng • Kiến thức về thương mại của người thiết kế • Có nhiều thực hành trải nghiệm tốt • Nghiên cứu dựa trên kinh nghiệm về thực tiễn sử dụng • Bản năng và đánh giá trực tiếp • Các hình thức nghiên cứu người dùng khác nhau
  10. 10. Những điều gì làm nên một UX tuyệt vời • K.I.S.S (Keep it simple, stupid) • Luật của Hick • Luật của Fitts • Conditioning • Proximity (tiệm cận) • The Mental Model • The 80/20 Rule
  11. 11. Những điều gì làm nên một UX tuyệt vời • Luật của Hick
  12. 12. Những điều gì làm nên một UX tuyệt vời • Luật của Fitts
  13. 13. Những điều gì làm nên một UX tuyệt vời • Proximity (tiệm cận)
  14. 14. Những điều gì làm nên một UX tuyệt vời • The Mental Model
  15. 15. Những điều gì làm nên một UX tuyệt vời • The 80/20 Rule
  16. 16. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Device-Agnostic Designs (Thiết bị và thuyết thiết kế bất khả tri)
  17. 17. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Responsive Design
  18. 18. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Performance Centric Design (Thiết kế lấy hiệu suất là trung tâm)
  19. 19. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Light app
  20. 20. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Live Updating (Cập nhật trực tiếp)
  21. 21. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Cloud Connection and Collaboration (kết nối đám mây và hợp tác)
  22. 22. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Geo-Location Features (tính năng định vị địa lý)
  23. 23. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Leveraged Services and API Employment (Dịch vụ hỗ trợ và phương thức ứng dụng người dùng API)
  24. 24. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Content First and Hidden Menus
  25. 25. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Approaches to Interactions and Content (những cách tiếp cận tương tác và nội dung)  Design Patterns  Personalization & Customization (cá nhân hóa và tùy biến)  Gesture-based interaction (tương tác dựa trên cử chỉ của người dùng)
  26. 26. 2. XU HƯỚNG THIẾT KẾ UX DI ĐỘNG  Large images & video  Modular Design  Social Sharing
  27. 27. 3. ĐÁNH GIÁ, PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Thiết lập yêu cầu
  28. 28. 3. ĐÁNH GIÁ, PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Phỏng vấn khách hàng - Một cuộc phỏng vấn chuyên sâu - Đừng cho rằng khách hàng biết những gì họ cần Cân đối yêu cầu và mục đích mong muốn sử dụng sản phẩm
  29. 29. 3. ĐÁNH GIÁ, PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Tạo tài liệu yêu cầu - Mục tiêu của dự án - Mục đích của ứng dụng là gì? - Làm thế nào nó sẽ phục vụ mục đích này? - Nó là gì? - Tóm tắt những gì các ứng dụng sẽ làm
  30. 30. 3. ĐÁNH GIÁ, PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Nhận diện thương hiệu - Có một bản sắc thương hiệu hiện tại cho ứng dụng? - Có một vị trí thương hiệu được tạo ra cho nó? - Tập trung vào những gì sẽ đạt được không phải là cách nó sẽ đạt được
  31. 31. 3. ĐÁNH GIÁ, PHÁT HIỆN VÀ LẬP KẾ HOẠCH UX Yêu cầu chức năng và yêu cầu kỹ thuật - Mục tiêu của dự án - Mục đích của ứng dụng là gì? - Làm thế nào nó sẽ phục vụ mục đích này? - Nó là gì? - Tóm tắt những gì các ứng dụng sẽ làm
  32. 32. To be continued…

Tổng quan về UI/UX

Views

Total views

898

On Slideshare

0

From embeds

0

Number of embeds

616

Actions

Downloads

13

Shares

0

Comments

0

Likes

0

×