Elemen Grafik

Elemen grafik memperlihatkan hubungan, hierarki, dan penekanan secara visual. Mereka termasuk latar belakang, spanduk, kaca, agregator, pemisah, bayangan, dan handel.

Contoh dengan beberapa jenis elemen grafis.

Elemen grafik biasanya tidak interaktif. Namun, pemisah interaktif untuk konten dan handel yang dapat diubah ukurannya adalah grafik yang menunjukkan interaktivitas.

Catatan: Panduan terkait dengan kotak grup , animasi , ikon , dan merek disajikan dalam artikel terpisah.

Apakah ini antarmuka pengguna yang tepat?

Meskipun elemen grafis adalah sarana visual yang kuat untuk menunjukkan hubungan, menggunakannya secara berlebihan menambahkan kekacauan visual dan mengurangi ruang yang tersedia di permukaan. Mereka harus digunakan dengan hemat.

Tren desain di Microsoft Windows adalah penampilan yang lebih sederhana dan lebih bersih dengan menghilangkan grafik dan garis yang tidak perlu.

Untuk memutuskan apakah elemen grafis diperlukan, pertimbangkan pertanyaan-pertanyaan ini:

• Apakah presentasi dan komunikasi desain sama jelas dan efektif tanpa elemen ? Jika demikian, hapus.
• Bisakah Anda secara efektif mengomunikasikan hubungan menggunakan tata letak saja? Jika demikian, gunakan tata letak sebagai gantinya. Anda dapat menempatkan kontrol terkait di samping satu sama lain dan menempatkan penspasian ekstra di antara kontrol yang tidak terkait. Anda juga dapat menggunakan indentasi untuk memperlihatkan hubungan hierarkis.

Dalam contoh ini, tata letak saja digunakan untuk memperlihatkan hubungan kontrol.

• Apakah komunikasi efektif tanpa teks? Jika tidak, gunakan kotak grup , pemisah berlabel, atau label lainnya.

Pola penggunaan

Elemen grafik memiliki beberapa pola penggunaan:

Elemen	Deskripsi
Ilustrasi grafik gunakan untuk mengomunikasikan ide secara visual.	Ilustrasi grafik mirip dengan ikon kecuali dapat berukuran apa pun dan biasanya tidak interaktif. Dalam contoh ini, ilustrasi grafis digunakan untuk menyarankan sifat fitur.
Latar Belakang gunakan untuk menekankan atau membatalkan penekanan jenis konten yang berbeda.	Latar belakang dapat digunakan untuk menekankan konten penting. dalam contoh ini, latar belakang digunakan untuk menekankan tugas penting. latar belakang juga dapat digunakan untuk membatalkan penekanan konten sekunder. Dalam contoh ini, tugas sekunder tidak ditekankan dengan menemukannya di panel tugas.
Banner digunakan untuk menunjukkan status penting.	Berbeda dengan latar belakang, banner menekankan terutama string teks tunggal. Dalam contoh ini, banner digunakan untuk menunjukkan bahwa pengaturan halaman dikontrol oleh Kebijakan Grup.
Kaca gunakan secara strategis untuk mengurangi bobot visual jendela.	Kaca dapat mengurangi berat permukaan dengan berfokus pada konten alih-alih jendela itu sendiri. Dalam contoh ini, kaca memfokuskan perhatian pengguna pada konten alih-alih kontrol.
Agregator gunakan untuk membuat hubungan visual antara kontrol yang sangat terkait.	dalam contoh ini, latar belakang agregator digunakan untuk menekankan hubungan antara tombol belakang dan maju di penjelajah. Dalam contoh ini, agregator batas digunakan untuk menekankan hubungan di antara kontrol, dan membuatnya merasa seperti kontrol tunggal alih-alih delapan.
Pemisah gunakan untuk memisahkan kontrol yang terkait lemah atau tidak terkait.	Pemisah dapat bersifat interaktif atau non-interaktif. pemisah interaktif antara konten yang dapat diubah ukurannya dikenal sebagai pemisah. dalam contoh ini, pemisah interaktif digunakan untuk konten yang dapat diubah ukurannya. Dalam contoh ini, pemisah tidak interaktif.
Bayangan gunakan untuk membuat konten menonjol secara visual terhadap latar belakangnya.	Dalam contoh ini, bayangan membuat karya seni menonjol di latar belakang.
Menangani gunakan untuk menunjukkan bahwa objek dapat dipindahkan atau diubah ukurannya.	Handel selalu interaktif dan perilakunya disarankan oleh penunjuk mouse di hover. Dalam contoh ini, handel menunjukkan bahwa objek dapat diubah ukurannya.

Pedoman

Umum

• Jangan menyampaikan informasi penting melalui elemen grafis saja. Melakukannya menghadirkan masalah aksesibilitas bagi pengguna dengan disabilitas visual atau gangguan.

Desain grafis

• Grafik paling efektif ketika mereka memperkuat satu ide sederhana. Grafik kompleks yang memerlukan pemikiran untuk menafsirkan tidak berfungsi dengan baik. Hieroglif terbaik dibiarkan untuk gambar gua.

  Salah:

  grafis kompleks

  Dalam contoh ini, grafik kompleks dari Windows XP secara tidak efektif mencoba menjelaskan keputusan kepercayaan yang kompleks.

• Jangan gunakan panah, chevron, bingkai tombol, atau keterlibatan lain yang terkait dengan kontrol interaktif. Melakukannya mengundang pengguna untuk berinteraksi dengan grafik Anda.

• Hindari swath murni merah, kuning, dan hijau dalam desain Anda. Untuk menghindari kebingungan, pesan warna-warna ini untuk mengomunikasikan status. Jika Anda harus menggunakan warna ini untuk sesuatu selain status, gunakan nada dibisukan alih-alih warna murni.

• Gunakan desain netral budaya. Apa yang mungkin memiliki arti tertentu dalam satu negara, wilayah, atau budaya mungkin tidak memiliki arti yang sama di negara lain.

• Hindari menggunakan bagian orang, wajah, jenis kelamin, atau tubuh, serta simbol agama, politik, dan nasional. Gambar tersebut mungkin tidak mudah diterjemahkan atau bisa menyinggung.

• Saat Anda harus mewakili orang atau pengguna, gambarkan mereka secara generik; menghindari penggambatan yang realistis.

Latar belakang dan spanduk

• Untuk menekankan konten, gunakan teks gelap pada latar belakang terang. Teks hitam pada latar belakang abu-abu muda atau kuning berfungsi dengan baik.

  

  Dalam contoh ini, tautan mendapatkan perhatian pengguna karena berada di latar belakang kuning.

• Untuk mendefinisikan konten, gunakan teks terang pada latar belakang gelap. Teks putih pada latar belakang abu-abu gelap atau biru berfungsi dengan baik.

  

  Dalam contoh ini, latar belakang gelap membatalkan penekanan konten.

• Jika gradien digunakan, pastikan warna teks memiliki kontras yang baik di seluruh gradien.

• Selalu gunakan ikon piksel 16x16 untuk menarik perhatian banner. Banner terlalu mudah untuk diabaikan sebaliknya. Untuk panduan dan contoh lainnya, lihat Ikon Standar.

• Gunakan latar belakang dan spanduk dengan hati-hati. Sementara niat latar belakang atau spanduk mungkin untuk menekankan konten, cukup sering hasilnya berlawanan dengan fenomena yang dikenal sebagai "banner buta."

Gelas

• Pertimbangkan untuk menggunakan kaca secara strategis di wilayah kecil yang menyentuh bingkai jendela tanpa teks. Melakukannya dapat memberikan program tampilan yang lebih sederhana, lebih ringan, lebih kohesif dengan membuat wilayah tampaknya menjadi bagian dari bingkai.
• Jangan gunakan kaca dalam situasi di mana latar belakang jendela biasa akan lebih menarik atau lebih mudah digunakan.

Pemisah

• Gunakan garis vertikal dan horizontal untuk pemisah. Pastikan untuk memiliki ruang yang cukup antara pemisah dan konten yang dipisahkan.
• Untuk pemisah antara konten yang dapat diskalakan (pemisah), tampilkan penunjuk ubah ukuran pada hover.

Dalam contoh ini, mengubah ukuran pointer ditampilkan di hover.

Bayangan

• Gunakan hanya untuk membuat konten atau objek paling signifikan program Anda diseret menonjol secara visual terhadap latar belakangnya. Pertimbangkan bayangan sebagai kekacauan visual dalam keadaan lain.

Dukungan dpi tinggi

• Mendukung mode video 96 dan 120 titik per inci (dpi). Deteksi mode dpi saat startup dan tangani peristiwa perubahan dpi. Windows dioptimalkan untuk 96 dan 120 dpi, dan menggunakan 96 dpi secara default.
• Lebih suka menyediakan bitmap terpisah yang dirender khusus untuk 96 dan 120 dpi daripada grafik penskalaan. Setidaknya sediakan versi 96 dan 120 dpi untuk bitmap yang paling penting dan terlihat, dan baik pusat atau skala yang lain. Aplikasi tersebut dianggap "sadar dpi tinggi" dan memberikan pengalaman visual keseluruhan yang lebih baik daripada program yang secara otomatis diskalakan oleh Windows.
  • Pengembang: Anda dapat mendeklarasikan program sadar dpi tinggi (dan mencegah penskalaan otomatis) mengatur bendera sadar dpi dalam manifes program, atau dengan memanggil API SetProcessDPIAware() selama inisialisasi program. Anda dapat menggunakan makro untuk menyederhanakan pemilihan grafik yang tepat. Untuk bitmap Win32, Anda dapat menggunakan SS_CENTERIMAGE untuk pusat atau SS_REALSIZECONTROL untuk menskalakan.
• Periksa program Anda di 96 dan 120 dpi untuk:
  • Grafik yang terlalu kecil atau terlalu besar.
  • Grafik sedang diklip, tumpang tindih, atau tidak pas.
  • Grafik yang direntangkan dengan buruk ("dipixilated").
  • Teks yang diklip atau tidak pas di latar belakang grafik.

Teks

• Untuk aksesibilitas dan pelokalan, jangan gunakan teks apa pun dalam grafik. Buat pengecualian hanya untuk mewakili merek dan teks sebagai konsep abstrak.