Phần này cung cấp nguyên tắc thiết kế cho bố cục màn hình có thể được điều chỉnh theo tỷ lệ trên nhiều kích thước màn hình.
Giá trị khoảng đệm và keyline xác định ở đây được dùng trong Thành phần, Thông số phương tiện, Thông số của Trung tâm thông báo và Thông số kỹ thuật của trình quay số.
Tóm tắt về hướng dẫn (Tóm tắt):
- Bố cục dựa trên các danh mục kích thước màn hình thích hợp
- Dùng lưới 8 dp để căn chỉnh
- Đặt độ rộng lề thành 12% không gian làm việc của ứng dụng
- Đặt thanh cuộn và phương thức hỗ trợ điều hướng ở lề
- Sử dụng khoảng đệm tạo khoảng cách cố định giữa các thành phần
Các khái niệm chính về bố cục
- Không gian làm việc của ứng dụng: Khu vực màn hình mà ứng dụng có thể dùng sau khi chiếm không gian màn hình của nhà sản xuất ô tô và các tính năng trên giao diện người dùng của hệ thống
- Danh mục kích thước màn hình: Một tập hợp gồm 4 phạm vi chiều rộng màn hình (tiêu chuẩn, rộng, cực rộng và siêu rộng) và 3 phạm vi chiều cao màn hình (ngắn, chuẩn và cao), trong đó "màn hình" chỉ không gian làm việc của ứng dụng chứ không phải toàn bộ không gian từ cạnh này sang cạnh kia
- Khoảng đệm: Tập hợp các giá trị khoảng cách chỉ định khoảng cách theo chiều dọc và chiều ngang cố định giữa các phần tử và thành phần trong một bố cục
- Keyline: Một tập hợp các giá trị khoảng cách có độ rộng thay đổi (được xác định theo danh mục chiều rộng) cho biết khoảng cách theo chiều ngang giữa lề hoặc cạnh thành phần và một phần tử trong bố cục
- Khu vực linh hoạt: Là một phần của một thành phần, đôi khi được gán giá trị tối thiểu hoặc tối đa, có thể được điều chỉnh theo tỷ lệ cho phù hợp với kích thước màn hình
Không gian làm việc của ứng dụng
Không gian làm việc của ứng dụng là khu vực màn hình còn lại sau khi tính đến không gian màn hình của nhà sản xuất ô tô và các tính năng giao diện người dùng của hệ thống. Không gian làm việc của ứng dụng được dự định bao gồm lề trái và phải cùng canvas ứng dụng, vốn là khu vực nội dung chính của ứng dụng.
Mỗi lề phải bằng 12% chiều rộng không gian làm việc của ứng dụng. Lề thường chứa thanh cuộn và thành phần điều hướng tương tác cho ứng dụng.
Kích thước màn hình
Bố cục tham chiếu kỹ thuật được khoá theo một tập hợp các danh mục kích thước màn hình dựa trên chiều rộng và chiều cao của không gian làm việc của ứng dụng.
Trong thông số kỹ thuật trong suốt các nguyên tắc này, các danh mục này được gọi theo tên. Ví dụ: "Rộng" dùng để chỉ tất cả chiều rộng của màn hình trong khoảng từ 930 dp đến 1279 dp.
Danh mục kích thước màn hình ảnh hưởng đến các đề xuất về:
- Giãn cách dòng phím trong thành phần và phần tử
- Điều chỉnh tỷ lệ các vùng linh hoạt thành phần
- Thời điểm ẩn hoặc hiển thị các thành phần không bắt buộc, chẳng hạn như ảnh bìa đĩa nhạc trên thanh điều khiển thu nhỏ
Danh mục chiều rộng
| Tiêu chuẩn | Rộng | Siêu rộng | Siêu rộng | |
|---|---|---|---|---|
| Phạm vi chiều rộng màn hình | 690 – 929dp | 930 – 1279dp | 1280 – 1919dp | ≥ 1920dp |
Danh mục chiều cao
| Video ngắn | Tiêu chuẩn | Cao | |
|---|---|---|---|
| Phạm vi chiều cao màn hình | 0 – 609dp | 610 – 1199dp | ≥ 1200dp |
Giãn cách
Bố cục thông số tham chiếu được cấu trúc trên lưới 8 dp. Trong thực tế, điều này có nghĩa là các thành phần giao diện người dùng và các thành phần trong thông số kỹ thuật được đặt cách nhau theo bội số của 8 dp.
Có hai loại khoảng cách:
Khoảng đệm, cho khoảng cách theo chiều rộng cố định và chiều cao cố định
Keyline, cho khoảng cách có độ rộng thay đổi
Khoảng đệm
Khoảng đệm thiết lập khoảng cách theo chiều rộng cố định và chiều cao cố định giữa các thành phần trong bố cục thông số kỹ thuật tham chiếu. Điều này cũng có thể quy định khoảng cách cố định giữa các thành phần trong một thành phần, chẳng hạn như khoảng cách giữa các mục tiêu số liền kề trên thành phần bàn phím số. Thông thường, mối quan hệ giữa hai thành phần càng gần nhau thì khoảng đệm giữa chúng càng hẹp.
Có 9 giá trị khoảng đệm, được chỉ định là P0 – P8.
Dưới đây là các giá trị khoảng đệm và kích thước tương ứng của các giá trị đó:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4 dp | 8 dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
Không giống như keylines (keyline) thay đổi giá trị khoảng cách dựa trên danh mục chiều rộng màn hình, giá trị khoảng đệm vẫn không đổi. Ví dụ: P1 luôn là 8 dp. Tuy nhiên, trong một số trường hợp, khoảng cách giữa một tập hợp các thành phần hoặc thành phần cụ thể có thể có các giá trị khoảng đệm khác nhau trong các bố cục tham chiếu-thông số kỹ thuật cho các kích thước màn hình khác nhau. Ví dụ: khoảng cách dọc được đề xuất giữa các mục trong lưới là P4 cho màn hình ngắn và P5 cho màn hình tiêu chuẩn và màn hình cao.
Keyline
Thay vì cho biết khoảng đệm giữa các phần tử trong thông số tham chiếu, keyline chỉ định khoảng cách một phần tử tính từ lề hoặc cạnh gần nhất của thành phần. Keyline thay đổi giá trị dựa trên chiều rộng màn hình. Loại quảng cáo này cung cấp cách thuận tiện để điều chỉnh bố cục theo các kích thước màn hình khác nhau trong khi vẫn duy trì khoảng cách cân xứng, theo chiều ngang của các phần tử.
Có 5 keyline, được ký hiệu từ KL0 đến KL4.
Dưới đây là các giá trị keyline cho từng chiều rộng màn hình:
| Chiều rộng màn hình | Tiêu chuẩn | Rộng | Siêu rộng | Siêu rộng |
|---|---|---|---|---|
| KL0 | 16dp | 24dp | 24dp | 32dp |
| KL1 | 24dp | 32dp | 32dp | 48dp |
| KL2 | 96dp | 112dp | 112dp | 112dp |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | 168dp |
Chiến lược mở rộng quy mô
Bố cục tham chiếu kỹ thuật cung cấp nguyên tắc để điều chỉnh tỷ lệ ứng dụng theo nhiều kích thước màn hình. Để giúp quá trình mở rộng diễn ra suôn sẻ, thông số kỹ thuật thường bao gồm:
- Khu vực linh hoạt là một thành phần mà các nhà sản xuất ô tô nên mở rộng hoặc thu gọn để vừa với kích thước màn hình cụ thể của họ
- Chiều rộng tối thiểu và tối đa nên dùng không bắt buộc cho vùng linh hoạt, nhằm ngăn việc điều chỉnh tỷ lệ các thành phần theo kích thước không mong muốn
- Keyline dùng để duy trì khoảng cách tỷ lệ theo chiều ngang của các thành phần, thay đổi tỷ lệ theo cách khác nhau dựa trên danh mục chiều rộng màn hình
- Khoảng đệm, để chỉ định khoảng cách cố định giữa các thành phần và phần tử
Một số thông số kỹ thuật sẽ chỉ định tuỳ chọn ẩn hay hiển thị một số thành phần dựa trên chiều rộng màn hình.
Ví dụ 1: Thanh điều khiển được thu nhỏ
Thanh điều khiển được giảm thiểu là một ví dụ về thành phần mà bố cục tham chiếu-thông số kỹ thuật đề xuất bạn uốn cong chiều rộng thành phần và ẩn một phần tử không cần thiết ở kích thước màn hình nhỏ hơn.
Thông số kỹ thuật của thanh điều khiển thu nhỏ bao gồm 2 nguyên tắc điều chỉnh theo tỷ lệ:
- Phần tử hình vuông ở bên trái (thường dùng cho ảnh bìa album) chỉ nên xuất hiện khi chiều rộng màn hình từ 930dp trở lên, và
- Phần chiều rộng linh hoạt ở giữa không được hẹp hơn 440 dp và có thể điều chỉnh tỷ lệ cho các màn hình rộng hơn miễn là toàn bộ chiều rộng thành phần không vượt quá 1028 dp.
Ví dụ 2: Lưới
Lớp phủ là một ví dụ về các thành phần có thể được đặt và định kích thước trong cột và hàng trong một bố cục.
Số cột đề xuất (3 cột cho màn hình hẹp, 4 cột cho màn hình rộng) phụ thuộc vào kích thước màn hình. Bạn có thể điều chỉnh chiều rộng cột và chiều cao hàng trong một danh mục màn hình miễn là lưới không bao giờ nhỏ hơn chiều rộng tối thiểu được đề xuất. Ảnh động dưới đây cho thấy cách điều chỉnh lưới thành màn hình rộng và hẹp hơn bằng cách làm theo các đề xuất trong bố cục tham chiếu.
