- Sistem desain baru Jetpack Compose Glimmer untuk display transparan pada kacamata AI mewujudkan antarmuka yang menyatu secara alami di atas dunia nyata
- Permukaan opak dan bayangan pada Material Design yang ada menyebabkan halation dan penurunan keterbacaan pada display transparan, sehingga diperlukan pendekatan baru yang berpusat pada permukaan gelap dan konten terang
- Teks dirancang berdasarkan visual angle, menjaga bentuk yang mudah dibaca dengan ukuran sekitar 0,6 derajat atau lebih serta penyesuaian optical size pada Google Sans Flex
- Warna disesuaikan berdasarkan additive contrast ratio, untuk memastikan palet netral yang stabil dan kontras tinggi meski kecerahan latar dunia nyata berubah-ubah
- Gerakan dirancang sebagai transisi lembut yang menghormati penglihatan periferal pengguna, menghadirkan pengalaman yang selaras dengan dunia nyata alih-alih menuntut perhatian pada teknologi
Jetpack Compose Glimmer dan latar belakang desain display transparan
- Jetpack Compose Glimmer adalah sistem desain baru untuk lingkungan Android XR yang digunakan untuk mengembangkan antarmuka kacamata AI
- Berbeda dari desain berbasis layar konvensional, dunia nyata itu sendiri menjadi kanvas
- Antarmuka mengarah pada konsep display ambient yang hanya muncul saat diperlukan dan menghilang saat tidak dibutuhkan
- Pada display transparan, elemen dasar seperti warna, tipografi, dan bayangan bekerja berbeda dari biasanya
- Misalnya, warna hitam dipersepsikan sebagai transparan, dan warna terang menghilang di latar belakang langit biru
- Karakteristik ini membuat prinsip desain yang ada perlu dirumuskan ulang secara mendasar
Antarmuka pada jarak sepanjang lengan
- Display terlihat diproyeksikan bukan pada permukaan lensa, melainkan pada jarak sekitar 1 meter (sepanjang lengan)
- Pengguna harus memindahkan pandangan dari dunia nyata ke bidang fokus ini, dan itu merupakan peralihan perhatian yang sadar dan aktif
- Perpindahan fokus ini menjadi tantangan inti dalam perancangan, yang mengarah pada penciptaan antarmuka yang layak diperhatikan meski hanya sesaat
Cara menangani cahaya
- Display transparan hanya dapat menambahkan cahaya dan tidak bisa membuatnya lebih gelap
- Karena itu, warna hitam berfungsi bukan sebagai warna, melainkan sebagai ruang tanpa cahaya (area transparan)
- Permukaan terang dan bayangan pada Material Design lama memicu silau dan konsumsi baterai pada layar transparan
- Muncul fenomena halation, ketika area terang menyebar dan membuat teks tampak kabur
- Sebagai solusi, hitam didefinisikan ulang sebagai “container” dan konten terang ditempatkan di atas permukaan gelap
- Bayangan gelap yang memberi kesan kedalaman digunakan untuk mengekspresikan hierarki dan kesan ruang
- Tombol, kartu, dan system slider dibedakan melalui tingkat kedalaman hierarkis
Keterbacaan teks dan visual angle
- Teks dirancang dengan visual angle, bukan satuan piksel
- Ukuran 0,6 derajat atau lebih ditetapkan sebagai ambang minimum keterbacaan
- Sumbu Optical Size pada font Google Sans Flex dimanfaatkan untuk menyesuaikan ruang internal dan jarak antarhuruf
- Ruang dalam huruf seperti
a dan e diperlebar, sementara jarak titik pada i dan j ditambah untuk mendukung pengenalan visual yang cepat
- Optimasi visual otomatis dilakukan tanpa pengaturan letter spacing tambahan dalam kode
- Rekomendasi: gunakan font tebal dengan jarak lega, dan hindari teks tipis serta kecil
Warna dan kontras
- Karena dunia nyata menjadi latar belakang, kecerahan dan warna terus berubah
- Tim mengukur additive contrast ratio untuk memastikan visibilitas konten
- Warna dengan saturasi tinggi dapat menghilang atau tampak samar di latar dunia nyata
- Karena itu, Glimmer mengadopsi struktur dasar berupa permukaan netral dan gelap + konten terang
- Palet desaturated menjaga kontras tetap stabil terlepas dari perubahan lingkungan
- Warna digunakan secara terbatas terutama untuk menonjolkan elemen yang menarik perhatian seperti tombol
Gerakan dan keseimbangan perhatian
- Pada head-up display, gerakan tidak boleh menjadi gangguan
- Karena konten bisa muncul kapan saja dalam bidang pandang, diperlukan transisi yang lembut dan penuh respek
- Transisi awal 500ms terlalu singkat untuk dikenali, sehingga disesuaikan menjadi transisi yang landai sekitar 2 detik
- Ini membantu mengarahkan pandangan secara alami dari penglihatan periferal ke pusat
- Input pengguna seperti suara dan gestur memerlukan umpan balik instan
- Untuk itu digunakan focus ring dan highlight guna memastikan responsivitas berlatensi rendah
Harmoni antara dunia nyata dan teknologi
- Inti desain display transparan adalah faktor manusia seperti perhatian dan fokus
- Jetpack Compose Glimmer menargetkan pengalaman di mana teknologi tidak menuntut perhatian, melainkan melengkapi dunia nyata
- Pendekatan ini berkembang menuju kacamata AI yang bukan sekadar alat penampil informasi, tetapi juga meningkatkan persepsi terhadap realitas itu sendiri
- Google menyediakan panduan desain kacamata AI dan Figma Design Kit bagi para pengembang
Belum ada komentar.