Ikon
Ikon adalah simbol visual yang menyampaikan makna dengan cepat, membimbing pengguna melalui tindakan, status, dan kategori. Ia direka dengan proporsi, ketebalan garisan, dan gaya yang konsisten untuk memastikan penampilan yang seragam di seluruh komponen.
Terdapat 4 jenis set ikon:
- Ikon generik: Ikon yang mudah dan universal digunakan untuk fungsi biasa di laman web.
- Ikon WYSIWYG: Ikon yang mewakili alat pemformatan kandungan dalam editor teks.
- Ikon media sosial: Ikon yang digunakan untuk pautan ke platform media sosial.
- Ikon media: Ikon yang mewakili jenis fail yang sering digunakan dalam pemuat naik fail atau pratonton.
Garis Panduan Reka Bentuk Ikon
Saiz Grid
Ikon kami direka dalam grid 20x20 sebagai saiz asas. Ikon-ikon ini boleh diubah saiz mengikut keperluan untuk menyesuaikan dengan mana-mana situasi.
Lebar Garisan
Setiap ikon mengekalkan lebar garisan 1.5px (pada saiz ikon 20x20) selepas dieksport sebagai fail SVG, memberikan lebih fleksibiliti kepada pembangun untuk menyesuaikannya dalam kod.
Saiz
Untuk mengekalkan konsistensi dan keseimbangan visual, disarankan agar lebar garisan disesuaikan secara proporsional dengan saiz ikon.
| Size (px) | Where to use? |
|---|---|
| 16x16 | Digunakan dalam butang kecil |
| 20x20 | Digunakan dalam butang sederhana |
| 24x24 | Digunakan dalam butang besar |
| 32x32 | Digunakan dalam dialog amaran |
| 42x42 | Digunakan dalam dialog amaran |
Ikon Generik
Sekumpulan ikon 20x20 untuk tindakan biasa seperti carian, tambah, edit, buang, dan tetapan. Ikon-ikon ini direka untuk kejelasan dan konsistensi, memastikan ia mudah dikenali dan berfungsi.
Ikon Garis Luar
Ikon Penuh
Ikon WYSIWYG
Ikon WYSIWYG ("What You See Is What You Get") mewakili editor teks di mana pengguna memformat kandungan secara visual seperti yang akan dipaparkan di halaman akhir, menjadikan penyuntingan lebih intuitif tanpa memerlukan kod.
Ikon Media Sosial
Ikon media sosial menghubungkan ke profil media sosial agensi, biasanya diletakkan di footer atau bar navigasi untuk akses mudah.ocial media icons link to an agency's social media profiles, typically placed in the footer or navigation bar for easy access.
Ikon Media
Ikon media (PPTX, Excel, DOCX, PDF) mewakili jenis fail, membantu pengguna untuk mengenal pasti dan berinteraksi dengan fail dalam pemuat naik atau pratonton.
Contoh Penggunaan
Antara Muka Web
Gunakan ikon dalam butang, medan teks, amaran, dan lain-lain untuk menjadikan tindakan lebih jelas.
