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

Tài liệu này nêu bật các nguyên tắc và nguyên tắc dành cho bất kỳ ai đang thiết kế cài đặt nền tảng Android, cài đặt cốt lõi của GMS (Cài đặt Google) hoặc bất kỳ nhà phát triển nào đang 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 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ẻ cũng như giá trị của chúng.

Hình 1. Các 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 xuyên sử 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ị 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.

Hình 2. Các cài đặt chung nằm ở đầu màn hình

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

Trong một số trường hợp, việc sao chép một cài đặt riêng lẻ trên hai màn hình khác nhau có thể hữu ích. Các tình huống khác nhau có thể kích hoạt 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 vào 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

Đặt tiêu đề 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ị chi tiết cụ thể thay vì chỉ mô tả tiêu đề.

Tiêu đề nên:

  • Đặt văn bản quan trọng nhất của nhãn của bạn lên đầu tiên.
  • Viết lại các từ tiêu cực như “không” hoặc “không bao giờ” thành các thuật ngữ trung lập như “chặn”.
  • Sử dụng các nhãn không mang tính cá nhân như "Thông báo" thay vì "Thông báo cho tôi". Ngoại lệ: Nếu cần phải đề cập đến người dùng để 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").

Tiêu đề nên tránh:

  • Các thuật ngữ 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ừ trong bộ chia phần hoặc tiêu đề màn hình phụ.
  • Thuậ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ư nút chuyển, 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 & ngăn để 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ề chế độ 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, thực thể đượ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ộ lưu trữ

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 công tắc ở phía trên màn hình, người dùng có thể dễ dàng điều khiển tính năng này. Việc 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 thì có thể sử dụng cài đặt chính vì loại 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 nên bạn sẽ tránh được việc có nhiều công tắc ở những 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 nút bật tắt chính sẽ tắt toàn bộ tính năng cho ứ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 nút bật tắt chính đã tắt

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 thực hiện lựa chọn cho một cài đặt. Các nút radio có thể được hiển thị trong hộp thoại hoặc trên một màn hình riêng. Không nên sử dụng nút radio 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 và văn bản chân trang ở cuối. Các nút radio riêng lẻ có thể có nội dung phụ cùng với tiêu đề.

Hình 11. Không nên sử dụng nút radio 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 tràn 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.

Dành cho 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 hành động tìm kiếm và trợ giúp

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

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

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

Nếu tất cả hành động đều 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 việc đặt tất cả hành động vào menu mục bổ sung.

Hình 15. Thanh công cụ với menu tràn 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 đề có 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 xuống 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 bê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ữ 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 hành động 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ỉ có tiêu đề

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

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

Hình 21. Ví dụ về menu mục tiêu hai lần nhấn

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

Các giá trị số như 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 dễ dàng xem qua và so sánh.

Hình 22. Ví dụ về menu có biểu tượng, tiêu đề, chỉ số và đồ thị

Nhóm & chia

Nếu một màn hình có nhiều cài đặt, chúng có thể được nhóm 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 để nhóm các cài đặt thành 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 tiêu đề nhóm. Nếu bạn sử dụng tiêu đề nhóm, bạn phải luôn bao gồm dải phân cách.

Hình 23. Các cài đặt được nhóm bằng dải phân cách

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 với 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 đề

Tiêu đề có thể đi kèm với 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 nút chuyển. Nhấn vào bên trái của đường thẳng đứng có tác dụ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

Hành động tích cực sử dụng màu chủ đề trong khi 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 các mục, v.v.

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

Hình 30. Nút màu xanh lam cho "Bật ngay"

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

Những 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, phần phụ hiển thị tiêu đề của các cài đặt bị ẩn. Nội dung phụ chỉ nên có một dòng. Văn bản bổ sung sẽ bị cắt bớt bằng dấu chấm lửng.

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

Các menu thả xuống có sẵn nhưng lý tưởng nhất là bạn nên sử dụng màn hình chọn hộp thoại hoặc 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ó thể sử dụng menu thả xuống trong trường hợp cài đặt có các tùy chọn đơn giản.

Hình 32. Trình đơn thả xuống

Hộp kiểm

Sử dụng chuyển 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 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

Không nên sử dụng liên kết trong cài đặt. Chỉ sử dụng các liên kết khi 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 chân.

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ó 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

mẫu

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ữ.

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ị Bộ lưu trữ

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 được giải thích hoặc hướng dẫn người dùng. Bạn có thể sử dụng hình ảnh động hoặc hình ảnh cùng với văn bản. Hoạt ảnh hoặc hình ảnh phải được hiển thị ở đầu màn hình, trong khi văn bản chân trang có thể được sử dụng để thêm lời giải thích.

Hình 38. Cài đặt sử dụng văn bản hình động và 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 cân nhắc sử dụng hộp thoại toàn màn hình . Điều này cung cấp nhiều không gian màn hình hơn để sắp xếp các trường theo một 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 đề, nội dung 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