Halaman ini menjelaskan kasus penggunaan yang lebih canggih untuk Desainer Tampilan Jam, termasuk cara menambahkan dukungan untuk subdial, detail, dan tema warna. Untuk mempelajari lebih lanjut cara memulai, lihat panduan dasar-dasar.
Subdial
Anda dapat membuat jarum jam analog yang berputar dalam subbagian tampilan jam, seperti subdial pada jam tangan sungguhan.
Caranya, selesaikan langkah-langkah berikut:
Buat frame kosong yang mencakup area tempat Anda menempatkan subdial dalam desain:
Gambar 1: Bingkai kosong yang menutupi slot subdial Desain jarum detik Anda di dalam frame ini:
Gambar 2: Desain jarum detik yang berada dalam frame penampung Pilih bingkai subdial yang berisi jarum detik. Kemudian, di Desainer Tampilan Jam, setel Putar di sekitar ke "Pusat lapisan:"
Gambar 3: Setelah memilih frame yang berisi (kiri), pilih perilaku rotasi jarum detik (kanan)
Detail
Untuk menambahkan slot widget, tambahkan bingkai ke tampilan jam Anda. Di dalam frame ini, desain tampilan slot kartu jam pintar saat kosong. Hal ini membentuk desain dasar untuk jenis detail lainnya, seperti ikon dan teks.
Ada berbagai jenis komplikasi. Tampilan jam Anda menyediakan template untuk setiap jenis, dan aplikasi di smartwatch pengguna memutuskan template mana yang akan digunakan dan data mana yang akan diberikan untuk dirinya sendiri. Pengguna memilih aplikasi mana yang akan masuk ke slot detail mana.
Pilih frame yang berisi desain untuk slot detail. Kemudian, di Desainer Tampilan Jam, ubah Perilaku menjadi "Slot kartu". Proses ini akan membuat komponen, dengan satu varian (desain kosong).
Menerapkan jenis slot detail
Karena tidak terlalu berguna untuk menyertakan slot detail yang hanya mendukung jenis "kosong", tambahkan jenis lain. Di jendela Watch Face Designer, tekan + Support a new type, lalu pilih "Short text". Teks singkat adalah jenis detail yang didukung oleh sebagian besar aplikasi, yang menampilkan dua label kecil bersama ikon.
Langkah ini membuat varian lain untuk kita menampilkan desain untuk jenis komplikasi ini. Pilih baris "Teks pendek" untuk membuka bagian tersebut.
Saat mengedit lapisan di dalam template kartu jam, opsi "Perilaku" akan muncul. Opsi ini mirip dengan opsi pada tampilan jam, tetapi di sini Anda dapat memilih perilaku yang khusus untuk jenis detail yang sedang Anda edit.
Untuk contoh ini, lapisan di dalam komplikasi teks pendek dapat berupa judul aplikasi, teksnya, atau ikon satu warna. Satu warna berarti ikon mewarisi warna yang Anda tetapkan untuknya di Figma.
Setelah Anda membuat persegi panjang di tempat yang Anda inginkan agar ikon aplikasi muncul di tampilan jam, buka jendela Desainer Tampilan Jam dan tetapkan Perilaku ke "Ikon satu warna:"
Selanjutnya, buat dua lapisan teks. Lapisan ini merepresentasikan dua slot "teks pendek" lagi: satu untuk judul dan satu untuk teks:
Pratinjau menunjukkan bagaimana detail disatukan. Contoh ini menunjukkan tampilan kartu jam pintar jika aplikasi kalender ditetapkan ke slot ini.
Untuk menampilkan teks dalam huruf besar semua, seperti yang ditunjukkan pada gambar berikut, gunakan fitur huruf besar/kecil teks di menu Tipografi Figma.
Perhatikan bahwa, tidak seperti waktu digital, tidak ada ekspor font arbitrer untuk teks komplikasi. Detail selalu digambar menggunakan font sistem perangkat Wear OS, yang dapat bervariasi, tetapi biasanya adalah Roboto.
Untuk menambahkan dukungan bagi jenis detail tambahan, atau menyesuaikan setelan terkait seperti Aplikasi default atau apakah slot muncul saat smartwatch dalam mode standby, pilih slot detail dalam tampilan jam Anda:
Tema warna
Dalam tampilan jam, Anda dapat menyertakan beberapa opsi untuk tema warna. Pengguna kemudian dapat memilih tema yang diinginkan, menggunakan pemilih tampilan jam di smartwatch.
Desainer Tampilan Jam menyertakan dukungan untuk tema warna menggunakan gaya Figma.
Pertimbangkan kasus saat, dengan tampilan jam berikut, Anda ingin mengizinkan pengguna menyesuaikan warna jarum jam dan pelat jam:
Membuat gaya pertama
Untuk membuat gaya warna yang dapat disesuaikan di smartwatch, buat gaya baru:
- Membatalkan pilihan semua item di kanvas.
- Di sidebar kanan, di samping Gaya, pilih tombol +.
Anda harus menamainya dengan cara tertentu:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
Dalam hal ini, nama tampilan jam contoh adalah Bauhaus, sehingga warna dimulai
dengan warna tersebut, diikuti dengan Hands, yang merupakan elemen yang dapat disesuaikan pengguna.
Kemudian, berikan nama warna deskriptif, seperti Charcoal, dan tentukan elemen spesifik mana – jarum jam – yang warnanya harus diubah.
Dengan menggabungkan semuanya, nama akhirnya adalah: Bauhaus/Hands/Charcoal/Hours:
Ikuti proses serupa untuk membuat tema warna kustom bagi jarum menit:
Terakhir, tetapkan warna ini ke jarum jam yang muncul di tampilan jam:
Bauhaus/Hands/Charcoal/Minutes ke jarum menit tampilan jamMenambahkan gaya lain
Buat gaya baru dengan mengubah bagian Theme Name dari gaya. Contoh
berikut menambahkan gaya baru yang disebut Rust (Bauhaus/Hands/Rust/Hours):
Pengguna kemudian dapat beralih antara tema warna "Charcoal" dan "Rust" di perangkatnya, dan jarum jam dan menit tampilan jam Anda akan diwarnai ulang sesuai dengan tema warna yang dipilih:
Menerapkan ke elemen lain
Ikuti langkah-langkah serupa untuk membuat elemen lain pada tampilan jam kami dapat diubah tema. Tema ini dapat dipadupadankan, dan Anda dapat menggunakan sejumlah gaya warna untuk membuat tema kompleks yang dapat ditukar:
Dengan kumpulan gaya sebelumnya, Anda telah memberikan dua opsi untuk
jarum jam—Rust dan Charcoal—serta tiga opsi untuk pelat jam—Light, Dark, dan
Duotone:
