Bố cục chuẩn

Nhiều bố cục có thể được thiết lập dựa trên mối quan hệ của danh sách và chế
độ xem chi tiết.

Các trường hợp sử dụng chính cho bố cục này bao gồm các cặp thông tin cha-
con như:

 Tin nhắn văn bản + cuộc trò chuyện

 Trình duyệt tệp + mở thư mục

 Nghệ sĩ âm nhạc + chi tiết album

 Cài đặt + chi tiết danh mục

 Hộp thư đến email + email đã chọn

1. Danh sách

2. Chi tiết

Cách sử dụng

Sử dụng chế độ xem chi tiết danh sách để hiển thị nội dung có thể duyệt và
nhanh chóng hiển thị chi tiết.

Các ví dụ bao gồm: hiển thị một loạt cuộc hội thoại và tin nhắn văn bản; duyệt
các tệp và xem chi tiết của chúng; hoặc duyệt nhiều album và xem thông tin bản
nhạc riêng lẻ trong chế độ xem liền kề.

Sơ đồ đơn giản của:

1. khu vực danh sách

2. khu vực chi tiết

ngăn chia không gian

Chế độ xem chi tiết danh sách cơ bản nhất cho bố cục nhỏ gọn, trung bình và
mở rộng

Dạng xem chi tiết danh sách sử dụng hai ngăn: một ngăn dành cho danh sách
hoặc nhóm mục và ngăn còn lại dành cho dạng xem chi tiết. Tùy thuộc vào loại
cửa sổ, hai ngăn có thể xuất hiện cùng nhau trong cùng một bố cục hoặc trên các
bố cục riêng biệt.

Bố cục chính tắc chi tiết danh sách sử dụng hướng dẫn ngăn giống như tất cả các
bố cục một ngăn và hai ngăn, bao gồm cả hành vi đặc biệt cho các sản phẩm có
thể gập lại.

Lớp kích thước cửa sổ (dp) Các ô có thể nhìn thấy

Nhỏ gọn (0-599) 1 ngăn

Trung bình (600-839) 1 (được khuyến nghị) hoặc 2 ngăn

Mở rộng (840+) 2 tấm

Trên các lớp kích thước cửa sổ

gọn nhẹ

 Sử dụng bố cục một cửa sổ

 Mỗi lần chỉ hiển thị một chế độ xem (danh sách hoặc chi tiết)

1. Điện thoại theo hướng dọc

2. đóng cửa có thể gập lại

 3. Máy tính bảng ở chế độ chia đôi màn hình

Trung bình

 Sử dụng bố cục một cửa sổ cho nội dung dày đặc thông tin hoặc các tương
tác dài hơn

1. Có thể gập lại mở phẳng

2. Máy tính bảng theo hướng dọc

 Sử dụng bố cục hai ngăn cho nội dung dày đặc thông tin hoặc tương tác
nhanh hơn

 Để tránh chiều rộng ngăn chật chội, hãy sử dụng thanh điều hướng dưới cùng
hoặc ngăn điều hướng phương thức với bố cục hai ngăn chỉ ở mức trung bình
 1. Có thể gập lại mở phẳng

2. Máy tính bảng theo hướng dọc

mở rộng

 Sử dụng bố cục hai ngăn

1. Điện thoại ở hướng ngang

2. Máy tính bảng theo hướng ngang

Hành vi

Đơn so với hai ngăn

 Nút Lên: Chỉ xuất hiện ở chế độ xem chi tiết đối với bố cục một ngăn

 Trạng thái đã chọn: Chỉ xuất hiện trong chế độ xem danh sách đối với bố cục
hai ngăn

 Tiêu điểm trực quan: Sử dụng nhóm rõ ràng và tiềm ẩn để hướng tiêu điểm
trong bố cục hai ngăn

Bố cục hai ngăn và bố cục một ngăn

Chuyển đổi giữa các bố cục

Lượng không gian có sẵn là động và thay đổi dựa trên hành vi của người dùng,
chẳng hạn như xoay hoặc mở thiết bị hoặc vào chế độ nhiều cửa sổ.

Bố cục chi tiết danh sách hai ngăn thích ứng với bố cục một ngăn khi xoay
thiết bị, thay đổi từ loại cửa sổ mở rộng sang loại cửa sổ trung bình

Từ bố cục một ngăn đến hai ngăn:

Nếu ngăn danh sách hiển thị: Ngăn chi tiết xuất hiện hiển thị trạng thái giữ chỗ
(nghĩa là không có mục nào được chọn)

Nếu không có mục nào trong chế độ xem danh sách được chọn khi mở một
cửa sổ có thể gập lại, thì ngăn được hiển thị sẽ hiển thị chế độ xem chi tiết
trống

Nếu ngăn chi tiết hiển thị: Ngăn danh sách và ngăn chi tiết hiện được chọn sẽ
xuất hiện. Khung danh sách hiện hiển thị trạng thái của mục đã chọn.
 Nếu một mục trong danh sách được chọn khi mở một mục có thể gập lại, thì
ngăn được hiển thị sẽ hiển thị chế độ xem chi tiết của mục đó

Từ bố cục hai ngăn đến một ngăn:

Nếu một mục danh sách hiện được chọn: Ngăn chi tiết vẫn hiển thị và ngăn danh
sách ẩn, thanh ứng dụng trên cùng xuất hiện.

Nếu một mục trong danh sách được chọn khi đóng cửa sổ có thể gập lại, chế
độ xem danh sách sẽ bị ẩn và chế độ xem chi tiết được hiển thị trong một
ngăn

Nếu không có mục danh sách nào được chọn: Ngăn danh sách vẫn hiển thị và
ngăn chi tiết ẩn.

Trong một số trường hợp sử dụng, chẳng hạn như đa lựa chọn, ngăn được tương
tác lần cuối sẽ vẫn hiển thị.

Nếu không có mục nào trong danh sách được chọn khi đóng cửa sổ có thể gập
lại, chế độ xem chi tiết sẽ bị ẩn và chế độ xem danh sách được hiển thị trong
một ngăn

Trong hầu hết các trường hợp, trạng thái sẽ được lưu khi điều hướng giữa các
chế độ xem chi tiết. Chế độ xem chi tiết có nội dung đã đọc và chưa đọc thuộc
trường hợp sử dụng này.

Vị trí cuộn của chế độ xem chi tiết được giữ lại ngay cả sau khi điều hướng
đến các mục danh sách khác

2.

Trên các lớp kích thước cửa sổ

Bố cục khung hỗ trợ tổ chức nội dung thành các khu vực chính và phụ.

Khu vực chính chiếm phần lớn diện tích cơ thể và chứa nội dung chính. Khu vực
phụ chứa nội dung hỗ trợ.

Các trường hợp sử dụng chính để hỗ trợ bố cục ngăn bao gồm:

 Năng suất

 Chỉnh sửa tài liệu và bình luận

 Duyệt nội dung và phương tiện

Bố cục khung hỗ trợ tổ chức nội dung thành các khu vực chính và phụ

Cách sử dụng

Sử dụng bố cục ngăn hỗ trợ khi nội dung phụ chỉ có ý nghĩa liên quan đến nội
dung chính.

Đối với nội dung có mối quan hệ cha-con, thay vào đó hãy sử dụng bố cục dạng
xem chi tiết danh sách.
 Sơ đồ đơn giản hóa bố trí ngăn hỗ trợ

ngăn chia không gian

Màn hình được phân chia giữa ngăn tiêu điểm và ngăn hỗ trợ.

Tùy thuộc vào loại kích thước cửa sổ, ngăn hỗ trợ có thể xuất hiện bên dưới
hoặc bên cạnh ngăn tiêu điểm.

Sơ đồ của một ngăn hỗ trợ được định vị bên dưới vùng tiêu điểm chính
 chiều rộng
Vị trí khung hỗ trợ Lớp kích thước cửa sổ
khung

Nhỏ gọn hoặc Trung

Dưới Linh hoạt
bình

Bên trái hoặc bên

Đã sửa (360 dp) mở rộng
phải

Trên các lớp kích thước cửa sổ

gọn nhẹ

 Khung hỗ trợ sẽ xuất hiện bên dưới khung tiêu điểm

 Bảng dưới cùng có thể hữu ích để tập trung vào ngăn chính trong khi cung
cấp quyền truy cập vào thông tin hỗ trợ

Ngăn hỗ trợ bên dưới ngăn tiêu điểm chính trong bố cục nhỏ gọn

Trung bình

 Khung hỗ trợ sẽ xuất hiện bên dưới khung tiêu điểm

 Ngăn hỗ trợ bên dưới ngăn tiêu điểm chính trong bố cục trung bình

mở rộng

 Khung hỗ trợ sẽ xuất hiện ở bên trái hoặc bên phải của khung tiêu điểm

Ngăn hỗ trợ ở phần cuối của ngăn tiêu điểm chính trong bố cục mở rộng

Bố cục nguồn cấp dữ liệu sử dụng bố cục dạng lưới để cho phép duyệt và khám
phá nội dung nhanh chóng.

Các trường hợp sử dụng chính cho bố cục ngăn hỗ trợ bao gồm:

 Tin tức

 ảnh

 Truyền thông xã hội

 Ứng dụng ảnh sử dụng bố cục nguồn cấp dữ liệu

Cách sử dụng

Sử dụng bố cục nguồn cấp dữ liệu để hiển thị các phần nội dung khác nhau
thông qua thẻ và danh sách.

Nguồn cấp dữ liệu hỗ trợ hiển thị ở hầu hết mọi kích thước vì lưới có thể điều
chỉnh từ một cột thành nhiều cột.

Các ứng dụng tin tức mẫu sử dụng bố cục nguồn cấp dữ liệu cho các lớp kích
thước cửa sổ nhỏ gọn và trung bình

ngăn chia không gian

Thành phần nguồn cấp dữ liệu đủ linh hoạt để cho phép nội dung có tỷ lệ và
kích thước khác nhau.

Ví dụ về bố cục nguồn cấp dữ liệu có hai cột

Sử dụng kích thước và vị trí để thiết lập mối quan hệ giữa các yếu tố nội dung.

Các mục nguồn cấp dữ liệu sẽ được chỉnh lại dòng khi lượng không gian có sẵn
thay đổi, chẳng hạn như xoay hoặc mở thiết bị hoặc vào chế độ nhiều cửa sổ.

Thứ tự của các mục được xác định bởi vị trí của chúng. Tìm hiểu thêm: Hướng
dẫn bố cục đáp ứng thẻ

Ứng dụng tin tức có bố cục nguồn cấp dữ liệu bằng hai cột
Trên các lớp kích thước cửa sổ

gọn nhẹ

 Bố cục nguồn cấp dữ liệu xếp theo chiều dọc giống như danh sách thẻ, với
các mục riêng lẻ chiếm chiều rộng của ngăn nhưng không nhất thiết chiếm
toàn bộ chiều cao

Thẻ trong hai bố cục nguồn cấp dữ liệu cho lớp kích thước cửa sổ nhỏ gọn

Trung bình

 Bố cục nguồn cấp dữ liệu có thể hỗ trợ các thành phần có độ rộng khác nhau
và được chia thành nhiều cột
 Thanh điều hướng và thẻ trong bố cục nguồn cấp dữ liệu cho lớp kích thước
cửa sổ trung bình

mở rộng

 Bố cục nguồn cấp dữ liệu có thể hỗ trợ các thành phần có chiều rộng khác
nhau và được chia thành nhiều cột. Số cột nội dung thường tăng lên đối với
các lớp kích thước cửa sổ mở rộng.

Số cột tăng từ hai lên ba trong lớp kích thước cửa sổ mở rộng

Hành vi

Các mục nguồn cấp dữ liệu sẽ được chỉnh lại dòng khi lượng không gian có sẵn
thay đổi, chẳng hạn như xoay hoặc mở thiết bị hoặc vào chế độ nhiều cửa
sổ. Thứ tự của các mục được xác định bởi vị trí của chúng. Tìm hiểu
thêm: Hướng dẫn bố cục đáp ứng thẻ