Google phát hành Android 10 mới đây tháng 9 vừa qua, và dù chỉ có sẵn trên một vài điện thoại cao cấp mới nhất, nhiều hãng sản xuất dự kiến sẽ tung Android 10 cho các mẫu gần đây trong thời gian tới.
Đọc thêm: Máy tính tốt nhất cho Thiết kế đồ họa
Android 10 mang lại một vài cập nhật và tính năng thú vị như Dark Mode toàn hệ thống, nhưng rất ít cập nhật UI thực tế. Google giữ Material Design vì nó hoạt động tốt, nên hướng dẫn này áp dụng cho các phiên bản Android trước (Oreo, Pie, v.v.).
Biết thiết kế đúng các yếu tố UI cho Material Design giúp nhiều việc: phát triển app chạy tốt trên Android, đạt chủ đề tùy chỉnh được chấp nhận trong cửa hàng theme (như Samsung Theme Store).
Bạn cũng có thể đọc các chủ đề khác trên Appuals liên quan:
- Cách đưa Dark Theme vào ứng dụng Android
- Cách bắt đầu phát triển Android App trên Visual Studio 2017
- Cách xây dựng Custom ROM từ Android Open Source Project | Phần 2
- Cách thủ công Theme Android System UI (một số bước có thể cũ cho Android 9/10, nhưng thông tin tổng thể vẫn hữu ích)
Tổng quan Material Design
Material Design xoay quanh vài điều quan trọng. Bảng màu (Color palette), bố cục lưới phản hồi (responsive grid layout), và am hiểu Android System UI nếu thiết kế theme. Đối với phát triển app, cần nắm tất cả trên, thêm quyền chạy (runtime permissions) và yêu cầu nếu app truy cập thư mục lưu trữ, camera, v.v.
Trang này trên Android Developer chính thức đi sâu vào thay đổi quyền riêng tư và quyền mà nhà phát triển app cần biết cho Android 10. Nhưng phần lớn, chúng ta tập trung vào theming, không phải phát triển app thực sự.
Bảng màu (Color palette)
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í dụ như ảnh này. Màu chính (primary) là tím, màu phụ (secondary) là xanh cyan. Và cho các yếu tố UI khác, dùng các biến thể sắc độ (shade variants) của tím và xanh cyan, để mọi thứ hài hòa.
Trình chỉnh sửa Material Design này rất hữu ích giúp ghép các biến thể màu. Bạn cũng có thể tìm cảm hứng từ agency UI/UX chuyên nghiệp như Clay, hoặc danh sách công ty thiết kế web hàng đầu 2019.
Bố cục lưới phản hồi (Responsive grid layout)
Hiểu bố cục lưới phản hồi nghĩa là hiểu mật độ pixel (pixel density) và thích ứng màn hình tự động. Phần lớn, DPI trung bình điện thoại Android từ 300 đến 480 DPI.
Với đó, màn hình 300 DPI thường hiển thị tối đa 4 cột:
Mà màn hình 600 dpi hiển thị tới 8 cột.
Giữa các cột là "gutters" – khu vực tách các cột. Trên mobile 360dp, mỗi gutter khoảng 16dp.
Hiểu DPI màn hình
Khi thiết kế UI, dù system UI hay UI app, cần tính đến mật độ pixel khác nhau của kích thước điện thoại. Bảng độ phân giải và mật độ pixel phổ biến:
Quy tắc: khi thiết kế theme/app "toàn cầu", không tập trung một thiết bị, hãy bắt đầu từ mật độ thấp nhất. Vì nếu bắt đầu tại 1x, chỉ cần đo pixel, giá trị giữ nguyên qua các DP.
Nhưng nếu thiết kế cho 3.5x, phải chia mọi giá trị cho 3.5 để thích ứng mật độ khác, trở thành đau đầu tính nhiều giá trị DP.
Mẹo thêm cho thiết kế UI/UX Android 10
Nếu cần màu tùy chỉnh cho thành phần theme như radio, nút, checkbox, v.v., bạn KHÔNG NÊN dùng drawable để hiển thị trạng thái (checked, clicked, v.v.). Vì dùng drawable làm mất hiệu ứng Material Design gốc (như gợn sóng - ripple) mà Google cập nhật nhiều ở Android 9 và 10.
Khi làm việc với Material Design, Google bao gồm nhiều "quà tặng" có thể tận dụng, chúng sẽ tự nhiên hơn với UI/UX.
Ví dụ, vài từ khóa cho thành phần theme với yếu tố Material Design tích hợp, app/UI/UX vẫn tận hưởng hành vi hệ thống gốc và trạng thái UI:
Nút với màu tùy chỉnh android:backgroundTint="@color/red" ----- Radio Button với 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:progressTint="@color/red"
Để hiển thị bóng đơn giản dưới thành phần như cardview, chỉ cần dùng thuộc tính elevation.
android:elevation="1dp"
Gộp thẻ và thuộc tính cha cực kỳ hữu ích, cho kiểm soát tốt và file XML dễ quản lý.
<LinearLayout> <include layout="@layout/light_expanded_card" /> <include layout="@layout/light_collapsed_card" /> <include layout="@layout/color_indicator_strip" /> </LinearLaout>
Thay đổi layout có động hình (Animated layout changes) thực sự cải thiện UX, hầu hết ViewGroup đều tôn trọng. Bất cứ khi nào có thay đổi thứ bậc view, nó đi kèm động hình. Với chút kiến thức, bạn cũng có thể thiết kế hiệu ứng chuyển tiếp tùy chỉnh.
android:animateLayoutChanges="true"