- Yapay zeka gözlüklerine yönelik şeffaf ekranlar için yeni tasarım sistemi Jetpack Compose Glimmer, gerçek dünyanın üzerine doğal biçimde binen arayüzler oluşturuyor
- Mevcut Material Design'ın opak yüzeyleri ve gölgeleri, şeffaf ekranlarda halation (ışık saçılması) ve okunabilirlikte düşüşe yol açtığından, koyu yüzeyler ve parlak içerik odaklı yeni bir yaklaşım gerekiyor
- Metin, görsel açı (visual angle) temel alınarak tasarlanıyor; yaklaşık 0.6 derece ve üzeri boyutlar ile Google Sans Flex'in optik boyut ayarı sayesinde kolay okunabilirliğini koruyor
- Renkler, eklemeli kontrast oranı (additive contrast ratio) temelinde ayarlanarak, gerçek arka planın parlaklığındaki değişimler içinde de kararlı bir nötr palet ve yüksek kontrast sağlıyor
- Hareket, kullanıcının çevresel görüşüne saygı duyan yumuşak geçişler ile tasarlanıyor; böylece teknoloji dikkat talep etmek yerine gerçeklikle uyum içinde bütünleşen bir deneyim sunuyor
Jetpack Compose Glimmer ve şeffaf ekran tasarımının arka planı
- Jetpack Compose Glimmer, Android XR (genişletilmiş gerçeklik) ortamı için yeni bir tasarım sistemi olup yapay zeka gözlükleri arayüzleri geliştirmede kullanılıyor
- Mevcut ekran tabanlı tasarımlardan farklı olarak, gerçek dünya doğrudan tuval haline geliyor
- Arayüz, yalnızca gerektiğinde ortaya çıkıp gerekmeyince kaybolan ambient ekran anlayışını hedefliyor
- Şeffaf ekranlarda renk, tipografi, gölge gibi temel öğeler alışıldık biçimde çalışmıyor
- Örneğin siyah şeffaf olarak algılanıyor ve parlak renkler gökyüzü mavisi arka planda kayboluyor
- Bu özellikler nedeniyle mevcut tasarım ilkelerini kökten yeniden tanımlamak gerekmiş
Kol uzatma mesafesindeki arayüz
- Ekran, lens yüzeyinde değil yaklaşık 1 metre mesafede (kol uzatma uzaklığı) yansıtılmış gibi görülen bir yapıya sahip
- Kullanıcının bakışını gerçek dünyadan bu odak düzlemine kaydırması gerekiyor; bu da bilinçli ve aktif bir dikkat geçişi anlamına geliyor
- Bu odak kayması, tasarımın temel meselelerinden biri ve kısa anlarda bile dikkate değer bir arayüz oluşturma yönünde tasarımı şekillendiriyor
Işığı ele alma biçimi
- Şeffaf ekranlar yalnızca ışık ekleyebilir, karartamaz
- Bu yüzden siyah, bir renk değil ışığın olmadığı bir alan (şeffaf bölge) gibi işliyor
- Mevcut Material Design'ın parlak yüzeyleri ve gölgeleri, şeffaf ekranlarda parlama ve pil tüketimi yaratıyor
- Parlak alanlar yayılıp metni bulanıklaştıran halation etkisine neden oluyor
- Çözüm olarak siyah, bir 'container' olarak yeniden tanımlanıyor ve parlak içerik koyu yüzeylerin üzerine yerleştiriliyor
- Derinlik hissi veren koyu gölgeler ile hiyerarşi ve mekânsal his ifade ediliyor
- Düğmeler, kartlar, sistem kaydırıcıları gibi öğeler hiyerarşik derinlik seviyeleri ile ayrıştırılıyor
Metin okunabilirliği ve görsel açı
- Metin, piksel birimiyle değil görsel açı (visual angle) ile tasarlanıyor
- 0.6 derece ve üzeri boyut, asgari okunabilirlik eşiği olarak belirlenmiş
- Google Sans Flex yazı tipinin Optical Size ekseni kullanılarak harf içi boşluklar ve aralıklar ayarlanıyor
a, e gibi harflerin iç boşlukları genişletiliyor, i, j harflerinin nokta aralıkları artırılarak bakışla hızlı algılama destekleniyor- Kod içinde ayrıca harf aralığı ayarı yapılmadan da otomatik görsel optimizasyon sağlanıyor
- Öneriler: kalın ve geniş aralıklı yazı tipleri kullanın, ince ve küçük yazılardan kaçının
Renk ve kontrast
- Gerçek dünya arka plan haline geldiğinden parlaklık ve renk sürekli değişiyor
- Ekip, içeriğin görünürlüğünü güvenceye almak için eklemeli kontrast oranını (additive contrast ratio) ölçmüş
- Yüksek doygunluklu renkler gerçek arka planda kaybolabiliyor veya soluk görünebiliyor
- Bu nedenle Glimmer, temel yapı olarak nötr ve koyu yüzeyler + parlak içerik yaklaşımını benimsiyor
- Desatüre edilmiş bir palet ile çevresel değişimden bağımsız olarak kararlı kontrast korunuyor
- Renkler çoğunlukla düğmeler gibi dikkat çeken öğeleri vurgulamak için sınırlı biçimde kullanılıyor
Hareket ve dikkat dengesi
- Head-up display ortamında hareket rahatsız edici olmamalı
- İçerik görüş alanında her an belirebildiği için yumuşak ve saygılı geçişler gerekiyor
- İlk aşamadaki 500 ms geçişler çok kısa kaldığı için fark edilmemiş ve yaklaşık 2 saniyelik daha yumuşak geçişlere geçilmiş
- Bu sayede kullanıcının çevresel görüşünden (periphery) merkeze doğru bakışı doğal biçimde yönlendiriliyor
- Kullanıcı girdilerinde (ses, jest) anında geri bildirim gerekli
- Bunun için odak halkası ve vurgular kullanılarak düşük gecikmeli tepki sağlanıyor
Gerçeklik ile teknolojinin uyumu
- Şeffaf ekran tasarımının özü, dikkat ve odak gibi insani etmenlerde yatıyor
- Jetpack Compose Glimmer, teknolojinin dikkat talep etmediği, gerçekliği tamamlayan bir deneyimi hedefliyor
- Bu yaklaşım, yapay zeka gözlüklerinin yalnızca bilgi gösteren bir araç olmanın ötesine geçip gerçeklik algısını geliştiren bir yöne evrilmesini sağlıyor
- Google, geliştiriciler için yapay zeka gözlüğü tasarım yönergeleri ve Figma Design Kit sunuyor
Henüz yorum yok.