Aracılığıyla paylaş


Grup Kutuları

Uyarı

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.

Grup kutusu, bir dizi ilgili denetimi çevreleyen etiketli dikdörtgen çerçevedir. Grup kutusu, ilişkileri görsel olarak göstermenin bir yoludur; bir denetim grubu için erişim anahtarı sağlama olasılığı dışında hiçbir işlev sağlamaz.

onay kutularını içeren grup kutusunun ekran görüntüsü

Tipik bir grup kutusu.

Uyarı

düzen ile ilgili yönergeler ayrı bir makalede sunulmuştur.

 

Doğru kontrol bu mu?

Grup kutuları ilişkileri göstermek için güçlü bir görsel araç olsa da, bunları aşırı kullanmak görsel dağınıklık ekler ve bir yüzeydeki kullanılabilir alanı büyük ölçüde azaltır. Bunlar görsel olarak ağırdır ve yalnızca daha iyi bir çözüm olmadığında tedbirli kullanılmalıdır.

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

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

  • Grupta birden fazla denetim var mı? Aksi takdirde, bunun yerine düz metin etiketi kullanın. Nadir bir özel durum, aynı yüzeydeki diğer grup kutularıyla tutarlılığı korumak için tek denetimli bir grup kutusu kullanmaktır.

Yanlış:bir metin kutusu içeren grup kutusunun ekran görüntüsü

Bu örnekte, grup kutusunun tek bir denetimi vardır.

  • Denetimler birbiriyle ilgili mi? İlişkinin gösterilmesi netlik katıyor mu? Aksi takdirde, denetimleri bir grup kutusunun dışında ayrı olarak sunun.
  • Tüm denetimler grubun içinde mi? Öyleyse, üst iletişim kutusu veya sayfa gibi büyük yüzeydeki ilişkiyi belirtin.

Yanlış:tüm denetimleri içeren grup kutusunun ekran görüntüsü

Bu örnekte, iletişim kutusundaki tüm denetimler (işleme düğmeleri dışında) grup kutusunun içindedir.

  • İ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 başlıklar ve girintileme de kullanabilirsiniz.

dört görev grubunu gösteren dört simgenin şekli

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

  • Ayırıcı kullanarak ilişkileri etkili bir şekilde iletişim kurabilir misiniz? Öyleyse, bunun yerine bir ayırıcı kullanın. Ayırıcı, altındaki denetimleri bir hale getiren yatay bir çizgidir. Ayırıcılar daha basit ve daha temiz bir görünüm sağlar. Ancak, grup kutularından farklı olarak, yüzeyin tam genişliğine yayıldığında en iyi şekilde çalışırlar.
    • Geliştiriciler: Bir yüksekliğe sahip, kazınmış dikdörtgen içeren bir ayırıcı uygulayabilirsiniz.

Kazınmış dikdörtgen ayırıcılarına göre ayrılmış e-posta denetimlerini gösteren ekran görüntüsü.

Bu örnekte, etiketli ayırıcılar denetim ilişkilerini göstermek için kullanılır.

ayırıcılara göre ayrılmış denetimlerin ekran görüntüsü

Bu örnekte, denetim ilişkilerini göstermek için etiketsiz ayırıcılar kullanılır.

  • İlişkileri metin olmadan etkili bir şekilde iletebilir misiniz? Öyleyse , arka planlar veya toplayıcılar gibi grafik öğeleri kullanmayı göz önünde bulundurun.

Yönergeler

  • Grup kutularını iç içe yerleştirmeyin. Grup kutusu içindeki ilişkileri göstermek için düzeni kullanın.

Yanlış:grup kutusunun içindeki grup kutusunun ekran görüntüsü

Bu örnekte, iç içe grup kutuları gereksiz görsel dağınıklığıyla sonuçlanır.

Birgrup kutusunda aynı denetimlerin doğru:ekran görüntüsü

Bu örnekte, bunun yerine düzen kullanılarak aynı denetim ilişkisi gösterilir.

  • Denetimleri grup kutusu etiketlerine koymayın.
    • İstisna: Onay kutusu içindeki tüm denetimler onay kutusu tarafından etkinleştirilir ve devre dışı bırakılırsa, onay kutusunu grup kutusu etiketi olarak kullanabilirsiniz.

Yanlış:grup kutusu etiketinde açılan listenin ekran görüntüsü

Bu örnekte, açılan liste yanlış bir şekilde bir grup kutusuna yerleştirilir. Bu örnekte bunun yerine sekmeler kullanılmalıdır.

  • Grup kutularını devre dışı bırakma. Bir denetim grubunun şu anda geçerli olmadığını belirtmek için, grup kutusunun içindeki tüm denetimleri devre dışı bırakın, ancak grup kutusunun kendisini devre dışı bırakın. Bu yaklaşım daha erişilebilirdir ve tüm UI çerçeveleri tarafından tutarlı bir şekilde desteklenebilir.

Etiketler

  • Tüm grup kutularını etiketle.
  • Etikete erişim anahtarı atayın. Bunu yapmak gereksizdir ve diğer erişim anahtarlarının atanması zorlaşır. Bunun yerine, grup kutusundaki denetimlere erişim anahtarları atayın.
    • İstisna: Bir yüzey birçok denetime sahipse, yeterli erişim anahtarı olmayabilir. Öyleyse, erişim anahtarlarını grup kutularındaki denetimler yerine grup kutularına atayarak erişim anahtarlarının sayısını azaltın.
  • cümle stili büyük harf kullanımını kullanın.
  • Etiketi cümle olarak değil, isim veya isim tümceciği kullanarak yazın ve iki nokta üst üsteler de dahil olmak üzere bitiş noktalama işaretleri kullanmayın.
  • Aynı yüzey içindeki grup kutusu etiketleri için paralel tümce kullanın.
  • Grup kutusu etiketlerini kısa tutun. Etiket olarak yönerge metni kullanmayın. Bununla birlikte, grup kutusunda yönerge metniniz olabilir.
  • Kutu içindeki denetim etiketlerinde grup kutusu etiketini yinelemeyin. Örneğin, grup kutusu Hizalama olarak etiketlenmişse, Sol hizalama veya Sağ hizalama değil, Sol, Sağ vb. seçenek düğmelerini etiketleyebilirsiniz.
  • Kullanıcı arabirimi metnindeki grup kutularına başvurmayın.

Dokümantasyon

Grup kutularına başvururken:

  • Yalnızca programcıda ve diğer teknik belgelerde grup kutularına bakın. Grup kutusu için iki küçük harf kullanın.
  • Diğer her yerde, bir iletişim kutusu aynı ada sahip birden fazla seçenek içermediği sürece, bir yordama grup kutusunun adını eklemek gereksizdir. Böyle durumlarda, altında grup kutusu adıyla kullanın.
  • Mümkün olduğunda, kalın metin kullanarak etiketi biçimlendirin. Aksi takdirde, etiketi yalnızca karışıklığı önlemek için gerekiyorsa tırnak içine koyun.

Örnek: Efektler'in altında Gizli'yi seçin.