Gambar dan Ikon untuk Visual Studio
Penggunaan gambar di Visual Studio
Sebelum membuat karya seni, pertimbangkan untuk menggunakan 1.000+ gambar di Visual Studio Image Library.
Jenis gambar
Ikon. Gambar kecil yang muncul dalam perintah, hierarki, templat, dan sebagainya. Ukuran ikon default yang digunakan di Visual Studio adalah PNG 16x16. Ikon yang dihasilkan oleh layanan gambar secara otomatis menghasilkan format XAML untuk dukungan HDPI.
Catatan
Saat gambar digunakan dalam sistem menu, Anda tidak boleh membuat ikon untuk setiap perintah. Lihat Menu dan Perintah untuk Visual Studio untuk melihat apakah perintah Anda akan mendapatkan ikon.
Thumbnail. Gambar yang digunakan dalam area pratinjau dialog, seperti dialog Proyek Baru.
Gambar dialog. Gambar yang muncul dalam dialog atau wizard, baik sebagai grafik deskriptif atau indikator pesan. Gunakan jarang dan hanya jika perlu untuk mengilustrasikan konsep yang sulit atau mendapatkan perhatian pengguna (peringatan, peringatan).
Gambar animasi. Digunakan dalam indikator kemajuan, bilah status, dan dialog operasi.
Kursor. Digunakan untuk menunjukkan apakah operasi diizinkan menggunakan mouse, di mana objek dapat dihilangkan, dan sebagainya.
Desain ikon
Visual Studio menggunakan ikon bergaya modern, yang memiliki geometri bersih dan keseimbangan 50/50 positif/negatif (terang/gelap), dan menggunakan metafora langsung dan dapat dimengerti. Titik desain ikon penting berpusat di sekitar kejelasan, penyederhanaan, dan konteks.
Kejelasan: fokus pada metafora inti yang memberikan ikon makna dan individualitasnya.
Penyederhanaan: kurangi ikon ke makna intinya - dapatkan tema di seluruh hanya dengan elemen yang diperlukan dan tanpa embel-embel.
Konteks: pertimbangkan semua aspek peran ikon selama pengembangan konsep, yang sangat penting saat memutuskan elemen mana yang merupakan metafora inti ikon.
Dengan ikon, ada sejumlah titik desain untuk menghindari:
Jangan gunakan ikon yang menandakan elemen UI kecuali jika sesuai. Pilih pendekatan yang lebih abstrak atau simbolis ketika elemen UI tidak umum, terbukti, atau unik.
Jangan terlalu sering menggunakan elemen umum seperti dokumen, folder, panah, dan kaca pembesar. Gunakan elemen tersebut hanya ketika penting untuk arti ikon. Misalnya, kaca pembesar yang menghadap kanan hanya boleh menunjukkan Pencarian, Telusuri, dan Temukan.
Meskipun beberapa elemen ikon warisan mempertahankan penggunaan perspektif, jangan membuat ikon baru dengan perspektif kecuali elemen tidak memiliki kejelasan tanpanya.
Jangan menjejalkan terlalu banyak informasi ke dalam ikon. Gambar sederhana yang dapat dengan mudah dikenali atau dipelajari sebagai simbol yang dapat dikenali jauh lebih berguna daripada gambar yang terlalu kompleks. Ikon tidak dapat menceritakan seluruh cerita.
Pembuatan ikon
Pengembangan konsep
Visual Studio memiliki berbagai jenis ikon dalam antarmuka penggunanya. Pertimbangkan jenis ikon dengan hati-hati selama pengembangan. Jangan gunakan objek UI yang tidak jelas atau jarang untuk elemen ikon Anda. Pilih simbolis dalam kasus ini, seperti dengan ikon Tag Pintar. Perhatikan bahwa arti tag abstrak di sebelah kiri lebih jelas daripada versi samar berbasis UI di sebelah kanan:
| Penggunaan citra simbolis yang benar | Penggunaan citra simbolis yang salah |
|---|---|
 |
 |
Ada instans di mana elemen antarmuka pengguna standar dan mudah dikenali bekerja dengan baik untuk ikon. Tambahkan Jendela adalah salah satu contoh seperti:
| Elemen UI yang benar dalam ikon | Elemen UI salah dalam ikon |
|---|---|
 |
 |
Jangan gunakan dokumen sebagai elemen dasar kecuali penting untuk arti ikon. Tanpa elemen dokumen pada Tambahkan Dokumen (di bawah) artinya hilang, sedangkan dengan Refresh elemen dokumen tidak perlu untuk mengomunikasikan arti.
| Penggunaan ikon dokumen yang benar | Penggunaan ikon dokumen yang salah |
|---|---|
 |
 |
Konsep "show" harus diwakili oleh ikon yang paling menggambarkan apa yang ditampilkan, seperti dengan contoh Tampilkan Semua File. Metafora lensa dapat digunakan untuk menunjukkan konsep "tampilan" jika perlu, seperti dengan contoh Tampilan Sumber Daya.
| "Tampilkan" | "Lihat" |
|---|---|
 |
 |
Ikon kaca pembesar yang menghadap kanan hanya boleh mewakili Pencarian, Temukan, dan Telusuri. Varian menghadap ke kiri dengan tanda plus atau tanda minus hanya boleh mewakili perbesar/perkecil tampilan.
| "Cari" | "Zoom" |
|---|---|
 |
 |
Dalam tampilan pohon, jangan gunakan ikon folder dan pengubah. Jika tersedia, gunakan pengubah saja.
| Ikon tampilan pohon yang benar | Ikon tampilan pohon salah |
|---|---|
  |
  |
Detail gaya
Tata letak
Elemen tumpukan seperti yang ditunjukkan untuk ikon standar 16x16:
Tumpukan tata letak untuk ikon 16x16
Elemen pemberitahuan status lebih baik digunakan sebagai ikon mandiri. Namun, ada konteks di mana pemberitahuan harus ditumpuk pada elemen dasar, seperti dengan ikon Tugas Selesai:
Ikon pemberitahuan mandiri
Ikon Tugas Selesai
Ikon proyek biasanya .ico file yang berisi beberapa ukuran. Sebagian besar ikon 16x16 berisi elemen yang sama. Versi 32x32 memiliki detail lebih lanjut, termasuk jenis proyek jika berlaku.
Ikon Proyek Pustaka Kontrol Windows VB, 16x16 dan 32x32
Tengahkan ikon dalam bingkai pikselnya. Jika tidak memungkinkan, ratakan ikon ke bagian atas dan/atau kanan bingkai.
Ikon berpusat di dalam bingkai piksel
Ikon diratakan ke kanan atas bingkai
Ikon dipusatkan dan diratakan ke bagian atas bingkai
Untuk mencapai keselarasan dan keseimbangan yang ideal, hindari menghalangi elemen dasar ikon dengan glyph tindakan. Tempatkan glyph di dekat kiri atas elemen dasar. Saat menambahkan elemen tambahan, pertimbangkan perataan dan keseimbangan ikon.
| Perataan dan keseimbangan yang benar | Perataan dan keseimbangan yang salah |
|---|---|
 |
 |
Pastikan paritas ukuran untuk ikon yang berbagi elemen dan digunakan dalam set. Perhatikan bahwa dalam pemasangan yang salah, lingkaran dan panah terlalu besar dan tidak cocok.
| Paritas ukuran yang benar | Paritas ukuran salah |
|---|---|
 |
 |
Gunakan bobot garis dan visual yang konsisten. Evaluasi bagaimana ikon yang Anda bangun dibandingkan dengan ikon lain dengan menggunakan perbandingan berdampingan. Jangan pernah menggunakan seluruh bingkai 16x16, gunakan 15x15 atau lebih kecil. Rasio negatif-ke-positif (gelap-ke-terang) harus 50/50.
| Rasio negatif-ke-positif yang benar | Rasio negatif-ke-positif yang salah |
|---|---|
   |
 |
Gunakan bentuk sederhana dan sebanding dan sudut pelengkap untuk membangun elemen Anda tanpa mengorbankan integritas elemen. Gunakan sudut 45° atau 90° jika memungkinkan.
Perspektif
Jaga agar ikon tetap jelas dan dapat dimengerti. Gunakan perspektif dan sumber cahaya hanya jika perlu. Meskipun menggunakan perspektif pada elemen ikon harus dihindari, beberapa elemen tidak dapat dikenali tanpanya. Dalam kasus seperti itu, perspektif bergaya mengkomunikasikan kejelasan elemen.
Perspektif 3 poin
Perspektif 1 poin
Sebagian besar elemen harus menghadap atau bersanding ke kanan:
Gunakan sumber cahaya hanya saat menambahkan kejelasan yang diperlukan ke objek.
| Sumber cahaya yang benar | Sumber cahaya salah |
|---|---|
 |
 |
Gunakan kerangka hanya untuk meningkatkan legibilitas atau untuk mengomunikasikan metafora dengan lebih baik. Keseimbangan negatif-positif (terang gelap) harus 50/50.
| Penggunaan kerangka yang benar | Penggunaan kerangka yang salah |
|---|---|
 |
 |
Jenis ikon
Ikon shell dan bilah perintah terdiri dari tidak lebih dari tiga elemen berikut: satu dasar, satu pengubah, satu tindakan, atau satu status.
Contoh ikon shell dan bilah perintah
Ikon bilah perintah jendela alat terdiri dari tidak lebih dari tiga elemen berikut: satu dasar, satu pengubah, satu tindakan, atau satu status.
Contoh ikon bilah perintah jendela alat
Ikon disambiguator tampilan pohon terdiri dari tidak lebih dari tiga elemen berikut: satu dasar, satu pengubah, satu tindakan, atau satu status.
Contoh ikon disambiguator tampilan pohon
Ikon taksonomi nilai berbasis status ada di status berikut: aktif, aktif dinonaktifkan, dan tidak aktif dinonaktifkan.
Contoh ikon taksonomi nilai berbasis status
Ikon IntelliSense terdiri dari tidak lebih dari tiga elemen berikut: satu dasar, satu pengubah, dan satu status.
Contoh ikon IntelliSense
Ikon proyek kecil (16x16) harus memiliki tidak lebih dari dua elemen: satu basis dan satu pengubah.
Contoh ikon proyek kecil (16x16)
Ikon proyek besar (32x32) terdiri dari tidak lebih dari empat elemen berikut: satu dasar, satu hingga dua pengubah, dan satu overlay bahasa.
Contoh ikon proyek besar (32x32)
Detail produksi
Semua elemen UI baru harus dibuat menggunakan Windows Presentation Foundation (WPF) dan semua ikon baru untuk WPF harus dalam format PNG 32-bit. PNG 24-bit adalah format warisan yang tidak mendukung transparansi dan oleh karena itu tidak direkomendasikan untuk ikon.
Simpan resolusi pada 96 DPI.
Tipe file
PNG 32-bit: format yang disukai untuk ikon. Format file kompresi data tanpa kehilangan yang dapat menyimpan satu gambar raster (piksel). File PNG 32-bit mendukung transparansi alfa-channel, koreksi gamma, dan interlacing.
BMP 32-bit: untuk kontrol non-WPF. Juga disebut XP atau warna tinggi, BMP 32-bit adalah format gambar RGB/A, gambar warna sejati dengan transparansi saluran alfa. Saluran alfa adalah lapisan transparansi yang ditunjuk dalam Adobe Photoshop yang kemudian disimpan dalam bitmap sebagai saluran warna tambahan (keempat). Latar belakang hitam ditambahkan selama produksi karya seni ke semua file BMP 32-bit untuk memberikan isjin visual cepat tentang kedalaman warna. Latar belakang hitam ini mewakili area yang akan ditutupi di UI.
ICO 32-bit: untuk ikon Proyek dan Tambahkan Item. Semua file ICO berwarna benar 32-bit dengan transparansi alfa-channel (RGB/A). Karena file ICO dapat menyimpan beberapa ukuran dan kedalaman warna, ikon Vista sering dalam format ICO yang berisi ukuran gambar 16x16, 32x32, 48x48, dan 256x256. Agar dapat ditampilkan dengan benar di Windows Explorer, file ICO harus disimpan ke kedalaman warna 24-bit dan 8-bit untuk setiap ukuran gambar.
XAML: untuk permukaan desain dan windows adorner. Ikon XAML adalah file gambar berbasis vektor yang mendukung penskalaan, putar, pengarsipan, dan transparansi. Mereka tidak umum di Visual Studio saat ini tetapi menjadi lebih populer karena fleksibilitasnya.
SVG
BMP 24-bit: untuk bilah perintah Visual Studio. Format gambar RGB true-color, BMP 24-bit adalah konvensi ikon yang membuat lapisan transparansi dengan menggunakan magenta (R=255, G=0, B=255) sebagai kunci warna untuk lapisan transparansi knock-out. Dalam BMP 24-bit, semua permukaan magenta ditampilkan menggunakan warna latar belakang.
GIF 24-bit: untuk bilah perintah Visual Studio. Format gambar RGB warna benar yang mendukung transparansi. File GIF sering digunakan dalam karya seni Wizard dan animasi GIF.
Konstruksi ikon
Ukuran ikon terkecil di Visual Studio adalah 16x16. Penggunaan umum terbesar adalah 32x32. Perlu diingat untuk tidak mengisi seluruh bingkai 16x16, 24x24, atau 32x32 saat merancang ikon. Konstruksi ikon seragam yang dapat terbaca sangat penting untuk pengenalan pengguna. Patuhi titik-titik berikut saat membangun ikon.
Ikon harus jelas, dapat dimengerti, dan konsisten.
Lebih baik menggunakan elemen pemberitahuan status sebagai ikon tunggal dan tidak menumpuknya di atas elemen dasar ikon. Dalam konteks tertentu, UI mungkin mengharuskan elemen status dipasangkan dengan elemen dasar.
Ikon proyek biasanya .ico file yang berisi beberapa ukuran. Hanya ikon 16x16, 24x24, dan 32x32 yang sedang diperbarui. Sebagian besar ikon 16x16 dan 24x24 akan berisi elemen yang sama. Ikon 32x32 berisi detail selengkapnya, termasuk jenis bahasa proyek jika berlaku.
Untuk ikon 32x32, elemen dasar umumnya memiliki ketebalan garis 2 piksel. Ketebalan garis 1 atau 2 piksel dapat digunakan untuk elemen detail. Gunakan penilaian terbaik Anda untuk menentukan mana yang lebih cocok.
Memiliki setidaknya spasi 1 piksel antara elemen untuk ikon 16x16 dan 24x24. Untuk ikon 32x32, gunakan penspasian 2 piksel antara elemen dan antara pengubah dan elemen dasar.
Penspasian elemen untuk ikon berukuran 16x16, 24x24, dan 32x32
Warna dan aksesibilitas
Panduan kepatuhan Visual Studio mengharuskan semua ikon dalam produk melewati persyaratan aksesibilitas untuk warna dan kontras. Ini dicapai melalui inversi ikon, dan ketika Anda merancang, Anda harus menyadari bahwa mereka akan terbalik secara terprogram dalam produk.
Untuk informasi selengkapnya tentang menggunakan warna di ikon Visual Studio, lihat Menggunakan warna dalam gambar.
Menggunakan warna dalam gambar
Ikon di Visual Studio terutama monokromatik. Warna dicadangkan untuk menyampaikan informasi tertentu dan tidak pernah untuk dekorasi. Warna digunakan:
untuk menunjukkan tindakan
untuk memperingatkan pengguna ke pemberitahuan status
untuk menunjuk afiliasi bahasa
untuk membedakan item dalam IntelliSense
Aksesibilitas
Panduan kepatuhan Visual Studio mengharuskan semua ikon yang diperiksa ke dalam produk melewati persyaratan aksesibilitas untuk warna dan kontras. Warna dalam palet bahasa visual telah diuji dan memenuhi persyaratan ini.
Inversi warna untuk tema gelap
Untuk membuat ikon muncul dengan rasio kontras yang benar dalam tema gelap Visual Studio, inversi diterapkan secara terprogram. Warna dalam panduan ini telah dipilih sebagian sehingga terbalik dengan benar. Batasi penggunaan warna Anda ke palet ini, atau Anda akan mendapatkan hasil yang tidak dapat diprediksi saat inversi diterapkan.
Contoh ikon yang memiliki warna terbalik
Palet dasar
Semua ikon standar berisi tiga warna dasar. Ikon tidak berisi gradien atau bayangan jatuh, dengan satu atau dua pengecualian untuk ikon alat 3D.
| Penggunaan | Nama | Nilai (Tema ringan) | Swatch | Contoh |
|---|---|---|---|---|
| Latar Belakang/Gelap | VS BG | 424242 / 66,66,66 |  |
 |
| Latar Depan/Cahaya | VS FG | F0EFF1 / 240.239.241 |  |
|
| Kerangka | VS Out | F6F6F6 / 246.246.246 |  |
Selain warna dasar, setiap ikon mungkin berisi satu warna tambahan dari palet yang diperluas.
Palet yang diperluas
Pengubah tindakan
Empat warna di bawah ini menunjukkan jenis tindakan yang diperlukan oleh pengubah tindakan:
| Penggunaan | Nama | Nilai (semua tema) | Swatch |
|---|---|---|---|
| Positif | VS Action Green | 388A34 / 56.138.52 |  |
| Negatif | VS Action Red | A1260D / 161,38,13 |  |
| netral | VS Action Blue | 00539C / 0,83,156 |  |
| Buat/Baru | Vs Action Oranye | C27D1A / 194.156.26 |  |
Contoh
Hijau digunakan untuk pengubah tindakan positif seperti "Tambahkan," "Jalankan," "Putar," dan "Validasi."
| jalankan | Mengeksekusi kueri | Putar semua langkah | Kontrol Tambahkan |
|---|---|---|---|
 |
 |
 |
 |
Merah digunakan untuk pengubah tindakan negatif seperti "Hapus," "Hentikan," "Batal," dan "Tutup."
| Hapus Hubungan | Hapus Kolom | Hentikan Kueri | Koneksi Offline |
|---|---|---|---|
 |
 |
 |
 |
Biru diterapkan pada pengubah tindakan netral yang paling umum direpresentasikan sebagai panah, seperti "Buka," "Berikutnya," "Sebelumnya," "Impor," dan "Ekspor."
| Buka Bidang | Batched Check-In | Editor Alamat | Editor Asosiasi |
|---|---|---|---|
 |
 |
 |
 |
Emas gelap terutama digunakan untuk pengubah "Baru".
| Proyek Baru | Buat Grafik Baru | Pengujian Unit Baru | Item Daftar Baru |
|---|---|---|---|
 |
 |
 |
 |
Kasus khusus
Dalam kasus khusus, pengubah tindakan berwarna dapat digunakan secara independen sebagai ikon mandiri. Warna yang digunakan untuk ikon mencerminkan tindakan yang terkait dengan ikon. Penggunaan ini terbatas pada subset kecil ikon, termasuk:
| jalankan | Stop | Hapus | Simpan | Kembali |
|---|---|---|---|---|
|
 |
 |
 |
 |
Palet hierarki kode
Folder
| Penggunaan | Nama | Nilai (semua tema) | Swatch | Contoh |
|---|---|---|---|---|
| Folder | Folder | DCB67A / 220.182.122 |  |
 |
Bahasa Visual Studio
Setiap bahasa atau platform umum yang tersedia di Visual Studio memiliki warna terkait. Warna-warna ini digunakan pada ikon dasar, atau pada pengubah bahasa yang muncul di sudut kanan atas ikon majemuk.
| Penggunaan | Nama | Nilai (semua tema) | Swatch |
|---|---|---|---|
| ASP, HTML, WPF | ASP HTML WPF Blue | 0095D7 / 0.149.215 |  |
| C++ | CPP Ungu | 9B4F96 / 155.79.150 |  |
| C# | CS Green (VS Action Green) | 388A34 / 56.138.52 | |
| CSS | CSS Merah | BD1E2D / 189.30.45 |  |
| F# | FS Ungu | 672878 / 103,40,120 |  |
| JavaScript | JS Oranye | F16421 / 241.100.33 |  |
| VB | VB Blue (VS Action Blue) | 00539C / 0,83,156 | |
| TypeScript | Oranye TS | E04C06 / 224.76,6 |  |
| Python | Hijau PY | 879636 / 135,150,54 |  |
Contoh ikon dengan pengubah bahasa
| VB | C# | C++ | F# | JavaScript | Python |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| HTML | WPF | ASP | CSS | TypeScript |
|---|---|---|---|---|
 HTML |
 WPF |
 ASP |
 CSS |
 TypeScript |
IntelliSense
Ikon IntelliSense menggunakan palet warna eksklusif. Warna-warna ini digunakan untuk membantu pengguna dengan cepat membedakan antara item yang berbeda dalam daftar popup IntelliSense.
| Penggunaan | Nama | Nilai (semua tema) | Swatch |
|---|---|---|---|
| Kelas, Acara | Vs Action Oranye | C27D1A / 194.125.26 | |
| Metode Ekstensi, Metode, Modul, Delegasi | VS Action Purple | 652D90 / 101.45.144 |  |
| Bidang, Item Enum, Makro, Struktur, Tipe Nilai Union, Operator, Antarmuka | VS Action Blue | 00539C / 0,83,156 | |
| Objek | VS Action Green | 388A34 / 56.138.52 | |
| Konstanta, Pengecualian, Item Enum, Peta, Item Peta, Namespace, Templat, Definisi Jenis | Latar belakang (VS BG) | 424242 / 66,66,66 | |
Contoh ikon IntelliSense
| Kelas | Acara Privat | Delegasikan | Metode Teman | Bidang |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Item Enum Terproteksi | Objek | Templat | Pintasan Pengecualian |
|---|---|---|---|
 |
 |
 |
 |
Notifications
Pemberitahuan di Visual Studio digunakan untuk menunjukkan status. Palet pemberitahuan menggunakan empat warna berikut, serta opsi isi latar depan hitam atau putih, untuk menentukan pemberitahuan dengan tingkat status berikut.
| Penggunaan | Nama | Nilai (semua tema) | Swatch |
|---|---|---|---|
| Status: netral | Pemberitahuan Biru (VS Biru) | 1BA1E2 / 27.161.226 |  |
| Status: positif | Pemberitahuan Hijau (VS Hijau) | 339933 / 51,153,51 |  |
| Status: negatif | Pemberitahuan Merah (VS Merah) | E51400 / 229,20,0 |  |
| Status: peringatan | Notification Yellow (VS Oranye) | FFCC00 / 255.204.0 |  |
| Isi latar depan | Pemberitahuan Hitam (Hitam) | 000000 / 0,0,0 |  |
| Isi latar depan | Pemberitahuan Putih (Putih) | FFFFFF / 255.255.255 |  |
Contoh ikon pemberitahuan
| Peringatan | Peringatan | Selesai | Stop |
|---|---|---|---|
 |
 |
 |
 |