Google đã phát hành Android 10 mới nhất 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 gần đây nhất của họ tương lai.
Bài đọc tương tự:Máy tính tốt nhất cho thiết kế đồ họa
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 đã gặp khó khăn 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 phần 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 chủ đề cho giao diện người dùng hệ thống Android 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ữ của người dùng, máy ảnh, v.v.
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 của 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 phần tử khác của giao diện người dùng, 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 kiếm nguồn cảm hứng từ các đại lý 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ày vào năm 2019.
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à khả năng thích ứng 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 sẽ vào khoảng 16dp.
Hiểu DPI của 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ẽ không đổi trên các DP.
Tuy nhiên, nếu bạn thiết kế cho 3,5x, bạn cần 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.
Các mẹo bổ sung cho thiết kế Giao diện người dùng / UX Android 10
Nếu bạn cần 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 không nên sử dụng các bảng có thể kéo để hiển thị các trạng thái khác nhau ( đã chọn, đã nhấp, v.v.) . Bởi vì khi bạn sử dụng có thể vẽ, bạn sẽ mất các hiệu ứng nguyên gốc của Material Design (như gợn sóng) 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 giao diện người dùng / người dùng của bạn sẽ vẫn tận hưởng trạng thái giao diện người dùng và hành vi hệ thống gốc.
Button with custom colour android:backgroundTint="@color/red" ----- Radio Button with custom colour android:buttonTint="@color/red" ----- Images & Icons android:drawableTint="@color/red" ----- ProgressBar with custom colour android:progressTint="@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.
<LinearLayout> <include layout="@layout/light_expanded_card" /> <include layout="@layout/light_collapsed_card" /> <include layout="@layout/color_indicator_strip" /> </LinearLaout>
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 hình ảnh động. 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"