Mulai

Bangun aplikasi Kacamata AI Anda menggunakan framework UI Glimmer Jetpack Compose untuk pengalaman beraugmentasi yang berfungsi di seluruh Kacamata AI. Glimmer Jetpack Compose adalah salah satu framework UI pertama yang dioptimalkan untuk layar transparan dan faktor bentuk kacamata AI.

1. Menentukan perjalanan pengguna

Berfokus pada perjalanan penting pengguna (CUJ) yang kompatibel dengan prinsip sekilas faktor bentuk kacamata AI. Hal ini dapat dinyatakan dengan UI minimal atau hanya audio sambil memungkinkan pengguna tetap hadir di lingkungan sekitarnya. Untuk menemukan peluang, pertimbangkan untuk memulai titik entri di aplikasi Anda saat ini yang akan diuntungkan dari Glasses.

Misalnya, pengguna dapat memanfaatkan petunjuk jalan kaki belokan demi belokan handsfree untuk membantu mereka menuju tujuan.

Perjalanan pengguna yang dipilih juga harus memperhitungkan prinsip keselamatan, kenyamanan, dan performa. Misalnya, jangan memilih tugas yang akan memerlukan kamera pengguna dalam jangka waktu yang terlalu lama atau melanggar privasi mereka.

Pelajari prinsip dasar.

Ekstrak fitur dari aplikasi seluler Anda yang diuntungkan dari faktor bentuk kacamata. Misalnya, pengalaman yang dapat dilihat sekilas.
Lakukan porting seluruh aplikasi ponsel ke kacamata karena aplikasi tersebut tidak diskalakan ke faktor bentuk kacamata.

2. Meminimalkan & Menerjemahkan

Untuk UI mode tampilan, mulai dengan CUJ dari aplikasi inti Anda:

  • Mengoptimalkan tata letak untuk fokus: Tata letak memprioritaskan informasi penting, mengurangi jumlah tindakan dan elemen visual untuk mempertahankan fokus pengguna.

  • Menggunakan kedalaman untuk hierarki: Kedalaman digunakan untuk menyampaikan prioritas elemen.

  • Desain dari bawah ke atas: Saat membuat tiruan, mulailah dari bawah, tata komponen ke atas.

  • Terjemahkan komponen visual: Untuk kacamata AI tampilan, gunakan komponen dan pola tata letak Glimmer Jetpack Compose.

Baca selengkapnya tentang komponen dan tampilan aplikasi.

Aplikasi daftar belanja mengurangi tampilan daftar menjadi pengalaman daftar minimal dan hanya memerlukan UI masukan.
Aplikasi daftar belanja yang diterjemahkan ke elemen kacamata AI Display. Kolom sistem terlihat berbeda, kacamata AI biasanya kosong. Di sini, panel aplikasi dapat diterjemahkan ke chip judul, sedangkan elemen daftar Material diterjemahkan ke daftar Glimmer Jetpack Compose.

Komponen yang dioptimalkan

A. Warna permukaan: Warna permukaan komponen adalah hitam untuk memaksimalkan kontras bagi konten kartu.

B. Garis Batas & Sorotan: Warna Garis Batas dioptimalkan untuk kontras. Penggunaan sorotan memberikan ekspresi visual dan dapat digunakan untuk menunjukkan beberapa jenis input.

C. Bentuk: Sistem bentuk yang lebih lembut digunakan untuk meningkatkan keterbacaan sekilas dengan mengurangi ketajaman sudut dan meningkatkan kenyamanan. Warna On Surface: Warna On Surface konten adalah putih untuk memaksimalkan kontras dengan dunia.

D. Tipografi: Skala tipografi Glimmer menggunakan serangkaian kecil gaya Body dan Title yang disempurnakan yang mengoptimalkan kerning, ukuran, dan ketebalan untuk keterbacaan & keterlihatan yang optimal.

E. Ikonografi: Penggunaan Simbol Material bulat sesuai dengan skala tipografi bulat.

Komponen kilau dioptimalkan untuk tampilan transparan.

3. Alur & isyarat audio

Berinteraksi dengan Audio. Meskipun audio harus menjadi bagian besar dari aplikasi Kacamata AI Anda tanpa membebani pengguna, Anda juga perlu memperhitungkan pengalaman khusus audio untuk perangkat tertentu. Anda dapat melakukannya dengan membuat peta alur khusus audio untuk mendeskripsikan pengalaman ini. Mencatat interaksi dan masukan dengan isyarat audio dan dialog.

Buat peta alur khusus audio untuk membantu Anda merencanakan pengalaman percakapan yang tidak membebani pengguna.

4. Kontrol input peta

Pastikan untuk memetakan input untuk kontrol dan gestur perangkat. Anda dapat memulai dengan menerjemahkan interaksi aplikasi dasar, seperti ketuk, ke ketuk trackpad.

Lanjutkan ke input.

Aplikasi yang terdiferensiasi XR memiliki pengalaman pengguna yang dirancang secara eksplisit untuk XR, dan mengimplementasikan fitur yang hanya ditawarkan di XR.

5. Mempertimbangkan SysUI

Memperhitungkan antarmuka sistem lainnya.

Aplikasi Anda akan muncul di fitur rumah dan sistem lainnya, seperti notifikasi jika digunakan. Notifikasi ini dapat muncul di kolom sistem.

Selengkapnya tentang UI Sistem

Buat peta alur khusus audio untuk membantu Anda merencanakan pengalaman percakapan yang tidak membebani pengguna.

6. Negara bagian tambahan

Aplikasi Anda akan menghadapi berbagai skenario di kacamata AI, seperti masalah koneksi atau izin. Perhitungkan berbagai status ini baik dalam aplikasi inti maupun aplikasi kacamata Anda.

Pastikan untuk meminta izin fitur perangkat.

Ingat, Anda harus mempertimbangkan hal ini melalui UI visual dan audio. Misalnya, memberikan masukan audio untuk mengomunikasikan bahwa pengguna harus menyelesaikan alur pemberian izin di perangkat seluler mereka atau untuk membacakan error.

Perhitungkan berbagai status aplikasi baik di dalam aplikasi inti maupun aplikasi kacamata.