Pengaturan Ikon

Pemilihan Ikon

Poin penting: Memilih ikon yang ditampilkan. Dapat membantu menyampaikan makna yang sulit dipahami hanya dengan teks.

Pengaruh pengaturan ini: Titik fokus pandangan bertambah sehingga pengenalan informasi menjadi lebih cepat.

Tips pengaturan: Pilih ikon yang tidak terlalu tumpang tindih maknanya dengan teks, atau tidak bertentangan, agar beban pemahaman berkurang.

Item pengaturan

• Pemilihan ikon: Memilih ikon yang ditampilkan untuk membantu penyampaian makna.
• Warna ikon (dalam UI pemilihan): Memilih warna ikon untuk menjaga keselarasan dengan teks dan latar belakang.
• Ketebalan stroke (ikon garis): Mengatur ketebalan garis ikon untuk mengoptimalkan visibilitas. Nilai default-nya adalah 1.75. Jika nilai diatur ke 0, ikon ditampilkan dengan ketebalan garis aslinya.
• Responsif: Memungkinkan pemilihan ikon berbeda per perangkat. Bisa digunakan untuk beralih ke ikon yang lebih sederhana di SP (mobile).

Juga dimungkinkan untuk beralih ke ikon berbeda saat hover. Ikon hover dapat diatur secara individual per perangkat.

Kondisi ikon tersembunyi: Jika ikon tidak dipilih dan ukuran icon frame adalah 0, seluruh area ikon tidak akan di-output dalam HTML (tidak ada dalam DOM). Jika icon frame memiliki ukuran atau warna latar, frame saja yang ditampilkan meskipun ikon tidak dipilih.

Optimasi ikon responsif: Secara default, hanya ikon PC (desktop) yang di-output, sedangkan ikon MD/TB/SP dihilangkan. Untuk menggunakan ikon berbeda per perangkat, Anda perlu mengaktifkan "Responsif". Perpindahan antar ikon responsif dilakukan dengan display: none/flex, sehingga transisi (fade) tidak diterapkan.

Warna Ikon

Poin penting: Mengatur warna ikon. Memastikan visibilitas sambil menjaga keselarasan dengan teks dan latar belakang.

Pengaruh pengaturan ini: Jika ikon terlalu mencolok akan menjadi noise, jika terlalu lemah kehadirannya akan hilang.

Tips pengaturan: Mulai dengan menyamakan warna teks, lalu beralih ke warna aksen hanya jika diperlukan agar keselarasan terjaga.

Item pengaturan

• Warna: Mengatur warna untuk menyesuaikan visibilitas elemen dan keselarasan desain.
• Alpha: Mengatur transparansi untuk menyesuaikan intensitas tumpang tindih.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah tampilan berantakan.

Ukuran Ikon

Poin penting: Mengatur ukuran ikon. Menyesuaikan tingkat ketegasan yang sesuai sebagai pelengkap informasi.

Pengaruh pengaturan ini: Jika perbedaan ukuran terlalu besar, keseimbangan titik berat tombol akan terganggu.

Tips pengaturan: Mulai dari 0.9-1.2 kali ukuran teks body, lalu sesuaikan sedikit demi sedikit dengan melihat keselarasan atas-bawah.

Item pengaturan

• Nilai ukuran: Mengatur nilai numerik ukuran ikon untuk menyesuaikan keseimbangan dengan teks utama.
• Satuan (px / em / rem): Menentukan satuan ukuran ikon, memilih antara perilaku relatif/tetap.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah tampilan berantakan.

Ukuran ikon saat hover juga dapat diatur secara terpisah. Mengubah ukuran saat hover memberikan efek animasi. Menggunakan satuan em akan membuat ukuran ikon berubah sesuai Ukuran Font, sehingga keseimbangan dengan teks terjaga secara otomatis.

Posisi Ikon

Poin penting: Mengatur posisi dan offset ikon. Anda dapat menyesuaikan jarak dan perataan dengan teks.

Pengaruh pengaturan ini: Tergantung penempatannya, keterbacaan dan penyampaian maksud klik dapat berubah.

Tips pengaturan: Mulai dengan perataan tengah sebagai dasar, dan geser X/Y sedikit demi sedikit hanya jika diperlukan agar tidak berantakan.

Item pengaturan

• X Posisi (left / center / right + nilai): Mengatur posisi horizontal untuk menyesuaikan jarak dengan teks.
• Y Posisi (top / center / bottom + nilai): Mengatur posisi vertikal untuk menyeimbangkan tata letak atas-bawah.
• Satuan (px / % / vw): Memilih satuan penyesuaian posisi untuk menentukan tingkat responsivitas terhadap lebar layar.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah tampilan berantakan.

Icon Frame

Poin penting: Mengatur bingkai latar belakang ikon. Dapat memperkuat ikon sebagai elemen visual yang berdiri sendiri.

Pengaruh pengaturan ini: Efektif untuk CTA yang ingin membuat hierarki informasi.

Tips pengaturan: Jika frame diperkuat, kurangi satu tingkat dekorasi tombol utama agar keseimbangan keseluruhan terjaga.

Item pengaturan

• Ukuran > Set Lebar and Tinggi Individually: Beralih ke pengaturan lebar dan tinggi terpisah. Digunakan untuk membuat frame vertikal/horizontal.
• Ukuran > Ukuran seragam + satuan: Menyesuaikan frame persegi secara seragam. Efisien untuk menentukan ukuran dasar terlebih dahulu di sini.
• Ukuran > Lebar / Tinggi individual + satuan: Mengatur dimensi individual untuk penyesuaian detail rasio ikon dan keseimbangan margin.
• Ukuran > Responsif: Menyesuaikan dimensi frame per perangkat untuk mencegah tampilan terlalu sempit di SP (mobile).
• Warna > Background Warna: Mengatur warna latar belakang frame. Dasar pemilihan adalah warna yang tidak bersaing dengan tombol utama.
• Warna > Alpha: Mengatur transparansi warna latar. Jika terlalu kuat, kurangi di sini terlebih dahulu.
• Warna > Gradient: Beralih ke latar belakang gradien untuk menambahkan kesan dimensi dan dekoratif.
• Warna > Responsif: Menyesuaikan intensitas warna per perangkat untuk menjaga keterbacaan.
• Perbatasan > Display Posisi (T/R/B/L): Menentukan sisi mana yang menampilkan garis tepi untuk membuat ekspresi aksen parsial.
• Perbatasan > Style: Memilih jenis garis untuk menyesuaikan tone frame (tegas/ringan).
• Perbatasan > Warna + Alpha: Mengatur warna dan transparansi garis tepi untuk memperjelas batas dengan latar belakang.
• Perbatasan > Ukuran: Menyesuaikan ketebalan garis. Perhatikan jangan sampai garis tepi lebih mencolok dari ikon.
• Perbatasan > Responsif: Mengoptimalkan ketebalan dan ketegasan garis per perangkat.
• Radius Tepi > Radius: Mengatur kelengkungan sudut frame. Perhatikan keselarasan dengan bentuk tombol utama.
• Radius Tepi > Satuan (px / %): Memilih antara nilai tetap atau rasio agar kesan yang sama terjaga di berbagai ukuran.
• Radius Tepi > Responsif: Menyesuaikan border radius per perangkat untuk mencegah tampilan yang rusak.
• Transisi > Duration / Delay / Pelemahan / Nilai Kustom / Reset: Mengatur kecepatan perubahan frame saat hover untuk mengontrol intensitas efek.

Icon frame juga dapat diatur secara individual untuk keadaan hover. Mengubah warna frame atau border radius saat hover dapat memperkuat efek feedback operasi tombol. Transisi frame dapat diatur secara independen dari transisi ikon itu sendiri.

Transisi

Poin penting: Mengatur kecepatan perubahan dari keadaan normal ke keadaan hover. Pengaturan yang menentukan "kenyamanan" saat berinteraksi.

Pengaruh pengaturan ini: Jika terlalu cepat, perubahan tidak terasa; jika terlalu lambat, respons terasa lambat.

Tips pengaturan: Mulai dengan Duration 200-350ms sebagai dasar, dan tambahkan delay atau custom easing hanya pada bagian yang memerlukan efek.

Item pengaturan

• Durasi (ms): Mengatur durasi waktu perubahan untuk menyesuaikan kecepatan respons.
• Tunda (ms): Mengatur waktu tunggu sebelum perubahan dimulai untuk menyesuaikan timing efek.
• Pelemahan: Mengatur kurva perubahan kecepatan untuk menyempurnakan kesan gerakan.
• Nilai Kustom: Menentukan nilai custom easing (format CSS cubic-bezier) untuk penyesuaian detail kualitas perubahan ikon.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.

Transisi ini diterapkan pada perubahan hover warna, ukuran, dan posisi ikon. Transisi icon frame dan transisi animasi ikon masing-masing merupakan pengaturan yang independen.