Pencere öğesi etkileşimi tasarım kılavuzu

Bu makalede, Windows pencere öğeleri için etkileşim tasarlamaya yönelik ayrıntılı yönergeler sağlanır.

Pencere öğesi göz atılabilir ve odaklanmış olmalı ve uygulamanın birincil amacının tek bir yönünü temsil etmelidir. Pencere öğeleri bir veya daha fazla eylem çağrısı sağlayabilir. Kullanıcı bir eylem çağrısına tıkladığında, pencere öğesinin eylemi pencere öğesinin içinde uygulamak yerine ilişkili uygulamayı veya web sitesini başlatması gerekir. Bir pencere öğesinin, birden çok etkileşimi barındırabilen yalnızca bir ana sayfası vardır. Pencere öğesindeki bir öğeye tıklanması sizi hiçbir zaman pencere öğesinin tamamen farklı bir görünümüne götürmemelidir. Örneğin, bir hava durumu pencere öğesinde hava durumunu birden çok gün gösterebilirsiniz, ancak günün birine tıkladığınızda ayrıntılar satır içinde genişletilmeyecek, bunun yerine uygulamayı veya web'i başlatacaksınız.

Desteklenen her pencere öğesi boyutu için önerilen maksimum dokunma noktası sayısı aşağıdadır.

Pencere öğesi boyutu Maksimum dokunma noktaları
küçük 1
orta 3
büyük boyutlu 4

Aşağıdaki gezinti öğeleri Windows Pencere Öğeleri'nde desteklenmez:

  • Pivot'lar pencere öğeleri içinde desteklenmez
  • L2 Sayfaları pencere öğeleri içinde desteklenmez
  • Dikey veya yatay kaydırma Pencere Öğeleri içinde desteklenmez

Containers

Aşağıdaki görüntülerde bir pencere öğesi şablonundaki kapsayıcı öğelerinin örnek kullanımları gösterilmektedir. Kapsayıcılar, hiyerarşik bir kılavuz yapısı oluşturmak için görsel öğeleri sütunlar ve satırlar halinde gruplandırır.

Kapsayıcıları gösteren dört pencere öğesi görüntüsü. Görüntülerdeki pencere öğeleri hiyerarşik bir kılavuz yapısı sağlamak için satırlara ve sütunlara ayrılmış öğelere sahiptir.

Aşağıdaki görüntülerde bir pencere öğesi şablonundaki görüntü bağlantısı öğelerinin örnek kullanımları gösterilmektedir.

Görüntü bağlantılarını gösteren iki pencere öğesi görüntüsü. Görüntüler, bir ızgara oluşturacak şekilde sütunlar ve satırlar halinde düzenlenmiştir.

Pagination

Aşağıdaki görüntülerde pencere öğesi şablonunda sayfalandırma örnekleri gösterilmektedir. Sayfalandırma denetimleri yatay veya dikey olarak hizalanabilir. Gezinti okları, imleç üzerine getirildiğinde görünür.

Bu iki görüntü kümesi yatay sayfalandırmayı gösterir. İlk görüntüde, bir nokta sütunu sağ tarafa hizalanır. Etkin olan sayfayı göstermek için bir nokta daha büyüktür. İkinci resimde bir imleç, kullanıcının sonraki sayfaya geçmesine olanak tanıyan pencere öğesinin alt kısmındaki aşağı işaret eden oka fareyle gelir. Önceki sayfaya gitmek için pencere öğesinin üst kısmında eşleşen bir yukarı işaret eden ok vardır.

Bu iki görüntü kümesi dikey sayfalandırmayı gösterir. İlk görüntüde, alt kısım boyunca bir nokta satırı hizalanır. Etkin olan sayfayı göstermek için bir nokta daha büyüktür. İkinci resimde bir imleç, kullanıcının bir sonraki sayfaya geçmesine olanak tanıyan pencere öğesinin sağ tarafındaki sağ ok üzerindedir. Önceki sayfaya gitmek için pencere öğesinin sol tarafında eşleşen bir sol işaret eden ok vardır.

Bu iki görüntü, pencere öğesinin bir resim arka planı olduğunda sayfalandırma denetimlerinin nasıl göründüğünü gösterir.

Aşağıdaki görüntülerde pencere öğesi şablonundaki köprü örnekleri gösterilmektedir.

Köprüleri gösteren iki pencere öğesi görüntüsü. İlk resimde köprülenmiş metin dizesi gösterilir. Metin düzdür. İkinci görüntüde, fare imleci köprü üzerinde durduğundan metnin altı çizili olur.

Pencere öğesinin alt kısmında, yatay sayfalandırma noktaları satırının hemen üstünde ortalanmış bir köprü gösteren resim. Kırmızı X, sayfalandırma noktalarıyla köprülerin aynı boşlukta olmaması gerektiğini belirtir. Sağ tarafta başka bir görüntüde köprü altta gösterilir, ancak sayfalandırma noktaları sağ taraftaki bir sütunda dikey olarak hizalanır. Yeşil denetim, iki öğeye ilişkin bu yerleşimin doğru olduğunu gösterir.

Açılır menüleri gösteren pencere öğelerinin iki görüntüsü. Sol görüntüde açılır menü daraltılmıştır. Sağ görüntüde açılır menü genişletilmiştir ve pencere öğesinin kenarlığının dışına taşar

Kullanıcı bir menü veya açılan menüyle etkileşimde bulunuyorsa pencere öğeleri geçici olarak pencere öğesi boyutunun biraz ötesine genişletilir. Menü davranışı, kullanıcı menü/açılır menü alanının dışına tıkladığında menüyü kapatacak şekilde olmalıdır.

  • Last updated on