Tema, kullanıcıların etkileşime girdiği renk, tür ve şekil gibi Kullanıcının mobil veya geniş ekranlı cihazının görünümünü ve tarzını etkileyebilir. en iyi uygulamaları paylaşacağız.
Çı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 tema gibi temalar da dahil olmak üzere kontrast.
- Dinamik mevcut değilse yedek olarak kullanmak üzere özel bir tema oluşturun.
- Çeşitli temaları kullanırken tür ayarlarını göz önünde bulundurun.
- Okunaklılık için metin ve yüzey kontrastını her zaman kontrol edin.
Tema türleri
Temalar sistem veya uygulama tabanlıdır. Sistem temaları, kullanıcının kullanıcı arayüzünü ve cihaz ayarlarında ilgili kontrolleri sağlayın. tema yalnızca uygulandığı uygulamayı etkiler.
Uygulamanızın gösterilebilmesi için her iki tema türünü de uygulaması gerekir ancak uygulama temaları geçerlidir uygulamanın içinde yer alabilir. Ayrıca, bazı ayarları uygulama içi ayarlarla sistem teması ayarlarını değiştirin.
Sistem temaları
Sistem temaları, tek tek uygulamalar da dahil olmak üzere Android cihazın tamamında geçerli olur. kullanıcı ayarlarına bağlı olarak değişebilir. Sistem temaları açık ve koyu temaları içerir. kullanıcı tarafından oluşturulan temaları ve üretici temalarını içerir.
Açık ve koyu temalar
Açık tema veya Gün modu, daha yüksek değer sunan parlak bir görüntü modundan oluşur. parlaklık ve yüzey değerleriyle oluşturulur. Bunun aksine, koyu tema veya Gece modu arasında geçiş yaparsanız parlaklığı azaltmak için kullanıcı arayüzünü kaydırır. Yüzeyler karanlıktan oluşturulmuştur gri veya düşük ton değerleri olabilir.
Koyu temanın birden çok avantajı vardır: Güneşli veya düşük sıcaklıklarda ekran okunabilirliğini artırır daha düşük parlaklık nedeniyle göz yorgunluğunu azaltır ve pil. Ayrıca, genellikle kullanıcıların en çok talep ettiği uygulama özelliğidir.
Açık ve koyu temaları uygularken aşağıdaki çıkarımları göz önünde bulundurun:
- Daha iyi ifade etmek için renk şemasını özelleştirebilirsiniz. Şunu kullanıyorsanız: Malzeme Tema Oluşturucu, şema oluşturmak için otomatik olarak koyu bir tema oluşturur şema. Materyal Özelleştirme ve Renk sistemi hakkında daha fazla bilgi olduğunu unutmayın.
- Kullanıcılar, sistem düzeyindeki Ekran ayarlarında açık tema veya koyu tema ayarlayabilir günün saatine göre her zaman açık, her zaman kapalı veya otomatik olarak ayarlayabilirsiniz. Önerilerimiz: sistem ayarlarını yansıtıyor olabilir, ancak yine de önemli noktaları Kullanıcılara daha ayrıntılı değişiklikler sunmak için uygulama içi kontroller oluşturun.
- Web Görünümleri'ndeki web içeriği açık, koyu veya varsayılan stilleri de kullanabilir. Oku web görünümlerinde koyu temanın nasıl desteklendiğini öğrenin.
- Kullanıcılar bu özelliği etkinleştirdiyse Android, koyu temayı zorunlu kılabilir. Ayrıca bir özel koyu tema kullanın.
- Kullanıcı diğer temaları veya ayarları etkinleştirmediyse "kilitleniyor" açık temaya geçirmenizi sağlar. Ancak bunu yapmanızı önermeyiz Çünkü kullanıcıların erişilebilirlik ve kişiselleştirme ihtiyaçlarını karşılayabilir.
Kullanıcı tarafından oluşturulan temalar
Kullanıcı tarafından oluşturulan temalar dinamik renk ile desteklenir. Android 12'den itibaren Material You ile kullanıma sunuldu. Etkinleştirildiğinde, dinamik color [renk], kullanıcının uygulamalarına uygulanacak özel renkleri kullanıcının duvar kağıdından elde eder ve sistem arayüzü. Bu renk paleti, mola vermek için gereken açık ve koyu renk şemaları.
Yazı tipi ayarları, kullanıcının ve erişilebilirlik gereksinimlerinden biridir. Bu ayarlar olmalıdır. Bu nedenle, yazı tipleri için ölçeklenebilir piksel değerleri kullandığınızdan emin olun.
Üretici temaları
Cihaz üreticileri ek özel tema özellikleri sağlayabilir etkilemesi için ayarlar.
Uygulama temaları
Temel
Malzeme kitaplığındaki Materyal bileşenleri, kullanıcılara mor renk şeması ve Roboto yazı tipi kullanıyor. Tema tanımlamayan tüm uygulamalar özellikleri bu temel özelliklere geri döner.
Özel (marka)
Özel temalar kullanmak, uygulamanızın görünümünü daha iyi ifade edebilmenizi sağlar. kullanılabilir hale getirmek veya belirli sistem temaları kullanılamadığında yedek işlevi görmek için kullanabilirsiniz. Bu, tam kapsamlı bir özel tasarım sistemi veya küçük bir tasarım sistemiyle çalışırken marka rehberini veya en sevdiğiniz birkaç rengi gösterir.
Uygulamanızın birden fazla özel şema da olabilir. Kullanıcının tam şemaları veya alt markalı öğeler arasından seçimler yapma olanağı tanır.
İçerik
Kullanıcı arayüzü, bazı içeriklere daha fazla odaklanma sağlamak için rengi devralarak dinamik renk kullanabilir kaldırın. İçerik rengi, tek bir birincil içerik kaynağıyla iyi performans gösterir ancak birden fazla içerik kaynağına sahip görüntülemelerde dikkatli kullandığınızdan emin olun.
Tema genellikle uygulamanın genelini etkiler ancak seçerek de uygulanabilir bir araya getiriyoruz. Çok fazla tema ve kombinasyondan kaçınmak için bir birincil tema kaynağı (dinamik veya özel) kullanıcı arayüzünün çoğunda geçerli olur.
Malzeme
Materyal Tasarım, bir temel tema ve tema oluşturma sistemleri (Renk, Tür, Şekil). Materyal Tema oluşturma yöntemi, malzeme özelliklerini özelliklerini ilişkilendireceğim.
Marka
Materyal Tasarım tema sistemleri istediğiniz görünüm ve tarza uymuyorsa tamamen özel bir tema uygulayabilirsiniz. Özel ayarları test ettiğinizden emin olun kontrast ve okunabilirlik özellikleri gibi.
Compose'da özel bir sistemin nasıl uygulanacağını öğrenin.
Tema özellikleri
Tema özellikleri, kullanıcı arayüzü tasarımında yaygın olarak kullanılan görsel stillerle uyumlu çeşitli estetikleri çağrıştırıyor. Uygulama içinde, bu özellikler genellikle Material'a (Materyal) bağlıdır. tema sistemlerinin özelleştirilebilmesini sağlıyor.
Renk
Stili ve anlamı ifade etmek için renkleri kullanın. Uygulamanızın renklerini ayarlama kişiselleştirme, anlamsal amacı tanımlama ve elbette tanımlıyor.
Temada renk şeması, belirli rollere atanan tonlar grubudur eşleştirilir. Android'de renk hakkında daha fazla bilgi edinin kullanıcı arayüzü ve Material 3 renk sistemi.
Tür
Android'in sistem yazı tipi Roboto'dur (tüm uygulamalarda ücretsiz olarak kullanılabilir). Ancak türü özelleştirebilirsiniz. Seçilen yazı tiplerinin okunabilirliğine dikkat ederek dahil edilir. Tür uygulama hakkında bilgi edinin.
Şekil
Kapsayıcı köşelerinin şeklini varsayılan varsayılan değerden sonra özelleştirmek, uygulamanızın karakterini tanımlayın. Örneğin, tam olarak yuvarlanmış köşeleri kullanarak daha yumuşak ve eğlenceli bir görünüm sunmak için veya keskin bir versiyon için açılı kesit kullanın. Materyal bileşenleri için şekil jetonlarına ve stillere göz atın.
Simgeler
Materyal Simgeleri uygulamanızda beş farklı stilde kullanılabilir: Doldurulmuş, Dış çizgili, keskin, yuvarlak, iki tonlu. Her yerde aynı simge stilini kullanın. uygulamasını kullanarak tutarlı ve şık bir görünüm kazandırabilir.
Diğer tema özellikleri
Renk, yazı ve şekil temel Materyal teması sistemlerini oluşturur. Materyalin dayandığı kavramlarla sınırlı değil. Şunları yapabilirsiniz: mevcut sistemleri değiştirebilir ve tamamen yenilerini tanıtabilirsiniz. Üstelik, kullanarak diğer kavramları temalarla uyumlu hale getirir. Ayrıca özelliklerini kullanmak için mevcut sistemlerin kapsamını genişletme ya da sağlanır. Örneğin, gradyanlardan veya boşluklardan oluşan bir sistem eklemek seçin.
Uygulamanıza tema uygulama
Tema mı, stil artı dersler mi?
Hem temaların hem de stillerin birden çok tasarım özelliği olabilir. Stil, bir temadan bağımsızdır ve bağımsız bir öğenin (veya Görünüm) sunar. Bununla birlikte, birden fazla öğe ve hatta tüm görünüm için bir tema ayarlayabilirsiniz. uygulamasını indirin. Stil, önceki yazılardaki stil veya niteliğe benzeyen, yeniden kullanılabilir bir biçimsel seçimdir en iyi uygulamaları paylaşacağız. Örneğin, Vücut Büyük'ü bir stil, Açık ve Koyu temalardır.
Compose'da tema uygulama
Bir tema genellikle ortak görsel ve görsel unsurları bir araya getiren davranış kavramlarına yer verebilir. Bunlar, tema değerleri içeren sınıfları kullanarak modelleyebilir.
Jetpack'i kullanma hakkında daha fazla bilgi için Compose'da Materyal Tasarım 3 bölümüne bakın Materyal Tasarım 3 temasının bir uygulamasını oluşturmak için oluşturun.
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ümler'de tema uygulama
Temalar, kullanabileceğiniz ve anlamsal olarak adlandırılmış kaynaklar koleksiyonudur en iyi uygulamaları paylaşacağız. Temalar aynı stil söz dizimini kullanır.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Web görünümleri
WebView'daki web içeriğinde açık, koyu veya varsayılan stil de kullanılabilir. Nasıl yapılacağını öğrenin web görünümlerinde koyu tema desteklenir.
Materyal temasını özelleştirme
Materyal Tema Oluşturucu Figma eklentisini kullanarak özelleştirebilirsiniz. Bununla bir tema oluşturmak, oluşturulmuş açık ve koyu renk şemalarına sahip tema dosyaları oluşturabilirsiniz. Böylece, Bunun için dışa aktarılan tema dosyasını tam değerler sağlar.
