Bậc 2 — Tối ưu hoá thích ứng

Ứng dụng được tối ưu hoá và hỗ trợ đầy đủ cho mọi loại màn hình và trạng thái thiết bị, bao gồm cả việc chuyển đổi trạng thái.

Hình ảnh mô tả 3 cấp chất lượng dưới dạng các lớp xếp chồng theo chiều dọc, trong đó cấp giữa được làm nổi bật.

Nguyên tắc

Xây dựng ứng dụng để thích ứng với mọi kích thước màn hình và trạng thái thiết bị.

Giao diện người dùng

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

Ứng dụng có bố cục thích ứng và được thiết kế để đáp ứng mọi kích thước màn hình. Tất cả bố cục đều là bố cục thích ứng (xem nội dung Di chuyển giao diện người dùng của bạn sang bố cục thích ứng). Quy trình triển khai bố cục thích ứng được xác định tuỳ theo các lớp kích thước cửa sổ.

Giao diện người dùng của ứng dụng có thể bao gồm các thành phần sau:

  • Dải điều hướng chính trên các cạnh có thể mở rộng thành bảng điều hướng đầy đủ đối với các kích thước cửa sổ lớn hơn
  • Bố cục lưới điều chỉnh số lượng cột cho phù hợp với các thay đổi về kích thước cửa sổ
  • Các cột văn bản trên màn hình lớn
  • Theo mặc định, các bảng điều khiển dọc theo cạnh sẽ mở đối với kích thước màn hình máy tính; và đóng đối với các màn hình nhỏ hơn

Tạo bố cục nhiều ngăn (khi thích hợp) để tận dụng không gian màn hình lớn. Xem phần Bố cục chuẩn.

Tính năng nhúng hoạt động cho phép các ứng dụng dựa trên hoạt động tạo bố cục nhiều ngăn bằng cách hiển thị các hoạt động cạnh nhau.
UI_Secondary_Elements T-Layout_Flow

Các mô-đun, trình đơn theo bối cảnh và các phần tử phụ khác được định dạng đúng trên mọi loại màn hình và trạng thái thiết bị. Ví dụ:

  • Bảng dưới cùng không phải là chiều rộng tối đa trên màn hình lớn. (Áp dụng chiều rộng tối đa để tránh kéo giãn.) Xem phần Hành vi trong phần Trang tính: dưới cùng.
  • Các nút không có đủ chiều rộng trên màn hình lớn. Xem phần Hành vi trong phần Nút.
  • Các trường và hộp văn bản không được kéo giãn đến toàn bộ chiều rộng trên màn hình lớn. Xem phần Hành vi trong phần Trường văn bản.
  • Các trình đơn hoặc đối tượng chỉnh sửa nhỏ không bao phủ toàn bộ màn hình và duy trì bối cảnh cho người dùng nhiều nhất có thể. Xem phần Trình đơn.
  • Trình đơn theo bối cảnh xuất hiện bên cạnh mục mà người dùng đã chọn. Xem chủ đề "Trình đơn theo bối cảnh" trong phần Trình đơn.
  • Các dải điều hướng sẽ thay thế các thanh điều hướng để mang lại hiệu quả công thái học tốt hơn trên màn hình lớn. Xem phần Dải điều hướng.
  • Ngăn điều hướng được cập nhật thành dải điều hướng mở rộng. Xem phần Ngăn điều hướng.
  • Hộp thoại được cập nhật lên thành phần Material mới nhất. Xem phần Hộp thoại.
  • Hình ảnh xuất hiện ở độ phân giải thích hợp, đồng thời không bị kéo giãn hoặc bị cắt.
Touch_Targets T-Touch_Targets Đích chạm có kích thước tối thiểu là 48 dp. Xem nguyên tắc về Bố cục và kiểu chữ của Material Design.
Drawable_Focus T-Drawable_Focus Trạng thái được lấy tiêu điểm sẽ được tạo cho các đối tượng có thể vẽ tuỳ chỉnh có khả năng tương tác. Đối tượng có thể vẽ tuỳ chỉnh là bất cứ thành phần trực quan nào trên giao diện người dùng không do khung Android cung cấp. Nếu người dùng có thể tương tác với một đối tượng có thể vẽ tuỳ chỉnh, thì đối tượng có thể vẽ đó phải có thể trở thành tiêu điểm khi thiết bị không ở Chế độ cảm ứng và phải thể hiện trực quan thật rõ ràng trạng thái được lấy tiêu điểm.

Bàn phím, chuột và bàn di chuột

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation Các luồng tác vụ chính trong ứng dụng đều hỗ trợ việc di chuyển bằng bàn phím, bao gồm cả di chuyển bằng phím Tab và phím mũi tên. Xem nội dung Xây dựng những ứng dụng dễ tiếp cận hơn.
Keyboard_Shortcuts T-Keyboard_Shortcuts Ứng dụng hỗ trợ phím tắt cho các thao tác thường dùng như chọn, cắt, sao chép, dán, huỷ và làm lại. Vui lòng xem nội dung Khả năng tương thích với thiết bị đầu vào.
Keyboard_Media_Playback T-Keyboard_Media_Playback Bạn có thể dùng bàn phím để điều khiển việc phát nội dung đa phương tiện (ví dụ: dùng phím cách để phát và tạm dừng nội dung đa phương tiện).
Keyboard_Send T-Keyboard_Send Bạn có thể dùng phím Enter để thực hiện chức năng gửi trong các ứng dụng thông tin liên lạc.
Context_Menus T-Context_Menus Bạn có thể truy cập trình đơn theo bối cảnh bằng hành vi nhấp chuột phải (nút chuột phụ hoặc cử chỉ nhấn phụ) thông thường trên chuột và bàn di chuột.
Content_Zoom T-Content_Zoom Bạn có thể thu phóng nội dung ứng dụng bằng con lăn chuột (kết hợp với thao tác nhấn phím Control hoặc Ctrl) và cử chỉ chụm trên bàn di chuột.
Hover_States T-Hover_States Các thành phần thao tác được trên giao diện người dùng có trạng thái di chuột (khi thích hợp) để cho người dùng chuột và bàn di chuột biết là có thể tương tác được với các thành phần này.

Kiểm thử

Để đảm bảo ứng dụng của bạn được tối ưu hoá và phản hồi tất cả các cấu hình màn hình, hãy thực hiện các kiểm thử sau.

Giao diện người dùng

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Chạy ứng dụng trên các thiết bị có nhiều kích thước màn hình, bao gồm cả điện thoại, điện thoại gập, máy tính bảng nhỏ và lớn, cũng như thiết bị máy tính. Chạy ứng dụng ở chế độ nhiều cửa sổ trên các thiết bị.

Xác minh rằng bố cục ứng dụng sẽ phản hồi và thích ứng với nhiều kích thước màn hình và cửa sổ. Kiểm tra xem ứng dụng có mở rộng và thu gọn thanh điều hướng, điều chỉnh số lượng cột trong bố cục lưới, chuyển văn bản vào cột, v.v. hay không. Quan sát xem các thành phần trên giao diện người dùng có được định dạng để đáp ứng cả tính thẩm mỹ và chức năng hay không.

Đối với các ứng dụng có dùng tính năng nhúng hoạt động, hãy kiểm tra xem các hoạt động có hiển thị cạnh nhau trên màn hình lớn, xếp chồng trên màn hình nhỏ hay không.
T-Touch_Targets Touch_Targets Xác minh rằng kích thước và vị trí của đích nhấn được duy trì nhất quán, cũng như có thể truy cập và không bị các phần tử khác trên giao diện người dùng che khuất đối với mọi kích thước và cấu hình màn hình. Để biết thông tin về tính năng hỗ trợ tiếp cận, hãy xem nội dung về Trình quét hỗ trợ tiếp cận.
T-Drawable_Focus Drawable_Focus Trên mỗi màn hình ứng dụng chứa một đối tượng có thể vẽ tuỳ chỉnh có tính tương tác, hãy xác minh rằng đối tượng có thể vẽ đó có thể được làm tiêu điểm bằng bàn phím ngoài, d-pad hoặc thiết bị khác cho phép làm tiêu điểm các phần tử trên giao diện người dùng. Xác minh rằng trạng thái được lấy làm tiêu điểm được thể hiện trực quan thật rõ ràng. Để biết thông tin liên quan, hãy xem nội dung về Chế độ cảm ứng.

Bàn phím, chuột và bàn di chuột

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Di chuyển qua các thành phần có thể được lấy làm tiêu điểm của ứng dụng bằng các phím Tab và mũi tên trên bàn phím bên ngoài.
T-Keyboard_Shortcuts Keyboard_Shortcuts Sử dụng phím tắt trên bàn phím bên ngoài để thực hiện các thao tác chọn, cắt, sao chép, dán, huỷ và làm lại.
T-Keyboard_Media_Playback Keyboard_Media_Playback Sử dụng bàn phím bên ngoài để bắt đầu, dừng, tạm dừng, tua lại và tua đi nội dung đa phương tiện.
T-Keyboard_Send Keyboard_Send Sử dụng phím Enter của bàn phím ngoài để gửi hoặc nộp dữ liệu.
T-Context_Menus Context_Menus Sử dụng nút chuột phụ hoặc chế độ nhấn phụ trên bàn di chuột để truy cập trình đơn theo bối cảnh của các phần tử tương tác.
T-Content_Zoom Content_Zoom Sử dụng con lăn chuột (kết hợp với phím Control hoặc Ctrl) và cử chỉ chụm bàn di chuột để thu phóng nội dung.
T-Hover_States Hover_States Di chuột hoặc con trỏ bàn di chuột lên các thành phần giao diện người dùng có thể thao tác để kích hoạt trạng thái di chuột của các thành phần này.