Các chế độ và hướng của thiết bị gập

Thiết kế Android bao gồm nhiều khía cạnh và thiết bị độc đáo, bao gồm cả thiết bị có thể gập lại; chỉ xem xét các điểm ngắt là chưa đủ. Người dùng có thể điều chỉnh và định hướng lại cửa sổ ứng dụng trên thiết bị của họ. Với thiết bị có thể gập lại, một thiết bị duy nhất có thể đáp ứng tất cả các trường hợp sử dụng này. Bạn cần suy nghĩ theo các ngăn để nội dung có thể thích ứng.

Thay đổi về hướng

Đừng khoá ứng dụng ở chế độ dọc. Việc này có thể trông giống như một lỗi và tạo hiệu ứng hòm thư không mong muốn khi làm nhiều việc cùng lúc.

Người dùng thường xoay thiết bị để xem nội dung và cho phù hợp với tư thế cầm nắm. Ứng dụng của bạn phải hỗ trợ những thay đổi về hướng này.

Trên các thiết bị lớn hơn, hướng dọc và hướng ngang có thể có hiệu ứng tinh tế hơn khi chuyển từ kích thước trung bình sang kích thước lớn, nhưng hướng ngang cung cấp kích thước cửa sổ trung bình với chế độ xem dọc thu gọn.

Hãy cân nhắc các phương pháp thiết kế sau đây cho chế độ ngang:

  • Hỗ trợ thanh hệ thống tràn viền.

  • Quyết định thành phần điều hướng phù hợp nhất với nội dung của bạn, chẳng hạn như thanh điều hướng ngang hoặc dải điều hướng.

  • Hãy cân nhắc việc điều chỉnh lại nội dung hoặc thay đổi mật độ.

Bố cục ngang có thể sử dụng giao diện người dùng có chiều rộng trung bình.

Các lựa chọn điều hướng cho chế độ ngang.

Chế độ dọc có thể tận dụng chiều cao giảm của một thanh điều hướng dưới cùng theo hướng ngang.

nội dung toàn màn hình ở chế độ ngang

Đối với nội dung, hãy thử dùng một vùng chứa để tạo hiệu ứng hòm thư cho nội dung hoặc dùng hướng nội dung khác (nếu có), chẳng hạn như video dọc thay vì video ngang. Nội dung có chiều rộng đầy đủ trên chế độ dọc nhỏ gọn chiếm phần lớn màn hình trong bố cục ngang lớn. Nếu nội dung không cuộn ở chế độ dọc, thì đừng để nội dung cuộn ở chế độ ngang, vì điều này có thể khiến người dùng nhầm lẫn.

nội dung được điều chỉnh lại trên chế độ ngang

Hình ảnh chính chiếm không gian nổi bật và được cố định. Thanh ứng dụng ở dưới cùng sẽ tách ra.

nội dung được điều chỉnh lại trên chế độ ngang

Từ dọc sang ngang: cả hai nhóm vùng chứa đều xoay tại chỗ.

Thay đổi bố cục và thay đổi thành phần

Đối với một trang tính bộ lọc, thành phần trang tính có thể thay đổi thành một trang tính bên. Nếu cần thêm sự chú ý, trang tính vẫn ở chế độ toàn màn hình nhưng sẽ điều chỉnh thành bố cục hai cột.

Tư thế

Tính đến các trường hợp sử dụng kiểu dáng độc đáo, chẳng hạn như tư thế gập (gập, phẳng và trên mặt bàn).

Đọc thêm về cách hỗ trợ màn hình của thiết bị có thể gập lại.

Thay đổi bố cục và thay đổi thành phần

Ứng dụng của bạn không nhất thiết phải tính đến mọi tư thế, nhưng hãy cân nhắc việc tận dụng một tư thế cho ứng dụng của bạn. Ví dụ: trình phát nội dung nghe nhìn có thể hiển thị một giao diện người dùng độc đáo trên mặt bàn và giao diện người dùng nắp.

Không đổi

Thiết bị có thể gập lại ở tư thế phẳng khi mở ra. Màn hình thường có kích thước lớp trung bình hoặc lớn.

Thay đổi bố cục và thay đổi thành phần

Khi gập

Khi ở trạng thái gập, thiết bị có thể gập lại sẽ ở tư thế gập. Ở tư thế này, bạn tương tác với màn hình ngoài (thường có kích thước nhỏ gọn).

Thay đổi bố cục và thay đổi thành phần

Trên mặt bàn

Thiết bị ở tư thế mặt bàn được gập một phần theo chiều ngang. Tư thế này cho phép bạn sử dụng các bố cục riêng biệt, chẳng hạn như các chế độ điều khiển lớn và video ngang.

Thay đổi bố cục và thay đổi thành phần

Bản lề

Giúp ứng dụng nhận biết bản lề để nội dung hiển thị liền mạch và không bị che khuất ở bản lề. Điều này có thể không cần thiết trên bố cục một ngăn. Tuy nhiên, hãy cân nhắc xem các nút và văn bản có nên tránh khoảng trống bản lề hay không.

Thay đổi bố cục và thay đổi thành phần

Nếu bạn đang thiết kế bằng lưới bố cục và các ngăn, hãy chừa khoảng trống rộng hơn để phù hợp với bản lề, chẳng hạn như trong bố cục danh sách-chi tiết gồm hai ngăn.

Một số thiết bị có thể gập lại, chẳng hạn như thiết bị có 3 màn hình, có nhiều bản lề.

Nắp

Một số điện thoại có thể gập lại có thể có màn hình ngoài với tỷ lệ khung hình vuông, chẳng hạn như điện thoại lật.

Khi thiết kế cho màn hình ngoài, hãy tuân theo các nguyên tắc sau:

  • Đảm bảo các ứng dụng hiển thị tràn viền.
  • Đảm bảo các phần tử giao diện người dùng không bị che khuất bởi vết cắt camera.
  • Tập trung vào các trường hợp sử dụng và giao diện người dùng.

Thay đổi bố cục và thay đổi thành phần

Ví dụ: khi một thiết bị chỉ được dùng làm trình phát nội dung nghe nhìn, ảnh bìa có thể trở thành nền để hiển thị chế độ xem nhanh cần ít thông tin hơn.

Thay đổi bố cục và thay đổi thành phần

Trên màn hình và tỷ lệ khung hình nhỏ hơn, hãy cân nhắc trải nghiệm về nội dung tập trung. Hình ảnh chính chiếm phần lớn trang bìa để tăng tính hấp dẫn về mặt thị giác, đồng thời có một phần tiêu đề và nội dung để dễ dàng cuộn và đọc.

Thay đổi bố cục và thay đổi thành phần

Nắp này phải tập trung vào đầu vào. Ví dụ: khi bàn phím xuất hiện, thông báo sẽ là tiêu điểm chính.

Thay đổi bố cục và thay đổi thành phần

Trong màn hình nhỏ hơn, chẳng hạn như màn hình gập, trang bộ lọc sẽ ở chế độ toàn màn hình, nhưng vị trí và tỷ lệ của nút sẽ thích ứng.

Thay đổi bố cục và thay đổi thành phần

Mặc dù nhỏ gọn, nhưng dải điều hướng có thể mang lại hiệu quả công thái học tốt hơn trên màn hình ngoài.

Bìa lớn hơn có thể tận dụng một trong hai hướng điều hướng. Hãy cân nhắc cách người dùng có thể tương tác với nội dung.

Thay đổi bố cục và thay đổi thành phần

Thanh điều hướng nhỏ có thể tránh giao diện người dùng hệ thống và vết cắt camera trong khi vẫn giữ chiều cao thu gọn.

Tiếp tục giao diện người dùng trong giao diện người dùng hệ thống mà không bị cản trở.
Dừng giao diện người dùng trước các thanh hệ thống.