Bố cục là các mẫu có cấu trúc, cung cấp khung để duy trì tính nhất quán về mặt hình ảnh trong toàn bộ ứng dụng. Bằng cách xác định lưới trực quan, giãn cách, và phần, bố cục thiết lập một cấu trúc nhất quán và có tổ chức cho bản trình bày thông tin và các phần tử trên giao diện người dùng.
Điểm nổi bật
- Không giống như web hoặc thiết bị di động, TV có tỷ lệ khung hình màn hình cố định là 16:9.
- Tối ưu hoá bố cục theo trục ngang và dọc để dễ sử dụng và kiểm soát.
Nguyên tắc
Các nguyên tắc giúp bạn đưa ra quyết định về thiết kế khi thiết kế bố cục TV.
Thiết kế cho màn hình lớn
Kể từ khi phổ biến của UHD, TV hình chữ nhật với tỷ lệ khung hình 16:9 đã trở thành tiêu chuẩn. Trong quá khứ, TV được sản xuất theo hình vuông được gọi là tỷ lệ khung hình 4:3 hoặc 1,33:1.
Thiết kế trên nền tảng Android
Khi thiết kế, hãy sử dụng dp để hiển thị các phần tử một cách đồng nhất trên màn hình có mật độ khác nhau, như với mọi thiết bị chạy Android khác. Luôn thiết kế ở độ phân giải MDPI ở 960px * 540px.
Tại MDPI, 1px = 1dp.
Các thành phần cần nhắm đến độ phân giải 1080p. Điều này cho phép hệ thống Android giảm quy mô các phần tử bố cục xuống còn 720p, nếu cần.
Đảm bảo khả năng hiển thị và quét quá mức an toàn
Hãy đảm bảo người dùng luôn nhìn thấy các phần tử quan trọng. Để thực hiện việc này, hãy đặt các phần tử có lề 5% là 48 dp ở bên trái và bên phải, và 27 dp ở đầu và cuối bố cục. Điều này đảm bảo rằng các phần tử màn hình của bố cục nằm trong phạm vi quét quá mức.
Lấp đầy toàn màn hình
Đừng điều chỉnh hoặc cắt các phần tử trên màn hình nền vào vùng an toàn khi quét quá mức. Thay vào đó, hãy cho phép hiển thị một phần các thành phần ngoài màn hình. Điều này đảm bảo rằng tất cả màn hình đều hiển thị chính xác các phần tử nền và phần ngoài màn hình.
Tối ưu hoá bằng các trục
Hãy cân nhắc cách mọi người sử dụng điều khiển từ xa với TV. Đảm bảo giao diện TV dễ sử dụng với điều khiển từ xa. Thiết kế mỗi hướng (lên, xuống, trái, phải) để có mục đích và mẫu điều hướng rõ ràng để giúp người dùng hiểu cách di chuyển qua nhiều nhóm lựa chọn.
Bố cục
Kích thước màn hình TV khác nhau tuỳ theo thiết bị. Vì một TV hiện đại có Tỷ lệ khung hình 16:9, bạn nên thiết kế ứng dụng theo Kích thước màn hình 960 px x 540 px. Điều này đảm bảo tất cả các phần tử đều có thể đổi kích thước tương ứng với màn hình HD hoặc 4K.
Lề thừa
Lề quét quá mức là khoảng cách giữa nội dung và phần cạnh trái và phải của màn hình.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Lề đường viền này bảo vệ các thành phần chính khỏi các vấn đề có thể xảy ra khi quét quá mức. Để giữ an toàn cho nội dung và thông tin của bạn, hãy sử dụng bố cục lề 5% (58 dp ở các cạnh và 28 dp ở cạnh trên và cạnh dưới).
Cột và rãnh
Nội dung được đưa vào các vùng màn hình có cột và rãnh. Hệ thống lưới có 12 cột. Ráng là khoảng cách giữa các cột giúp phân chia nội dung.
Sử dụng 12 cột có chiều rộng 52 dp với khoảng cách giữa chúng là 20 dp. Cần có không gian là 58 dp ở cả hai bên và 4 dp theo chiều dọc giãn cách giữa các dòng.
Mẫu bố cục
Có 3 mẫu bố cục tuỳ theo ý định của bạn mục đích và thiết bị hiển thị: Bố cục ngăn xếp ngang, Bố cục ngăn xếp dọc, và Bố cục lưới.
Bố cục ngăn xếp ngang
Bố cục ngăn xếp ngang sắp xếp các thành phần theo chiều ngang. Các quảng cáo này có thể khác nhau về kích thước, tỷ lệ hoặc định dạng. Bố cục này thường dùng để nhóm nội dung và các thành phần.
Bố cục ngăn xếp dọc
Bố cục ngăn xếp dọc sắp xếp các thành phần theo chiều dọc, mang đến kích thước, tỷ lệ và định dạng linh hoạt. Thông thường, được dùng để nhóm nhiều loại văn bản, thành phần tương tác và mẫu bố cục với nhau.
Bố cục lưới
Lưới là một tập hợp gồm các cột và hàng giao nhau, cùng với một Lưới Bố cục hiển thị nội dung trong lưới này. Khung này sắp xếp nội dung theo logic , giúp người dùng dễ dàng điều hướng và duyệt qua.
Để tránh chồng chéo, cần xem xét khoảng đệm giữa mục và mức tăng kích thước của các trạng thái được đặt tiêu điểm. Ví dụ: khi một tiêu điểm thành phần (như một thẻ) được làm nổi bật. Nếu bạn đang sử dụng Bố cục lưới (12 cột với kích thước 52dp, với rãnh 20dp), hãy xem phần Thẻ dành cho bố cục và bản xem trước thành phần được đề xuất.
Cấu trúc bố cục
Sau đây là một số cấu trúc bố cục để giúp bạn cải thiện khi đưa ra quyết định khi thiết kế bố cục TV. Bằng cách chia màn hình TV theo chiều ngang, nó có thể giúp tách biệt các loại thành phần, truyền đạt thông tin và logic điều hướng. Một ngăn có thể chứa nhiều cột đơn vị. Mỗi bảng điều khiển có thể lưu trữ các mẫu bố cục khác nhau, chẳng hạn như Bố cục ngăn xếp và Bố cục lưới.
Bố cục một ngăn
Bố cục một ngăn có thể giúp người dùng chú ý đến nội dung chính. Hãy dùng tính năng này cho trải nghiệm chuyển tiếp nội dung và các trang thông tin quan trọng.
Bố cục hai ngăn
Bố cục 2 ngăn hoạt động tốt hơn khi trang hiển thị nội dung phân cấp. API này được sử dụng rộng rãi trong các trải nghiệm cần xử lý công việc.
Tình trạng quá tải nhận thức
Nội dung phức tạp và không rõ ràng có thể gây nhầm lẫn, gây khó chịu và sụt giảm tương tác. Đảm bảo thiết kế của bạn dễ đọc, gọn gàng và trình bày rõ ràng chỉ những thông tin thiết yếu.
Tránh sử dụng quá nhiều bảng điều khiển để nhóm các nội dung. Việc này sẽ tạo ra tải và phân cấp nhận thức không cần thiết đối với người dùng.
Nên
Không nên
Hệ thống phân cấp và điều hướng nhanh
Các bảng điều khiển có thể phân tách và sắp xếp nội dung một cách trực quan. Chúng giúp hướng dẫn người dùng, và có thể tạo giao diện trực quan hơn để nâng cao trải nghiệm.
Nên
Không nên
Mẫu bố cục
Mẫu bố cục thúc đẩy thứ tự, tính nhất quán và sự quen thuộc. Thiết kế tạo ra một trải nghiệm giao diện người dùng thoải mái, cho biết rõ nơi của người dùng và nơi họ có thể đến.
Duyệt xem
Mẫu trình duyệt hiển thị các "cụm" nội dung nghe nhìn hoặc hàng trong ngăn xếp dọc. Người dùng di chuyển lên và xuống để duyệt qua các hàng, cũng như di chuyển sang phải và sang trái để duyệt qua nội dung của một hàng cụ thể.
Lớp phủ bên trái
Mẫu điều hướng bên trái hiển thị một bảng điều khiển lớp phủ ở bên trái màn hình. Thẻ này thường hiển thị thao tác điều hướng hoặc các mục mà bạn có thể thao tác trên đó liên quan đến nội dung ở chế độ nền.
Lớp phủ bên phải
Mẫu lớp phủ bên phải hiển thị một bảng điều khiển lớp phủ ở bên phải màn hình. Tính năng này thường hiển thị các mục mà bạn thực hiện một cách độc lập với nội dung ở chế độ nền.
Lớp phủ ở giữa
Mẫu lớp phủ ở giữa hiển thị phần tử phương thức phủ lên trên một chế độ xem hiện có. Hộp cát về quyền riêng tư được dùng để truyền đạt thông tin khẩn cấp hoặc thúc đẩy một quyết định.
Lớp phủ dưới cùng
Mẫu lớp phủ dưới cùng thường được dùng cho các bảng dưới cùng. Bảng dưới cùng là các bề mặt chứa nội dung bổ sung được neo vào cuối màn hình. Chúng cho phép bạn tạo các quy trình nhỏ mà không làm mất ngữ cảnh của trang hiện tại.
Thao tác
Mẫu hành động hiển thị tiêu đề và phụ đề ở bên trái, cùng với các lựa chọn hoặc hành động ở bên phải. Người dùng thường được yêu cầu đưa ra lựa chọn hoặc thực hiện một hành động với mẫu này.
Thông tin chi tiết về nội dung
Mẫu chi tiết nội dung hiển thị nội dung trong Bố cục xếp chồng theo chiều ngang. Nội dung thường bao gồm tiêu đề, siêu dữ liệu, nội dung mô tả ngắn, thao tác nhanh và các cụm thông tin liên quan.
Biên dịch
Mẫu tổng hợp hiển thị thông tin chi tiết về một mục ở bên trái màn hình (chẳng hạn như podcast) cùng các thành phần tương ứng, chẳng hạn như các tập, trên bảng điều khiển bên phải.
Lưới
Mẫu lưới hiển thị các bộ sưu tập nội dung trong một lưới có tổ chức. Ứng dụng này giới thiệu nội dung có logic điều hướng từ xa rõ ràng và trải nghiệm duyệt web tối ưu.
Cảnh báo
Mẫu cảnh báo hiển thị thông báo toàn màn hình. Thông thường, bạn cần thực hiện một thao tác để bỏ chặn cảnh báo và quay lại màn hình trước đó.
Cột thẻ
Bố cục 1 thẻ
Chiều rộng thẻ – 844dp
Bố cục 2 thẻ
Chiều rộng thẻ – 412dp
Bố cục 3 thẻ
Chiều rộng thẻ — 268dp
Bố cục 4 thẻ
Chiều rộng thẻ – 196dp
Bố cục 5 thẻ
Chiều rộng thẻ – 124dp
