Visual Studio İçin Görüntüler ve Simgeler

Visual Studio'da görüntü kullanımı

Resim oluşturmadan önce Visual Studio Görüntü Kitaplığı'ndaki 1.000'den fazla görüntüyü kullanmayı göz önünde bulundurun.

Görüntü türleri

• Simgeler'i seçin. Komutlarda, hiyerarşilerde, şablonlarda vb. görüntülenen küçük görüntüler. Visual Studio'da kullanılan varsayılan simge boyutu 16x16 PNG'dir. Görüntü hizmeti tarafından üretilen simgeler, HDPI desteği için otomatik olarak XAML biçimini oluşturur.

  Not

  Görüntüler menü sisteminde kullanılırken, her komut için bir simge oluşturmamalısınız. Komutunuzun bir simge alıp almayacağını görmek için Visual Studio Menüleri ve Komutları'na başvurun.

• Küçük. Yeni Proje iletişim kutusu gibi bir iletişim kutusunun önizleme alanında kullanılan görüntüler.

• İletişim kutusu görüntüleri. İletişim kutuları veya sihirbazlarda açıklayıcı grafikler veya ileti göstergeleri olarak görünen görüntüler. Zor bir kavramı göstermek veya kullanıcının dikkatini çekmek için (uyarı, uyarı) seyrek ve yalnızca gerektiğinde kullanın.

• Animasyonlu resimler. İlerleme göstergelerinde, durum çubuklarında ve işlem iletişim kutusunda kullanılır.

• Imleç. Fare kullanılarak bir işleme izin verilip verilmeyeceğini, nesnenin bırakılabileceğini vb. belirtmek için kullanılır.

Simge tasarımı

Visual Studio, temiz geometri ve pozitif/negatif (açık/koyu) 50/50 dengesine sahip modern stil simgeler kullanır ve doğrudan, anlaşılır metaforlar kullanır. Kritik simge tasarım noktaları netlik, basitleştirme ve bağlam etrafında ortalanıyor.

• Netlik: Bir simgenin anlamını ve bireyselliğini veren temel metafora odaklanın.

• Basitleştirme: Simgeyi temel anlamıyla azaltın - temayı yalnızca gerekli elemanlarla ve fırfırsız olarak alın.

• Bağlam: Simgenin temel metaforunu hangi öğelerin oluşturduğunu belirlerken kritik önem taşıyan kavram geliştirme sırasında simgenin rolünün tüm yönlerini göz önünde bulundurun.

  Simgelerle, kaçınılması gereken bir dizi tasarım noktası vardır:

• Uygun durumlar dışında kullanıcı arabirimi öğelerini işaret eden simgeler kullanmayın. Kullanıcı arabirimi öğesi yaygın, belirgin veya benzersiz olmadığında daha soyut veya sembolik bir yaklaşım seçin.

• Belgeler, klasörler, oklar ve büyüteç gibi yaygın öğeleri aşırı kullanma. Bu tür öğeleri yalnızca simgenin anlamı için gerekli olduğunda kullanın. Örneğin, sağa dönük büyüteç yalnızca Arama, Gözat ve Bul'u göstermelidir.

• Bazı eski simge öğeleri perspektif kullanımını korusa da, öğe olmadan netlik sağlamadığı sürece perspektifle yeni simgeler oluşturmayın.

• Bir simgeye çok fazla bilgi alma. Kolayca tanınabilen veya tanınabilir bir simge olarak öğrenilebilen basit bir görüntü, aşırı karmaşık bir görüntüden çok daha kullanışlıdır. Bir simge tüm hikayeyi anlatamaz.

Simge oluşturma

Kavram geliştirme

Visual Studio'nun kullanıcı arabiriminde çok çeşitli simge türleri vardır. Geliştirme sırasında simge türünü dikkatle göz önünde bulundurun. Simge öğeleriniz için belirsiz veya yaygın olmayan kullanıcı arabirimi nesneleri kullanmayın. Akıllı Etiket simgesi gibi bu durumlarda sembolik değeri tercih edin. Soldaki soyut etiketin anlamının sağdaki belirsiz, kullanıcı arabirimi tabanlı sürümden daha belirgin olduğunu unutmayın:

Sembolik görüntülerin doğru kullanımı	Sembolik görüntülerin yanlış kullanımı

Standart, kolayca tanınabilen kullanıcı arabirimi öğelerinin simgeler için iyi çalıştığı örnekler vardır. Pencere Ekle şu örneklerden biridir:

Simgedeki kullanıcı arabirimi öğesini düzeltme	Bir simgedeki yanlış kullanıcı arabirimi öğesi

Simgenin anlamı için gerekli olmadığı sürece bir belgeyi temel öğe olarak kullanmayın. Belge Ekle (aşağıda) üzerindeki belge öğesi olmadan anlam kaybolurken, Belgeyi yenile öğesinde anlamı iletmek gereksizdir.

Belge simgesinin doğru kullanımı	Belge simgesinin yanlış kullanımı

"show" kavramı, Tüm Dosyaları Göster örneği gibi gösterilenleri en iyi şekilde gösteren simgeyle temsil edilmelidir. Gerekirse kaynak görünümü örneğinde olduğu gibi "görünüm" kavramını belirtmek için mercek metaforu kullanılabilir.

"Göster"	"Görünüm"

Sağa dönük büyüteç simgesi yalnızca Arama, Bul ve Gözat'ı temsil etmelidir. Artı veya eksi işareti bulunan sola dönük değişken yalnızca yakınlaştırma/uzaklaştırmayı temsil etmelidir.

"Ara"	"Yakınlaştır"

Ağaç görünümlerinde hem klasör simgesini hem de değiştiriciyi kullanmayın. Kullanılabilir olduğunda, yalnızca değiştiriciyi kullanın.

Doğru ağaç görünümü simgeleri	Yanlış ağaç görünümü simgeleri

Stil ayrıntıları

Düzen

Standart 16x16 simgeleri için gösterildiği gibi öğeleri yığınla:

16x16 simgeleri için düzen yığını

Durum bildirimi öğeleri tek başına simgeler olarak daha iyi kullanılır. Bununla birlikte, temel öğeye bir bildirim yığılması gereken bağlamlar vardır; örneğin, Görev Tamamlandı simgesi:

Tek başına bildirim simgeleri

Görev Tamamlandı simgesi

Proje simgeleri genellikle birden çok boyut içeren dosyalar .ico. Çoğu 16x16 simgesi aynı öğeleri içerir. 32x32 sürümleri, uygun olduğunda proje türü de dahil olmak üzere daha fazla ayrıntıya sahiptir.

VB Windows Denetim Kitaplığı Proje simgeleri, 16x16 ve 32x32

Simgeyi piksel çerçevesi içinde ortalar. Bu mümkün değilse, simgeyi çerçevenin üstüne ve/veya sağa hizalayın.

Piksel çerçevesi içinde ortalanmış simge

Çerçevenin sağ üst kısmına hizalanmış simge

Simge ortalanmış ve çerçevenin üstüne hizalanmış

İdeal hizalama ve denge elde etmek için simgenin temel öğesini eylem karakterleriyle engellemekten kaçının. Karakteri temel öğenin sol üst kısmına yakın bir yere yerleştirin. Ek öğe eklerken, simgenin hizalamasını ve dengesini göz önünde bulundurun.

Doğru hizalama ve denge	Yanlış hizalama ve denge

Öğeleri paylaşan ve kümelerde kullanılan simgeler için boyut eşliği sağlayın. Yanlış eşleştirmede dairenin ve okun büyük harfle yazıldığını ve eşleşmediğini unutmayın.

Doğru boyut eşliği	Yanlış boyut eşliği

Tutarlı çizgi ve görsel ağırlıklar kullanın. Yan yana karşılaştırma kullanarak, oluşturduğunuz simgenin diğer simgelerle karşılaştırmasını değerlendirin. 16x16 çerçevenin tamamını asla kullanmayın, 15x15 veya daha küçük kullanın. Negatif-pozitif (koyu-açık) oranı 50/50 olmalıdır.

Negatif-pozitif oranını düzeltme	Yanlış negatif-pozitif oranı

Öğe bütünlüğünizden ödün vermeden öğelerinizi oluşturmak için basit, karşılaştırılabilir şekiller ve tamamlayıcı açılar kullanın. Mümkün olduğunda 45° veya 90° açı kullanın.

Perspektif

Simgeyi net ve anlaşılır tutun. Perspektif ve ışık kaynağını yalnızca gerektiğinde kullanın. Simge öğeleri üzerinde perspektif kullanmaktan kaçınılmalıdır, ancak bazı öğeler olmadan tanınmaz. Bu gibi durumlarda stilize bir perspektif öğenin netliğini iletir.

3 noktalı perspektif

1 noktalı perspektif

Öğelerin çoğu sağa dönük veya açılı olmalıdır:

Işık kaynaklarını yalnızca nesneye gerekli netliği eklerken kullanın.

Doğru ışık kaynağı	Yanlış ışık kaynağı

Ana hatları yalnızca okunabilirliği artırmak veya metaforu daha iyi iletmek için kullanın. Negatif-pozitif (koyu-açık) denge 50/50 olmalıdır.

Ana hatların doğru kullanımı	Ana hatların yanlış kullanımı

Simge türleri

Kabuk ve komut çubuğu simgeleri şu öğelerden en fazla üç taneden oluşur: bir taban, bir değiştirici, bir eylem veya bir durum.

Kabuk ve komut çubuğu simgeleri örnekleri

Araç penceresi komut çubuğu simgeleri şu öğelerin üçten fazlasını içermez: bir temel, bir değiştirici, bir eylem veya bir durum.

Araç penceresi komut çubuğu simgeleri örnekleri

Ağaç görünümü kesinleştirici simgeleri şu öğelerin üçten fazlasını içermez: bir temel, bir değiştirici, bir eylem veya bir durum.

Ağaç görünümü kesinleştirici simgeleri örnekleri

Durum tabanlı değer taksonomisi simgeleri şu durumlarda bulunur: etkin, etkin devre dışı ve etkin olmayan devre dışı.

Durum tabanlı değer taksonomi simgeleri örnekleri

IntelliSense simgeleri şu öğelerden en fazla üç taneden oluşur: bir temel, bir değiştirici ve bir durum.

IntelliSense simgeleri örnekleri

Küçük (16x16) proje simgeleri ikiden fazla öğeye sahip olmamalıdır: bir taban ve bir değiştirici.

Küçük (16x16) proje simgeleri örnekleri

Büyük (32x32) proje simgeleri şu öğelerin en fazla dört tanesinden oluşur: bir taban, bir ile iki değiştirici ve bir dil katmanı.

Büyük (32x32) proje simgeleri örnekleri

Üretim ayrıntıları

Tüm yeni kullanıcı arabirimi öğeleri Windows Presentation Foundation (WPF) kullanılarak oluşturulmalı ve WPF için tüm yeni simgeler 32 bit PNG biçiminde olmalıdır. 24 bit PNG, saydamlığı desteklemeyen eski bir biçimdir ve bu nedenle simgeler için önerilmez.

Çözünürlüğü 96 DPI olarak kaydedin.

Dosya türleri

• 32 bit PNG: simgeler için tercih edilen biçim. Tek bir raster (piksel) görüntüsünü depolayan kayıpsız veri sıkıştırma dosyası biçimi. 32 bit PNG dosyaları alfa kanal saydamlığını, gama düzeltmesini ve arayı oluşturmayı destekler.

• 32 bit BMP: WPF olmayan denetimler için. XP veya yüksek renk olarak da adlandırılan 32 bit BMP, alfa kanal saydamlığına sahip gerçek renkli bir görüntü olan RGB/A görüntü biçimidir. Alfa kanalı, Adobe Photoshop'ta belirlenen ve bit eşlem içinde ek (dördüncü) renk kanalı olarak kaydedilen bir saydamlık katmanıdır. Resim üretimi sırasında tüm 32 bit BMP dosyalarına siyah arka plan eklenerek renk derinliği hakkında hızlı bir görsel ipucu sağlanır. Bu siyah arka plan, kullanıcı arabiriminde maskelenecek alanı temsil eder.

• 32 bit ICO: Proje simgeleri ve Öğe Ekle için. Tüm ICO dosyaları, alfa kanal saydamlığı (RGB/A) ile 32 bit gerçek renktedir. ICO dosyaları birden çok boyut ve renk derinliği depolayabildiğinden, Vista simgeleri genellikle 16x16, 32x32, 48x48 ve 256x256 görüntü boyutlarını içeren bir ICO biçimindedir. Windows Gezgini'nde düzgün şekilde görüntülenebilmesi için ICO dosyalarının her görüntü boyutu için 24 bit ve 8 bit renk derinliklerine kadar kaydedilmesi gerekir.

• XAML: Tasarım yüzeyleri ve Windows donatıcıları için. XAML simgeleri ölçeklendirme, döndürme, dosyalama ve saydamlığı destekleyen vektör tabanlı görüntü dosyalarıdır. Günümüzde Visual Studio'da yaygın olarak yer almasa da esneklikleri nedeniyle daha popüler hale gelmektedirler.

• SVG

• 24 bit BMP: Visual Studio komut çubuğu için. Gerçek renkli RGB görüntü biçimi olan 24 bit BMP, bir saydamlık katmanı için renk anahtarı olarak eflatun (R=255, G=0, B=255) kullanarak saydamlık katmanı oluşturan bir simge kuralıdır. 24 bit BMP'de, tüm eflatun yüzeyleri arka plan rengi kullanılarak görüntülenir.

• 24 bit GIF: Visual Studio komut çubuğu için. Saydamlığı destekleyen gerçek renkli RGB görüntü biçimi. GIF dosyaları genellikle Sihirbaz resmi ve GIF animasyonlarında kullanılır.

Simge yapısı

Visual Studio'daki en küçük simge boyutu 16x16'dır. Yaygın kullanımda en büyük 32x32'dir. Bir simge tasarlarken 16x16, 24x24 veya 32x32 çerçevenin tamamını doldurmamaya dikkat edin. Okunaklı, tek tip simge yapısı, kullanıcı tanıma için gereklidir. Simgeler oluştururken aşağıdaki noktalara uyun.

• Simgeler net, anlaşılır ve tutarlı olmalıdır.

• Durum bildirimi öğelerini tek simgeler olarak kullanmak ve bunları bir simge temel öğesinin üzerine yığmamak daha iyidir. Belirli bağlamlarda kullanıcı arabirimi, durum öğesinin bir temel öğeyle eşleştirilmesi gerektirebilir.

• Proje simgeleri genellikle birkaç boyut içeren dosyalar .ico. Yalnızca 16x16, 24x24 ve 32x32 simgeleri güncelleştiriliyor. Çoğu 16x16 ve 24x24 simgeleri aynı öğeleri içerir. 32x32 simgeleri, uygun olduğunda proje dil türü de dahil olmak üzere daha fazla ayrıntı içerir.

• 32x32 simgeleri için temel öğeler genellikle 2 piksel çizgi kalınlığına sahiptir. Ayrıntı öğeleri için 1 veya 2 piksellik çizgi ağırlığı kullanılabilir. Hangisinin daha uygun olduğunu belirlemek için en iyi kararınızı kullanın.

• 16x16 ve 24x24 simgeleri için öğeler arasında en az 1 piksel aralığı vardır. 32x32 simgeleri için, öğeler arasında ve değiştirici ile temel öğe arasındaki 2 piksellik aralığı kullanın.

  
  16x16, 24x24 ve 32x32 boyutunda simgeler için öğe aralığı

Renk ve erişilebilirlik

Visual Studio uyumluluk yönergeleri, üründeki tüm simgelerin renk ve karşıtlık için erişilebilirlik gereksinimlerini geçmesini gerektirir. Bu, simge ters çevirmesi ile elde edilir ve tasarım yaparken, üründe program aracılığıyla ters çevrileceklerini bilmeniz gerekir.

Visual Studio simgelerinde renk kullanma hakkında daha fazla bilgi için bkz . Görüntülerde renk kullanma.

Görüntülerde renk kullanma

Visual Studio'daki simgeler öncelikli olarak tek renklidir. Renk, belirli bilgileri iletmek için ayrılmıştır ve hiçbir zaman dekorasyon için değildir. Renk kullanılır:

• eylemi göstermek için

• kullanıcıyı durum bildirimi konusunda uyarmak için

• dil ilişkilendirmesini belirleme

• IntelliSense içindeki öğeleri ayırt etmek için

Erişilebilirlik

Visual Studio uyumluluk yönergeleri, üründe denetlenen tüm simgelerin renk ve karşıtlık için erişilebilirlik gereksinimlerini geçirmesini gerektirir. Görsel dil paletindeki renkler test edilmiştir ve bu gereksinimleri karşılar.

Koyu temalar için renk ters çevirme

Visual Studio koyu temasında simgelerin doğru karşıtlık oranıyla görünmesini sağlamak için, program aracılığıyla ters çevirme uygulanır. Bu kılavuzdaki renkler, doğru şekilde ters çevrilmeleri için kısmen seçilmiştir. Renk kullanımınızı bu paletle kısıtlayın, aksi takdirde tersine çevirme uygulandığında tahmin edilemeyen sonuçlar alırsınız.

Renkleri ters çevrilmiş simge örnekleri

Temel palet

Tüm standart simgeler üç temel renk içerir. Simgeler gradyan veya gölge içermez; 3B araç simgeleri için bir veya iki özel durum vardır.

Kullanım	Veri Akışı Adı	Değer (Açık tema)	Swatch	Örnek
Arka Plan/Koyu	VS BG	424242 / 66,66,66
Ön Plan/Açık	VS FG	F0EFF1 / 240.239.241
Anahat	VS Out	F6F6F6 / 246.246.246

Temel renklere ek olarak, her simge genişletilmiş paletten bir renk daha içerebilir.

Genişletilmiş palet

Eylem değiştiricileri

Aşağıdaki dört renk, eylem değiştiricileri için gereken eylem türlerini gösterir:

Kullanım	Veri Akışı Adı	Değer (tüm temalar)	Swatch
Pozitif	VS Eylem Yeşili	388A34 / 56.138.52
Olumsuz	VS Eylemi Kırmızı	A1260D / 161,38,13
Kararsız	VS Eylem Mavisi	00539C / 0,83,156
Oluştur/Yeni	VS Eylem Turuncu	C27D1A / 194.156.26

Örnekler

Yeşil, "Ekle", "Çalıştır", "Yürüt" ve "Doğrula" gibi pozitif eylem değiştiricileri için kullanılır.

Çalıştır	Sorguyu yürütme	Tüm adımları yürüt	Denetim Ekle

Kırmızı, "Sil", "Durdur", "İptal" ve "Kapat" gibi negatif eylem değiştiricileri için kullanılır.

İlişkiyi Sil	Sütunu Sil	Sorguyu Durdur	Çevrimdışı Bağlantı

Mavi, "Aç", "İleri", "Önceki", "İçeri Aktar" ve "Dışarı Aktar" gibi oklarla en çok temsil edilen nötr eylem değiştiricilerine uygulanır.

Alana Git	Toplu İade	Adres Düzenleyicisi	İlişkilendirme Düzenleyicisi

Koyu altın öncelikli olarak "Yeni" değiştirici için kullanılır.

Yeni Proje	Yeni Grafik Oluştur	Yeni Birim Testi	Yeni Liste Öğesi

Özel durumlar

Özel durumlarda, renkli bir eylem değiştirici bağımsız olarak tek başına simge olarak kullanılabilir. Simge için kullanılan renk, simgenin ilişkili olduğu eylemleri yansıtır. Bu kullanım, aşağıdakiler dahil olmak üzere küçük bir simge alt kümesiyle sınırlıdır:

Çalıştır	Durdur	Sil	Kaydet	Geri Git

Kod hiyerarşisi paleti

Klasör

Kullanım	Veri Akışı Adı	Değer (tüm temalar)	Swatch	Örnek
Klasörler	Klasör	DCB67A / 220.182.122

Visual Studio dilleri

Visual Studio'da kullanılabilen ortak dillerin veya platformların her birinin ilişkili bir rengi vardır. Bu renkler temel simgede veya bileşik simgelerin sağ üst köşesinde görünen dil değiştiricilerde kullanılır.

Kullanım	Veri Akışı Adı	Değer (tüm temalar)	Swatch
ASP, HTML, WPF	ASP HTML WPF Mavi	0095D7 / 0,149,215
C++	CPP Mor	9B4F96 / 155.79.150
C#	CS Yeşili (VS Eylem Yeşili)	388A34 / 56.138.52
CSS	CSS Kırmızı	BD1E2D / 189,30,45
F#	FS Mor	672878 / 103,40,120
JavaScript	JS Turuncu	F16421 / 241.100.33
VB	VB Mavi (VS Eylem Mavisi)	00539C / 0,83,156
TypeScript	TS Turuncu	E04C06 / 224,76,6
Python	PY Yeşili	879636 / 135,150,54

Dil değiştiricileri olan simge örnekleri

VB	C#	C++	F#	JavaScript	Python

HTML	WPF	ASP	CSS	TypeScript
HTML	WPF	ASP	CSS	TypeScript

IntelliSense

IntelliSense simgeleri özel bir renk paleti kullanır. Bu renkler, kullanıcıların IntelliSense açılır listesindeki farklı öğeleri hızla ayırt etmesine yardımcı olmak için kullanılır.

Kullanım	Veri Akışı Adı	Değer (tüm temalar)	Swatch
Sınıf, Olay	VS Eylem Turuncu	C27D1A / 194,125,26
Uzantı Yöntemi, Yöntem, Modül, Temsilci	VS Eylem Mor	652D90 / 101.45.144
Alan, Sabit Listesi Öğesi, Makro, Yapı, Birleşim Değeri Türü, İşleç, Arabirim	VS Eylem Mavisi	00539C / 0,83,156
Object	VS Eylem Yeşili	388A34 / 56.138.52
Sabit, Özel Durum, Numaralandırma Öğesi, Eşleme, Eşleme Öğesi, Ad Alanı, Şablon, Tür Tanımı	Arka Plan (VS BG)	424242 / 66,66,66

IntelliSense simgeleri örnekleri

Sınıf	Özel Olay	Temsilci	Yöntem Arkadaşı	Alan

Korumalı Sabit Listesi Öğesi	Object	Template	Özel Durum Kısayolu

Notifications

Visual Studio'daki bildirimler, durumu belirtmek için kullanılır. Bildirim paleti, aşağıdaki durum düzeylerine sahip bildirimleri tanımlamak için aşağıdaki dört rengin yanı sıra siyah veya beyaz ön plan dolgu seçeneklerini kullanır.

Kullanım	Veri Akışı Adı	Değer (tüm temalar)	Swatch
Durum: nötr	Bildirim Mavisi (VS Mavi)	1BA1E2 / 27.161.226
Durum: pozitif	Bildirim Yeşili (VS Yeşil)	339933 / 51,153,51
Durum: negatif	Bildirim Kırmızısı (VS Kırmızı)	E51400 / 229,20,0
Durum: uyarı	Bildirim Sarısı (VS Turuncu)	FFCC00 / 255.204,0
Ön plan dolgusu	Siyah Bildirim (Siyah)	000000 / 0,0,0
Ön plan dolgusu	Bildirim Beyazı (Beyaz)	FFFFFF / 255.255.255

Bildirim simgeleri örnekleri

Uyarı	Uyarı	Tamamla	Durdur