- Jetpack Compose Glimmer, một hệ thống thiết kế mới cho màn hình trong suốt dùng cho kính AI, cho phép xây dựng giao diện chồng lên thế giới thực một cách tự nhiên
- Các bề mặt mờ đục và bóng đổ của Material Design hiện có gây ra quầng sáng (halation) và giảm khả năng đọc trên màn hình trong suốt, vì vậy cần một cách tiếp cận mới xoay quanh bề mặt tối và nội dung sáng
- Văn bản được thiết kế theo góc nhìn (visual angle), duy trì hình dạng dễ đọc với kích thước khoảng từ 0,6 độ trở lên và điều chỉnh kích thước quang học của Google Sans Flex
- Màu sắc được điều chỉnh dựa trên tỷ lệ tương phản cộng dồn (additive contrast ratio) để đảm bảo bảng màu trung tính ổn định và độ tương phản cao ngay cả khi độ sáng của nền thực tế thay đổi
- Chuyển động được thiết kế thành những chuyển tiếp mượt mà, tôn trọng tầm nhìn ngoại vi của người dùng, mang lại trải nghiệm nơi công nghệ hòa hợp với thực tại thay vì đòi hỏi sự chú ý
Bối cảnh của Jetpack Compose Glimmer và thiết kế màn hình trong suốt
- Jetpack Compose Glimmer là hệ thống thiết kế mới cho môi trường Android XR (thực tế mở rộng), được dùng để phát triển giao diện cho kính AI
- Khác với thiết kế dựa trên màn hình truyền thống, thế giới thực trở thành chính tấm nền để hiển thị
- Giao diện hướng tới khái niệm màn hình ambient: chỉ xuất hiện khi cần và biến mất khi không cần
- Trên màn hình trong suốt, các yếu tố cơ bản như màu sắc, kiểu chữ và bóng đổ hoạt động khác với trước đây
- Ví dụ, màu đen được nhận như trong suốt, còn màu sáng có thể biến mất trên nền trời xanh
- Vì những đặc tính này, các nguyên tắc thiết kế hiện có phải được tái định nghĩa từ gốc
Giao diện ở khoảng cách bằng một cánh tay
- Màn hình không được nhìn như nằm trên bề mặt thấu kính mà là một lớp hiển thị được chiếu ở khoảng 1 mét (tầm dài cánh tay)
- Người dùng phải chuyển ánh nhìn từ thế giới thực sang mặt phẳng tiêu điểm này, và đó là một hành động chuyển đổi chú ý có ý thức và chủ động
- Việc chuyển tiêu điểm này là thách thức cốt lõi của thiết kế, dẫn tới định hướng tạo ra những giao diện đáng để người dùng chú ý dù chỉ trong khoảnh khắc ngắn
Cách xử lý ánh sáng
- Màn hình trong suốt chỉ có thể thêm ánh sáng chứ không thể làm tối đi
- Vì vậy màu đen không hoạt động như một màu sắc mà như một vùng không có ánh sáng (vùng trong suốt)
- Các bề mặt sáng và bóng đổ của Material Design truyền thống gây ra chói mắt và tiêu hao pin trên màn hình trong suốt
- Các vùng sáng bị loang ra, tạo nên hiện tượng halation khiến chữ bị mờ
- Giải pháp là định nghĩa lại màu đen như một “container” và đặt nội dung sáng lên trên các bề mặt tối
- Dùng bóng tối sâu có cảm giác chiều sâu để thể hiện thứ bậc và cảm nhận không gian
- Nút bấm, thẻ và thanh trượt hệ thống được phân biệt bằng các mức độ sâu phân cấp
Độ dễ đọc của văn bản và góc nhìn
- Văn bản được thiết kế theo góc nhìn (visual angle) thay vì đơn vị pixel
- Kích thước từ 0,6 độ trở lên được đặt làm ngưỡng tối thiểu để dễ đọc
- Tận dụng trục Optical Size của phông chữ Google Sans Flex để điều chỉnh không gian bên trong và khoảng cách của ký tự
- Mở rộng không gian bên trong của các chữ như ‘a’, ‘e’, đồng thời tăng khoảng cách chấm của ‘i’, ‘j’ để hỗ trợ nhận diện nhanh bằng ánh nhìn
- Trong mã, việc tối ưu thị giác tự động diễn ra mà không cần cấu hình giãn chữ riêng
- Khuyến nghị: dùng phông chữ đậm và khoảng cách rộng, tránh chữ mảnh và nhỏ
Màu sắc và độ tương phản
- Vì thế giới thực là nền, độ sáng và màu sắc thay đổi liên tục
- Nhóm phát triển đã đo tỷ lệ tương phản cộng dồn (additive contrast ratio) để đảm bảo nội dung luôn dễ nhìn
- Màu có độ bão hòa cao có thể biến mất hoặc trông mờ nhạt trên nền thực tế
- Vì vậy Glimmer chọn cấu trúc mặc định là bề mặt tối, trung tính + nội dung sáng
- Bảng màu giảm bão hòa (desaturated) giúp duy trì độ tương phản ổn định bất kể môi trường thay đổi
- Màu sắc chủ yếu chỉ được dùng hạn chế để nhấn mạnh các yếu tố thu hút chú ý như nút bấm
Cân bằng giữa chuyển động và sự chú ý
- Trong màn hình hiển thị trước mắt (head-up display), chuyển động không được trở thành yếu tố gây cản trở
- Vì nội dung có thể xuất hiện trong tầm nhìn bất cứ lúc nào, cần những chuyển tiếp nhẹ nhàng và tôn trọng người dùng
- Chuyển tiếp 500ms ban đầu quá ngắn để được nhận biết, nên đã điều chỉnh thành chuyển tiếp chậm rãi khoảng 2 giây
- Cách này dẫn ánh nhìn người dùng từ tầm nhìn ngoại vi (periphery) vào trung tâm một cách tự nhiên
- Với đầu vào của người dùng như giọng nói hoặc cử chỉ, cần có phản hồi tức thì
- Để làm điều đó, hệ thống dùng vòng focus và highlight nhằm đảm bảo khả năng phản hồi độ trễ thấp
Sự hài hòa giữa thực tại và công nghệ
- Cốt lõi của thiết kế màn hình trong suốt là những yếu tố mang tính con người như sự chú ý và khả năng tập trung
- Jetpack Compose Glimmer hướng tới một trải nghiệm nơi công nghệ không đòi hỏi sự chú ý mà bổ trợ cho thực tại
- Cách tiếp cận này mở ra hướng phát triển trong đó kính AI không chỉ là công cụ hiển thị thông tin mà còn nâng cao chính cách con người nhận thức thực tại
- Google cung cấp hướng dẫn thiết kế cho kính AI và Figma Design Kit cho các nhà phát triển
Chưa có bình luận nào.