Duyarlı tasarım teknikleri

Duyarlı tasarım, içeriğin akıcı olduğu ve değişen pencere boyutlarına uyum sağlayabilecekleri tek bir düzen kullanır. Esnek tasarım, bir özelliği bir kez oluşturmanıza ve tüm ekran boyutlarında çalışmasını beklemenize olanak tanır. Uyarlamalı tasarım benzerdir, ancak bir düzeni başka bir düzenle değiştirir.

XAML uygulamaları, kullanıcı arabiriminizin tüm Windows destekli cihazlarda okunabilir ve kullanılabilir olmasını sağlamak için etkili pikseller kullanır. Peki neden uygulamanızın kullanıcı arabirimini belirli bir cihaz veya ekran boyutu için özelleştirmek istersiniz?

• Alanı en etkili şekilde kullanmak ve gezinme gereksinimini azaltmak için

  Bir uygulamayı tablet gibi küçük bir ekrana sahip bir cihazda iyi görünecek şekilde tasarlarsanız, uygulama çok daha büyük bir ekrana sahip bir bilgisayarda kullanılabilir, ancak muhtemelen boşa harcanan bir alan olacaktır. Ekran belirli bir boyutun üzerinde olduğunda daha fazla içerik görüntülemek için uygulamayı özelleştirebilirsiniz. Örneğin, bir alışveriş uygulaması tablette bir kerede bir ürün kategorisi görüntüleyebilir, ancak pc veya dizüstü bilgisayarda aynı anda birden çok kategori ve ürün gösterebilir.

  Ekrana daha fazla içerik yerleştirerek, kullanıcının gerçekleştirmesi gereken gezinti miktarını azaltırsınız.

• Cihazların özelliklerinden yararlanmak için

  Bazı cihazların belirli cihaz özelliklerine sahip olma olasılığı daha yüksektir. Örneğin, dizüstü bilgisayarların bir konum algılayıcısı ve kamerası olabilirken, TV'de de olmayabilir. Uygulamanız hangi özelliklerin kullanılabilir olduğunu algılayabilir ve bunları kullanan özellikleri etkinleştirebilir.

• Giriş için optimize etmek

  Evrensel denetim kitaplığı tüm giriş türleriyle (dokunma, kalem, klavye, fare) çalışır, ancak kullanıcı arabirimi öğelerinizi yeniden düzenleyerek belirli giriş türleri için iyileştirme yapabilirsiniz.

Uygulamanızın kullanıcı arabirimini belirli ekran genişlikleri için iyileştirdiğinizde, hızlı yanıt veren bir tasarım oluşturduğunuzu söyleriz. Uygulamanızın kullanıcı arabirimini özelleştirmek için kullanabileceğiniz bazı duyarlı tasarım tekniklerini aşağıda bulabilirsiniz.

Yeniden konumlandır

Kullanıcı arabirimi öğelerinin konumunu ve yerleşimini değiştirerek pencere boyutundan en iyi şekilde yararlanabilirsiniz. Bu örnekte, küçük pencere öğeleri dikey olarak yığmaktadır. Uygulama daha büyük bir pencereye çevrildiğinde, öğeler daha geniş pencere genişliğinden yararlanabilir.

Bir fotoğraf uygulaması için bu örnek tasarımda, fotoğraf uygulaması içeriğini daha büyük ekranlarda yeniden konumlandırır.

Yeniden Boyutlandır

Kullanıcı arabirimi öğelerinin kenar boşluklarını ve boyutunu ayarlayarak pencere boyutu için iyileştirme yapabilirsiniz. Örneğin, bu işlem yalnızca içerik çerçevesini büyüterek daha büyük bir ekranda okuma deneyimini artırabilir.

Akış Yeniden Düzenleme

Kullanıcı arabirimi öğelerinin akışını cihaz ve yönlendirmeye göre değiştirerek, uygulamanız içeriğin en iyi şekilde görüntülenmesini sağlayabilir. Örneğin, daha büyük bir ekrana gittiğinizde sütun eklemek, daha büyük kapsayıcılar kullanmak veya liste öğelerini farklı bir şekilde oluşturmak mantıklı olabilir.

Bu örnekte, dikey olarak kaydırılan tek bir içerik sütununun daha küçük bir ekranda nasıl iki metin sütunu görüntülemek için daha büyük bir ekranda yeniden akıtılabildiği gösterilmektedir.

Göster/gizle

Kullanıcı arabirimi öğelerini ekran emlaklarına göre veya cihaz ek işlevleri, belirli durumları veya tercih edilen ekran yönlendirmelerini desteklediğinde gösterebilir veya gizleyebilirsiniz.

Örneğin, medya oynatıcı denetimleri daha küçük ekranlarda düğme setini azaltır ve daha büyük ekranlarda genişletir. Daha büyük bir penceredeki medya oynatıcı, ekran işlevselliğini daha küçük bir pencerede işleyebileceğinden çok daha fazlasını işleyebilir.

Gösterme veya gizleme tekniğinin bir parçası, daha fazla meta verinin ne zaman görüntüleneceğini seçmeyi içerir. Daha küçük pencerelerde en iyi yöntem, çok az miktarda meta veri göstermektir. Daha büyük pencerelerde önemli miktarda meta veri ortaya çıkarılabilir. Meta verilerin ne zaman gösterilip gizleneceğini gösteren bazı örnekler şunlardır:

• E-posta uygulamasında kullanıcının avatarını görüntüleyebilirsiniz.
• Müzik uygulamasında bir albüm veya sanatçı hakkında daha fazla bilgi görüntüleyebilirsiniz.
• Bir video uygulamasında, bir film veya dizi hakkında, oyuncu ve ekip ayrıntılarını gösterme gibi daha fazla bilgi görüntüleyebilirsiniz.
• Herhangi bir uygulamada sütunları ayırabilir ve daha fazla ayrıntı gösterebilirsiniz.
• Herhangi bir uygulamada, dikey olarak yığılmış bir şeyi alabilir ve yatay olarak yerleştirebilirsiniz. Küçük bir pencereden daha büyük bir pencereye gidildiğinde, yığılmış liste öğeleri liste öğelerinin ve meta veri sütunlarının satırlarını ortaya çıkarmak için değişebilir.

Yeniden tasarlamak

Belirli cihazları daha iyi hedeflemek için uygulamanızın mimarisini daraltabilir veya dallandırabilirsiniz. Bu örnekte, pencereyi genişletmek tüm liste/ayrıntılar desenini gösterir.

Uyarlamalı düzen

Uyarlamalı bir düzen, yanıt veren düzene benzer, ancak kullanıcı arabiriminin yerini, sunulduğu biçime göre tamamen değiştirir. Uyarlamalı tasarımın birden çok sabit düzen boyutu vardır ve sayfayı kullanılabilir alana göre belirli bir düzeni yüklemek için tetikler.

Bu teknik, belirli kesme noktaları için kullanıcı arabirimini değiştirmenizi sağlar. Bu örnekte gezinti bölmesi ve küçük, geçici kullanıcı arabirimi daha küçük bir ekran için iyi çalışır, ancak daha büyük bir ekranda sekmeler daha iyi bir seçim olabilir.

NavigationView denetimi, kullanıcıların bölme konumunu üst veya sol olarak ayarlamasına izin vererek bu tekniği destekler.

İlgili konular

• Fluent Design - Düzen
• Ekran boyutları ve kesme noktaları
• XAML ile duyarlı düzenleri
• XAML denetimleri