Cách thiết kế giao diện người dùng / UX cho các bản cập nhật Android 9 và 10 mới nhất
Google đã phát hành Android 10 mới nhất chỉ vào tháng 9 vừa qua và mặc dù nó chỉ có sẵn trên một số ít điện thoại mới nhất, cao cấp nhất, nhưng rất nhiều nhà sản xuất điện thoại dự kiến sẽ tung ra Android 10 trên một số điện thoại mới nhất của họ trong thời gian tới Tương lai.
Android 10 mang đến một số bản cập nhật và các tính năng thú vị, chẳng hạn như Chế độ tối trên toàn hệ thống, nhưng rất ít theo cách của bất kỳ bản cập nhật giao diện người dùng thực tế nào. Google đã mắc kẹt với thiết kế material design vì nó hoạt động quá tốt, vì vậy hướng dẫn này cũng sẽ áp dụng cho các phiên bản Android trước (Oreo, Pie, v.v.).
Biết cách thiết kế đúng các yếu tố giao diện người dùng cho Material Design sẽ giúp bạn rất nhiều việc, từ việc phát triển các ứng dụng hoạt động tốt trên thiết bị Android, đến việc các chủ đề tùy chỉnh của bạn được chấp nhận trong các cửa hàng chủ đề, chẳng hạn như Samsung Theme Store.
Bạn cũng có thể đọc các chủ đề khác này trên Appuals, sẽ cung cấp cho bạn nhiều thông tin bổ sung có liên quan đến chủ đề này:
- Cách đưa chủ đề tối vào ứng dụng Android của bạn
- Cách bắt đầu phát triển ứng dụng Android trong Visual Studio 2017
- Cách tạo ROM tùy chỉnh từ Dự án nguồn mở Android | Pt. 2
- Cách tạo giao diện người dùng hệ thống Android theo chủ đề theo cách thủ công (một số bước có thể đã lỗi thời đối với Android 9 / Android 10, nhưng thông tin tổng thể vẫn rất hữu ích.)
Tổng quan về Material Design
Material Design xoay quanh một vài điều quan trọng. Bảng màu, bố cục lưới đáp ứng và biết cách sử dụng Giao diện người dùng hệ thống Android, nếu bạn đang thiết kế chủ đề. Đối với việc phát triển ứng dụng, bạn cần lưu ý tất cả những điều trên, cộng với những điều như quyền và yêu cầu thời gian chạy Android, nếu ứng dụng của bạn truy cập vào thư mục lưu trữ, máy ảnh, v.v. của người dùng.
Trang này trên Nhà phát triển Android chính thức đi sâu hơn nhiều vào các thay đổi về quyền riêng tư và quyền mà các nhà phát triển ứng dụng cần lưu ý đối với Android 10. Nhưng phần lớn, chúng tôi sẽ tập trung vào chủ đề, không phải là phát triển ứng dụng thực tế, cho bài viết này.
Bảng màu
Đối với bảng màu Material Design, Google thích hệ thống "hai màu" với các biến thể:
Vì vậy, ví dụ, như trong bức ảnh này. Màu chính của bạn sẽ là màu tím, với màu phụ của bạn là màu lục lam. Và sau đó đối với các yếu tố khác của giao diện người dùng của bạn, bạn sẽ sử dụng các biến thể bóng râm của màu tím và màu lục lam, để mọi thứ kết hợp với nhau.
Trình chỉnh sửa Material Design này là một công cụ rất hữu ích giúp bạn kết hợp các biến thể màu sắc với nhau. Bạn cũng có thể tìm cảm hứng từ các công ty thiết kế UI / UX chuyên nghiệp như Clay hoặc danh sách các công ty thiết kế web được xếp hạng hàng đầu năm 2019 này.
Bố cục lưới đáp ứng
Hiểu bố cục lưới đáp ứng có nghĩa là hiểu cách thức hoạt động của mật độ điểm ảnh và điều chỉnh màn hình tự động. Phần lớn, DPI của điện thoại Android trung bình nằm trong khoảng từ 300 đến 480 DPI.
Với ý nghĩ đó, màn hình 300 DPI thường sẽ có thể hiển thị tối đa 4 cột:
Trong khi màn hình có 600 dpi sẽ hiển thị tối đa 8 cột.
Giữa mỗi cột là "máng xối", về cơ bản là các khu vực ngăn cách mỗi cột. Vì vậy, trên thiết bị di động có 360dp, mỗi rãnh nước sẽ vào khoảng 16dp.
Hiểu DPI màn hình
Khi thiết kế giao diện người dùng, cho dù đó là giao diện người dùng hệ thống hay giao diện người dùng ứng dụng của bạn, bạn cần tính đến mật độ pixel khác nhau của các kích thước điện thoại khác nhau. Dưới đây là biểu đồ về độ phân giải màn hình và mật độ pixel phổ biến nhất:
Vì vậy, theo nguyên tắc chung, khi thiết kế chủ đề hoặc ứng dụng “toàn cầu” và không tập trung vào việc tạo chủ đề cho một thiết bị, bạn nên bắt đầu ở mật độ thấp nhất. Điều này là do nếu bạn bắt đầu thiết kế của mình ở 1x, bạn chỉ cần thực hiện các phép đo bằng pixel và các giá trị sẽ giữ nguyên trên các DP.
Tuy nhiên, nếu bạn thiết kế cho 3,5x, bạn cần phải chia tất cả các giá trị cho 3,5 để thích ứng với các mật độ khác, và khi đó việc tính toán nhiều giá trị DP sẽ trở thành vấn đề đau đầu.
Mẹo bổ sung cho thiết kế giao diện người dùng / giao diện người dùng Android 10
Nếu bạn cần một màu tùy chỉnh cho các thành phần chủ đề như radio, nút, hộp kiểm, v.v., bạn nên không phải sử dụng có thể kéo để hiển thị các trạng thái khác nhau (đã kiểm tra, đã nhấp, v.v.). Bởi vì khi bạn sử dụng có thể kéo, bạn sẽ mất các hiệu ứng Material Design ban đầu (như gợn) mà Google đã cập nhật rộng rãi trong Android 9 và Android 10.
Khi làm việc với Material Design, Google bao gồm rất nhiều tính năng mà bạn có thể tận dụng và chúng sẽ trôi chảy tự nhiên hơn với UI / UX của bạn.
Vì vậy, ví dụ: đây là một vài từ khóa cho các thành phần theo chủ đề có các phần tử Material Design được tích hợp sẵn và ứng dụng hoặc UI / UX của bạn sẽ vẫn tận hưởng trạng thái của hệ thống và giao diện người dùng gốc.
Nút có màu tùy chỉnh android: backgroundTint = "@ color / red" ----- Nút radio có màu tùy chỉnh android: buttonTint = "@ color / red" ----- Hình ảnh & biểu tượng android: drawableTint = "@ color / red "----- ProgressBar với màu tùy chỉnh android: processTint =" @ color / red "
Để hiển thị bóng đơn giản bên dưới các thành phần như trong chế độ xem thẻ, bạn chỉ cần sử dụng thuộc tính độ cao.
android: elevation = "1dp"
Việc hợp nhất các thẻ và thuộc tính mẹ là cực kỳ hữu ích, để cung cấp cho bạn khả năng kiểm soát tốt hơn và các tệp XML có thể quản lý được.
Các thay đổi bố cục động thực sự có thể cải thiện UX của bạn và gần như tất cả các ViewGroup sẽ tôn trọng điều này. Vì vậy, bất cứ khi nào có sự thay đổi trong phân cấp chế độ xem, nó sẽ đi kèm với một hoạt ảnh. Với một chút bí quyết, bạn cũng có thể thiết kế các hiệu ứng chuyển tiếp tùy chỉnh.
android: animateLayoutChanges = "true"
