Masaüstü sürümünü kullanmaya başlama

Masaüstü deneyimi, bağlı ekranlarda veya pencerelerde çeşitli boyutları destekleyerek baştan itibaren uyarlanabilir bir deneyim sunar. Uyarlanabilir bir kullanıcı arayüzü oluşturarak tüm Android cihazları destekleyin. Uyarlanabilir düzenler, masaüstü deneyimleri için çok önemlidir. Kullanıcıların uygulama pencerelerini sorunsuz bir şekilde yeniden boyutlandırmasına olanak tanır.

Uygulamanızı masaüstü deneyimine hazırlamak için önce uygulamanızın kullanıcı arayüzünü uyarlayın, ardından yoğunluk ve giriş etkileşimi tasarımına geçin. Daha fazla bilgi için Uyarlanabilir düzenler başlıklı makaleyi inceleyin. Tasarım laboratuvarıyla pratik yapmak için Uyarlanabilir tasarım laboratuvarı başlıklı makaleyi inceleyin.

Paneler halinde düşünün

Gruplandırma ve kapsama kullanarak düzende bölme tabanlı bir yaklaşım benimseyin. İçerikler, görsel kapsayıcılar kullanılarak veya boşlukla örtülü gruplandırma yoluyla düzenlenebilir. Bu paneller genişletilebilir, daraltılabilir, gizlenebilir, taşınabilir veya pop-up olarak görüntülenebilir. Bu nedenle esneklik sunar. Bölmelerle tasarım yapmak, çeşitli mobil cihazlarda tutarlı deneyimler oluşturma sürecini basitleştirir ve karmaşık düzen hizalamalarını kolaylaştırmak için mevcut ızgaralarla entegre edilebilir.

Benzer içerikler, bölmeler ve kapsama mantığı oluşturmaya yardımcı olmak için birlikte gruplandırılabilir.
Benzer içerikler, bölmeler ve kapsama mantığı oluşturmaya yardımcı olmak için birlikte gruplandırılabilir.
Ekranlar yerine içeriklerin bulunduğu kapsayıcılar veya bölmeler açısından düşünün.

Tartı

Geniş ekranlar içerik için daha fazla alan sağlasa da ek alan ve görüntüleme mesafesi gibi ergonomik faktörler dikkate alınmalıdır. Uzakta olabilecek veya klavyede yazan kullanıcıların rahatlığı için tipografi biraz büyütülmelidir.

Daha büyük ekranlarda kullanıcı arayüzü öğelerini ve metni ölçeklendirme
Alanın daha etkili kullanılması için daha büyük bir başlık seçilir.

Kullanıcı arayüzü öğeleri ve yazı tipi, genişletilmiş ve bağlı ekranlarda ölçeklendirilir. Ekran çözünürlükleri nedeniyle farklı ölçeklere sahip olabilirler.

Mevcut tür ölçeği tasarımlarınızda bir veya iki adım yukarı çıkın ya da masaüstü ve genişletilmiş ekranlar için tasarlanmış özel bir tür ölçeği uygulamayı düşünün. Tasarımlarınızda daha fazla editoryal kalite için kişisel tercihlere dayalı düzenlemeler yapılabilir.

Resim de ölçeklenerek ekranı kaplar. Bu sayede kullanıcı, bitkiyi daha ayrıntılı görebilir ancak alan verimli bir şekilde kullanılmaz. Kullanıcı arayüzü öğelerini yapılandırırken bunu göz önünde bulundurun.

İçerik ve kullanıcı arayüzü öğeleri

İçerik gruplandırılıp ölçeklendirildiğinden, içerik kullanıcı arayüzünün bazı bölümleri de kesme noktalarına daha iyi uyacak şekilde kaydırılabilir veya güncellenebilir.

Her içerik bölmesinde, içeriğin uyarlanıp uyarlanmayacağına ve nasıl uyarlanacağına karar verin. İçeriğin kendisine bakın. Liste satırı karta dönüştürülürse içerik etkileşim verimliliğini ve taranabilirliğini kaybeder mi? Bileşenler çeşitli kesme noktalarında farklı davranışlar sergileyebilir. Genişliklerini veya görünürlüklerini ayarlayabilir, hatta bileşenleri değiştirebilirsiniz.

Bir bölmedeki her kullanıcı arayüzü öğesi ve içerik için maksimum genişliğe karar verin. Kullanıcı arayüzü öğeleri tam genişliğe kadar uzamamalı veya bozulmamalıdır. Panellerde maksimum dolgu ve kenar boşluklarını ayarlayın. Metin, satır uzunluklarını sınırlayarak rahat okunmaya olanak tanımalıdır. Kısa metinleri yaklaşık 60 karakterle sınırlayın. Uzun metinler daha uzun olabilir.

Tam genişliğin uzamasını önlemek için içerik ve bileşenlerde maksimum genişlik belirleyin.

Kontrollü aşamalı açıklama kullanın. Kullanıcı pencere boyutunu artırdığında daha fazla içerik gösterilebilir mi? Ek içeriğin daha az tıklamayla verimliliği artırıp artırmadığını veya kafa karışıklığına yol açıp açmadığını değerlendirin.

Kompakt düzende açıklama gizlenir. Genişletilmiş düzende ise alandan yararlanmak için açıklamanın tamamı gösterilir.

Her bölmedeki içerik, farklı sütun ve tablo yapılarına yeniden akıtılarak düzende değişiklik yapılabilir. Bu değişiklikler içeriğe bağlıdır. Örneğin, atlı karıncalı dikey bir ızgara, özellik atlı karıncalı bir duvar ızgarasına güncellenebilir. Öğeler için dikey değişikliği göz önünde bulundurun ve kısıtlamalarla birlikte kullanın. İçerik tüketimine bağlı olarak bu tür bileşenleri kaydırmak istemeyebilirsiniz.

Kapsama göre yeniden akıtılan içerik kapsayıcılarının ve maksimum genişlik düzeninin ayarlandığı bir tel kafes görünümü.

Kullanıcının, maksimum okunabilirlik ve üretkenlik için düzeni kendi tercihine göre ayarlamasına izin vermeyi düşünebilirsiniz.

Son uyarlanmış içerik.

İçerik ve kullanıcı arayüzü öğelerini uyarladıktan sonra içerik panellerinin birbirleriyle ve gezinme hiyerarşisiyle nasıl etkileşime gireceğine karar verin. Ayrıntılı içeriğe gitmek için dokunmak yerine, ek ekran alanını kullanarak ayrıntıları ve destekleyici içeriği yan yana gösterebilirsiniz.

  • Gezinme çubuğu kullanılıyorsa ergonomiyi artırmak için alt çubuk, ekranın yan tarafında bir gezinme rayına dönüşmelidir. Alt gezinme çubuğunu genişletmeyin.
  • Sekmeler gibi ikincil gezinme öğelerinde, hassas bir şekilde gezinmeyi kolaylaştırmak için bunları maksimum genişliğe sabitlemeyi düşünebilirsiniz.
  • Uygulama çubukları, ilgili içerik bölmesine de sabitlenebilir ancak gezinme hiyerarşisinin karıştırılmamasına dikkat edin.
Kompakt ve genişletilmiş görünümde gezinme
Küçük ve genişletilmiş görünümde gezinme.

Yoğunluk

Masaüstü deneyiminde, giriş hassasiyeti ve ekran boyutu nedeniyle hem etkileşim yoğunluğu hem de görsel yoğunluk değişebilir.

  • Tablo verileri gibi görsel öğelerin yoğunluğunu, kullanıcıyı bunaltmadan kompakt bir telefon düzenine kıyasla daha fazla artırabilirsiniz. İçerik yoğunluğunu isteğe bağlı olarak değerlendirin ve düzen içinde her zaman metin ölçeklendirmeye izin verin, yazı tipi boyutlarını kesin olarak ayarlamayın.
  • Bileşenlerin daha kesin bir tıklama hedefi olmalıdır. Bileşenlerin etrafındaki doğal tıklama hedefleri yanlış tıklamalara neden olabilir.
Düzendeki yoğunluk
metni.
Düzen metnindeki yoğunluk.
Mobil ve masaüstü cihazlarda düğme hedef boyutları
Mobil ve masaüstü arasındaki düğme hedef boyutları.

Girişler

Ek girişler, kullanıcılarınız için ek etkileşim kalıpları anlamına gelir.

Kullanıcı fare ve klavye kullanıyorsa uygulamanızda fareyle üzerine gelme durumu ve odak hesaba katılmalıdır.

  • Fare ve kalem gibi işaretçi girişleri için üzerine gelme durumları ekleyin.
  • Kullanıcılar erişilebilirlik için Sekme tuşunu kullanarak gezinirken öğelerin odak durumlarını yakalayın.
  • İmleç, etkileşimi ve uygulama durumunu kullanıcıya iletmeye de yardımcı olabileceğinden imleç durumlarını hesaba katın.
Fareyle üzerine gelindiğinde ek etkileşim
Fareyle üzerine gelindiğinde ek etkileşim.

Ek eyaletler verimliliği artırabilir.

  • Sağ tıklama işlevi, özelliklere hızlı erişim için içerik menülerini içerebilir.
  • Fareyle üzerine gelindiğinde gösterilen ipuçları, kullanıcıların sisteme alışmasına yardımcı olabilir.
  • Klavye kısayolları, deneyimli kullanıcıların üretkenliğini artırmasına yardımcı olur.
Sağ tıklama içerik menüsü
Bağlam menüsünü sağ tıklayın.