Penanda ikon

Penanda ikon adalah bagian dari sistem anotasi spasial. Gunakan penanda ikon untuk membantu menganotasi objek di dunia nyata.

Ringkasan penanda ikon dengan dan tanpa elemen UI

Prinsip

Kontekstual: Penanda ikon dikunci ke objek atau titik di dunia nyata.

Ringkas: Penanda ikon adalah indikator visual singkat dari anchor spasial.

Penggunaan & Penempatan

Penanda ikon adalah elemen UI seperti tombol ikon yang menandai objek yang diinginkan di lingkungan pengguna. Penanda ikon adalah jenis penanda spasial, yang digunakan untuk penambatan spasial.

Anjuran

Gunakan penanda ikon untuk menganotasi objek di dunia nyata.

Larangan

Gunakan penanda ikon untuk elemen dekoratif atau anotasi objek non-dunia nyata, jika tombol ikon lebih sesuai.

Komponen Jetpack Compose Glimmer lainnya dapat dipasangkan dengan penanda untuk memberikan klarifikasi atau insight yang lebih baik tentang lingkungan sekitar pengguna.

Anjuran

Gunakan pengungkapan progresif untuk memungkinkan pengguna membuka informasi lebih lanjut.

Larangan

Membebani penanda dengan UI tambahan, yang akan menyebabkan gangguan yang lebih besar pada lingkungan pengguna.

Konten dan label dapat ditempatkan dalam berbagai orientasi. Penanda, dan UI apa pun yang dilampirkan, harus berperilaku sebagai UI spasial, yang berarti jarak sebenarnya dari objek yang ditandai harus tercermin dalam ukuran UI, menggunakan ukuran DP sudut yang konstan.

Dua kartu dan penanda berkilau yang dilampirkan ke produk yang relevan Tentukan penanda dengan jelas untuk menghindari kekacauan visual, dan batasi jumlah penanda dalam tampilan. Jika diperlukan beberapa penanda, kelompokkan menjadi satu penanda yang lebih terlihat dan dapat dilihat secara progresif.

Negara bagian

Penanda ikon sangat mirip dengan tombol ikon. Perbedaan utamanya adalah, bukan status nonaktif, elemen ini memiliki status non-interaktif.

Penanda ikon memiliki varian non-interaktif dan interaktif Menganotasi dunia fisik dengan status non-interaktif, seperti menandai lokasi menarik.

Jika ada informasi lebih lanjut yang mungkin tersedia, Anda dapat menggunakan status interaktif yang memiliki affordance tombol. Jika pengguna mengetuk penanda ikon, kartu Glimmer dengan informasi selengkapnya akan ditampilkan.

Anatomi

Penanda ikon itu sendiri adalah elemen UI tombol ikon kecil dengan padding yang memungkinkan penyelarasan dan orientasi UI tetap. Penanda ikon juga dapat menggunakan titik besar atau kecil, bukan ikon. Status interaktif mencakup affordance visual untuk menunjukkan status tombol.

Penanda ikon memiliki status interaktif dan non-interaktif, serta status difokuskan, ditekan, dan diaktifkan

Padding

UI yang diposisikan secara horizontal dan vertikal memiliki padding sedang, sedangkan elemen yang dipasangkan secara diagonal memiliki padding default 0 dp.

Padding default 12 dp untuk elemen horizontal dan vertikal

Perataan

Elemen UI dapat diposisikan pada titik horizontal, vertikal, atau diagonal.

Elemen UI Glimmer yang disejajarkan di tengah atas dan kanan atas

Orientasi

Konten harus ditampilkan seperti papan iklan ke arah pengguna, sekaligus mengikuti gravitasi agar konten terasa teratur.

Penyesuaian

Untuk mempertahankan affordance visual yang konsisten, hindari menyesuaikan penanda ikon. Namun, Anda dapat menyesuaikan orientasi dan perataan elemen UI yang dilampirkan.

Properti Penyesuaian Default
Ikon Ya Titik besar, titik kecil, Ikon
Padding Tidak Tengah Atas, Tengah Kanan, Tengah Bawah, Tengah Kiri = sedang Kiri Atas, Kanan Atas, Kanan Bawah, Kiri Bawah = 0 dp
Perataan Ya TopLeft, TopCenter, TopRight, CenterLeft, CenterRight, BottomLeft, BottomCenter, BottomRight
Orientasi Ya RotateToLookAtUser: Titik akan menghadap ke pengguna, berapa pun sudut rotasinya.