Tổng quan về tiện ích ứng dụng

Thử cách dùng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách tạo tiện ích bằng API kiểu Compose.

Tiện ích là một khía cạnh thiết yếu của việc tuỳ chỉnh màn hình chính. Bạn có thể coi các tiện ích này là chế độ xem "nhanh" về dữ liệu và chức năng quan trọng nhất của ứng dụng mà người dùng có thể truy cập ngay trên màn hình chính. Người dùng có thể di chuyển các tiện ích trên bảng điều khiển màn hình chính và nếu được hỗ trợ, họ có thể đổi kích thước tiện ích để điều chỉnh lượng thông tin trong tiện ích theo ý muốn.

Tài liệu này giới thiệu các loại tiện ích mà bạn có thể tạo và các nguyên tắc thiết kế cần tuân theo. Để tạo một tiện ích ứng dụng bằng API Khung hiển thị từ xa và bố cục XML, hãy xem bài viết Tạo tiện ích cơ bản. Để tạo một tiện ích bằng Kotlin và các API kiểu Compose, hãy xem Jetpack Glance.

Loại tiện ích

Khi lập kế hoạch cho tiện ích, hãy nghĩ về loại tiện ích mà bạn muốn xây dựng. Tiện ích thường thuộc một trong các danh mục sau:

Tiện ích thông tin

Ví dụ: tiện ích thời tiết cho thấy Tokyo có nhiều mây, 14 độ và nhiệt độ dự kiến từ 4 giờ chiều đến 7 giờ tối
Hình 1. Tiện ích thông tin của một ứng dụng thời tiết.

Tiện ích thông tin thường hiển thị các thành phần thông tin quan trọng và theo dõi cách thông tin đó thay đổi theo thời gian. Ví dụ về tiện ích thông tin là tiện ích thời tiết, tiện ích đồng hồ hoặc tiện ích theo dõi điểm số thể thao. Khi bạn nhấn vào các tiện ích thông tin, ứng dụng liên kết thường sẽ khởi chạy và mở ra một chế độ xem chi tiết về thông tin của tiện ích.

Tiện ích bộ sưu tập

Tiện ích tập hợp chuyên hiển thị nhiều phần tử cùng loại, chẳng hạn như một tập hợp ảnh từ ứng dụng thư viện ảnh, một tập hợp bài viết từ ứng dụng tin tức hoặc một tập hợp email hoặc tin nhắn từ ứng dụng liên lạc. Tiện ích tập hợp có thể cuộn theo chiều dọc.

Tiện ích tập hợp thường tập trung vào các trường hợp sử dụng sau:

  • Duyệt xem bộ sưu tập.
  • Mở một phần tử của bộ sưu tập để xem chi tiết trong ứng dụng liên kết.
  • Tương tác với các phần tử, chẳng hạn như đánh dấu là đã hoàn tất – có hỗ trợ các nút phức hợp trong Android 12 (cấp độ API 31).

Tiện ích điều khiển

Một tiện ích cho ứng dụng có tên là "Danh sách đèn", hiển thị các nút bật/tắt có nhãn "Phòng ngủ", "Nhà bếp" và "Living Room", trong đó hai nút bật/tắt đầu tiên ở trạng thái tắt
Hình 4. Ví dụ về tiện ích điều khiển.

Mục đích chính của tiện ích điều khiển là hiển thị các chức năng thường dùng để người dùng có thể kích hoạt các chức năng đó từ màn hình chính mà không cần mở ứng dụng. Bạn có thể coi các tiện ích này như điều khiển từ xa cho một ứng dụng. Ví dụ về tiện ích điều khiển là tiện ích điều khiển nhà cho phép người dùng bật hoặc tắt đèn trong nhà.

Khi tương tác với một tiện ích điều khiển, bạn có thể mở một chế độ xem chi tiết liên quan trong ứng dụng. Điều này phụ thuộc vào việc chức năng của tiện ích điều khiển có xuất dữ liệu hay không, chẳng hạn như trong trường hợp tiện ích tìm kiếm.

Tiện ích kết hợp

Một ứng dụng âm nhạc thông thường có các nút "không thích", quay lại, phát/tạm dừng, chuyển tiếp và "thích". Nghệ sĩ và bản nhạc được liệt kê tương ứng là "Nghệ sĩ" và "Nhạc mẫu".
Hình 5. Ví dụ về tiện ích của ứng dụng nhạc.

Mặc dù một số tiện ích đại diện cho một trong các loại trong các phần trước (thông tin, bộ sưu tập hoặc điều khiển), nhưng nhiều tiện ích là loại kết hợp các phần tử của nhiều loại khác nhau. Ví dụ: tiện ích trình phát nhạc chủ yếu là tiện ích điều khiển, nhưng cũng cho người dùng biết bản nhạc nào đang phát, giống như tiện ích thông tin.

Khi lập kế hoạch cho tiện ích, hãy thiết kế dựa trên một trong các loại cơ bản và thêm các phần tử của các loại khác nếu cần.

Tích hợp tiện ích với Trợ lý Google

Trợ lý Google có thể hiển thị bất kỳ loại tiện ích nào để phản hồi lệnh thoại của người dùng. Bạn có thể định cấu hình các tiện ích để thực hiện Hành động trong ứng dụng, cho phép người dùng nhận được câu trả lời nhanh và trải nghiệm ứng dụng tương tác trên các nền tảng của Trợ lý như Android và Android Auto. Để biết thêm thông tin chi tiết về phương thức thực hiện tiện ích cho Trợ lý, hãy xem bài viết Tích hợp Hành động trong ứng dụng với các tiện ích Android.

Giới hạn của tiện ích

Mặc dù tiện ích có thể được hiểu là "ứng dụng nhỏ", nhưng có một số giới hạn nhất định mà bạn cần nắm rõ trước khi thiết kế tiện ích.

Cử chỉ

Vì các tiện ích nằm trên màn hình chính, nên chúng phải cùng tồn tại với thành phần điều hướng được thiết lập ở đó. Điều này hạn chế khả năng hỗ trợ cử chỉ có trong tiện ích so với ứng dụng toàn màn hình. Mặc dù ứng dụng có thể cho phép người dùng di chuyển giữa các màn hình theo chiều ngang, nhưng cử chỉ đó đã được dùng trên màn hình chính để di chuyển giữa các màn hình chính.

Các cử chỉ duy nhất có sẵn cho tiện ích là chạm và vuốt dọc.

Phần tử

Do các hạn chế về cử chỉ đối với tiện ích, một số khối xây dựng giao diện người dùng dựa vào cử chỉ bị hạn chế sẽ không dùng được cho tiện ích. Để biết danh sách đầy đủ các thành phần được hỗ trợ và thêm thông tin về các quy định hạn chế đối với bố cục, hãy xem phần Tạo bố cục tiện ích và Cung cấp bố cục tiện ích linh hoạt.

Hướng dẫn thiết kế

Hãy làm theo các nguyên tắc thiết kế này để tạo ra trải nghiệm tiện ích hấp dẫn, linh hoạt và nhất quán trên màn hình chính.

Nội dung tiện ích

Tiện ích là một cách hiệu quả để thu hút người dùng đến với ứng dụng của bạn bằng cách "quảng cáo" nội dung mới và thú vị có trong ứng dụng.

Giống như đoạn giới thiệu trên trang nhất của một tờ báo, tiện ích hợp nhất và tập trung thông tin của ứng dụng, đồng thời cung cấp kết nối đến thông tin chi tiết phong phú hơn trong ứng dụng. Bạn có thể nói tiện ích là "món ăn nhẹ" thông tin trong khi ứng dụng là "bữa ăn". Đảm bảo ứng dụng của bạn hiển thị nhiều thông tin chi tiết hơn về một mục thông tin so với những gì tiện ích hiển thị.

Ngoài nội dung thông tin thuần tuý, hãy cân nhắc việc cung cấp các đường liên kết điều hướng đến những khu vực thường dùng trong ứng dụng của bạn. Điều này giúp người dùng hoàn thành các thao tác nhanh hơn và mở rộng phạm vi chức năng của ứng dụng sang màn hình chính.

Các đường liên kết điều hướng phù hợp trên tiện ích là:

  • Hàm tạo sinh: đây là những hàm cho phép người dùng tạo nội dung mới cho một ứng dụng, chẳng hạn như tạo tài liệu mới hoặc tin nhắn mới.

  • Mở ứng dụng ở cấp cao nhất: việc nhấn vào một thành phần thông tin thường đưa người dùng đến màn hình chi tiết ở cấp thấp hơn. Việc cung cấp quyền truy cập vào cấp cao nhất của ứng dụng giúp điều hướng linh hoạt hơn và có thể thay thế lối tắt ứng dụng chuyên dụng mà người dùng sử dụng để điều hướng đến ứng dụng từ màn hình chính. Việc sử dụng biểu tượng ứng dụng cho chức năng này cũng có thể cung cấp cho tiện ích của bạn một danh tính rõ ràng nếu dữ liệu bạn đang hiển thị không rõ ràng.

Đổi kích thước tiện ích

Tiện ích Đồng hồ Google tiêu chuẩn
Hình 6. Tiện ích Đồng hồ Google tiêu chuẩn.

Khi bạn chạm và giữ một tiện ích có thể đổi kích thước rồi thả ra, tiện ích đó sẽ chuyển sang chế độ đổi kích thước. Người dùng có thể sử dụng tay điều khiển kéo hoặc các góc của tiện ích để đặt kích thước mà họ muốn.

Tính năng đổi kích thước cho phép người dùng điều chỉnh chiều cao và chiều rộng của tiện ích trong phạm vi ràng buộc của lưới vị trí trên màn hình chính. Bạn có thể quyết định xem tiện ích của mình có thể đổi kích thước tuỳ ý hay bị ràng buộc với các thay đổi về kích thước theo chiều ngang hoặc chiều dọc. Bạn không cần hỗ trợ đổi kích thước nếu tiện ích của bạn vốn có kích thước cố định.

Việc cho phép người dùng đổi kích thước tiện ích mang lại những lợi ích quan trọng sau:

  • Người dùng có thể điều chỉnh lượng thông tin mà họ muốn xem trên mỗi tiện ích.
  • Người dùng có thể tác động tốt hơn đến bố cục của các tiện ích và lối tắt trên bảng điều khiển chính.

Lập kế hoạch cho chiến lược đổi kích thước tiện ích theo loại tiện ích mà bạn đang tạo. Các tiện ích tập hợp dựa trên danh sách hoặc lưới thường rất đơn giản, vì việc đổi kích thước tiện ích sẽ mở rộng hoặc thu hẹp vùng cuộn dọc. Bất kể kích thước của tiện ích, người dùng vẫn có thể cuộn tất cả các phần tử thông tin vào khung hiển thị.

Tiện ích thông tin yêu cầu lập kế hoạch chính xác hơn vì chúng không thể cuộn và tất cả nội dung phải vừa với một kích thước nhất định. Bạn phải tự động điều chỉnh nội dung và bố cục của tiện ích theo kích thước mà người dùng xác định thông qua thao tác đổi kích thước.

Trong ví dụ sau, người dùng có thể đổi kích thước tiện ích thời tiết theo ba bước, hiển thị thông tin phong phú hơn về thời tiết tại vị trí hiện tại khi tiện ích mở rộng.

Ví dụ về tiện ích thời tiết ở kích thước lưới 3x2 nhỏ nhất, liệt kê tên vị trí (Tokyo), nhiệt độ (14°) và biểu tượng cho biết thời tiết có mây một phần
Hình 7. Ví dụ về tiện ích thời tiết ở kích thước "nhỏ" trong lưới 3x2.


Ví dụ về tiện ích thời tiết ở kích thước "trung bình" 5x2, bao gồm tất cả giao diện người dùng từ kích thước lưới 3x2 cộng với nhãn "nhiều mây" và nhiệt độ dự báo từ 4 giờ chiều đến 7 giờ tối
Hình 8. Ví dụ về tiện ích thời tiết ở kích thước "trung bình" trong lưới 5x2.


Ví dụ về tiện ích thời tiết ở kích thước "lớn" 5x4, bao gồm tất cả giao diện người dùng từ kích thước lưới 3x2 và 5x2, cộng với thông tin dự báo thời tiết từ thứ Ba đến thứ Sáu
Hình 9. Ví dụ về tiện ích thời tiết ở kích thước "lớn" trong lưới 5x4.

Đối với mỗi kích thước tiện ích, hãy xác định lượng thông tin của ứng dụng sẽ hiển thị. Đối với các kích thước nhỏ hơn, hãy tập trung vào thông tin thiết yếu, sau đó thêm thông tin theo bối cảnh khi tiện ích phát triển theo chiều ngang và chiều dọc.

Những điều cần cân nhắc về bố cục

Bạn nên bố trí các tiện ích theo kích thước của lưới vị trí trên thiết bị mà bạn dùng để phát triển. Đây có thể là một giá trị ước chừng ban đầu hữu ích, nhưng hãy lưu ý những điểm sau:

  • Việc lập kế hoạch cho chiến lược đổi kích thước tiện ích trên "nhóm kích thước" thay vì kích thước lưới biến đổi sẽ mang lại cho bạn kết quả đáng tin cậy nhất.
  • Số lượng, kích thước và khoảng cách của các ô có thể khác nhau tuỳ theo thiết bị. Do đó, điều quan trọng là tiện ích của bạn phải linh hoạt và có thể chứa nhiều hoặc ít không gian hơn dự kiến.
  • Khi người dùng đổi kích thước tiện ích, hệ thống sẽ phản hồi bằng một dải kích thước dp mà tiện ích của bạn có thể tự vẽ lại.
  • Kể từ Android 12, bạn có thể cung cấp các thuộc tính kích thước tinh tế hơn và bố cục linh hoạt hơn. Trong đó có:

Cấu hình tiện ích của người dùng

Đôi khi, người dùng cần thiết lập tiện ích trước khi có thể sử dụng tiện ích đó. Hãy nghĩ đến một tiện ích email mà người dùng cần chọn thư mục thư trước khi hộp thư đến có thể hiển thị hoặc một tiện ích ảnh tĩnh mà người dùng phải chỉ định một ảnh trong thư viện để hiển thị. Tiện ích Android hiển thị các lựa chọn cấu hình ngay sau khi người dùng thả tiện ích vào màn hình chính.

Danh sách kiểm tra thiết kế tiện ích

  • Tập trung vào các phần nhỏ thông tin có thể xem nhanh trên tiện ích. Mở rộng thông tin trong ứng dụng.
  • Chọn loại tiện ích phù hợp với mục đích của bạn.
  • Lên kế hoạch về cách nội dung của tiện ích thích ứng với nhiều kích thước.
  • Đảm bảo bố cục tiện ích không phụ thuộc vào hướng và thiết bị bằng cách đảm bảo bố cục có thể kéo giãn và thu gọn.
  • Cân nhắc xem tiện ích của bạn có cần cấu hình bổ sung nào không.