Grafik Öğeleri

Not

Bu tasarım kılavuzu Windows 7 için oluşturulmuştur ve Windows'un daha yeni sürümleri için güncelleştirilmemiştir. Kılavuzun çoğu ilke olarak hala geçerlidir, ancak sunu ve örnekler geçerli tasarım kılavuzumuzu yansıtmaz.

Grafik öğeleri, ilişkileri, hiyerarşiyi ve vurguları görsel olarak göstermek. Bunlar arka planlar, başlıklar, cam, toplayıcılar, ayırıcılar, gölgeler ve tutamaçlar içerir.

Windows Gezgini'nin gölgeli vb. ekran görüntüsünü

Çeşitli grafik öğesi türlerini içeren bir örnek.

Grafik öğeleri genellikle etkileşimli değildir. Ancak, yeniden boyutlandırılabilir içerik için ayırıcılar etkileşimlidir ve tanıtıcılar etkileşim gösteren grafiklerdir.

Not: grup kutularıyla ilgili Yönergeleri, animasyonları, simgeleri ve markalama ayrı makalelerde sunulmuştur.

Bu doğru kullanıcı arabirimi mi?

Grafik öğeleri ilişkileri göstermek için güçlü bir görsel araç olsa da, bunları fazla kullanmak görsel dağınıklığı ekler ve bir yüzeydeki kullanılabilir alanı azaltır. Bunlar tedbirli kullanılmalıdır.

Microsoft Windows'ta tasarım eğilimi, gereksiz grafikleri ve çizgileri ortadan kaldırarak daha basit ve daha temiz bir görünümdür.

Grafik öğesinin gerekli olup olmadığına karar vermek için şu soruları göz önünde bulundurun:

• Tasarımın sunumu ve iletişimi, öğesiz olduğu kadar açık ve etkili mi? Öyleyse kaldırın.
• İlişkileri tek başına düzeni kullanarak etkili bir şekilde iletişim kurabilir misiniz? Öyleyse, bunun yerine düzeni kullanın. İlişkili denetimleri yan yana yerleştirebilir ve ilişkisiz denetimler arasına fazladan boşluk koyabilirsiniz. Hiyerarşik ilişkileri göstermek için girintileme de kullanabilirsiniz.

Dört simgeli düzenscreen shot of a four-icon layout ekran görüntüsü

Bu örnekte, denetim ilişkilerini göstermek için tek başına düzen kullanılır.

• İletişim metin olmadan etkili mi? Aksi takdirde, etiketli ayırıcı veya başka biretiketi birgrup kutusu kullanın.

Kullanım desenleri

Grafik öğelerinin çeşitli kullanım desenleri vardır:

Öğe	Açıklama
Grafik çizimleri bir fikri görsel olarak iletmek için kullanın.	Grafik çizimleri, herhangi bir boyutta olmaları ve genellikle etkileşimli olmaları dışında simgelere benzer. Bu örnekte, bir özelliğin doğasını önermek için bir grafik çizimi kullanılmıştır.
Arka Planlar farklı içerik türlerini vurgulayan veya vurgularını kaldıran bir yöntem kullanın.	Önemli içeriği vurgulayan arka planlar kullanılabilir. Kırmızı arka planscreen shot of virus message on red background virüs iletisinin ekran görüntüsü bu örnekte, önemli bir görevi vurgulayan bir arka plan kullanılmıştır. arka planlar, ikincil içeriği vurgudan kaldırma amacıyla da kullanılabilir. Denetim masası öğelerinin Bu örnekte, ikincil görevler bir görev bölmesinde bulunarak vurgudan çıkarılır.
Banners önemli durumu belirtmek için kullanılır.	Arka planlardan farklı olarak, başlıklar öncelikli olarak tek bir metin dizesini vurgular. Ayarlar bilgileriscreen shot of banner with settings information başlıkekran görüntüsü Bu örnekte, sayfanın ayarlarının Grup İlkesi tarafından denetlendiğini belirtmek için bir başlık kullanılır.
Cam bir pencerenin görsel ağırlığını azaltmak için stratejik olarak kullanın.	Cam, pencerenin kendisi yerine içeriğe odaklanarak bir yüzeyin ağırlığını azaltabilir. Windows fotoğraf galerisinde kuşun Bu örnekte cam, denetimler yerine kullanıcının dikkatini içeriğe odaklar.
Toplayıcılar güçlü ilişkili denetimler arasında görsel bir ilişki oluşturmak için kullanın.	bu örnekte, gezgindeki geri ve ileri düğmeleri arasındaki ilişkiyi vurgulayan bir toplayıcı arka planı kullanılır. windows fotoğraf galerisi denetimlerinin Bu örnekte, denetimler arasındaki ilişkiyi vurgulayan ve sekiz yerine tek bir denetim gibi hissetmelerini sağlamak için bir sınır toplayıcısı kullanılır.
Ayırıcıları zayıf ilişkili veya ilişkisiz denetimleri ayırmak için kullanın.	Ayırıcılar etkileşimli veya etkileşimli olmayabilir. yeniden boyutlandırılabilir içerik arasındaki etkileşimli ayırıcılar bölücüler olarak bilinir. Ad düğmesiscreen shot of splitter separator for name button için ayırıcı ayırıcının ekran görüntüsünü bu örnekte, yeniden boyutlandırılabilir içerik için etkileşimli bir ayırıcı kullanılır. Tarayıcı bilgileriscreen shot of separator for browser information için ayırıcının ekran görüntüsünü Bu örnekte ayırıcı etkileşimli değildir.
Gölgeler içeriği arka planında görsel olarak öne çıkarmak için kullanın.	Gölgescreen shot of four photos with shadows dört fotoğrafınekran görüntüsü Bu örnekte gölgeler, resmin arka planda göze çarpmasını sağlar.
Tanıtıcıları bir nesnenin taşınabileceğini veya yeniden boyutlandırılabildiğini belirtmek için kullanın.	Tutamaçlar her zaman etkileşimlidir ve fare işaretçisi fare işaretçisi tarafından davranışları üzerine gelindiğinde önerilir. yeniden boyutlandırma işaretçisiscreen shot of a window corner with resize pointer pencere köşesinin ekran görüntüsünü yeniden boyutlandırma işaretçisiscreen shot of selection box with resize pointer seçim kutusunun ekran görüntüsünü Bu örneklerde tanıtıcılar bir nesnenin yeniden boyutlandırılabildiğini gösterir.

Yönerge -leri

Genel

• Temel bilgileri yalnızca grafik öğeleri aracılığıyla iletmeyin. Bunu yaptığınızda, görme engelli veya engelli kullanıcılar için erişilebilirlik sorunları ortaya konur.

Grafik tasarımları

• Grafikler en çok tek bir basit fikri pekiştirdiğinde etkilidir. Yorumlaması düşünülen karmaşık grafikler iyi çalışmaz. Hiyeroglifler mağara çizimleri için en iyisidir.

  yanlış :

  Karmaşık grafikscreen shot of warning using complex graphic kullanarak uyarının ekran görüntüsünü

  Bu örnekte, Windows XP'deki karmaşık bir grafik, karmaşık bir güven kararını açıklamayı etkisiz bir şekilde dener.

• Okları, köşeli çift ayraçları, düğme çerçevelerini veya etkileşimli denetimlerle ilişkili diğer bütçeleri kullanmayın. Bunun yapılması, kullanıcıları grafiklerinizle etkileşime davet eder.

• Tasarımlarınızda saf kırmızı, sarı ve yeşil dalgalardan kaçının. Karışıklığı önlemek için bu renkleri durumla iletişim kuracak şekilde ayırın. Bu renkleri durum dışında bir şey için kullanmanız gerekiyorsa, saf renkler yerine kapalı tonlar kullanın.

• Kültürel açıdan nötr tasarımlar kullanın. Bir ülkede, bölgede veya kültürde belirli bir anlamı olan şey, başka bir ülkede aynı anlama sahip olmayabilir.

• Kişileri, yüzleri, cinsiyeti veya vücut parçalarının yanı sıra dini, siyasi ve ulusal sembolleri kullanmaktan kaçının. Bu tür görüntüler kolayca çevrilmeyebilir veya rahatsız edici olabilir.

• Kişileri veya kullanıcıları temsil etmeniz gerektiğinde, bunları genel olarak tasvir edin; gerçekçi tasvirlerden kaçının.

Arka planlar ve başlıklar

• İçeriği vurgu etmek için açık arka planda koyu metin kullanın. Açık gri veya sarı arka plan üzerinde siyah metin düzgün çalışır.

  Sarı arka planscreen shot of blue link text on yellow background mavi bağlantı metninin ekran görüntüsünü

  Bu örnekte, sarı arka plan üzerinde olduğundan bağlantı kullanıcının dikkatini çekiyor.

• İçeriğin vurgularını azaltmak için koyu arka planda açık metin kullanın. Koyu gri veya mavi arka plan üzerinde beyaz metin düzgün çalışır.

  Yeşil arka planscreen shot of white help link on green background beyaz yardım bağlantısınınekran görüntüsü

  Bu örnekte, koyu arka plan içeriği vurgular.

• Gradyan kullanılıyorsa, metin renginin gradyanın tamamında iyi karşıtlık olduğundan emin olun.

• Dikkati banner'a çekmek için her zaman 16x16 piksel simgesini kullanın. Başlıklar aksi takdirde göz ardı etmek çok kolaydır. Diğer yönergeler ve örnekler için bkz. standart simgeler .

• Arka planları ve başlıkları dikkatli kullanın. Arka plan veya başlığın amacı içeriği vurgumak olsa da, çoğunlukla sonuçlar "başlık körlüğü" olarak bilinen bir fenomenin tersidir.

Cam

• Metin olmadan pencere çerçevesine dokunan küçük bölgelerde camı stratejik olarak kullanmayı göz önünde bulundurun. Bunu yapmak, bölgenin çerçevenin bir parçası gibi görünmesini sağlayarak programa daha basit, daha hafif ve daha uyumlu bir görünüm kazandırabilir.
• Düz pencere arka planının daha çekici veya kullanımı daha kolay olduğu durumlarda cam kullanmayın.

Ayırıcı

• Ayırıcılar için dikey ve yatay çizgiler kullanın. Ayırıcılarla ayrılan içerik arasında yeterli boşluk olduğundan emin olun.
• Boyutlandırılabilir içerik (bölücüler) arasındaki ayırıcılar için, üzerine gelindiğinde yeniden boyutlandırma işaretçisini görüntüleyin.

yeniden boyutlandırma işaretçisiscreen shot of splitter with resize pointer bölücüekran görüntüsü

Bu örneklerde, üzerine gelindiğinde yeniden boyutlandırma işaretçileri gösterilir.

Gölge

• Yalnızca programınızın en önemli içeriğini veya sürüklenen nesnelerini arka planında görsel olarak öne çıkarmak için kullanın. Gölgeleri diğer durumlarda görsel dağınıklık olarak düşünün.

Yüksek dpi desteği

• İnç başına 96 ve 120 nokta (dpi) video modlarını destekler. Başlangıçta dpi modunu algılayın ve dpi değişiklik olaylarını işleyebilir. Windows, 96 ve 120 dpi için iyileştirilmiştir ve varsayılan olarak 96 dpi kullanır.
• Ölçeklendirme grafikleri üzerinde özellikle 96 ve 120 dpi için işlenen ayrı bit eşlemler sağlamayı tercih edin. En önemli, görünür bit eşlemler için en az 96 ve 120 dpi sürümleri sağlayın ve diğerlerini ortalayıp ölçeklendirin. Bu tür uygulamalar "yüksek dpi kullanan" olarak kabul edilir ve Windows tarafından otomatik olarak ölçeklendirilen programlardan daha iyi bir genel görsel deneyim sağlar.
  • Geliştiriciler: Programın bildiriminde dpi algılama bayrağını ayarlayarak veya program başlatma sırasında SetProcessDPIAware() API'sini çağırarak bir program yüksek dpi kullanan (ve otomatik ölçeklendirmeyi önleyen) bir program bildirebilirsiniz. Doğru grafikleri seçmeyi basitleştirmek için makroları kullanabilirsiniz. Win32 bit eşlemleri için SS_CENTERIMAGE kullanarak ölçeklendirmeyi ortalayabilir veya SS_REALSIZECONTROL.
• Programınızı hem 96 hem de 120 dpi olarak denetleyin:
  • Çok küçük veya çok büyük grafikler.
  • Kırpılan, çakışan veya düzgün şekilde sığmayan grafikler.
  • Kötü esnetilmiş grafikler ("pixilated").
  • Kırpılmış veya grafik arka planlarına sığmayan metin.

Metin

• Erişilebilirlik ve yerelleştirme için grafikte metin kullanmayın. Yalnızca markalama ve metni soyut bir kavram olarak göstermek için özel durumlar yapın.