Android Ayarları Tasarım Yönergeleri

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Bu belge, Android platform ayarları, GMS temel ayarları (Google Ayarları) tasarlayan veya Android uygulamaları için ayarlar tasarlayan geliştiriciler için ilkeleri ve yönergeleri vurgular.

Tasarım ilkeleri

İyi bir genel bakış sağlayın

Kullanıcılar, ayarlar ekranlarına göz atabilmeli ve tüm bireysel ayarları ve değerlerini anlayabilmelidir.

Şekil 1. Ayarlar ve mevcut değerleri üst seviye ekranda sunulmaktadır.

Öğeleri sezgisel olarak düzenleyin

Sık kullanılan ayarları ekranın üst kısmına yerleştirin. Bir ekrandaki ayar sayısını sınırlayın. 10-15'ten fazla öğe göstermek bunaltıcı olabilir. Bazı ayarları ayrı bir ekrana taşıyarak sezgisel menüler oluşturun.

Şekil 2. Ortak ayarlar ekranın üst kısmındadır

Ayarların bulunmasını kolaylaştırın

Bazı durumlarda, ayrı bir ayarı iki farklı ekranda çoğaltmak yararlı olabilir. Farklı durumlar, kullanıcıların bir ayarı değiştirmesini tetikleyebilir, bu nedenle ayarın birden fazla yerde olması, kullanıcıların bu öğeyi bulmasına yardımcı olur.

Yinelenen ayarlar için, ayar için ayrı bir ekran oluşturun ve farklı yerlerden giriş noktalarına sahip olun.

Şekil 3 ve 4. Hem "Bildirim" hem de "Ses" ekranlarında "Varsayılan bildirim sesi" görünür

Net bir başlık ve durum kullanın

Ayarlarınızın başlıklarını kısa ve anlamlı yapın. "Genel ayarlar" gibi belirsiz başlıklar kullanmaktan kaçının. Başlığın altında, ayarın değerini vurgulamak için durumu gösterin. Yalnızca başlığı açıklamak yerine belirli ayrıntıları gösterin.

Başlıklar:

  • Etiketinizin en önemli metnini ilk sıraya koyun.
  • "Yapma" veya "asla" gibi olumsuz kelimeleri "blok" gibi tarafsız terimlerle yeniden ifade edin.
  • "Bana bildir" yerine "Bildirimler" gibi kişisel olmayan etiketler kullanın. İstisna: Ayarı anlamak için kullanıcıya atıfta bulunmak gerekiyorsa, birinci şahıs ("Ben") yerine ikinci şahıs ("siz") kullanın.

Başlıklar şunlardan kaçınmalıdır:

  • Ayarla, değiştir, düzenle, değiştir, yönet, kullan, seç veya seç gibi genel terimler.
  • Bölüm bölücü veya alt ekran başlığındaki kelimeleri tekrarlamak.
  • Teknik dil.

Sayfa türleri

Ayarlar listesi

Bu en yaygın ekran türüdür. Birden fazla ayarın birlikte yerleştirilmesine izin verir. Ayar listeleri, anahtarlar, menüler ve kaydırıcılar gibi kontrollerin bir karışımı olabilir.

Bir kategoride çok sayıda ayar varsa, bunlar birlikte gruplanabilir. Daha fazla ayrıntı için Gruplandırma ve bölücüler bölümüne bakın.

Şekil 5. Ayar listesi örneği

Liste görünümü

Liste görünümü, uygulamalar, hesaplar, cihazlar ve daha fazlası gibi öğelerin listesini göstermek için kullanılır. Filtrelemek veya sıralamak için kontroller ekrana eklenebilir.

Şekil 6. Liste görünümü örneği

varlık ekranı

Varlık ekranı, bir uygulama, hesap, cihaz, Wi-Fi ağı vb. gibi farklı bir öğenin ayarlarını sunmak için kullanılır.

Görsel olarak, varlık bir simge, başlık ve alt başlık ile en üstte gösterilir. Bu ekrandaki tüm ayarlar bu varlık ile ilgili olmalıdır.

Şekil 7. Uygulama bilgisinde kullanılan Varlık ekranı örneği

Şekil 8. Depolamada kullanılan Varlık ekranı örneği

Ana ayar

Ana ayar, Wi-Fi veya Bluetooth gibi bir özelliğin tamamı açılıp kapatılabildiğinde en iyi şekilde kullanılır. Kullanıcı, ekranın üst kısmındaki bir anahtarı kullanarak bu özelliği kolayca kontrol edebilir. Özelliği devre dışı bırakmak için ana ayarın kullanılması, diğer tüm ilgili ayarları devre dışı bırakır.

Bir özelliğin daha uzun bir metin açıklamasına ihtiyacı varsa, bu ekran türü daha uzun altbilgi metnine izin verdiği için ana ayar kullanılabilir.

Bir ayarın çoğaltılması veya birden çok ekrandan bağlanması gerekiyorsa, ana ayarı kullanın. Ana ayar ayrı bir ekran olduğundan, aynı ayar için farklı yerlerde birden fazla anahtar kullanmaktan kaçınacaksınız.

Şekil 9. Uygulama bildirimleri ekranında kullanılan ana ayar örneği; ana geçişi kapatmak, bu uygulama için tüm özelliği kapatacak

Şekil 10. Ana geçiş kapalıyken Uygulama bildirimleri ekranında kullanılan ana ayar örneği

Radyo düğmesi seçim ekranı

Bu ekran, kullanıcının bir ayar için seçim yapması gerektiğinde kullanılır. Radyo düğmeleri bir iletişim kutusunda veya ayrı bir ekranda gösterilebilir. Radyo düğmeleri, kaydırıcılar, menüler veya anahtarların yanında kullanılmamalıdır.

Bir radyo düğmesi ekranı, üstte bir resim ve altta altbilgi metni içerebilir. Bireysel radyo düğmeleri, bir başlıkla birlikte alt metne sahip olabilir.

Şekil 11. Ayarlar listesinde radyo düğmeleri kullanılmamalıdır

Şekil 12. Bu, ayarlarda radyo düğmelerinin doğru şekilde nasıl kullanılacağıdır.

Bileşenler

Android 8.0'dan itibaren, eylem araç çubuğu, diğer ilgili eylemlerle birlikte arama ve yardım sunar. Kullanıcılar bu menülerde gizli eylemleri keşfedemeyebileceğinden, taşma menüleri önerilmez.

Ekrana özel eylemleri olmayan araç çubukları için. Arama ve yardım işlemlerini göster.

Şekil 13. Arama ve yardım eylemlerini içeren araç çubuğu

Tek eylemli araç çubukları için : Aramadan önce eylemi sunun.

Şekil 14. Arama ve yardım eylemlerinden önce bir eylem içeren araç çubuğu

1'den fazla eylem içeren araç çubukları için : Taşma menüsüne gelişmiş eylemler yerleştirirken birincil eylemi aramadan önce yerleştirmeyi düşünün.

Tüm eylemler gelişmişse veya yalnızca küçük bir kullanıcı grubu için faydalıysa, tüm eylemleri taşma menüsüne yerleştirmeyi düşünün.

Şekil 15. Eylemler için taşma menüsü içeren araç çubuğu

varlık başlığı

Varlık başlığı yalnızca bir başlık veya alt metin içeren bir başlık gösterebilir (alt metin için birden çok satıra izin verilir). Aşağıdaki işlem isteğe bağlıdır. En fazla iki işleminiz olabilir.

Şekil 16. Varlık başlığı

Simge ve başlık (Uygulama1) bölümü, başlığın (Uygulama bilgisi) altına kaydırılacaktır.

Şekil 17. Buradaki uygulama bilgisi başlığı araç çubuğunun bir parçasıdır, ekranın geri kalanı ise bunun altında kayar.

Başlık zorunludur. Ayrıca ayarın durumunu vurgulayan alt metni de göstermelisiniz. Bir simge kullanmak isteğe bağlıdır.

Başlık metnini kısa tutmaya çalışın. Başlıklar uzunsa, kesilmek yerine bir sonraki satırda devam edebilirler. Uzun basışta menüleri veya eylemleri etkinleştirmeyin.

Örnekler:

Şekil 18. Simge, başlık ve alt metin içeren menü bağlantısı

Şekil 19. Başlık ve alt metin içeren menü bağlantısı

Şekil 20. Yalnızca başlık içeren menü bağlantısı

Sağda simge, başlık, alt metin ve ayrı bir isabet hedefi bulunan menü bağlantısı

Diğer hafifçe vurma hedefleri tema rengini kullanmalıdır.

Şekil 21. İki dokunuşlu hedef menüsü örneği

Simge, başlık, alt metin ve istatistikler/sayı/uyarı simgeli menü bağlantısı

Alt metinle birlikte yüzde ve zaman gibi sayısal değerler sağda gösterilebilirken, aşağıda bir çubuk grafik gösterilebilir.

Genellikle sayısal değerler sağda sunulur, böylece kullanıcılar bunları kolayca inceleyebilir ve karşılaştırabilir.

Şekil 22. Simge, başlık, istatistik ve grafik içeren menü örneği

Gruplama ve bölücüler

Bir ekranın birçok ayarı varsa, bunlar bir bölücü ile gruplandırılabilir ve ayrılabilir. Eski Android sürümlerinin aksine, bölücüler artık ayarları tek tek ayırmak yerine bir grupta kümelemek için kullanılıyor.

Bir gruptaki ayarlar yakından ilişkiliyse, bir grup başlığı ekleyebilirsiniz. Bir grup başlığı kullanıyorsanız, her zaman bir ayırıcı eklemelisiniz.

Şekil 23. Bölücülerle gruplandırılmış ayarlar

Değiştirmek

Simge, başlık ve alt metinle geçiş yapın

Şekil 24. Simge, başlık ve alt metinle geçiş yapın

Başlık ve alt metinle geçiş yapın

Şekil 25. Başlık ve alt metin ile geçiş yapın

Yalnızca başlıkla geçiş yap

Başlıklara soldaki bir simge eşlik edebilir.

Şekil 26. Yalnızca başlıkla geçiş yapın

Liste öğesi + anahtarı

Bir liste öğesini bir anahtarla birleştirebilirsiniz. Dikey çizginin sol tarafına dokunmak bir bağlantı görevi görür ve kullanıcıyı bir sonraki ekrana götürür. Sağ taraf standart bir anahtar gibi davranır.

Sol taraftaki liste öğesi için bir başlık zorunludur. Simge ve alt metin isteğe bağlıdır.

Şekil 27. Liste öğesi ve bir anahtar

kaydırıcı

Simge, kaydırıcıda isteğe bağlıdır.

Şekil 28. Kaydırıcı

ekran düğmesi

Olumlu eylemler tema rengini kullanır, olumsuz eylemler ise gridir. Olumlu eylemler, bir uygulamanın açılmasını, bir uygulamanın yüklenmesini, yeni bir öğenin eklenmesini vb. içerebilir. Negatif eylemler, verileri temizlemeyi, bir uygulamayı kaldırmayı, öğeleri silmeyi vb. içerir.

Şekil 29. "Kaldır" ve "Zorla durdur" için gri düğmeler

Şekil 30. "Şimdi aç" için mavi düğme

Aşamalı açıklama (Gelişmiş)

Sık kullanılmayan ayarlar gizlenmelidir. "Gelişmiş"i yalnızca gizlenecek en az 3 öğe olduğunda kullanın.

Burada alt metin, gizli olan ayarların başlıklarını gösterir. Alt metin sadece bir satır olmalıdır. Ek metin bir üç nokta ile kesilir.

Şekil 31. "Ekran" ekranında kullanılan gelişmiş

Açılır menüler mevcuttur, ancak ideal olarak bunun yerine bir iletişim kutusu veya radyo düğmesi seçim ekranı kullanmalısınız. Şu anda tekli seçim için üç farklı model olduğundan, ayarları basitleştirmek için bu önerilir.

Gerekirse, ayarın basit seçeneklere sahip olduğu durumlarda açılır menüler kullanılabilir.

Şekil 32. Açılır menü

onay kutusu

Mümkün olduğunda onay kutuları üzerindeki anahtarları kullanın.

Onay kutuları kullanılabilir:

  • Uygulamaları kısıtlama veya bir hizmeti engelleme gibi olumsuz eylemler için.
  • Ekranda çok fazla anahtar olmasını önlemek için.

Şekil 33. Bu ekrandaki anahtar sayısını azaltmak için onay kutuları kullanılır.

Ayarlarda bağlantıların kullanılması önerilmez. Bağlantıları yalnızca kesinlikle gerekli olduğunda kullanın. Bağlantılar, altı çizili olmayan bir vurgu rengi kullanmalıdır.

Şekil 34. Ayarlarda kullanılan bağlantı

Altbilgi metni, açıklayıcı içerik eklemek için kullanılabilir. Altbilginin her zaman üst kısmında bir ayırıcı olmalıdır. Altbilgi ekranın alt kısmında gösterilir. Altbilgiler, gerekirse bağlantılar içerebilir.

Şekil 35. Altbilgi metni

desenler

Veri

Kritik veriler, çubuk veya pasta grafiği gibi bir grafikte gösterilebilir. Bu veriler varlık başlığında gösterilebilir. Örnekler, mobil veri ve depolamayı içerir.

Diğer daha az kritik veriler, normal bir liste görünümü kullanılarak sunulabilir.

Şekil 36. Depolamayı gösteren örnek

Şekil 37. Ağı gösteren örnek

Kullanıcı eğitimi

Bazı özellikler için bir açıklama veya kullanıcı eğitimi gerekebilir. Metinle birlikte bir animasyon veya resim kullanabilirsiniz. Altbilgi metni bir açıklama eklemek için kullanılabilirken, animasyon veya resim ekranın üst kısmında sunulmalıdır.

Şekil 38. Animasyon ve alt bilgi metni kullanarak ayar

Formlar

Formda bir giriş alanı varsa normal bir iletişim kutusu kullanın. Bu, kullanıcıların tek bir giriş girmesi için kolay bir yol sağlar.

Ancak, formda birkaç alan varsa, tam ekran bir iletişim kutusu kullanmayı düşünün. Bu, alanları net bir düzende düzenlemek için daha fazla ekran alanı sağlar.

Şekil 39. Normal diyaloglu form

Arama Sonuçları

Arama sonuçları ayarın başlığını, alt metnini (varsa) ve içerik haritası konumunu gösterir.

Şekil 40. Arama sonucu