Bố cục là các mẫu có cấu trúc cung cấp một khung để duy trì tính nhất quán về hình ảnh trên ứng dụng của bạn. Bằng cách xác định lưới, khoảng cách và các phần trực quan, bố cục sẽ thiết lập một cấu trúc liền mạch và có tổ chức để trình bày thông tin và các phần tử trên giao diện người dùng.
Tiêu điểm
- Không giống như web hay thiết bị di động, TV có tỷ lệ 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 TV trở nên phổ biến, TV hình chữ nhật có tỷ lệ khung hình 16:9 đã trở thành tiêu chuẩn. Trước đây, 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 trên 1.
Thiết kế trên nền tảng Android
Khi thiết kế, hãy sử dụng dp để hiển thị đồng nhất các phần tử trên màn hình có mật độ khác nhau, tương tự 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.
Ở MDPI 1px = 1dp.
Thành phần cần phải ở độ 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 giám sát và quét quá mức an toàn
Đảm bảo các thành phần quan trọng luôn hiển thị cho người dùng. Để làm việc này, hãy định vị các phần tử có lề 5% là 48 dp ở bên trái và bên phải, cũng như 27 dp ở trên cùng và dưới cùng của bố cục. Điều này đảm bảo rằng các thành phần 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 thành phần màn hình nền sang vùng an toàn 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ả các màn hình hiển thị chính xác các phần tử nền và ngoài màn hình.
Tối ưu hoá bằng các trục
Xem xét cách mọi người sử dụng điều khiển từ xa với TV. Đảm bảo rằng giao diện TV của bạn dễ sử dụng với điều khiển từ xa. Thiết kế từng 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 nắm được cách di chuyển qua các nhóm tuỳ chọn lớn.
Bố cục
Kích thước màn hình TV sẽ khác nhau tuỳ theo thiết bị. TV hiện đại có tỷ lệ khung hình 16:9, do đó bạn nên thiết kế ứng dụng của mình với 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 thành phần đều có thể được thay đổi kích thước theo tỷ lệ cho màn hình HD hoặc 4K.
Quét thừa lề
Lề quét quá mức là khoảng cách giữa nội dung, cạnh trái và cạnh phải của màn hình.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Các đường viền này bảo vệ các thành phần chính khỏi các vấn đề có thể 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à máng xối
Nội dung được đưa vào những khu vực của màn hình có cột và rãnh. Hệ thống lưới có 12 cột. Máng xối 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 các cột 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ữa các dòng.
Mẫu bố cục
Có 3 mẫu bố cục tuỳ thuộc vào mục đích dự kiến và thiết bị hiển thị của bạn: 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 theo chiều ngang
Bố cục ngăn xếp theo chiều ngang sắp xếp các thành phần theo chiều ngang. Chúng có thể khác nhau về kích thước, tỷ lệ hoặc định dạng. Bố cục này thường được dùng để nhóm nội dung và 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, cho phép kích thước, tỷ lệ và định dạng linh hoạt. Thuộc tính này thường 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 lại 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, và một Bố cục lưới hiển thị nội dung trong lưới này. Bố cục này sắp xếp nội dung theo cách hợp lý, giúp người dùng dễ dàng điều hướng và duyệt qua.
Để tránh sự trùng lặp, bạn cần phải xem xét khoảng đệm giữa các mục và mức tăng kích thước của các trạng thái tập trung. Ví dụ: khi một thành phần được lấy tiêu điểm (như thẻ) được làm nổi bật. Nếu bạn đang sử dụng Bố cục lưới được đề xuất của chúng tôi (12 cột trong 52 dp, với rãnh trong 20 dp), hãy xem Thẻ để biết bố cục và bản xem trước thành phần được đề xuất.
Cấu trúc bố cục
Dưới đây là một số cấu trúc bố cục giúp bạn đưa ra quyết định sáng suốt hơn khi thiết kế bố cục TV. Bằng cách chia màn hình TV theo chiều ngang, bạn có thể tách riêng nhiều loại thành phần, truyền đạt hệ phân cấp 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 thu hút sự chú ý đến nội dung chính. Hãy sử dụng API này với trải nghiệm đề cao nội dung và các trang thông tin quan trọng.
Bố cục hai ngăn
Bố cục gồm 2 ngăn hoạt động hiệu quả 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 hướng công việc.
Tình trạng quá tải về 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, khó chịu và giảm mức độ tương tác. Hãy làm cho thiết kế của bạn dễ đọc, không lộn xộn và chỉ trình bày thông tin quan trọng.
Tránh sử dụng quá nhiều bảng điều khiển để nhóm nội dung lại với nhau. Điều này sẽ tạo ra lưu lượng nhận thức và hệ phân cấp không cần thiết cho người dùng.
Nên
Không nên
Trình 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. Các API này giúp hướng dẫn người dùng và có thể tạo ra một giao diện trực quan hơn giúp nâng cao trải nghiệm.
Nên
Không nên
Mẫu bố cục
Các mẫu bố cục thúc đẩy trật tự, tính nhất quán và sự quen thuộc. Thiết kế này tạo ra một trải nghiệm giao diện người dùng thoải mái, thông báo rõ ràng vị trí và địa điểm của người dùng.
Duyệt xem
Mẫu trình duyệt hiển thị "các cụm" hoặc hàng nội dung nghe nhìn trong một ngăn xếp dọc. Người dùng điều hướng lên và xuống để duyệt qua các hàng và điều hướng sang phải và 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. Cửa sổ này thường hiển thị thành phần điều hướng hoặc các mục mà bạn có thể thao tác có liên quan đến nội dung trong 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. Cửa sổ này thường hiển thị các mục mà bạn hoạt động độc lập với nội dung trong nền.
Lớp phủ giữa
Mẫu lớp phủ ở giữa hiển thị một phần tử phương thức phủ lên trên chế độ xem hiện có. Mã này được dùng để thông báo thông tin khẩn cấp hoặc đưa ra 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 trang tính dưới cùng. Bảng dưới cùng là các bề mặt chứa nội dung bổ sung nằm cố định ở cuối màn hình. Chúng cho phép bạn tạo các luồng 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, 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 một lựa chọn hoặc thực hiện 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 ở 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, đoạn 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ư một podcast) cùng với các phần tử tương ứng (ví dụ: 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 sắp xếp. Trang này trình bày 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 thông báo hiển thị thông báo toàn màn hình. Thường thì bạn sẽ phải thực hiện một thao tác để bỏ chặn cảnh báo rồi quay lại màn hình trước đó.
Cột thẻ
1 bố cục 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
