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ế chế độ cài đặt nền tảng Android, chế độ cài đặt cốt lõi GMS (Cài đặt Google) hay bất kỳ nhà phát triển nào thiết kế chế độ cài đặt cho ứng dụng Android của họ.
Nguyên tắc thiết kế
Cung cấp thông tin tổng quan phù hợp
Người dùng cần có thể xem nhanh các màn hình cài đặt và hiểu được tất cả các chế độ cài đặt riêng lẻ cũng như giá trị của các chế độ đó.
Hình 1. Chế độ cài đặt và giá trị hiện tại của chúng được trình bày 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 chế độ cài đặt thường dùng lên đầu màn hình. Giới hạn số lượng chế độ cài đặt trên một màn hình. Việc hiển thị hơn 10-15 mục có thể gây quá tải. Bạn có thể tạo các trình đơn trực quan bằng cách di chuyển một số chế độ cài đặt sang một màn hình riêng.
Hình 2. Các chế độ cài đặt phổ biến nằm ở đầu màn hình
Giúp mọi người dễ dàng tìm thấy các chế độ cài đặt
Trong một số trường hợp, việc sao chép một chế độ cài đặt riêng lẻ trên hai màn hình khác nhau có thể sẽ giúp ích. Nhiều tình huống có thể kích hoạt người dùng thay đổi một chế độ cài đặt, vì vậy, việc đưa chế độ cài đặt này ở nhiều vị trí sẽ giúp người dùng tìm thấy mục này.
Đối với các chế độ cài đặt trùng lặp, hãy tạo một màn hình riêng cho chế độ cài đặt này và có các điểm nhập từ nhiều vị trí.
 |
 |
Hình 3 và 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ủa chế độ cài đặt thật 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 đề, hãy hiện trạng thái để làm nổi bật giá trị của chế độ cài đặt đó. Trình bày chi tiết cụ thể thay vì chỉ mô tả tiêu đề.
Tiêu đề phải:
- Đặt văn bản quan trọng nhất của nhãn trước.
- 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 như "chặn".
- Sử dụng các nhãn không cá nhân như "Thông báo" thay vì "Thông báo cho tôi". Ngoại lệ: Nếu cần tham chiếu đến người dùng để hiểu chế độ cài đặt, hãy sử dụng ngôi thứ hai ("bạn") thay vì ngôi thứ nhất ("I").
Tiêu đề nên tránh:
- Các từ khoá 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ừ trên phần phân chia phần hoặc tiêu đề màn hình phụ.
- Biệt ngữ kỹ thuật.
Loại trang
Danh sách cài đặt
Đây là loại màn hình phổ biến nhất. Lớp này cho phép nhiều chế độ cài đặt được đặt cùng nhau. Danh sách Cài đặt có thể là sự kết hợp các thành phần điều khiển, chẳng hạn như công tắc, trình đơn và thanh trượt.
Nếu có nhiều chế độ cài đặt trong một danh mục, thì bạn có thể nhóm các chế độ cài đặt đó lại với nhau. Vui lòng xem phần Nhóm và phân chia để biết thêm thông tin chi tiết.
Hình 5. Ví dụ về danh sách chế độ cài đặt
Chế độ xem danh sách
Chế độ xem danh sách được 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. Bạn có thể thêm các nút điều khiển để lọc hoặc sắp xếp 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 dùng để trình bày các chế độ 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.
Thực thể này xuất hiện ở phần trên cùng kèm theo biểu tượng, tiêu đề và phụ đề. Mọi chế độ 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ể dùng trong phần Thông tin ứng dụng
Hình 8. Ví dụ về màn hình Thực thể được dùng trong Bộ nhớ
Chế độ cài đặt chính
Bạn nên sử dụng chế độ cài đặt chính 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 nút chuyển ở đầu màn hình, người dùng có thể kiểm soát tính năng này. Việc sử dụng chế độ cài đặt chính để tắt tính năng này sẽ tắt tất cả các chế độ cài đặt khác liên quan.
Nếu một tính năng cần nội dung mô tả dạng văn bản dài hơn, thì bạn có thể sử dụng chế độ 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 chế độ 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 chế độ cài đặt chính. Vì chế độ cài đặt chính là một màn hình riêng biệt, nên bạn sẽ tránh được việc có nhiều công tắc ở nhiều vị trí cho cùng một chế độ cài đặt.
Hình 9. Ví dụ về chế độ cài đặt chính dùng trong màn hình Thông báo của ứng dụng; thao tác tắt nút bật/tắt chính sẽ tắt toàn bộ tính năng của ứng dụng
Hình 10. Ví dụ về chế độ cài đặt chính được dùng trong màn hình Thông báo của ứng dụng khi nút bật/tắt chính đang tắt
Màn hình chọn nút chọn
Màn hình này được sử dụng khi người dùng cần lựa chọn một chế độ cài đặt. Nút chọn có thể xuất hiện trong hộp thoại hoặc trên một màn hình riêng. Không nên dùng nút chọn cùng với thanh trượt, trình đơn hoặc công tắc.
Màn hình nút chọn có thể chứa hình ảnh ở trên cùng và văn bản chân trang ở dưới cùng. Mỗi nút chọn có thể có văn bản phụ kèm theo tiêu đề.
Hình 11. Không được sử dụng các nút chọn trong danh sách cài đặt
Hình 12. Đây là cách sử dụng nút chọn đúng cách trong phần cài đặt
Thành phần
Tiêu đề
Kể từ Android 8.0, thanh công cụ thao tác sẽ hiển thị nội dung tìm kiếm và trợ giúp cùng với các thao tác khác có liên quan. Bạn không nên sử dụng trình đơn mục bổ sung vì người dùng có thể không khám phá ra các thao tác bị ẩn trong các trình đơn này.
Dành cho thanh công cụ không có thao tác theo màn hình cụ thể. Hiện các thao tác tìm kiếm và trợ giúp.
Hình 13. Thanh công cụ có các thao tác tìm kiếm và trợ giúp
Đối với 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 hành động trước các hành động tìm kiếm và trợ giúp
Đối với thanh công cụ có nhiều thao tác: Hãy cân nhắc đặt thao tác chính trước khi tìm kiếm, đồng thời đặt các thao tác nâng cao vào trình đơn mục bổ sung.
Nếu tất cả các thao tác đề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 đặt mọi thao tác vào trình đơn mục bổ sung.
Hình 15. Thanh công cụ có trình đơn mục bổ sung cho các thao tác
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ụ (bạn được phép sử dụng nhiều dòng cho văn bản phụ). Thao tác dưới đây là không bắt buộc. Bạn có thể thực hiện tối đa 2 thao tác.
Hình 16. Tiêu đề thực thể
Phần biểu tượng và tiêu đề (App1) sẽ di chuyể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
Đường liên kết đến thực đơ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 chế độ cài đặt. Bạn không bắt buộc phải sử dụng biểu tượng.
Cố gắng mô tả văn bản tiêu đề thật súc tích. Nếu tiêu đề dài, chúng có thể tiếp tục trên dòng tiếp theo thay vì bị cắt bớt. Không bật trình đơn hoặc thao tác khi nhấn và giữ.
Ví dụ:
Hình 18. Đường liên kết đến trình đơn có biểu tượng, tiêu đề và nội dung phụ
Hình 19. Đường liên kết đến thực đơn có tiêu đề và văn bản phụ
Hình 20. Đường liên kết đến thực đơn chỉ có tiêu đề
Đường liên kết đến trình đơn có biểu tượng, tiêu đề, nội dung phụ và mục tiêu lượt truy cập riêng biệt ở bên phải
Các mục tiêu nhấn khác sẽ sử dụng màu giao diện.
Hình 21. Ví dụ về trình đơn mục tiêu nhấn hai lần
Đường liên kết đến trình đơn có biểu tượng, tiêu đề, nội dung phụ và số liệu thống kê/số/cảnh báo
Các giá trị số như tỷ lệ phần trăm và thời gian có thể xuất hiện ở bên phải cùng với văn bản phụ, còn biểu đồ thanh có thể hiển thị ở bên dưới.
Thông thường, các giá trị bằng số được hiển thị ở bên phải để người dùng có thể dễ dàng xem nhanh và so sánh.
Hình 22. Ví dụ về trình đơn có biểu tượng, tiêu đề, số liệu thống kê và biểu đồ
Nhóm và bộ chia
Nếu màn hình có nhiều chế độ cài đặt, thì bạn có thể nhóm lại và phân tách các chế độ cài đặt đó bằng một đường phân chia. Không giống như các phiên bản Android cũ, bộ chia giờ đây được dùng để phân cụm các chế độ cài đặt trong một nhóm, thay vì phân tách từng chế độ cài đặt.
Nếu chế độ cài đặt trong một nhóm có liên quan chặt chẽ với nhau, thì bạn có thể thêm tiêu đề nhóm. Nếu sử dụng tiêu đề nhóm, bạn phải luôn thêm một đường phân chia.
Hình 23. Các chế độ cài đặt được nhóm với bộ chia
Chuyển
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à nội dung phụ
Chuyển đổi giữa tiêu đề và văn bản phụ
Hình 25. Chuyển đổi bằng tiêu đề và văn bản phụ
Chuyển đổi chỉ ở tiêu đề
Tiêu đề có thể đi kèm với một biểu tượng ở bên trái.
Hình 26. Chuyển đổi chỉ bằng tiêu đề
Mục danh sách và nút chuyển
Bạn có thể kết hợp một mục trong danh sách bằng một nút chuyển. Thao tác nhấn vào phía bên trái của đường dọc đóng vai trò như một đường 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 như một nút chuyển tiêu chuẩn.
Đối với mục danh sách ở bên trái, tiêu đề là bắt buộc. Biểu tượng và văn bản phụ là không bắt buộc.
Hình 27. Mục danh sách và nút chuyển
Thanh trượt
Bạn không bắt buộc phải dùng biểu tượng này trong thanh trượt.
Hình 28. Thanh trượt
Nút trên màn hình
Hành động khẳng định sử dụng màu giao diện, còn hành động phủ định có màu xám. 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. Hành động tiêu cực bao gồm xoá dữ liệu, gỡ cài đặt ứng dụng, xoá mục, v.v.
Hình 29. Nút màu xám để "Gỡ cài đặt" và "Buộc dừng"
Hình 30. Nút màu xanh dương cho "Bật ngay"
Tiết lộ tiến trình (Nâng cao)
Bạn nên ẩn các tùy chọn cài đặt không được sử dụng thường xuyên. 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 chế độ cài đặt bị ẩn. Văn bản phụ chỉ được có một dòng. Văn bản bổ sung được cắt ngắn bằng dấu ba chấm.
Hình 31. Tính năng nâng cao dùng trên màn hình "Display" (Màn hình)
Menu thả xuống
Có trình đơn thả xuống, nhưng tốt nhất bạn nên sử dụng màn hình chọn hộp thoại hoặc nút chọn. Bạn nên đơn giản hoá các chế độ cài đặt, vì có 3 mẫu khác nhau cho mỗi lựa chọn.
Nếu cần, bạn có thể sử dụng trình đơn thả xuống trong trường hợp chế độ cài đặt có các tuỳ chọn đơn giản.
Hình 32. Menu thả xuống
Hộp đánh dấu
Sử dụng nút chuyển trên hộp đánh dấu khi có thể.
Bạn có thể sử dụng hộp đánh dấu:
- Đố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 đặt quá nhiều công tắc trên màn hình.
Hình 33. Hộp đánh dấu dùng để giảm số lượng công tắc trên màn hình này
Đường liên kết
Bạn không nên sử dụng đường liên kết trong phần cài đặt. Chỉ sử dụng các đường liên kết thực sự cần thiết. Các đường liên kết phải có màu nhấn và không được gạch chân.
Hình 34. Đường liên kết đã dùng trong phần cài đặt
Chân trang
Bạn có thể dùng văn bản ở chân trang để thêm nội dung giải thích. Chân trang phải luôn có một đường phân chia ở trên cùng. Phần chân trang nằm ở cuối màn hình. Chân trang có thể chứa đường 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 trình bày 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ể xuất hiện trong tiêu đề thực thể. Ví dụ: dữ liệu di động và bộ nhớ.
Các dữ liệu khác ít quan trọng hơn có thể được trình bày bằng chế độ xem danh sách thông thường.
Hình 36. Ví dụ minh hoạ Bộ nhớ
Hình 37. Ví dụ minh hoạ mạng
Hướng dẫn 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 ảnh động hoặc hình ảnh cùng với văn bản. Ảnh động hoặc hình ảnh sẽ hiển thị ở đầu màn hình, trong khi bạn có thể sử dụng văn bản chân trang để thêm nội dung giải thích.
Hình 38. Chế độ cài đặt sử dụng văn bản ảnh động và chân trang
Biểu mẫu
Nếu biểu mẫu có một trường nhập dữ liệu, hãy sử dụng hộp thoại thông thường. Điều này giúp người dùng dễ dàng nhập một giá trị nhập 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. Nhờ đó, bạn sẽ có thêm không gian trên màn hình để sắp xếp các trường theo mẫu rõ ràng.
Hình 39. Biểu mẫu có hộp thoại thông thường
Kết quả tìm kiếm
Kết quả tìm kiếm cho thấy tiêu đề, văn bản phụ (nếu có) và vị trí breadcrumb (tập hợp liên kết phân cấp) của chế độ cài đặt.
Hình 40. Kết quả tìm kiếm