Ikonografi dalam Windows

Ikonografi adalah sekumpulan gambar visual dan simbol yang membantu pengguna memahami dan berpindah melalui aplikasi Anda. Ikon digunakan di seluruh antarmuka pengguna sebagai metafora visual yang mewakili konsep, tindakan, atau status.

Windows 11 menggunakan tiga jenis ikon: aplikasi, sistem, dan jenis file. Artikel ini berfokus pada dua yang pertama.

Tip

Artikel ini menjelaskan bagaimana bahasa Fluent Design diterapkan ke aplikasi Windows. Untuk informasi selengkapnya, lihat Desain Fasih - Ikonografi.

Ikon aplikasi

Ikon aplikasi mewakili aplikasi Anda di shell Windows. Aplikasi ini terutama digunakan untuk membuka aplikasi Anda, tetapi juga mewakili aplikasi Anda di mana pun aplikasi tersebut muncul di shell Windows.

Ikon aplikasi harus mewakili fungsionalitas inti aplikasi Anda melalui metafora. Untuk informasi selengkapnya tentang mendesain dan membuat ikon aplikasi Anda, lihat Ikon aplikasi.

Ikon sistem

Gunakan ikon sistem di dalam antarmuka pengguna aplikasi Anda untuk item seperti bilah perintah, navigasi, atau indikator status. Windows 11 memperkenalkan font ikon sistem baru, Segoe Fluent Icons. Font baru ini melengkapi geometry dalam Windows 11.

Semua glyph dalam Segoe Fluent Icons digambar dalam gaya monoline. Itu berarti mereka dibuat dengan hanya satu goresan berukuran 1 epx.

Glyphs di Segoe Fluent Icons mengikuti tiga prinsip estetika:

• Minimal: Glyphs hanya berisi detail yang diperlukan untuk mengomunikasikan konsep.
• Harmonis: Glyph didasarkan pada bentuk sederhana dan geometris.
• Berkembang: Glyph menggunakan metafora modern yang mudah dipahami.

Untuk informasi selengkapnya tentang menggunakan ikon di UI aplikasi Anda, lihat Icons di aplikasi Windows.

Ukuran ikon

Metrik font untuk Segoe Fluent Icons cocok dengan bagaimana perancang dan pengembang terbiasa bekerja dengan ikon SVG dan bitmap.

Setiap glyph font dirancang sehingga luasan area ikon adalah satuan persegi em. Ikon dengan ukuran font 16-epx setara dengan ikon 16x16-epx, untuk membuat ukuran dan posisi lebih dapat diprediksi.

Pengubah

Anda dapat membuat glyph ikon sistem secara visual dengan menggabungkan ikon dasar dengan ikon pengubah.

Ikon dasar adalah elemen utama dari metafora visual. Elemen dasar harus menempati seluruh jejak ikon.

Ikon pengubah mengubah makna ikon dasar. Elemen pengubah harus ditempatkan di salah satu kuadran bawah jejak ikon.

Ikon dasar saja
Sendiri, ikon lembar kertas mengkomunikasikan konsep file.

Ikon dasar + ikon pengubah
Menambahkan panah atas ke ikon file mengubah arti ikon untuk mewakili file yang diunggah.

Penyusunan

Lapisan ikon adalah teknik yang digunakan untuk menumpangkan dua karakter (glyph). Sebaiknya gunakan lapisan ikon untuk membuat status yang berbeda dari ikon yang sama (misalnya, status aktif atau dipilih).

Lokalisasi

Pahami konnotasi budaya simbol. Meskipun ikonografi tidak memerlukan pelokalan dalam banyak kasus, ikon tertentu mungkin dapat diterima dalam satu budaya tetapi tidak di budaya lain. Validasi pilihan ikonografi Anda dengan konteks tempat Anda akan menggunakannya.

Examples

Buka aplikasi Galeri WinUI 3 dan lihat Prinsip ikonografi yang sedang beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.