Başlık çubuğu tasarımı

Başlık çubuğu , temel katmandaki bir uygulamanın en üstünde yer alır. Temel amacı, kullanıcıların uygulamayı başlığı aracılığıyla tanımasına, uygulama penceresini taşımasına ve uygulamayı simge durumuna küçültmesine, büyütmesine veya kapatmasına olanak tanımaktır.

Standart tasarım

Bu bölümde, standart başlık çubuğunun bölümlerinin tasarım önerileri ve davranışları açıklanmaktadır.

Çubuk

Design

• Standart başlık çubuğunun yüksekliği 32 pikseldir.
• Başlık çubuğunun varsayılan arka planı Mica'dır, ancak mümkünse başlık çubuklarının pencerenin geri kalanıyla karışmasını öneririz.
• Başlık çubukları, kullanıcıların bir pencerenin etkin ve etkin olmadığı zamanları ayırt etmelerine yardımcı olur. Pencere etkin olmadığında tüm başlık çubuğu öğeleri yarı saydam olmalıdır.
• Kullanıcılar yüksek karşıtlıklı temalara veya açık ve koyu modlar arasında geçiş yaparken başlık çubuğu renkleri ayarlanmalıdır.
  • Yüksek karşıtlık temalarında uygulamalar, üstün bir yüksek karşıtlık deneyimini kolaylaştırmak için uygun kullanıcı arabirimi öğesi renklendirmesini belirlemek için sınıfını kullanmalıdır SystemColors .

Davranış

• Başlık çubuğu, bir pencerenin yeniden konumlandırılması ve yeniden boyutlandırılmasında önemli bir rol oynar. Başlık çubuğundaki tüm boş alan veya pencere başlığı gibi etkileşimli olmayan öğeler tarafından kaplanan alan, sürüklenebilir olmalıdır.
• Başlık çubuğunun etkileşimli bir öğesi olmayan herhangi bir bölümüne sağ tıklama/basılı tutma işlemi sistem penceresi menüsünü göstermelidir.
• Çift tıklama/dokunma, pencereyi en üst düzeye çıkarmak ve pencereyi geri yüklemek arasında geçiş yapmalıdır.

İkon

Design

• Pencere simgesinin boyutu 16 piksel x 16 pikseldir.
• Simgeyi LTR'nin en sol kenarlığından 16px veya RTL'de en sağdaki kenarlıktan yerleştirin.
  • Geri düğmesi varsa, pencere simgesini geri düğmesinin sağına 16 piksel yerleştirin.
• Pencere simgesi, başlık çubuğunda dikey olarak ortalanmalıdır. Örneğin, başlık çubuğu yüksekliği 32px olduğunda, üst ve alt kenar boşlukları 8 pikseldir.

Davranış

• Simgeye tek tıklama/dokunma, sistem penceresi menüsünü göstermelidir.
• Çift tıklama/dokunma, pencereyi kapatmalıdır.

Başlık

Design

• Pencere başlığını pencere simgesinden veya geri düğmesinden 16 piksel uzakta yerleştirin.
  • Simge veya geri düğmesi yoksa, pencere başlığını LTR modunda en soldaki kenardan 16px, RTL modunda ise en sağdaki kenardan 16px mesafeye yerleştirin.
• Pencere başlığında Segoe UI Değişkeni (varsa) veya Segoe UI yazı tipi kullanılmalıdır.
• Pencere başlığı resim yazısı stili metni kullanmalıdır (bkz XAML tür rampası).
• Pencere başlığı kesilebilir ve pencere genişliği başlık çubuğu öğelerinin uzunluğundan küçükse üç nokta eklenebilir. Simge ve resim yazısı düğmeleri (min, max ve close) her zaman tamamen görünür olmalıdır.

Davranış

• Simgeye sağ tıklama/basılı tutma, sistem penceresi menüsünü göstermelidir.
• Çift tıklama/dokunma, pencereyi en üst düzeye çıkarmak ve pencereyi geri yüklemek arasında geçiş yapmalıdır.
• Başlık çubuğundaki pencere başlığı ve diğer metin öğeleri metin ölçeklendirmeye yanıt vermelidir. Bu, başlık çubuğunun yüksekliğini büyütmesini gerektirebilir.

Pencere denetimleri (simge durumuna küçült, büyüt, geri yükle, kapat)

Uygulamanız için kendi açıklamalı alt yazı düğmelerinizi oluşturursanız sistem resim yazısı düğmeleriyle eşleştirmek için bu yönergeleri izleyin.

Design

• Düğmeler için şu simgeleri kullanın:
  • Küçültme simgesi: E921 ChromeMinimize
  • Maksimize simgesi: E922 ChromeMaximize
  • Geri yükleme simgesi: E923 ChromeRestore
  • Kapat simgesi: E8BB ChromeClose
• Maksimum yap ve geri yükle düğmelerinin simgeleri yuvarlatılmış köşelere sahiptir.
• Başlık düğmelerinin tam ekran kaplama arka plakaları vardır.
• Resim yazısı düğmeleri, dinlenme, üzerine gelindiğinde, basılı, aktif ve pasif durumlarına yanıt verir.

Ek tasarım desenleri

Geri düğmesi

Design

Önerilen geri düğmesi simgesi: E830 ChromeBack

• Geri düğmesi varsa, uygulama başlığı veya simge/başlık bileşiminin (LTR'de) soluna yerleştirilmelidir.
• Geri düğmesi, dinlenme, üzerine gelindiğinde, basılı, etkin ve etkin olmayan durumlarda yanıt verir.
• Geri düğmesi 16 piksel x 16 piksel olmalı ve başlık çubuğunda dikey olarak ortalanmalıdır. Düğmenin tamamen taşmalı bir arka plakası olmalıdır.
• Geri düğmesi, LTR'de en sol kenarlıktan 16px uzaklıkta veya RTL'de en sağ kenarlıktan 16px uzaklıkta olmalı ve solundaki veya sağındaki bir sonraki öğeden 16px uzaklıkta olmalıdır.

Arama yap

Design

Genel arama işlevi varsa, başlık çubuğuna pencerenin ortalandığı bir arama kutusu eklenmelidir. Arama kutusu eklediğinizde başlık çubuğunun boyutunu 48 piksel olarak artırın.

Pencere boyutu değişikliklerine tepki vermek için arama kutusunun yanıt vermesi gerekir.

Kişiler

Hesap gösterimi varsa, kişi resmi kontrolleri başlık kontrollerinin soluna yerleştirilmelidir. Kişi resmi eklediğinizde başlık çubuğunun boyutunu 48 piksel olarak artırın.

Sekmeler

Uygulamanızın ana öğesi olarak sekmeler kullanıyorsanız başlık çubuğu alanını kullanın ve resim yazısı denetimlerini sağa sabit tutun.

Sonraki Adımlar

Başlık çubuğu için geliştirici kılavuzuna bakın