Tema, renk, tür ve şekil gibi bir grup stil veya özelliktir. Bu özellikler, kullanıcının mobil veya büyük ekranlı cihazının ve uygulama içi deneyiminin görünüm ve tarzını etkileyebilir.
Çıkarımlar
- Kullanıcılara daha kişiselleştirilmiş ve erişilebilir bir deneyim sunmak için uygulamanızın açık veya koyu, dinamik ve kontrast gibi sistem tercihlerini benimsediğinden emin olun.
- Dinamik yoksa, yedek olarak kullanılacak özel bir tema oluşturun.
- Çeşitli temaları kullanırken tür ayarlarını göz önünde bulundurun.
- Okunabilirlik sağlamak için her zaman metin ve yüzey kontrastı olup olmadığını kontrol edin.
Tema türleri
Temalar sistem veya uygulama tabanlıdır. Sistem temaları, kullanıcının cihaz kullanıcı arayüzünün tamamını etkileyebilir ve cihaz ayarlarında ilgili kontrolleri sağlayabilirken uygulama teması, yalnızca uygulandığı uygulamayı etkiler.
Uygulamanız, göstermek için her iki tema türünü de uygulamalıdır. Ancak uygulama temaları, cihazda başka bir yerde değil, yalnızca uygulamada geçerlidir. Ayrıca, uygulama içi ayarlarla bazı sistem teması ayarlarını geçersiz kılabilirsiniz.
Sistem temaları
Sistem temaları, kullanıcı ayarlarına bağlı olarak her bir uygulama dahil olmak üzere Android cihazın tamamında geçerlidir. Sistem temaları arasında açık ve koyu temalar, kullanıcı tarafından oluşturulan temalar ve üretici temaları yer alır.
Açık ve koyu temalar
Açık tema veya Gündüz modu, daha yüksek parlaklık ve yüksek ton değerlerinden oluşturulan yüzeyler içeren parlak ekran modundan oluşur. Diğer yandan, koyu tema veya Gece modu, parlaklığı azaltmak için kullanıcı arayüzünü değiştirir. Yüzeyler koyu gri veya düşük tonlu değerlerden oluşur.
Koyu temanın birden fazla avantajı vardır: güneş ışığının veya düşük ışık koşullarında ekran okunabilirliğinin sağlanması, düşük parlaklık nedeniyle göz yorgunluğunun azaltılması ve pilin tasarruf edilmesi. Ayrıca bu, kullanıcılar arasında en çok istenen uygulama özelliğidir.
Açık ve koyu tema uygularken aşağıdaki çıkarımları göz önünde bulundurun:
- Daha etkili bir ifade için renk şemasını özelleştirebilirsiniz. Şema oluşturmak için Materyal Tema Oluşturucu'yu kullanıyorsanız otomatik olarak koyu bir şema oluşturur. Markalı tema oluşturmak için Materyal ve Renk sistemini özelleştirme hakkında daha fazla bilgi edinin.
- Kullanıcılar, sistem düzeyindeki Görüntülü Reklam Ağı ayarlarında açık tema veya koyu tema belirleyerek günün saatine göre her zaman açık, her zaman kapalı veya otomatik ayarlayabilir. Kullanıcının tercih ettiği sistem ayarlarını yansıtmanızı öneririz ancak kullanıcılara daha ayrıntılı değişiklikler yapmak için uygulama içi kontroller oluşturmak da iyi bir fikirdir.
- Web Görünümleri'ndeki web içeriği de açık, koyu veya varsayılan stil kullanabilir. Web görünümlerinde koyu temanın nasıl desteklendiğini öğrenin.
- Kullanıcılar tarafından etkinleştirildiyse Android, koyu temayı zorunlu kılabilir. Daha fazla kontrol için özel bir koyu tema da oluşturabilirsiniz.
- Kullanıcı diğer temaları veya ayarları etkinleştirmediyse uygulamanızı açık temaya "kilitleme" seçeneğiniz vardır. Ancak, erişilebilirlik ve kişiselleştirme ihtiyaçlarını karşılayabileceğinden bunu yapmanızı önermeyiz.
Kullanıcı tarafından oluşturulan temalar
Kullanıcı tarafından oluşturulan temalar, Android 12'den itibaren Material You ile kullanıma sunduğumuz dinamik renk ile desteklenir. Dinamik renk, etkinleştirildiğinde kullanıcının duvar kağıdından uygulamalarına ve sistem kullanıcı arayüzüne uygulanacak özel renkler elde eder. Bu renk paleti, açık ve koyu renk şemaları oluşturmak için başlangıç noktası olarak kullanılır.
Yazı tipi ayarları, kullanıcının tercihlerini ve erişilebilirlik ihtiyaçlarını karşılamak için cihaz ayarlarında da güncellenebilir. Bu ayarlar uygulamalarda taşınabilir. Bu nedenle, yazı tipleri için ölçeklenebilir piksel değerleri kullandığınızdan emin olun.
Üretici temaları
Cihaz üreticileri, sistem kullanıcı arayüzünü ve görüntüleme ayarlarını etkileyebilecek ek mülk oluşturma özellikleri sağlayabilirler.
Uygulama temaları
Referans değer
Materyal kitaplığındaki Materyal bileşenleri, mor renk şeması ve Roboto yazı tipi kullanan bir temel tema sağlar. Tema özelliklerini tanımlamayan uygulamalar bu temel özelliklere geri döner.
Özel (marka)
Özel temaların kullanılması, uygulamanızın görünümü ve tarzı için daha geniş bir ifade yelpazesi veya belirli sistem temaları kullanılamadığında yedek olarak hareket etmenizi sağlar. İster tam bir özel tasarım sistemi, ister küçük bir marka rehberi, ister en sevdiğiniz birkaç renkle çalışın.
Uygulamanızda, bir kullanıcının seçebileceği tam şemalar, ilham veren içerik veya alt markalı öğeler gibi birden çok özel şema da olabilir.
Performansı
Kullanıcı arayüzü, bazı içeriklere daha fazla odaklanılmasını sağlamak için dinamik rengi kullanarak bu içerikten renk alabilir. İçerik rengi, bir birincil içerik kaynağıyla uyumlu olsa da birden fazla içerik kaynağında görüntülendiğinde bu rengin dikkatli bir şekilde kullanıldığından emin olun.
Tema genellikle bir uygulamayı genel olarak etkiler ama aynı zamanda, diğer temalarla birlikte ve seçimle de uygulanabilir. Bir hiyerarşiden yararlanarak çok fazla tema ve kombinasyondan kaçının: Kullanıcı arayüzünün büyük kısmında geçerli olan birincil tema kaynağı (dinamik veya özel).
Materyal
Materyal Tasarım, temel bir tema ve tema oluşturma sistemleri (Renk, Tür, Şekil) sağlar. Temaya ek özellikler ulaşmak için Materyal Temaları da genişletilebilir.
Marka
Materyal Tasarım tema sistemleri, uygulamanızın sahip olmasını istediğiniz görünüm ve tarzla uyumlu değilse tamamen özel bir tema uygulayabilirsiniz. Kontrast ve okunabilirlik özel özelliklerini test ettiğinizden emin olun.
Oluşturma işleminde özel bir sistemin nasıl uygulanacağını öğrenin.
Tema özellikleri
Tema özellikleri, çeşitli estetik öğelere ulaşmak için kullanıcı arayüzü tasarımında yaygın olarak kullanılan görsel stillerle uyumludur. Uygulama içinde bu özellikler genellikle uygulama üreticisinin özelleştirmesine olanak tanımak için Materyal tema sistemlerine bağlanır.
Renk
Stili ifade etmek ve anlamı iletmek için renk kullanın. Uygulamanızın renklerini ayarlamak; kişiselleştirme, anlamsal amaç ve elbette marka kimliğini tanımlamak açısından çok önemli olabilir.
Tema içinde renk şeması, bileşenlerle eşlenen belirli rollere atanan tonlar grubudur. Android kullanıcı arayüzünde renk ve Material 3 renk sistemi hakkında daha fazla bilgi edinin.
Tür
Android'in sistem yazı tipi Roboto'dur (tüm uygulamalar tarafından kullanılabilir). Ancak yazı tipini özelleştirebilirsiniz. Seçilen yazı tiplerinin rollerine uyum sağlaması için okunabilirliği göz önünde bulundurun. Tür uygulama hakkında bilgi edinin.
Şekil
Temel varsayılanları aşan kapsayıcı köşelerinin şeklini özelleştirmek, uygulamanızın karakterini tanımlamaya yardımcı olur. Örneğin, daha yumuşak ve eğlenceli bir his vermek için tam yuvarlak köşeler kullanabilir veya daha ciddi bir his için açısal kesim kullanabilirsiniz. Malzeme bileşenleri için şekil jetonlarına ve stillere göz atın.
Simgeler
Materyal Simgeler, uygulamanızda beş stilde kullanılabilir: Dolgulu, Dış çizgili, Keskin, Yuvarlak, İki Tonlu. Tutarlı ve gösterişli bir görünüm elde etmek için uygulamanız genelinde aynı simge stilini kullanın.
Diğer tema özellikleri
Renk, tür ve şekil, birincil Materyal tema sistemlerini oluşturur. Ancak tasarım sistemleri, Materyal'in kullandığı kavramlarla sınırlı değildir. Diğer sistemleri temalarla uyumlu hale getirmek için mevcut sistemleri değiştirebilir ve yeni sınıflar ve türlerle tamamen yeni sistemler sunabilirsiniz. Sağlananın ötesinde özel özellikler kullanmak için mevcut sistemleri genişletmeniz veya değiştirmeniz de gerekebilir. Örneğin, bir renk geçişleri veya boşluk boyutları sistemi eklemek isteyebilirsiniz.
Uygulamanızda bir tema uygulayın
Tema ve stil artı sınıflar
Hem temalar hem de stiller birden fazla tasarım özelliğine sahip olabilir. Stil, bir temadan bağımsız olabilir ve tek bir öğenin (veya Görünümün) görünümünü ifade edebilir. Bununla birlikte, birden fazla öğede ve hatta tüm uygulamada bir tema ayarlayabilirsiniz. Stil, tasarım yazılımınızdaki bir stile veya jetona benzer şekilde yeniden kullanılabilir bir stil seçimidir. Örneğin, Gövde Büyüklüğü bir stildir, Açık ve Koyu ise temalardır.
Compose'da tema uygulama
Bir tema, genellikle görsel ve davranışsal kavramları gruplayan, birden çok sistemden oluşur. Bu sistemlerde sınıflandırma temalarıyla modellenirsiniz.
Materyal Tasarım 3 temasının uygulanmasını oluşturmak için Jetpack Compose'u kullanma hakkında daha fazla bilgi için Oluşturma'da Materyal Tasarım 3 konusuna bakın.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Görünümlerde tema uygulama
Temalar, uygulamanız genelinde kullanılabilen, semantik olarak adlandırılmış bir kaynak koleksiyonudur. Temalar aynı stil söz dizimini paylaşır.
Görünümler'i kullanmaya başlayın.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Web görüntülemeleri
Web Görünümü'ndeki web içeriğinde açık, koyu veya varsayılan stil kullanılabilir. Web görünümlerinde koyu temanın nasıl desteklendiğini öğrenin.
Materyal temasını özelleştirme
Materyal Teması'nı özelleştirmek için Materyal Teması Oluşturucu Figma eklentisini kullanabilirsiniz. Tema oluşturmak, açık ve koyu renk şemaları içeren uygulanabilir tema dosyaları sağlar. Böylece, dışa aktarılan tema dosyasını tam olarak güncelleyerek özelleştirmeyi daha ileri taşıyabilirsiniz.
