Trải nghiệm trên máy tính thích ứng ngay từ đầu, hỗ trợ nhiều kích thước trên màn hình được kết nối hoặc trong các cửa sổ. Hỗ trợ đầy đủ các thiết bị Android bằng cách tạo giao diện người dùng thích ứng. Bố cục thích ứng là yếu tố cần thiết cho trải nghiệm trên máy tính, cho phép người dùng đổi kích thước cửa sổ ứng dụng một cách liền mạch.
Để chuẩn bị ứng dụng cho trải nghiệm trên máy tính, hãy bắt đầu bằng cách điều chỉnh giao diện người dùng của ứng dụng, sau đó chuyển sang thiết kế tương tác đầu vào và mật độ. Để biết thêm thông tin, hãy xem phần Bố cục thích ứng. Để thực hành với phòng thí nghiệm thiết kế, hãy xem Phòng thí nghiệm thiết kế thích ứng.
Suy nghĩ theo ngăn
Áp dụng phương pháp dựa trên ngăn cho bố cục bằng cách sử dụng tính năng nhóm và chứa. Bạn có thể sắp xếp nội dung bằng cách sử dụng các vùng chứa trực quan hoặc thông qua việc nhóm ngầm bằng khoảng trắng. Các ngăn này mang lại sự linh hoạt vì có thể mở rộng, hạn chế, ẩn, di chuyển hoặc hiển thị dưới dạng cửa sổ bật lên. Thiết kế bằng ngăn giúp đơn giản hoá quy trình tạo trải nghiệm nhất quán trên nhiều thiết bị di động và có thể tích hợp với các lưới hiện tại để tinh giản việc căn chỉnh bố cục phức tạp.
Nên
Cân
Mặc dù màn hình lớn cung cấp nhiều không gian hơn cho nội dung, nhưng bạn phải tính đến không gian bổ sung và các yếu tố công thái học như khoảng cách xem. Kiểu chữ cần được tăng kích thước một chút để người dùng cảm thấy thoải mái hơn khi ở xa hoặc nhập liệu trên bàn phím.
Các phần tử trên giao diện người dùng và kiểu chữ được điều chỉnh tỷ lệ trên màn hình mở rộng và màn hình được kết nối, đồng thời có thể có tỷ lệ khác nhau do độ phân giải màn hình.
Sử dụng một hoặc hai bước trong các thiết kế thang kiểu chữ hiện có hoặc cân nhắc việc triển khai một thang kiểu chữ chuyên biệt được thiết kế cho máy tính và màn hình mở rộng. Bạn có thể điều chỉnh theo ý mình trong thiết kế để có chất lượng biên tập cao hơn.
Hình ảnh cũng sẽ được phóng to và trải rộng trên màn hình. Điều này giúp người dùng xem cây chi tiết hơn, nhưng không sử dụng không gian một cách hiệu quả. Hãy lưu ý điều này khi cấu trúc các phần tử giao diện người dùng.
Nội dung và các phần tử trên giao diện người dùng
Giờ đây, khi nội dung được nhóm và điều chỉnh theo tỷ lệ, một số giao diện người dùng nội dung cũng có thể thay đổi hoặc cập nhật để phù hợp hơn với các điểm ngắt.
Trong mỗi ngăn nội dung, hãy quyết định xem ngăn đó có thích ứng hay không và thích ứng như thế nào. Xem xét nội dung đó. Nếu một hàng trong danh sách thay đổi thành thẻ, thì nội dung có bị giảm hiệu quả tương tác và khả năng quét không? Các thành phần có thể hoạt động khác nhau tại các điểm ngắt khác nhau. Bạn có thể điều chỉnh chiều rộng hoặc khả năng hiển thị của các thành phần, hoặc thậm chí chuyển đổi các thành phần.
Quyết định chiều rộng tối đa cho từng phần tử giao diện người dùng và nội dung trong một ngăn. Các phần tử trên giao diện người dùng không được kéo giãn ra toàn bộ chiều rộng hoặc bị biến dạng. Đặt khoảng đệm và lề tối đa trong các ngăn. Bản sao phải giúp người dùng đọc thoải mái bằng cách giới hạn độ dài dòng. Giới hạn nội dung ngắn ở khoảng 60 ký tự, trong khi nội dung dài có thể dài hơn.
Nên
Sử dụng tính năng hiển thị tăng dần một cách khéo léo. Có thể có thêm nội dung khi người dùng tăng kích thước cửa sổ không? Hãy cân nhắc xem nội dung bổ sung có giúp tăng năng suất với ít lượt nhấp hơn hay gây nhầm lẫn.
Nội dung trong mỗi ngăn có thể thay đổi bố cục, tuỳ thuộc vào nội dung, bằng cách sắp xếp lại thành các cột và cấu trúc lưới khác nhau. Ví dụ: một lưới dọc có băng chuyền có thể cập nhật thành một lưới kiểu xếp gạch có băng chuyền nổi bật. Cân nhắc thay đổi theo chiều dọc cho các phần tử và kết hợp với các ràng buộc và thay đổi về cách trình bày. Bạn có thể không muốn chuyển đổi các thành phần như thế này, tuỳ thuộc vào mức tiêu thụ nội dung.
Hãy cân nhắc việc cho phép người dùng điều chỉnh bố cục theo ý muốn để có khả năng đọc và năng suất tối đa.
Di chuyển
Sau khi điều chỉnh nội dung và các phần tử trên giao diện người dùng, hãy quyết định cách các ngăn nội dung tương tác với nhau và hệ thống phân cấp điều hướng. Thay vì nhấn để chuyển đến nội dung chi tiết, bạn có thể sử dụng không gian màn hình bổ sung để hiển thị chi tiết và nội dung hỗ trợ cạnh nhau.
- Nếu đang dùng thanh điều hướng, thanh dưới cùng sẽ cập nhật thành dải điều hướng ở bên cạnh màn hình để tăng tính công thái học. Không kéo dài thanh điều hướng dưới cùng.
- Đối với thành phần điều hướng phụ, chẳng hạn như thẻ, hãy cân nhắc việc cố định chúng ở chiều rộng tối đa để người dùng dễ dàng di chuyển một cách chính xác.
- Thanh ứng dụng cũng có thể được cố định vào ngăn nội dung tương ứng, nhưng hãy đảm bảo không gây nhầm lẫn cho hệ thống phân cấp điều hướng.
Mật độ
Trải nghiệm trên máy tính có thể thay đổi cả mật độ tương tác và mật độ hình ảnh do độ chính xác của dữ liệu đầu vào và kích thước màn hình.
- Bạn có thể tăng mật độ của các phần tử trực quan, chẳng hạn như dữ liệu bảng, mà không làm người dùng cảm thấy quá tải so với bố cục điện thoại nhỏ gọn. Hãy cân nhắc mọi mật độ nội dung không bắt buộc và luôn cho phép điều chỉnh tỷ lệ văn bản trong bố cục, không đặt kích thước kiểu chữ cố định.
- Các thành phần phải có mục tiêu nhấp chính xác hơn. Mục tiêu nhấp chuột vốn có xung quanh các thành phần có thể dẫn đến lượt nhấp nhầm.
Ngõ vào
Các phương thức nhập bổ sung có nghĩa là người dùng sẽ có thêm các kiểu tương tác.
Khi người dùng có chuột và bàn phím, ứng dụng của bạn cần tính đến trạng thái di chuột và tiêu điểm.
- Thêm trạng thái di chuột cho các phương thức nhập bằng con trỏ, chẳng hạn như chuột và bút cảm ứng.
- Ghi lại trạng thái tiêu điểm cho các phần tử khi người dùng di chuyển bằng phím Tab để hỗ trợ tiếp cận.
- Tính đến trạng thái con trỏ, vì con trỏ cũng có thể giúp truyền đạt trạng thái tương tác và trạng thái ứng dụng cho người dùng.
Các trạng thái bổ sung có thể giúp tăng hiệu quả.
- Chức năng nhấp chuột phải có thể bao gồm trình đơn theo bối cảnh để truy cập nhanh vào tính năng.
- Chú thích khi di chuột có thể giúp người dùng làm quen.
- Phím tắt giúp người dùng thành thạo tăng năng suất.
