Ikon untuk aplikasi Windows

Ikon menyediakan singkatan visual untuk tindakan, konsep, atau produk. Dengan memadatkan makna ke dalam gambar simbolis, ikon dapat melintasi hambatan bahasa dan membantu menghemat sumber daya yang berharga: ruang layar.

Ikon yang bagus selaras dengan tipografi dan dengan bahasa desain lainnya. Mereka tidak mencampur metafora, dan mereka hanya berkomunikasi apa yang diperlukan, secepat dan sesering mungkin.

Ikon dapat muncul di dalam aplikasi dan di luarnya:

Ikon di dalam aplikasi

Di dalam aplikasi, Anda menggunakan ikon untuk mewakili tindakan, seperti menyalin teks atau masuk ke halaman pengaturan.

Ikon di luar aplikasi

Di luar aplikasi Anda, Windows menggunakan ikon untuk mewakili aplikasi di menu Mulai dan di taskbar. Jika pengguna memilih untuk menyematkan aplikasi ke menu Mulai, petak peta mulai aplikasi Anda dapat menampilkan ikon aplikasi. Ikon aplikasi muncul di bilah judul, dan Anda dapat memilih untuk membuat layar splash dengan logo aplikasi Anda.

Artikel ini menjelaskan ikon dalam aplikasi Anda. Untuk mempelajari tentang ikon di luar aplikasi Anda (ikon aplikasi), lihat artikel Ikonografi di Windows .

Mengetahui kapan harus menggunakan ikon

Ikon dapat menghemat ruang, tetapi kapan Anda harus menggunakannya?

Gunakan ikon untuk tindakan, seperti memotong, menyalin, menempel, dan menyimpan, atau untuk item pada menu navigasi.

Gunakan ikon jika sudah ada untuk konsep yang ingin Anda wakili. (Untuk melihat apakah ikon ada, periksa daftar ikon Segoe.)

Gunakan ikon jika mudah bagi pengguna untuk memahami apa arti ikon dan cukup sederhana untuk jelas pada ukuran kecil.

Jangan gunakan ikon jika maknanya tidak jelas, atau jika membuatnya jelas memerlukan bentuk yang kompleks.

Gunakan tipe ikon yang tepat

Ada banyak cara untuk membuat ikon. Anda dapat menggunakan font simbol seperti Segoe MDL2 Assets. Anda dapat membuat gambar berbasis vektor Anda sendiri. Anda bahkan dapat menggunakan gambar bitmap, meskipun kami tidak merekomendasikannya. Berikut adalah ringkasan cara menambahkan ikon ke aplikasi Anda.

Ikon yang telah ditentukan sebelumnya

Microsoft menyediakan lebih dari 1.000 ikon dalam bentuk font Segoe MDL2 Assets. Mungkin tidak intuitif untuk mendapatkan ikon dari font, tetapi teknologi tampilan font Windows berarti ikon ini akan terlihat tajam dan tajam pada layar apa pun, pada resolusi apa pun, dan pada ukuran apa pun. Untuk mengetahui petunjuknya, lihat Ikon Aset Segoe MDL2.

Font

Anda tidak perlu menggunakan font Segoe MDL2 Assets. Anda dapat menggunakan font apa pun yang telah diinstal pengguna pada sistem mereka, seperti Wingdings atau Webdings.

File SVG

Sumber daya Scalable Vector Graphics (SVG) sangat ideal untuk ikon, karena selalu terlihat tajam pada ukuran atau resolusi apa pun. Sebagian besar aplikasi gambar dapat diekspor ke SVG. Untuk petunjuknya, lihat SVGImageSource.

Objek geometri

Seperti file SVG, geometri adalah sumber daya berbasis vektor, sehingga selalu terlihat tajam. Namun, membuat geometri rumit karena Anda harus menentukan setiap titik dan kurva secara individual. Ini adalah pilihan yang baik hanya jika Anda perlu memodifikasi ikon saat aplikasi Anda berjalan (untuk menganimasikannya, misalnya). Untuk petunjuknya, lihat Memindahkan dan menggambar perintah untuk geometri.

Gambar bitmap

Anda dapat menggunakan gambar bitmap (seperti PNG, GIF, atau JPEG), meskipun kami tidak merekomendasikannya.

Gambar bitmap dibuat pada ukuran tertentu, sehingga harus ditingkatkan atau diturunkan skalanya tergantung pada seberapa besar Anda ingin ikon dan resolusi layar. Ketika gambar diturunkan skalanya (menyusut), gambar dapat tampak buram. Ketika ditingkatkan skalanya, itu bisa tampak blokir dan piksel. Jika Anda harus menggunakan gambar bitmap, sebaiknya gunakan PNG atau GIF melalui JPEG.

Membuat ikon melakukan sesuatu

Setelah Anda memiliki ikon, langkah selanjutnya adalah membuatnya melakukan sesuatu dengan mengaitkannya dengan perintah atau tindakan navigasi. Cara terbaik adalah menambahkan ikon ke tombol atau bilah perintah.

Anda juga dapat menganimasikan ikon untuk menarik perhatian pada komponen UI, seperti tombol berikutnya dalam tutorial, atau untuk mencerminkan tindakan yang terkait dengan ikon dengan cara yang menghibur dan menarik. Untuk informasi selengkapnya, lihat AnimatedIcon.

Tombol buat ikon

Anda dapat meletakkan ikon pada tombol standar. Karena Anda dapat menggunakan tombol di berbagai tempat, menggunakan ikon dengan cara ini memberi Anda sedikit lebih banyak fleksibilitas untuk tempat ikon tindakan Anda muncul.

Berikut adalah salah satu cara untuk menambahkan ikon ke tombol:

Langkah 1
Atur keluarga font tombol ke Segoe MDL2 Assets dan properti kontennya ke nilai Unicode dari glyph yang ingin Anda gunakan:

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Langkah 2
Gunakan salah satu objek elemen ikon: BitmapIcon, FontIcon, PathIcon, ImageIcon, atau SymbolIcon. Teknik ini memberi Anda lebih banyak jenis ikon untuk dipilih. Ini juga memungkinkan Anda untuk menggabungkan ikon dan jenis konten lainnya, seperti teks, jika Anda mau.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Membuat serangkaian ikon pada bilah perintah

Saat Anda memiliki serangkaian perintah yang disatukan, seperti potong/salin/tempel atau sekumpulan perintah gambar untuk program pengeditan foto, satukan perintah pada bilah perintah. Bilah perintah mengambil satu atau beberapa tombol bilah aplikasi atau tombol bolak-balik bilah aplikasi, yang masing-masing mewakili tindakan. Setiap tombol memiliki properti Ikon yang Anda gunakan untuk mengontrol ikon mana yang ditampilkannya. Ada berbagai cara untuk menentukan ikon.

Cara termampunya adalah dengan menggunakan daftar ikon yang telah ditentukan sebelumnya. Cukup tentukan nama ikon, seperti Kembali atau Berhenti, dan sistem akan menggambarnya:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Untuk daftar lengkap nama ikon, lihat Referensi enumerasi simbol.

Ada cara lain untuk menyediakan ikon untuk tombol pada bilah perintah:

• FontIcon: Ikon didasarkan pada glyph dari keluarga font yang ditentukan.
• BitmapIcon: Ikon didasarkan pada file gambar bitmap dengan URI yang ditentukan.
• PathIcon: Ikon didasarkan pada data Jalur .
• ImageIcon: Ikon didasarkan pada jenis file gambar yang didukung kelas Gambar .

Untuk mempelajari selengkapnya tentang bilah perintah, lihat artikel Bilah perintah .

Artikel terkait

• Ikon dan logo aplikasi
• AnimatedIcon