Thiết kế hiển thị trên màn hình nhỏ không được giống như phiên bản thu nhỏ của bố cục màn hình lớn. Tương tự, thiết kế hiển thị trên màn hình lớn sẽ không giống như phiên bản hiệu ứng nổi của bố cục màn hình nhỏ. Thay vào đó, thiết kế cần đủ linh hoạt để thích ứng với mọi kích thước màn hình. Một thiết kế thích ứng thành công khai thác tối đa mọi kiểu dáng.
Điều này có nghĩa là một số phần tử giao diện có thể cần phải trông khá khác tuỳ thuộc vào ngữ cảnh xem chúng. Bạn có thể cần phải áp dụng CSS rất khác nhau cho cùng một cơ sở mã HTML để tận dụng tối đa các kích thước màn hình khác nhau. Đó có thể là một thách thức về thiết kế!
Dưới đây là một số thử thách phổ biến mà bạn có thể gặp phải.
Thao tác
Việc hiển thị danh sách đường liên kết điều hướng khá đơn giản trên màn hình lớn. Có nhiều không gian để chứa những đường liên kết đó.
Trên màn hình nhỏ, không gian ở mức cao. Khi thiết kế cho trường hợp này, bạn sẽ muốn ẩn điều hướng phía sau nút. Vấn đề của giải pháp này là người dùng phải thực hiện 2 bước để truy cập vào bất kỳ đâu: mở trình đơn, sau đó chọn một tuỳ chọn. Cho đến khi trình đơn mở ra, người dùng vẫn tự hỏi "tôi có thể đi đâu?"
Cố gắng tìm một chiến lược giúp bạn không làm ẩn thao tác điều hướng. Nếu có một số lượng mục tương đối ít, bạn có thể tạo kiểu cho thành phần điều hướng sao cho phù hợp trên màn hình nhỏ.
Mẫu đó sẽ không mở rộng nếu điều hướng của bạn có nhiều liên kết. Trình đơn điều hướng sẽ trông lộn xộn nếu các đường liên kết xuống thành 2 hoặc 3 dòng trên một màn hình nhỏ.
Một giải pháp khả thi là giữ các liên kết trên một dòng nhưng cắt ngắn danh sách ở cạnh màn hình. Người dùng có thể vuốt ngang để xem các đường liên kết không hiển thị ngay. Đây là mẫu tràn.
Ưu điểm của kỹ thuật này là nó có thể điều chỉnh theo chiều rộng bất kỳ của thiết bị và số lượng đường liên kết bất kỳ. Nhược điểm là người dùng có thể bỏ lỡ các đường liên kết không nhìn thấy lúc đầu. Nếu bạn sử dụng kỹ thuật này cho thành phần điều hướng chính, hãy đảm bảo một số đường liên kết đầu tiên là những đường liên kết quan trọng nhất và thể hiện một cách trực quan rằng có nhiều mục khác trong danh sách. Ví dụ trước sử dụng độ dốc cho chỉ báo này.
Khi không còn cách nào khác, bạn có thể chọn ẩn thành phần điều hướng theo mặc định và cung cấp cơ chế bật/tắt để người dùng hiện và ẩn nội dung. Đây được gọi là thông tin công bố tăng dần.
Hãy đảm bảo rằng nút bật/tắt màn hình điều hướng đã được gắn nhãn. Đừng dựa vào biểu tượng để hiểu ứng dụng.
Một biểu tượng không có nhãn là chức năng chỉ đường "thịt bí ẩn" – người dùng sẽ không biết có gì trong đó cho đến khi họ nhấp vào đó. Cung cấp nhãn văn bản để cho người dùng biết nội dung mà nút sẽ hiển thị.
Các quảng cáo dạng băng chuyền
Đúng với những nội dung khác thì điều hướng cũng đúng với những nội dung khác: dù sao cũng cố gắng không che giấu bất cứ thứ gì. Băng chuyền là một phương pháp phổ biến để ẩn nội dung. Giao diện này có thể trông khá gọn gàng, nhưng có khả năng cao là người dùng sẽ không bao giờ khám phá ra nội dung bị ẩn. Băng chuyền giúp giải quyết vấn đề về mặt tổ chức (như nội dung nên xuất hiện trên trang chủ) hiệu quả hơn so với khả năng phân phát cho người dùng.
Tuy nhiên, khi không gian có quá nhiều nội dung, băng chuyền có thể giúp một trang trở nên quá dài và lộn xộn. Bạn có thể áp dụng phương pháp kết hợp: hiển thị nội dung trong băng chuyền cho màn hình nhỏ, nhưng hiển thị cùng nội dung trong lưới cho màn hình lớn hơn.
Đối với màn hình hẹp, hãy hiển thị các mục trong một hàng bằng flexbox. Hàng các mục sẽ mở rộng ra ngoài cạnh của màn hình. Sử dụng overflow-x: auto để cho phép vuốt theo chiều ngang.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Thuộc tính scroll-snap đảm bảo rằng người dùng có thể vuốt các mục theo cách mượt mà. Nhờ có scroll-snap-type: inline mandatory, các mục sẽ vào đúng vị trí.
Khi màn hình đủ lớn (rộng hơn 50em trong trường hợp này), hãy chuyển sang chế độ lưới và hiển thị các mục trong hàng và cột mà không ẩn bất kỳ mục nào.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Điều quan trọng là một mục trong chế độ xem băng chuyền không chiếm toàn bộ chiều rộng. Nếu có, sẽ không có dấu hiệu nào cho thấy nội dung khác có sẵn bên ngoài cạnh của khung nhìn.
Băng chuyền là một ví dụ khác về mẫu tràn trong thực tế. Nếu có nhiều mục mà mọi người có thể duyệt qua, bạn có thể tiếp tục sử dụng mẫu mục bổ sung ngay cả trên màn hình lớn, bao gồm cả TV. Công cụ cuộn nội dung nghe nhìn này sử dụng nhiều băng chuyền để quản lý một số lượng đáng kể các lựa chọn.
Xin nhắc lại, các thuộc tính scroll-snap đảm bảo rằng quá trình tương tác diễn ra suôn sẻ. Ngoài ra, hãy lưu ý rằng các hình ảnh trong băng chuyền đã được áp dụng loading="lazy". Trong trường hợp này, hình ảnh không nằm dưới màn hình đầu tiên, chúng nằm ngoài cạnh nhưng cũng áp dụng cùng một nguyên tắc: nếu người dùng không bao giờ vuốt đến mục đó, hình ảnh sẽ không được tải xuống, tiết kiệm băng thông.
Với việc thêm JavaScript, bạn có thể thêm các chế độ điều khiển tương tác vào băng chuyền. Thậm chí, bạn còn có thể làm cho thiết bị tự động chuyển qua các mục. Tuy nhiên, hãy suy nghĩ kỹ và chăm chỉ trước khi thực hiện. Tự động phát có thể hoạt động nếu băng chuyền là nội dung duy nhất trên trang, nhưng băng chuyền tự động phát sẽ gây khó chịu nếu ai đó đang cố gắng tương tác với nội dung khác (chẳng hạn như đọc văn bản). Bạn có thể đọc thêm các phương pháp hay nhất về băng chuyền.
Bảng dữ liệu
Phần tử table là phần tử hoàn hảo để xây dựng cấu trúc dữ liệu dạng bảng; các hàng và cột thông tin liên quan. Tuy nhiên, nếu bảng quá lớn thì có thể làm hỏng bố cục màn hình nhỏ.
Bạn có thể áp dụng mẫu tràn cho bảng. Trong ví dụ này, bảng được gói trong một div có lớp table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Nguyên tắc
Mẫu mục bổ sung là một giải pháp phù hợp cho màn hình nhỏ nhưng hãy đảm bảo rằng nội dung ngoài màn hình có thể truy cập được. Cân nhắc đặt bóng hoặc độ dốc trên cạnh nơi nội dung bị cắt bớt.
Tiết lộ tiến trình là một cách hữu ích để tiết kiệm không gian, nhưng hãy cẩn thận khi sử dụng tính năng này cho nội dung rất quan trọng. Hành động này phù hợp hơn với các hành động phụ. Đảm bảo rằng thành phần trên giao diện kích hoạt thông tin công bố được gắn nhãn rõ ràng; đừng chỉ dựa vào biểu tượng.
Trước tiên, hãy thiết kế cho màn hình nhỏ hơn. Bạn có thể dễ dàng điều chỉnh thiết kế màn hình nhỏ cho phù hợp với màn hình lớn hơn so với cách khác. Nếu trước tiên bạn thiết kế cho màn hình lớn, thiết kế màn hình nhỏ của bạn sẽ có nguy cơ trở nên kém chất lượng.
Để biết thêm các mẫu thành phần trên giao diện người dùng và bố cục, hãy khám phá phần Mẫu trên web.dev.
Khi bạn điều chỉnh các phần tử giao diện cho phù hợp với các kích thước màn hình, truy vấn nội dung nghe nhìn sẽ rất hữu ích cho việc xác định kích thước của thiết bị. Nhưng các tính năng đa phương tiện như min-width và min-height mới chỉ là khởi đầu. Tiếp theo, bạn sẽ khám phá hàng loạt tính năng đa phương tiện khác.