Các bố cục chuẩn này là bố cục ứng dụng linh hoạt, đã được chứng minh, mang lại trải nghiệm tối ưu cho người dùng trên thiết bị có kích thước màn hình lớn hơn.
Thẻ thông tin
Thẻ thông tin cho phé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.
Tuỳ chỉnh thông qua việc sử dụng các thành phần và kiểu của chúng tôi
Bạn có thể áp dụng kiểu cách của thương hiệu cho một số thành phần. Trong đó có màu chính, biểu tượng ứng dụng, phông chữ, biểu tượng và mọi thành phần hình ảnh áp dụng cho trải nghiệm của thẻ thông tin.
Tạo cho bố cục thích ứng (màn hình có chiều cao cố định và lề phần trăm)
Để điều chỉnh đoạn mã và 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 các bố cục đó để tích hợp sẵn hành vi thích ứng, bao gồm cả lề và khoảng đệm dựa trên tỷ lệ phần trăm. Nếu đang sử dụng mẫu của chúng tôi, bạn có thể tự động kế thừa những nội dung cập nhật này thông qua API Thẻ thông tin và chỉ cần cung cấp những 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 của chúng tôi.
Tất cả các mẫu đều được xây dựng bằng 2 điểm ngắt kích thước màn hình mặc định: 192 dp và 225 dp. Lề đã được đặt thành giá trị phần trăm, dựa trên kích thước màn hình, để các hàng lấp đầy không gian có sẵn nhưng không bị kéo dài quá xa và bị màn hình cong ở trên cùng và dưới cùng cắt bớt. 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 bị hạn chế mà không tạo ra các đoạn cắt không mong muốn.
Hai mẫu chính – Bố cục chính và Bố cục nội dung cạnh (với vòng tròn tiến trình) – có các lề khác nhau, nhưng tất cả các bố cục thiết kế đều được tạo để ánh xạ đến một trong những bố cục này. Có 3 phần chính cho mỗi thẻ thông tin và các khe được phân bổ cho từng thẻ thông tin trong số này. Trong một số trường hợp, có thể có thêm các lề và khoảng đệm tích hợp sẵn để giúp nội dung lấp đầy không gian có sẵn trong khi vẫn duy trì thiết kế cân bằng và có thể xem nhanh.
Tạo ra trải nghiệm khác biệt
Có 4 bố cục chính tắc chính, với hơn 80 kiểu hoán vị, cho phép tuỳ chỉnh gần như vô hạn. Thẻ thông tin được xây dựng trên một hệ thống dựa trên khe, vì vậy, bạn có thể thay thế một khe trong bố cục chuẩn bằng bất kỳ nội dung nào bạn chọn. Trong trường hợp này, hãy duy trì hành vi thích ứng và tuân theo các đề xuất thiết kế của chúng tôi.
Những nội dung tuỳ chỉnh này nên bị hạn chế và không được phá vỡ cấu trúc của mẫu thẻ thông tin. Việc 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.
Thêm giá trị sau điểm ngắt kích thước trên các kích thước màn hình lớn hơn
Để sử dụng không gian bổ sung trên các kích thước màn hình lớn hơn một cách hiệu quả nhất, hãy thêm một điểm ngắt kích thước ở 225 dp. Điểm ngắt này giúp bạn có thể hiển thị nội dung bổ sung, bao gồ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.
Bố cục ứng dụng dạng cuộn và không cuộn
Khi thiết kế bố cục thích ứng trên màn hình tròn, mỗi khung hiển thị cuộn và không cuộn đều có những yêu cầu riêng về việc điều chỉnh tỷ lệ các phần tử giao diện người dùng cũng như duy trì bố cục và bố cục cân bằng.
Bố cục của ứng dụng không ở dạng cuộn
Bố cục chuẩn và các thành phần toàn màn hình (bao gồm cả nội dung đa phương tiện và nội dung thể dục)
Bố cục của chế độ xem ứng dụng không cuộn bao gồm trình phát nội dung đa phương tiện, hộp thoại xác nhận, bộ chọn, bộ chuyển đổi và màn hình theo dõi hoặc hoạt động thể dục đặc biệt bằng cách sử dụng các chỉ báo tiến trình. Bạn có thể giới hạn chiều cao của mọi màn hình để đảm bảo người dùng tập trung vào một tác vụ hoặc một bộ tuỳ chọn điều khiển, thay vì cần duyệt qua một danh sách các tuỳ chọn. Để phù hợp với các thiết bị có kích thước màn hình nhỏ hơn, hãy thiết kế với kích thước giới hạn, đảm bảo người dùng có thể xem nhanh và chấp nhận màn hình tròn khi thích hợp.
Nguyên tắc về khả năng phản hồi (lề phần trăm)
Xác định tất cả lề theo tỷ lệ phần trăm và xác định các điều kiện ràng buộc theo chiều dọc để nội dung chính ở giữa có thể kéo giãn nhằm lấp đầy khu vực hiển thị có sẵn.
Tốt nhất là nên chia màn hình không cuộn thành phần trên cùng, giữa và dưới cùng khi thiết kế. Bằng cách này, bạn có thể thêm lề bên trong vào phần trên cùng và dưới cùng để tránh bị cắt, nhưng cho phép phần giữa tận dụng toàn bộ chiều rộng của màn hình. Hãy cân nhắc sử dụng nút cuộn xoay để điều khiển các thành phần của màn hình khi kích thước màn hình bị giới hạn, vì nếu chỉ nhấn vào các tương tác có thể không mang lại trải nghiệm tốt nhất.
Tạo ra trải nghiệm khác biệt
Bố cục không cuộn có thể tuỳ chỉnh được, nhưng bị hạn chế nhiều hơn về lượng nội dung có thể thêm vào màn hình và loại thành phần hoạt động tốt nhất. Việc sử dụngIconButton thay vì Chips sẽ tận dụng không gian hạn chế hiệu quả hơn, còn các đồ hoạ trực quan như ProgressIndicators và các điểm dữ liệu lớn sẽ giúp truyền đạt thông tin chính theo cách đồ hoạ.
Tất cả các thành phần ôm mép màn hình sẽ tự động mở rộng theo kích thước màn hình, vì vậy, các thành phần này càng trở nên có tác động mạnh mẽ hơn nữa.
Cách thêm giá trị sau điểm ngắt trên các kích thước màn hình lớn hơn
Khi tạo một thiết kế thích ứng cho các kích thước màn hình lớn hơn, bố cục ứng dụng không cuộn sẽ tận dụng được tối đa không gian màn hình bổ sung. Các phần tử hiện có có thể phát triển để lấp đầy không gian bổ sung, cải thiện khả năng hữu dụng, đồng thời các thành phần cũng như nội dung có thể xuất hiện sau điểm ngắt kích thước màn hình.
Một số ví dụ về hành vi này xuất hiện trong danh sách sau:
- Trình phát nội dung đa phương tiện có thể có thêm các nút hoặc chế độ điều khiển lớn hơn.
- Hộp thoại xác nhận có thể có hình minh hoạ hoặc thông tin khác.
- Màn hình thể dục có thể có thêm chỉ số và các phần tử có thể tăng kích thước.
Thao tác cuộn bố cục ứng dụng
Bố cục chuẩn
Thao tác cuộn bố cục của chế độ xem ứng dụng sẽ bao gồm danh sách (ScalingLazyColumn) và hộp thoại. Các bố cục này chiếm phần lớn màn hình ứng dụng và đại diện cho một tập hợp các thành phần cần thích ứng với các kích thước màn hình lớn hơn.
Kiểm tra để đảm bảo các thành phần thích ứng – tức là lấp đầy chiều rộng có sẵn và áp dụng các mức điều chỉnh ScalingLazyColumn khi có thêm chiều cao của màn hình. Các bố cục này đã được tạo có tính thích ứng và chúng tôi có thêm một số đề xuất để khai thác thêm lợi thế của bất động sản mở rộng.
Nguyên tắc về khả năng phản hồi (lề phần trăm)
Tất cả lề trên, dưới và bên phải được xác định theo tỷ lệ phần trăm để tránh bị cắt bớt và cung cấp tỷ lệ tỷ lệ của phần tử. Hãy lưu ý rằng PositionIndicator xuất hiện khi người dùng cuộn và sẽ tự động ôm mép màn hình bất kể kích thước màn hình.
Tạo ra trải nghiệm khác biệt
Khung hiển thị cuộn có khả năng tuỳ chỉnh cao, với khả năng thêm mọi tổ hợp thành phần theo thứ tự bất kỳ.
Lề trên cùng và lề dưới có thể thay đổi tuỳ thuộc vào thành phần nằm ở trên cùng và dưới cùng. Điều này nhằm ngăn nội dung bị cắt bớt do đường cong màn hình đang tăng dần.
Thêm giá trị sau điểm ngắt trên màn hình lớn
Vì bố cục cuộn sẽ tự động hiển thị thêm nội dung đã bị ẩn trước đó dưới màn hình đầu tiên, nên bạn không cần làm gì để tăng thêm giá trị. Mỗi thành phần sẽ lấp đầy chiều rộng có sẵn, và trong một số trường hợp, một thành phần có thể có thêm hàng văn bản (chẳng hạn như thẻ), hoặc các thành phần kéo dài để lấp đầy chiều rộng có sẵn (chẳng hạn như các nút biểu tượng).