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 aplikasiIkon aplikasi disediakan oleh developer aplikasi, dan ditampilkan sementara di layar. |
Area desainSetiap template kartu memiliki aturannya sendiri terkait area konten utama. Pastikan Anda melihat panduan tata letak. |
Tombol bawahTombol 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
![](https://developer.android.google.cn/static/wear/images/tiles/app-icon-do.png?authuser=19&hl=id)
Anjuran
![](https://developer.android.google.cn/static/wear/images/tiles/app-icon-dont.png?authuser=19&hl=id)
Larangan
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.
![](https://developer.android.google.cn/static/wear/images/tiles/background-color-do.png?authuser=19&hl=id)
Anjuran
![](https://developer.android.google.cn/static/wear/images/tiles/background-color-dont.png?authuser=19&hl=id)
Larangan
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.