Thiết kế cho màn hình, không phải cho pixel

Thiết kế cho màn hình, không phải cho pixel — giúp khách hàng hiểu vì sao adaptive design lại quan trọng

Vài tài liệu mình sưu tầm, phòng khi mình cần giải thích với khách vì sao app cần một giao diện có tính adaptive - chứ không phải việc đặt cái nút cố định để nhìn cho đẹp.

Sửa từng pixel, từng component, để “ứng dụng hoạt động vừa khít iPhone duo” vẫn chỉ là một giải pháp tạm thời và hơi mạo hiểm.

Bạn làm được, nhưng bạn định sửa thủ công như vậy tới khi nào?

Tin vui là các nhà sản xuất đã đưa sẵn khả năng adaptive vào trong UI framework của họ rồi, nên công việc của mình có thể nhẹ đi rất nhiều nếu biết tận dụng lúc code.

Mình cũng có thể dựa vào niềm tin là: Apple đang bán điện thoại ra thị trường, và mức độ sẵn sàng của trải nghiệm app là một trong những yếu tố quyết định một thiết bị mới ra mắt có thành công hay không: người dùng nhanh chóng làm được những việc hằng ngày của họ trên một thiết bị mới, với một tỉ lệ màn hình mới.

Thiết kế của bạn bây giờ được xem trên: Galaxy Z Fold 8 Ultra, Galaxy Z Fold 8, Huawei Pura X, Galaxy Z Flip 8, iPhone Duo, Huawei Pura X Max

Vậy sẽ ra sao nếu mình giả định rằng: khả năng adapt với nhiều kích thước màn hình có nên được xem là hiển nhiên trong việc phát triển app sắp tới không?

Và điều này còn quan trọng hơn: làm sao để nói chuyện với khách hàng, giúp họ hiểu rằng yêu cầu pixel-perfect hay những yêu cầu thẩm mỹ tuyệt đối có thể không còn phù hợp nữa?

Tất nhiên vẫn có những trường hợp đặc biệt: một app cho bảo tàng ở Hy Lạp, hay một sản phẩm mà bố cục thị giác được cố định có chủ đích.

Là designer, bây giờ mình có thêm một việc mới: giải thích cho khách hàng hiểu bản thiết kế trong đầu họ có thể thích ứng với nhiều kích thước màn hình như thế nào, khi tình huống buộc mình phải làm vậy.

Có thể chỉ là một vài design màn hình nhanh trong Figma, cho thấy app thích ứng với các tỉ lệ màn hình khác nhau ra sao. Hoặc là một bản demo chạy thật.

Màn hình bây giờ đang làm những gì

Màn hình không còn là một khung vẽ với một nhiệm vụ duy nhất nữa. Nó gập lại, nó chia đôi, nó bị chia sẻ với hai app khác, và nó đổi tư thế ngay khi người dùng đang làm việc dở.

Thiết bị gập ở hướng ngang, chạy ba app cùng lúc ở chế độ chia màn hình và ở chế độ cửa sổ như desktop — Nguồn: developer.android.com — Learn about foldables

Thiết bị gập ở nhiều tư thế: gập lại, mở phẳng, mở phẳng xoay ngang, và mở nửa chừng (đặt trên bàn) — Nguồn: developer.android.com — Learn about foldables

Nếu bạn thử đếm các tổ hợp 🥵 tư thế × hướng màn hình × kích thước cửa sổ: số lượng “màn hình” sản sinh ra sẽ khiến bạn dẹp luôn, bỏ luôn cái ý nghĩ phải design cho từng trường hợp nữa.

Nhà sản xuất đã có guideline rồi

Hướng dẫn Samsung OneUI: app nên resize được, nên hỗ trợ hướng ngang, và nên có layout dành cho màn hình lớn — Nguồn: developer.samsung.com — Designing for foldable

App nên resize được, app nên hỗ trợ landscape, app nên có layout cho màn hình lớn. Đây là tài liệu bạn có thể gửi khách hàng: việc quyết định cái nút này đặt lệch lên trên 10px để cho đẹp: nó không còn quyết định bởi khách hay designer nữa, nó phải được cân nhắc luôn các yếu tố về adaptability.

Adaptive pattern từ gập sang mở: danh sách cài đặt ở màn hình ngoài mở rộng thành danh sách kèm chi tiết ở màn hình trong — Adaptive pattern thực hiện bởi Noah Elhadedy — iPhone Duo adaptive design starter kit

Vài tài liệu bạn có thể thấy hữu ích

🎥 Flexible Layout trong “Prepare your app for iPhone Duo” (1:42) — youtube.com
📖 Gợi ý từ Apple: “Group related toolbar items instead of spacing them manually” trong Designing for iPhone Duo — developer.apple.com
🎯 Adaptive design trên Android: video quay thực tế cho thấy một app được tối ưu cho cả màn hình gập lẫn màn hình mở — developer.android.com
🎨 Adaptive pattern giữa màn hình gập và màn hình mở, Figma — figma.com/community