Sistem desain kartu

Kartu berbagi beberapa elemen desain dasar. Gunakan template dan komponen kartu untuk membuat kartu unik bagi aplikasi Anda.

Elemen dasar

Tabel berikut menjelaskan elemen desain kartu dasar.

Ikon aplikasi Ikon aplikasi disediakan oleh developer aplikasi, dan ditampilkan sementara di layar.	Area desain Setiap template kartu memiliki aturannya sendiri terkait area konten utama. Pastikan Anda melihat panduan tata letak.	Tombol bawah Tombol berperan penting dalam mengaktifkan tindakan sekunder pada kartu. Tempatkan tombol 6,3% di atas bagian bawah layar.

Ikon aplikasi

Wear menampilkan ikon aplikasi secara otomatis saat pengguna men-scroll melalui carousel kartu. Ikon aplikasi perlahan akan menghilang dan tidak boleh diterapkan dalam kartu. Untuk informasi selengkapnya tentang cara membuat ikon aplikasi, lihat Ikon produk.

Gambar 1. Contoh ikon aplikasi

Wear otomatis menampilkan ikon aplikasi

Tombol

Pilih teks pendek untuk tombol Anda. Gunakan teks yang spesifik untuk tindakan dan tujuan pesan ajakan (CTA). Pastikan terjemahan teks tombol dapat menampung jumlah karakter. Jika teks tombol yang diterjemahkan terlalu panjang, setel tombol untuk bertuliskan More.

Penempatan	Spesifikasi Tombol	Jenis
Jika tampilan jam, tempatkan tombol Anda 6,3% dari bawah.	Sisakan padding 12dp dari kedua sisi.	Ukuran font tidak skalabel. Setel ukuran font minimal ke sembilan. Untuk bahasa non-latin, gunakan ukuran font minimal tujuh.

Template

Ada empat jenis template kartu yang tersedia. Download Kit Desain Kartu (Figma) untuk melihat contoh dan memberikan masukan tentang pengalaman Anda dalam menggunakan template ini.

Berfokus pada teks

Template kartu berbasis teks dirancang untuk menampilkan teks di kartu seperti berita terbaru, acara mendatang, dan pengingat. Cara ini biasanya digunakan untuk status login, error, dan penyiapan untuk memberi tahu pengguna tentang apa yang terjadi dan menawarkan pesan ajakan (CTA) yang jelas.

Berfokus pada tombol

Template kartu yang berfokus pada tombol didesain untuk kartu yang memiliki hingga lima tindakan utama. Gunakan template ini untuk memulai tugas tertentu dengan cepat.

Berfokus pada informasi

Template kartu yang berfokus pada informasi menampilkan metrik dan progres tingkat tinggi. Hal ini sangat berguna untuk kartu terkait kesehatan dan kebugaran. Elemen ini menyediakan opsi yang fleksibel untuk tampilan konten. Agar tetap mudah dilihat, prioritaskan data penting dan hindari template yang terlalu padat.

Berfokus pada data

Template kartu yang berfokus pada data adalah template serbaguna yang dirancang untuk menampilkan diagram dan elemen grafis yang merangkum informasi berkala. Elemen ini menawarkan fleksibilitas dalam visualisasi data dan berguna untuk membuat status kosong visual. Menjaga elemen grafis tetap sederhana sangat penting untuk memastikan kartu tetap mudah dilihat.

Warna

Agar kartu tetap mudah dilihat, batasi hingga tiga warna.

Tipografi

Gunakan Roboto sebagai font utama di Wear OS. Gunakan Body 2 sebagai ukuran font default dan terkecil, serta Display 2 sebagai ukuran font terbesar.

Untuk mengetahui informasi selengkapnya tentang font, ketebalan, dan ukuran, lihat Tipografi.

Komponen

Gunakan komponen untuk mem-build kartu. Sesuaikan warna komponen untuk menunjukkan brand Anda dengan mengikuti pedoman Tema Material Wear.

Download Kit Desain Kartu (Figma) untuk melihat contoh komponen.

Component	Varian	Contoh
Tombol	Tombol standar	Ukuran yang tersedia: Standar, Besar, dan Ekstra Besar
Tombol	Tombol teks standar	Ukuran yang tersedia: Standar, Besar, dan Ekstra Besar
Chip	Chip standar utama
Chip	Chip standar sekunder
Chip	Chip avatar kecil
Chip	Chip avatar besar
Chip	Chip ringkas (bawah)
Indikator kemajuan	Indikator kemajuan standar
Indikator kemajuan	Indikator kemajuan dengan kesenjangan

Referensi

Untuk informasi selengkapnya, lihat Pedoman desain kartu.