Google cam kết thúc đẩy công bằng chủng tộc cho Cộng đồng người da đen. Xem cách thực hiện.

Nguyên tắc thiết kế cài đặt Android

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Tài liệu này nêu bật các nguyên tắc và hướng dẫn cho bất kỳ ai đang thiết kế cài đặt nền tảng Android, cài đặt cốt lõi GMS (Cài đặt Google) hoặc bất kỳ nhà phát triển nào thiết kế cài đặt cho ứng dụng Android của họ.

Nguyên tắc thiết kế

Cung cấp một cái nhìn tổng quan tốt

Người dùng sẽ có thể xem qua màn hình cài đặt và hiểu tất cả các cài đặt riêng lẻ và giá trị của chúng.

Hình 1. Cài đặt và giá trị hiện tại của chúng được hiển thị trên màn hình cấp cao nhất

Sắp xếp các mục một cách trực quan

Đặt các cài đặt thường dùng ở đầu màn hình. Giới hạn số lượng cài đặt trên một màn hình. Hiển thị nhiều hơn 10-15 mục có thể gây choáng ngợp. Tạo menu trực quan bằng cách di chuyển một số cài đặt sang một màn hình riêng biệt.

Hình 2. Các cài đặt phổ biến ở trên cùng của màn hình

Giúp dễ dàng tìm thấy cài đặt

Trong một số trường hợp, có thể hữu ích nếu sao chép một cài đặt riêng lẻ trên hai màn hình khác nhau. Các tình huống khác nhau có thể khiến người dùng thay đổi cài đặt, do đó, việc đưa cài đặt vào nhiều nơi sẽ giúp người dùng tìm thấy mục này.

Đối với các cài đặt trùng lặp, hãy tạo một màn hình riêng cho cài đặt và có các điểm nhập từ những nơi khác nhau.

Hình 3 & 4. "Âm thanh thông báo mặc định" xuất hiện trên cả màn hình "Thông báo" và "Âm thanh"

Sử dụng tiêu đề và trạng thái rõ ràng

Làm cho tiêu đề của cài đặt của bạn ngắn gọn và có ý nghĩa. Tránh sử dụng các tiêu đề mơ hồ như "Cài đặt chung". Bên dưới tiêu đề, hiển thị trạng thái để làm nổi bật giá trị của cài đặt. Hiển thị các chi tiết cụ thể thay vì chỉ mô tả tiêu đề.

Các tiêu đề nên:

  • Đặt văn bản quan trọng nhất của nhãn của bạn trước tiên.
  • Diễn đạt lại các từ phủ định như "không" hoặc "không bao giờ" thành các cụm từ trung lập, chẳng hạn như "khối".
  • Sử dụng các nhãn mạo danh như "Thông báo" thay vì "Thông báo cho tôi". Ngoại lệ: Nếu việc đề cập đến người dùng là cần thiết để hiểu cài đặt, hãy sử dụng ngôi thứ hai ("bạn") thay vì ngôi thứ nhất ("tôi").

Các tiêu đề nên tránh:

  • Các thuật ngữ chung chung, chẳng hạn như đặt, thay đổi, chỉnh sửa, sửa đổi, quản lý, sử dụng, chọn hoặc chọn.
  • Lặp lại các từ từ bộ chia phần hoặc tiêu đề màn hình phụ.
  • Biệt ngữ kỹ thuật.

Các loại trang

Danh sách cài đặt

Đây là loại màn hình phổ biến nhất. Nó cho phép nhiều cài đặt được đặt cùng nhau. Danh sách cài đặt có thể là sự kết hợp của các điều khiển, như công tắc, menu và thanh trượt.

Nếu có nhiều cài đặt trong một danh mục, chúng có thể được nhóm lại với nhau. Xem Nhóm & bộ chia để biết thêm chi tiết.

Hình 5. Ví dụ về danh sách cài đặt

Chế độ xem danh sách

Chế độ xem danh sách được sử dụng để hiển thị danh sách các mục như ứng dụng, tài khoản, thiết bị, v.v. Các điều khiển để lọc hoặc sắp xếp có thể được thêm vào màn hình.

Hình 6. Ví dụ về dạng xem Danh sách

Màn hình thực thể

Màn hình thực thể được sử dụng để hiển thị cài đặt của một mục riêng biệt như ứng dụng, tài khoản, thiết bị, mạng Wi-Fi, v.v.

Về mặt trực quan, đối tượng được hiển thị ở trên cùng với biểu tượng, tiêu đề và phụ đề. Tất cả cài đặt trên màn hình này phải liên quan đến thực thể này.

Hình 7. Ví dụ về màn hình Thực thể được sử dụng trong Thông tin ứng dụng

Hình 8. Ví dụ về màn hình Thực thể được sử dụng trong Bộ nhớ

Cài đặt chính

Cài đặt chính được sử dụng tốt nhất khi có thể bật hoặc tắt toàn bộ tính năng, chẳng hạn như Wi-Fi hoặc Bluetooth. Bằng cách sử dụng một công tắc ở đầu màn hình, người dùng có thể dễ dàng điều khiển tính năng này. Sử dụng cài đặt chính để tắt tính năng này sẽ tắt tất cả các cài đặt liên quan khác.

Nếu một tính năng cần mô tả văn bản dài hơn, có thể sử dụng cài đặt chính vì kiểu màn hình này cho phép văn bản chân trang dài hơn.

Nếu một cài đặt cần được sao chép hoặc liên kết từ nhiều màn hình, hãy sử dụng cài đặt chính. Vì cài đặt chính là một màn hình riêng biệt, bạn sẽ tránh có nhiều công tắc ở các vị trí khác nhau cho cùng một cài đặt.

Hình 9. Ví dụ về cài đặt chính được sử dụng trong màn hình thông báo Ứng dụng; tắt chuyển đổi chính sẽ tắt toàn bộ tính năng của ứng dụng này

Hình 10. Ví dụ về cài đặt chính được sử dụng trong màn hình Thông báo ứng dụng khi đã tắt công tắc chính

Màn hình lựa chọn nút radio

Màn hình này được sử dụng khi người dùng cần lựa chọn cài đặt. Các nút radio có thể được hiển thị trong hộp thoại hoặc trên màn hình riêng biệt. Các nút radio không được sử dụng cùng với thanh trượt, menu hoặc công tắc.

Màn hình nút radio có thể chứa hình ảnh ở đầu trang và văn bản chân trang ở cuối trang. Các nút radio riêng lẻ có thể có văn bản phụ cùng với tiêu đề.

Hình 11. Các nút radio không nên được sử dụng trong danh sách cài đặt

Hình 12. Đây là cách sử dụng các nút radio một cách chính xác trong cài đặt

Các thành phần

Bắt đầu từ Android 8.0, thanh công cụ hành động hiển thị tìm kiếm và trợ giúp cùng với các hành động liên quan khác. Các menu bổ sung không được khuyến khích vì người dùng có thể không phát hiện ra các hành động ẩn trong các menu này.

Đối với các thanh công cụ không có hành động dành riêng cho màn hình. Hiển thị các hành động tìm kiếm và trợ giúp.

Hình 13. Thanh công cụ với các thao tác tìm kiếm và trợ giúp

Đối với các thanh công cụ có một hành động : Trình bày hành động trước khi tìm kiếm.

Hình 14. Thanh công cụ với một thao tác trước các thao tác tìm kiếm và trợ giúp

Đối với các thanh công cụ có nhiều hơn 1 hành động : Hãy cân nhắc đặt hành động chính trước khi tìm kiếm, đồng thời đưa các hành động nâng cao vào menu mục bổ sung.

Nếu tất cả các hành động là nâng cao hoặc chỉ hữu ích cho một nhóm nhỏ người dùng, hãy cân nhắc đặt tất cả các hành động trong menu mục bổ sung.

Hình 15. Thanh công cụ với menu mục bổ sung cho các hành động

Tiêu đề thực thể

Tiêu đề thực thể chỉ có thể hiển thị một tiêu đề hoặc tiêu đề với văn bản phụ (cho phép nhiều dòng cho văn bản phụ). Hành động dưới đây là tùy chọn. Bạn có thể có tối đa hai hành động.

Hình 16. Tiêu đề thực thể

Phần biểu tượng và tiêu đề (App1) sẽ cuộn dưới tiêu đề (Thông tin ứng dụng).

Hình 17. Tiêu đề thông tin ứng dụng ở đây là một phần của thanh công cụ, trong khi phần còn lại của màn hình sẽ cuộn dưới nó

Tiêu đề là bắt buộc. Bạn cũng nên hiển thị văn bản phụ làm nổi bật trạng thái của cài đặt. Sử dụng một biểu tượng là tùy chọn.

Cố gắng giữ cho văn bản tiêu đề ngắn gọn. Nếu tiêu đề dài, chúng có thể tiếp tục ở dòng tiếp theo thay vì bị cắt bớt. Không bật menu hoặc tác vụ khi nhấn và giữ.

Ví dụ:

Hình 18. Liên kết menu với biểu tượng, tiêu đề và văn bản phụ

Hình 19. Liên kết menu với tiêu đề và văn bản phụ

Hình 20. Liên kết menu chỉ với tiêu đề

Liên kết menu với biểu tượng, tiêu đề, văn bản phụ và một mục tiêu truy cập riêng biệt ở bên phải

Các mục tiêu nhấn khác phải sử dụng màu chủ đề.

Hình 21. Ví dụ về menu đích hai lần nhấn

Liên kết menu với biểu tượng, tiêu đề, văn bản phụ và số liệu thống kê / số / biểu tượng cảnh báo

Các giá trị số như tỷ lệ phần trăm và thời gian có thể được hiển thị ở bên phải cùng với văn bản phụ, trong khi biểu đồ thanh có thể được hiển thị bên dưới.

Thông thường, các giá trị số được trình bày ở bên phải để người dùng có thể dễ dàng xem qua và so sánh chúng.

Hình 22. Ví dụ về menu với biểu tượng, tiêu đề, thống kê và đồ thị

Phân nhóm và phân chia

Nếu một màn hình có nhiều cài đặt, chúng có thể được nhóm lại và phân tách bằng một dải phân cách. Không giống như các phiên bản Android cũ hơn, bộ chia hiện được sử dụng để phân cụm cài đặt trong một nhóm, thay vì tách các cài đặt riêng lẻ.

Nếu các cài đặt trong một nhóm có liên quan chặt chẽ với nhau, bạn có thể thêm một tiêu đề nhóm. Nếu bạn sử dụng một tiêu đề nhóm, bạn phải luôn bao gồm một dấu phân cách.

Hình 23. Các cài đặt được nhóm với các bộ chia

Công tắc

Chuyển đổi bằng biểu tượng, tiêu đề và văn bản phụ

Hình 24. Chuyển đổi bằng biểu tượng, tiêu đề và văn bản phụ

Chuyển đổi bằng tiêu đề và văn bản phụ

Hình 25. Chuyển đổi với tiêu đề và văn bản phụ

Chỉ chuyển đổi với tiêu đề

Các tiêu đề có thể được kèm theo một biểu tượng ở bên trái.

Hình 26. Chỉ chuyển đổi với tiêu đề

Mục danh sách + công tắc

Bạn có thể kết hợp một mục danh sách với một công tắc. Chạm vào bên trái của đường thẳng đứng hoạt động giống như một liên kết và đưa người dùng đến màn hình tiếp theo. Phía bên phải hoạt động giống như một công tắc tiêu chuẩn.

Đối với mục danh sách ở phía bên trái, tiêu đề là bắt buộc. Biểu tượng và văn bản phụ là tùy chọn.

Hình 27. Mục danh sách và một công tắc

Thanh trượt

Biểu tượng là tùy chọn trong thanh trượt.

Hình 28. Thanh trượt

Nút trên màn hình

Các hành động tích cực sử dụng màu chủ đề trong khi các hành động tiêu cực có màu xám. Các hành động tích cực có thể bao gồm mở ứng dụng, cài đặt ứng dụng, thêm mục mới, v.v. Các hành động tiêu cực bao gồm xóa dữ liệu, gỡ cài đặt ứng dụng, xóa mục, v.v.

Hình 29. Các nút màu xám cho "Gỡ cài đặt" và "Buộc dừng"

Hình 30. Nút màu xanh lam cho "Bật ngay bây giờ"

Tiết lộ lũy tiến (Nâng cao)

Các cài đặt không được sử dụng thường xuyên nên được ẩn đi. Chỉ sử dụng "Nâng cao" khi có ít nhất 3 mục cần ẩn.

Ở đây, văn bản phụ hiển thị tiêu đề của các cài đặt bị ẩn. Văn bản phụ chỉ nên có một dòng. Văn bản bổ sung được cắt ngắn bằng dấu chấm lửng.

Hình 31. Nâng cao được sử dụng trên màn hình "Hiển thị"

Menu thả xuống có sẵn, nhưng lý tưởng nhất là bạn nên sử dụng hộp thoại hoặc màn hình lựa chọn nút radio để thay thế. Điều này được khuyến nghị để đơn giản hóa cài đặt, vì hiện tại có ba mẫu khác nhau cho một lựa chọn.

Nếu cần, các menu thả xuống có thể được sử dụng trong trường hợp cài đặt có các tùy chọn đơn giản.

Hình 32. Menu thả xuống

Hộp kiểm

Sử dụng chuyển đổi qua các hộp kiểm khi có thể.

Các hộp kiểm có thể được sử dụng:

  • Đối với các hành động tiêu cực như hạn chế ứng dụng hoặc chặn một dịch vụ.
  • Để tránh có quá nhiều công tắc trên màn hình.

Hình 33. Các hộp kiểm được sử dụng để giảm số lượng công tắc trên màn hình này

Sử dụng liên kết trong cài đặt không được khuyến khích. Chỉ sử dụng các liên kết ở những nơi thực sự cần thiết. Các liên kết nên sử dụng màu nhấn không có gạch dưới.

Hình 34. Liên kết được sử dụng trong cài đặt

Văn bản chân trang có thể được sử dụng để thêm nội dung giải thích. Chân trang phải luôn có một dải phân cách ở trên cùng. Chân trang được hiển thị ở cuối màn hình. Chân trang có thể có liên kết, nếu cần.

Hình 35. Văn bản chân trang

Hoa văn

Dữ liệu

Dữ liệu quan trọng có thể được hiển thị dưới dạng biểu đồ như biểu đồ thanh hoặc biểu đồ hình tròn. Dữ liệu này có thể được hiển thị trong tiêu đề thực thể. Ví dụ bao gồm dữ liệu di động và lưu trữ.

Các dữ liệu ít quan trọng khác có thể được trình bày bằng cách sử dụng chế độ xem danh sách thông thường.

Hình 36. Ví dụ hiển thị Storage

Hình 37. Ví dụ hiển thị Mạng

Giáo dục người dùng

Một số tính năng có thể cần giải thích hoặc giáo dục người dùng. Bạn có thể sử dụng hoạt ảnh hoặc hình ảnh cùng với văn bản. Hoạt ảnh hoặc hình ảnh nên được trình bày ở đầu màn hình, trong khi văn bản ở chân trang có thể được sử dụng để thêm phần giải thích.

Hình 38. Cài đặt bằng cách sử dụng hoạt ảnh và văn bản chân trang

Các hình thức

Nếu biểu mẫu có một trường đầu vào, hãy sử dụng hộp thoại bình thường. Điều này cung cấp một cách dễ dàng để người dùng nhập một đầu vào duy nhất.

Tuy nhiên, nếu biểu mẫu có nhiều trường, hãy xem xét sử dụng hộp thoại toàn màn hình . Điều này cung cấp thêm không gian màn hình để sắp xếp các trường theo một khuôn mẫu rõ ràng.

Hình 39. Biểu mẫu với hộp thoại bình thường

Kết quả tìm kiếm

Kết quả tìm kiếm hiển thị tiêu đề, văn bản phụ (nếu có) và vị trí đường dẫn của cài đặt.

Hình 40. Kết quả tìm kiếm