Android có nhiều loại thiết bị, hình dạng và kích thước màn hình. Do đó, việc thiết kế cho các bố cục hoàn hảo đến từng pixel không chỉ không hiệu quả mà còn có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng. Thay vào đó, hãy thiết kế, xây dựng và suy nghĩ một cách thích ứng. Gần đây, chúng tôi đã giới thiệu các API mới mang đến một số khái niệm thiết kế quen thuộc để giúp tạo bố cục thích ứng.
Pawparazzi là một ứng dụng mẫu minh hoạ những khái niệm này. Ứng dụng này được thiết kế và xây dựng để làm nổi bật thiết kế thích ứng bằng cách sử dụng các API thích ứng, chẳng hạn như Lưới và Flexbox.
Tư duy thích ứng không chỉ là vấn đề thiết kế bằng điểm ngắt mà còn là tư duy về nội dung trong các vùng chứa linh hoạt.
Mọi thứ đều là lưới!
Việc có một nền tảng để cấu trúc nội dung giúp bạn thực hành thiết kế hiệu quả và có thể giúp bạn quyết định cách điều chỉnh nội dung. Android có một lưới cơ sở 8 dp cơ bản mà chúng ta có thể căn chỉnh tất cả nội dung theo ở cấp độ vi mô.
Pawparazzi sử dụng lưới bố cục phân cấp, thay vì lưới mô-đun đồng đều hoặc lưới cột một chiều. Điều này có nghĩa là các cột và hàng tạo nên lưới này được quyết định dựa trên hệ thống phân cấp nội dung.
Việc quyết định loại lưới phải phụ thuộc vào nội dung. Bắt đầu với nội dung ứng dụng và suy nghĩ về cách nhóm nội dung. Điều này giúp xác định cấu trúc bố cục tổng thể. Hãy xem Lưới và đơn vị, Cấu trúc nội dung và bắt đầu trên máy tính để biết thêm thông tin về cách suy nghĩ theo ngăn.
Đối với Pawparazzi, mục tiêu chính là xem thú cưng của nhóm theo nhiều cách, bắt đầu bằng phần Tổng quan về thú cưng, Chi tiết về thú cưng, sau đó là thú cưng được xếp hạng. Điều này có nghĩa là thư viện thú cưng sẽ chiếm ngăn nội dung chính và nhiều phần hơn trong lưới, sau đó là các phần tử điều hướng và bộ lọc. Khi có thêm không gian, thư viện này có thể mở rộng trên nhiều hàng, nhiều thú cưng hơn và hiển thị thông tin chi tiết về thú cưng cùng một lúc. Nguyên tắc thích ứng này là hiển thị hoặc cho thấy nhiều nội dung hơn trên bố cục lớn hơn.
Việc xem xét mục tiêu chính của ứng dụng và nội dung đã giúp xác định cách thức và thời điểm lưới bố cục cần thích ứng: kích thước lớp cửa sổ, vị trí bản lề và hướng thiết bị.
Trong lưới bố cục, các lưới con giúp xây dựng cấu trúc nội dung linh hoạt hơn. Bản thân các thư viện cũng là một lưới. Đối với kích thước nhỏ gọn, hãy dùng lưới 2 cột.
Lưới là một khái niệm bố cục theo hai hướng, vì vậy nội dung có thể xuất hiện theo cả hướng ngang và dọc.
Bạn có thể dùng tính năng này để tạo bố cục thú vị hơn hoặc tạo hệ thống phân cấp trực quan rõ ràng hơn, chẳng hạn như Thú cưng của tuần, trong đó lưới được dùng để truyền tải thông tin về những thú cưng được xếp hạng cao nhất. Lưới có thể là 2x4, nhưng vị trí hàng đầu trải dài trên 2 cột và hàng.
Tất cả những điều này đều được thực hiện bằng Grid API.
Điều chỉnh các thành phần đó
Trong khi lưới bao gồm cấu trúc nội dung vĩ mô và vi mô, Flexbox giúp các thành phần cần phản hồi nội dung của chúng. Đây là chế độ dùng cho nội dung một chiều, trong đó chỉ có chiều ngang hoặc chiều dọc được quy định. Ví dụ: các nút lọc có thể phản hồi nhãn của chúng và khu vực lọc có thể mở rộng tuỳ thuộc vào số lượng bộ lọc. Sử dụng tính năng Reveal (Làm nổi bật) trên màn hình lớn để hiển thị nhiều bộ lọc hơn cùng lúc.
Cụm từ tìm kiếm tinh tế
Bằng cách thiết kế một lưới bố cục và sử dụng lưới cũng như flexbox, chúng tôi cho phép bố cục thích ứng trên nhiều màn hình và thậm chí có thể điều chỉnh các hình thức độc đáo như thiết bị có thể gập lại. Nhưng còn các bối cảnh khác nhau của người dùng thì sao? Người dùng Android có thể kết nối với màn hình hoặc cắm chuột! MediaQuery cho phép chúng ta đưa ra các quyết định thiết kế tinh tế để đáp ứng người dùng trong mọi bối cảnh.
Trong Pawparazzi, điều này có nghĩa là tận dụng các thao tác nhập bằng con trỏ chính xác, với các vùng mục tiêu nhỏ hơn và nội dung dày đặc hơn.
Mẫu AdaptiveUI cho Android
Khám phá những thiết kế đầy cảm hứng và được tối ưu hoá cho các thiết bị có màn hình lớn. Duyệt xem các mẫu giao diện người dùng/trải nghiệm người dùng cho các danh mục ứng dụng phổ biến, bao gồm cả nội dung nghe nhìn, sáng tạo, trò chơi và nhiều danh mục khác.
