Chip

hero

Ringkasan

Chip adalah elemen interaktif ringkas yang memungkinkan pengguna memfilter konten di bawahnya, atau memicu tindakan cepat. Komponen ringkas ini membantu menyederhanakan penyelesaian tugas di jalan dengan menampilkan opsi kontekstual yang relevan dengan konten dan mempersingkat waktu penjelajahan.

Untuk mempertahankan kejelasan visual, tata letak harus dibatasi maksimal 7 chip per baris. Chip sangat fleksibel untuk disesuaikan dengan bahasa visual merek Anda. Anda dapat menyesuaikan bentuk, warna latar belakang, dan warna batas sesuai dengan tema UI yang dipilih.

Chip dapat berisi:

  • Hanya ikon
  • Hanya label teks
  • Ikon dan label (di kedua arah)

Komposisi

hero

1. Ikon atau gambar utama

2. Teks label


Persyaratan UX

Untuk memastikan pengalaman yang aman dan konsisten di semua aplikasi, ikuti persyaratan desain berikut:

Tingkat persyaratan

Konten

HARUS

Menyertakan ikon atau label.

SEBAIKNYA

Gunakan gaya visual yang unik, seperti warna atau bentuk yang berbeda, untuk mengomunikasikan status chip yang berbeda.

SEBAIKNYA

Terapkan gaya yang konsisten di semua chip di seluruh aplikasi Anda.

SEBAIKNYA

Hindari mencampur chip dengan status dan tanpa status dalam grup komponen yang sama.

SEBAIKNYA

Tempatkan chip penting atau yang direkomendasikan di tepi terdepan penampung.

SEBAIKNYA

Buat teks label yang singkat dan deskriptif. Hindari teks panjang yang memicu pemotongan dan meningkatkan beban kognitif.