Bagikan melalui


Ikonografi di Windows 11

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.

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

Ikon aplikasi

Ikon aplikasi abstrak untuk aplikasi peta hipotetis.

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

Ikon ke cart belanja dari Segoe Fluent Icons.

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 geometri di Windows 11.

Semua glyph dalam Segoe Fluent Icons digambar dalam gaya monoline. Itu berarti mereka dibuat melalui satu goresan 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 antarmuka pengguna aplikasi Anda, lihat Ikon di aplikasi Windows.

Ukuran ikon

Ikon printer berukuran tepat.

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

Setiap glyph font dirancang sehingga jejak area ikon adalah em persegi. 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 arti ikon dasar. Elemen pengubah harus ditempatkan di salah satu kuadran bawah jejak ikon.

Ikon file.

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

Ikon file dilapisi dengan ikon panah atas.

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

Layering

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

Ikon folder hitam dan putih ditambah ikon folder beige tanpa kerangka sama dengan ikon folder beige dengan kerangka hitam.

Pelokalan

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.

Contoh

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub