Praktik terbaik untuk kartu

Desain dengan latar hitam

Desain dengan latar belakang hitam sangat penting untuk Wear OS karena dua alasan utama:

  • Efisiensi baterai: Setiap piksel yang menyala di layar akan menggunakan daya. Dengan menggunakan latar belakang hitam, Anda meminimalkan jumlah piksel aktif, sehingga memperpanjang masa pakai baterai.
  • Estetika yang lancar: Latar belakang hitam membantu meminimalkan bezel smartwatch secara visual, sehingga menciptakan ilusi permukaan yang berkelanjutan yang meluas ke tepi perangkat. Menempatkan elemen UI dalam ruang ini akan lebih meningkatkan efek ini.

Yang harus dilakukan

Selalu tetapkan warna latar belakang ke hitam.

Yang tidak boleh dilakukan

Jangan menetapkan latar belakang sebagai gambar tanpa batas yang jelas atau warna terang.

Hanya sertakan elemen yang diperlukan

Jika diaktifkan (misalnya, menggunakan ProtoLayout Material3 PrimaryLayout), Wear OS akan otomatis menampilkan ikon aplikasi permanen, yang akan otomatis ditampilkan saat pengguna men-scroll melalui carousel Kartu. Ikon aplikasi tidak boleh dirancang dan ditambahkan sebagai bagian dari Kartu.

Pastikan ikon aplikasi yang disediakan berwarna monokrom jika Anda memiliki tema dinamis pada kartu. Lihat panduan ikon produk Android tentang cara membuat ikon aplikasi untuk merek Anda.

Yang harus dilakukan

Wear OS dapat menampilkan ikon aplikasi secara otomatis saat pengguna men-scroll melalui carousel Kartu. Anda tidak perlu menempatkan ikon aplikasi di desain Kartu.

Yang tidak boleh dilakukan

Jangan tambahkan ikon aplikasi dalam desain Kartu karena ikon tersebut dapat muncul dua kali/tumpang-tindih jika juga ditampilkan di tingkat sistem.

Menyembunyikan judul aplikasi untuk memastikan target ketuk minimum

Untuk memastikan cukup ruang bagi elemen interaktif di layar yang lebih kecil, judul aplikasi dapat disembunyikan saat Kartu menggunakan dua baris (dan bagian bawah). Hal ini memastikan baris cukup tinggi (minimal 48 dp). Judul dapat muncul kembali di layar yang lebih besar (225 dp+).

Yang harus dilakukan

Pada layar kecil, judul aplikasi disembunyikan untuk memastikan dua baris memiliki tinggi minimum dan target ketuk 48 dp.

Yang tidak boleh dilakukan

Jika Anda tidak menyembunyikan judul aplikasi di layar kecil, dan memiliki dua baris, tinggi komponen tidak akan mematuhi standar aksesibilitas kami, dan kurang dari ukuran target ketuk minimum. Dalam contoh ini, ruang untuk tombol lebih kecil dari 48 dp, sehingga terpotong.

Memilih satu kasus penggunaan utama untuk ditonjolkan

Untuk memastikan pengguna tahu apa yang harus dilakukan dengan setiap Kartu - baik membuka aplikasi, memulai aktivitas, atau mempelajari lebih lanjut - kita perlu menyertakan setidaknya satu elemen interaktif dalam tata letak.

Yang harus dilakukan

Kartu khusus ini efektif karena menyediakan kumpulan kecil opsi, lalu kemampuan untuk melihat lebih banyak

Yang tidak boleh dilakukan

Solusi ini kurang membantu pengguna karena menyebabkan kelumpuhan keputusan karena terlalu banyak opsi yang disediakan

Menyertakan (setidaknya) satu penampung

Setiap kartu di aplikasi harus berisi minimal satu elemen penampung dan dapat diketuk sepenuhnya, yang ditautkan ke layar yang sesuai dalam aplikasi. Informasi Kartu, baik yang terdapat dalam penampung atau ditampilkan secara terpisah, harus menyampaikan konten tertaut atau tindakan yang tersedia dengan jelas.

Jika digunakan, tombol harus mematuhi konvensi desain standar dan memberikan indikasi yang jelas tentang fungsinya.

Yang harus dilakukan

Kartu ini berfungsi dengan baik karena pengguna dapat mengambil tindakan pada setiap kemampuan yang disediakan karena memiliki kemampuan ketuk yang jelas

Yang tidak boleh dilakukan

Kartu ini kurang efektif karena tidak menjelaskan dengan jelas bahwa pengguna dapat mengetuk konten untuk melihat informasi tambahan

Membuat tindakan dapat dipahami secara instan

Pengalaman di smartwatch tidak memiliki ruang yang cukup untuk menyampaikan maknanya, sehingga Kartu yang paling efektif memiliki komponen interaktif yang mudah diprediksi.

Yang harus dilakukan

Kartu yang berhasil memanfaatkan sepenuhnya ruang yang tersedia untuk menyampaikan hasil setiap tindakan dengan jelas

Yang tidak boleh dilakukan

Tindakan di Kartu ini tidak jelas—ke mana pengguna akan diarahkan oleh penampung dengan sampul album, dan apakah tindakan tersebut berbeda dengan tombol “Putar”?

Memprioritaskan tindakan secara visual

Untuk membantu pengguna memahami tindakan terpenting di Kartu, penampung interaktif harus diprioritaskan secara visual.

  • Gunakan warna utama pada tombol tindakan utama.
  • Menggunakan warna sekunder/tersier pada tindakan sekunder

Yang harus dilakukan

Kartu ini menggunakan kombinasi isi (dengan peran warna primer dan sekunder) dengan peran tombol bawah tersier yang jelas, menggunakan gaya isi tonal

Yang tidak boleh dilakukan

Kartu ini berisi terlalu banyak penggunaan tombol gaya isi, selain itu semuanya menggunakan peran warna utama

Menyederhanakan menjadi lebih sedikit penampung

Kartu harus berusaha untuk tidak menggunakan lebih dari satu komponen interaktif untuk memicu tindakan tertentu, dan sebagai gantinya, mencoba menyederhanakan tata letak secara keseluruhan menjadi lebih sedikit penampung.

Yang harus dilakukan

Kartu ini menggunakan beberapa penampung dan setiap penampung berfungsi sebagai tombol untuk melakukan tindakan tertentu seperti memulai timer atau membuat timer baru

Yang tidak boleh dilakukan

Penggunaan 4 penampung di sini tidak diperlukan karena semua informasi akan diarahkan ke lokasi yang sama

Menggunakan penampung untuk tujuan fungsional

Untuk memastikan pengguna dapat mengantisipasi tindakan yang akan dilakukan setiap komponen dalam Kartu, sebaiknya jangan gunakan penampung untuk tujuan dekoratif atau struktural guna menghindari ketukan yang tidak melakukan apa pun.

Yang harus dilakukan

Solusi ini berfungsi karena satu-satunya tindakan Kartu adalah alur pembuatan, dan semua konten lainnya mengambang di latar belakang hitam

Yang tidak boleh dilakukan

Kartu ini lebih membingungkan karena sepertinya pengguna dapat berinteraksi dengan semua penampung

Menampilkan representasi grafik dan diagram yang mudah dilihat

Kemampuan melihat sekilas adalah kunci untuk desain Wear OS. Dengan waktu layar yang terbatas (sekitar 7 detik), prioritaskan informasi penting dalam format yang jelas dan mudah dipahami secara sekilas.

Ingat, smartwatch melengkapi pengalaman ponsel, yang memberikan akses cepat ke detail utama.

Yang harus dilakukan

Menampilkan representasi informasi numerik atau statistik singkat yang mudah dilihat, dan memungkinkan pengguna mengetuk untuk melihat informasi selengkapnya di aplikasi jika perlu

Yang tidak boleh dilakukan

Menampilkan informasi numerik atau statistik yang mendetail di Kartu