Thẻ thông tin giúp người dùng truy cập nhanh vào thông tin và thao tác cần thực hiện để hoàn tất công việc. Chỉ với thao tác vuốt trên mặt đồng hồ, người dùng có thể xem tiến bộ của mình trong việc đạt được mục tiêu rèn luyện thể chất, xem thông tin thời tiết, cũng như làm nhiều việc khác. Chạy một ứng dụng hoặc nhanh chóng hoàn tất công việc cần thiết nhờ có thẻ thông tin.
Tạo thiết kế đáp ứng và được tối ưu hoá
Để giúp bạn điều chỉnh bố cục thiết kế cho phù hợp với kích thước màn hình lớn hơn, chúng tôi đã cập nhật hành vi của các bố cục và thành phần để có hành vi đáp ứng tích hợp, bao gồm cả khoảng đệm và khoảng cách lề dựa trên tỷ lệ phần trăm.
Nếu đang sử dụng mẫu ProtoLayout của chúng tôi, bạn có thể tự động kế thừa các bản cập nhật này thông qua bản phát hành beta mới nhất của thư viện Wear ProtoLayout Jetpack. Ngoài ra, bạn chỉ cần cung cấp các bố cục mà bạn đã thêm nội dung hoặc thành phần bổ sung sau điểm ngắt kích thước màn hình. Để biết hướng dẫn và đề xuất đầy đủ về cách tận dụng kích thước màn hình lớn hơn, hãy xem hướng dẫn về thẻ thông tin. Thẻ thông tin có chiều cao màn hình cố định, vì vậy, chúng tôi đã điều chỉnh khoảng đệm để tối đa hoá không gian màn hình hạn chế mà không tạo ra hiện tượng cắt xén không mong muốn.
Kiểm tra để đảm bảo các thành phần lấp đầy chiều rộng hiện có
Tất cả các thành phần đều phải được xây dựng một cách đáp ứng. Bằng cách đặt chiều cao và chiều rộng thành "expand" (mở rộng), các thành phần sẽ lấp đầy không gian hiện có. Thêm khoảng cách lề cần thiết để ngăn nội dung bị cắt xén bởi màn hình bo tròn.
Tạo thiết kế thích ứng và đặc trưng
Để tận dụng tối đa không gian bổ sung trên các kích thước màn hình lớn hơn, hãy thêm điểm ngắt kích thước ở 225dp. Điểm ngắt này cho phép bạn tiết lộ nội dung bổ sung, thêm nhiều nút hoặc dữ liệu hơn hoặc thay đổi bố cục để phù hợp hơn với màn hình lớn hơn.
Điều này đòi hỏi một thiết kế khác cho mỗi điểm ngắt. Thiết kế màn hình lớn hơn (225+ dp) có thể bao gồm các thành phần bổ sung sau:
Hiện khe tiêu đề bị ẩn trước đó
Bạn nên làm việc này trên các bố cục có 2 hàng trước điểm ngắt, trong đó cần xoá khe tiêu đề để đảm bảo mục tiêu tối thiểu khi nhấn là 48dp.
Tăng kích thước hoặc thay đổi trạng thái của các thành phần hiện có
Bạn có thể làm việc này để hiển thị thêm thông tin chi tiết hoặc giúp nội dung dễ xem hơn.
Thêm các khe thành phần trong bố cục hiện tại
Bằng cách thêm các thành phần, bố cục sẽ cung cấp nhiều lựa chọn hơn hoặc thông tin chi tiết bổ sung. Tuy nhiên, hãy đảm bảo nội dung vẫn dễ xem.
Thêm nội dung khác ở dưới cùng
Trong một số trường hợp, bạn nên thêm các nút hành động hoặc nội dung vào phần dưới cùng thay vì thêm các thành phần trong khe chính.
Thận trọng: Kích thước màn hình lớn hơn không bao giờ được hiển thị ít thông tin hơn so với các kích thước nhỏ hơn. Điều này đặc biệt phù hợp với các hành vi tuỳ chỉnh được thêm vào tại điểm ngắt.
Ví dụ phổ biến về điều này là khi các thành phần hoặc kích thước văn bản tăng quá điểm ngắt và cuối cùng hiển thị ít hơn trên các màn hình lớn hơn. Màn hình phải luôn hiển thị nhiều giá trị hơn khi kích thước tăng lên.
Hành vi đáp ứng và thích ứng
Hành vi đáp ứng và thích ứng phụ thuộc vào 3 khe (phần) của bố cục.
Khe tiêu đề và biểu tượng ứng dụng
Không có thay đổi nào về hành vi đối với biểu tượng ứng dụng mà hệ thống cung cấp. Khe tiêu đề tự động thích ứng với kích thước màn hình rộng hơn, hiển thị các ký tự bổ sung. Có các khoảng cách lề bên trong tỷ lệ (phần trăm) ở phần trên cùng để tránh mọi hiện tượng cắt xén khi kích thước màn hình tăng lên.
Khe chính (thành phần)
Tất cả các thành phần trong khe chính đều phải đặt chiều rộng và chiều cao thành "expand" (mở rộng) để tự động thích ứng với kích thước màn hình rộng hơn. Có các khoảng cách lề bên trong tỷ lệ (phần trăm) trên phần khe chính và mỗi hàng trong khe này trong một số trường hợp để tránh mọi hiện tượng cắt xén khi kích thước màn hình tăng lên. Nếu bạn sử dụng kết hợp bán kính góc và bố cục, khe chính có thể yêu cầu khoảng cách lề lớn hơn.
Khe dưới cùng
Không có thay đổi nào về hành vi đối với nút hoặc văn bản ở dưới cùng, nhưng chiều rộng của nút và hộp văn bản sẽ tự động thích ứng với kích thước màn hình rộng hơn và có thêm ký tự. Có các khoảng cách lề bên trong tỷ lệ (phần trăm) trên khe dưới cùng để tránh mọi hiện tượng cắt xén khi kích thước màn hình tăng lên. Khi không có khe dưới cùng, khoảng cách lề mặc định sẽ tự động được thêm vào.
Tạo trải nghiệm đặc trưng
Một bố cục có thể tuỳ chỉnh hoàn toàn, với 60 hoặc nhiều hoán vị được tích hợp trong đó, cho phép tuỳ chỉnh gần như không giới hạn. Thẻ thông tin được xây dựng trên hệ thống dựa trên khe, vì vậy, bạn có thể thay thế một khe từ bố cục chính tắc bằng bất kỳ nội dung hoặc thành phần nào và đặt thành phần thành một trong nhiều biến thể và tổ hợp màu. Trong trường hợp này, hãy duy trì hành vi đáp ứng và tuân theo các đề xuất thiết kế của chúng tôi.
Các tuỳ chỉnh này phải bị hạn chế và không được đi lệch khỏi mẫu thẻ thông tin. Điều này nhằm duy trì tính nhất quán khi người dùng cuộn qua băng chuyền thẻ thông tin trên thiết bị Wear OS.