1. Giriş
Last Updated: 04/18/22
Uygulamalar, temel şemalardan, kullanıcı tarafından oluşturulan dinamik renklerden veya marka renklerinden oluşan bir dizi renk kullanabilir.
Önceki Material You renk laboratuvarında, tasarım maketlerinde dinamik renklerin nasıl görselleştirileceği ele alınmıştı. Ancak Material temalandırma özelliğini kullanarak uygulamanızı marka renklerinizle de özelleştirebilirsiniz. Yeni renk sistemini marka renklerinizle birlikte kullanmak, daha dinamik özellikler sunabilecek erişilebilir bir renk şeması oluşturur.
Neler öğreneceksiniz?
- Material tema oluşturucu ile özel tema oluşturma
- Tasarım maketlerine özel tema uygulama
- Dinamik ve özel renkleri birleştirme imkanı.
Ön koşullar
Bu laboratuvarda, bazı temel tasarım kavramlarını kullanacağız.
- Temel tasarım kavramları (renk paletleri) hakkında bilgi sahibi olmak
- Mevcut Android renk şemaları ve rolleri hakkında bilgi sahibi olma
- Figma bilgisi
- İsteğe bağlı: Uygulamanızda dinamik rengi görselleştirme codelab'i
İhtiyacınız olanlar
- Figma Hesabı
- Figma Designlab dosyası
- Figma eklentisi Material Theme Builder
2. Başlayın
Kurulum
Başlamak için Designlab Figma dosyasına erişmeniz gerekir. Laboratuvar için ihtiyacınız olan her şey Figma dosyasında yer almaktadır. Dosyayı indirebilir ve içe aktarabilir ya da Figma topluluğundan kopyalayabilirsiniz.
Öncelikle Figma'da oturum açın veya hesap oluşturun.
Figma Community'den kopyalama
Materyali Özelleştirme dosyasına gidin veya Figma Community'de Materyal Tasarım ile uygulamanızda dinamik rengi görselleştirme başlıklı makaleyi arayın. Dosyayı dosyalarınıza kopyalamak için sağ üst köşedeki Kopyala'yı tıklayın.
Dosya Düzeni
Dosyayı incelerken, girişle başlayan ve kendi içinde tutarlı bir dosya olduğunu fark edeceksiniz. Her bölüm, birbirine bağlı bir dizi çalışma yüzeyine ayrılır. Bölümle ilgili temel kavramlar ve ardından alıştırmalar yer alır. Bölümler ve alıştırmalar birbirini tamamlar ve sırayla tamamlanmalıdır.
Bu codelab, söz konusu kavramlar ve alıştırmalar konusunda daha ayrıntılı bilgi sunar. Yeni Material You özellikleri hakkında daha fazla bilgi edinmek için codelab'i okuyun.
Intro (Giriş) adlı resim taslağından başlayarak, resim taslaklarını sırayla birbirine bağlayan düğmeler bulunur. Bağlantıya erişmek için düğmeyi tıklayın.
Figma eklentisini yükleme
Bu codelab'de, dinamik renk şemaları ve jetonlar oluşturmak için yeni bir Figma eklentisinden yoğun bir şekilde yararlanılır. Figma eklentisini doğrudan Figma topluluk sayfasından yükleyin veya Figma Community'de "Material Theme Builder"ı arayın.
3. Malzeme renk şeması
Öncelikle, Material'da rengin nasıl kullanıldığına ve yeni renk sisteminin nasıl çalıştığına dair genel bir bakış.
Renk, kullanıcının kişisel anlamı, markalama veya anlamsal anlamı olsun, stili ifade etmek ve anlamı aktarmak için kullanılır. Renk sistemi, kullanıcı girişleri değiştikçe ortaya çıkan dinamik olarak değişen renk şemalarının değişkenliğini yönetir. Ton ilişkilerinin ve renk tonu ile kromadaki değişikliklerin mantığı, esnek renk uygulaması için temel oluşturur.
Renk alanı, 5 temel renk ve ardından belirli ton adımlarının seçildiği ton paletleri oluşturarak kaynak renkten çıkarılan erişilebilir açık ve koyu renk şemaları oluşturmanın bir yolunu sunar.
Bu renk değiştirme tekniği yalnızca erişilebilir bir renk şeması sağlamakla kalmaz, aynı zamanda erişilebilir ve kullanıcı tarafından oluşturulan renk şemalarıyla tutarlı markalı şemalar oluşturma yöntemleri de sunar.
Renk şemaları, erişilebilir şemalar oluşturmak için 5 temel renkten ton paletleri halinde oluşturulur.
Markalı tema
M3, markanızı yansıtan stilleri tanımlamaya ve korumaya yardımcı olmak için özel parametrelerin sistematik olarak uygulanmasını destekler.
Özel şema, kullanıcının cihazının duvar kağıdından değil, uygulama geliştiriciden türetilen bir renk şemasıdır. M3 renk sistemi ve özel şemalar, uygulamalarda dinamik rengi etkinleştirmenin temelini oluşturur.
Özel şema, gerekli jetonları (renk yuvaları) ayarlayarak kolay geçiş için M2 ile M3 arasındaki boşluğu dolduracak ve daha markalı bir deneyim oluşturacak.
Marka renklerini Material Theme Builder'a ekleme
4. Renk şeması: Vurgu renkleri
Renk şemasının temelini, her biri 13 ton içeren ayrı tonal paletlerle ilişkili olan beş temel renk oluşturur. Her ton paletindeki belirli tonlar, kullanıcı arayüzündeki renk rollerine atanır. Öncelikle Material Theme Builder eklentisini açıp ilk vurgu rengimiz olan Birincil'i ayarlayarak başlayalım.
Yalnızca birincil rengi girerseniz bu renk, tam bir renk şeması oluşturmak için kaynak olarak kullanılır.
- Eklenti modalında Özel'i tıklayın. Bu işlem, temayı özel bir temaya geçirir. Bu laboratuvarda, önceden oluşturulmuş olan material-theme'i kullanacağız. Ancak isterseniz yeni bir tema da oluşturabilirsiniz. Dinamik rengi görselleştirme başlıklı makaleden daha fazla bilgi edinebilirsiniz.
- Ardından birincil anahtar rengini ayarlayacağız. Birincil renk, ana marka renginiz veya en çok kullanılan birincil vurgu renginiz olabilir. Geri kalan tuş renkleri, birincil renge göre doldurulur. Bu nedenle, ihtiyacınız yoksa ek renk eklemeniz gerekmez.
5. Temanın geri kalanını oluşturma
Tema oluşturulurken birincil renk kullanılır ancak birincil marka rengini desteklemek için vurgu renkleriniz olabilir.
- Eklenti kalıcı öğesinde, İkincil renk alanını tıklayarak ikincil bir renk ekleyin. İkincil roller, kullanıcı arayüzündeki daha az belirgin bileşenler için kullanılırken renk ifadesi fırsatını genişletir. İkincil renk, renk şemasında ve uygulama kullanıcı arayüzünde güncellenir.
- Aynı işlemi Üçüncül için de yapın. Üçüncül roller, birincil ve ikincil renkleri dengelemek veya bir öğeye daha fazla dikkat çekmek için kullanılabilecek kontrastlı vurgular için kullanılır. Üçüncül renk rolü, üreticilerin kendi şahsi karar verme yetkisiyle kullanabileceği ve ürünlerde daha geniş bir renk ifadesini desteklemeyi amaçlayan bir roldür.
- Artık nötr olan nötr roller, yüzeyler ve arka planlar ile yüksek vurgulu metin ve simgeler için kullanılır.
Renk şemanızı tamamen özelleştirmek için ikincil, üçüncül ve nötr renkler sağlayın.
Marka renkleriniz artık M3 renk alanıyla eşleşecek şekilde değiştirilen, tamamen erişilebilir olan ve tema olarak kod içinde dışa aktarılıp uygulanabilen temel renk şemasına dahil edilecek.
6. Temanızı uygulama
Roller ve jetonlar
Her vurgu rengi (birincil, ikincil ve üçüncül), eşleştirme, vurgu tanımlama ve görsel ifade için farklı tonlarda dört uyumlu renkten oluşan bir grupta sağlanır. Grup; vurgu rengi, on color, container ve on container'dan oluşur.
Nötr roller; yüzeyler, arka planlar, yüksek vurgulu metinler ve simgeler için kullanılır.
Tasarım jetonları, bir tasarım sisteminin görsel stilini oluşturan küçük ve tekrarlanan tasarım kararlarını temsil eder. Jetonlar, renk için onaltılık kodlar gibi statik değerlerin yerini kendi kendini açıklayan adlarla alır. Tasarım jetonları, aksi takdirde net bir ilişkisi olmayacak stil seçeneklerini anlamlı bir şekilde birbirine bağlar.
Figma eklentisi, mevcut mock-up'lar, marka stil kılavuzları ve hatta tasarım sistemleriyle bağlantı kurmak için token'lar oluşturur ve kendi kaynak renklerinizi Figma stilleri şeklinde girmenizi sağlar.
Tasarım jetonları, renk rolleri ve uygulama arasında ortak bir dil oluşturur.
Renk hiyerarşisi
Renk rollerini maketlerinize uygularken öğelerinizin önem sırasını veya hiyerarşisini göz önünde bulundurun. Bu konsept, marka renklerinin ilgili rollerine atanmasına ve kullanıcı arayüzünde eşlenmesine yardımcı olur. Genellikle daha doygun veya yoğun renkler kullanıcının dikkatini ilk olarak çeker. Bu nedenle, birincil renk rolü, harekete geçirici mesaja daha fazla odaklanan bileşenlerle eşlenir. Material Theme Builder, uygun renkler oluşturmak için M3 renk sistemini kullanırken daha yüksek doygunluğa sahip ikincil veya üçüncül renkler sağlamak, birincil renklerden daha parlak renkler oluşturur. Kullanıcılarınızın kullanıcı arayüzü ve içerikle etkileşim kurmasını istediğiniz sırayı göz önünde bulundurarak renk rollerini atayın. Tüm bileşenler birincil rengi kullanmamalıdır.
Doygun tek renk en çok dikkat çeker.
7. Temaya geçiş yapma
Oluşturduğunuz özel temayı tasarımlarınıza uygulamak için maketi mevcut material-theme'deki jetonlara ayarlamamız gerekir.
Material bileşenleri, önceden eşlenmiş rollerle birlikte gelir ve Material Theme Builder ile otomatik olarak çalışır.
Material Tema Oluşturucu kalıcı öğesinden temaya geçin.
- Düzenin çerçevesini seçip değiştir'i tıklayarak bu temayı kullanmak için düzenin sağ tarafındaki tüm belirteçleri (Figma stilleri) ayarlayalım. Stil önekini, seçim renklerinde güncellenmiş olarak görürsünüz.
- Her şey güncellenmedi mi? Bitki bakımı ipucu kartı gibi özel bileşenlerde önce Figma stili uygulanmalıdır. Bakım ipucu kapsayıcısını seçin. Kapsayıcı seçiliyken stil atamak için 4 nokta simgesini tıklayın ve üçüncül kapsayıcı'yı seçin. Aynı işlemi bakım ipucu kartının içeriği için de yapın. Ancak on-tertiary container atayın. Listedeki küçük etiketler de özel bileşenlerdir ancak bunlara daha sonra geri döneceğiz.
- Materyal Tasarım bileşenleri varsayılan eşlemeleri kullanır ancak kullanıcı arayüzüne en uygun stil atamalarıyla denemeler yapabilirsiniz. Farklı renk hiyerarşileri ve marka ifadeleriyle denemeler yapın.
(Kod için dışa aktarma dosyasına yalnızca tema dahil edilir. Bir mühendisle çalışıyorsanız jeton eşlemelerini iletmek için taslakları paylaşın (çünkü bu, dışa aktarma işlemine dahil edilmez).
Eklentiyi tema olmadan açtığınızda, başlamak için bir kurulum ekranı gösterilir. "Başlayın" seçeneği, maketlerinize bağlanmak veya Materyal Tasarım kitiyle kullanmak için varsayılan temel "material-theme" öğesini Figma stil grubu olarak oluşturur.
8. Temel şemanın ötesine geçme
Artık bileşenlere ve tasarım taslağına eşlenmiş markalı bir renk temanız var ancak eklenmesi gereken başka renkleriniz olabilir. Bu durumda, özel renklerin eklenmesine olanak tanıyan genişletilmiş bir şema kullanılır.
Bunlar, renk algoritması aracılığıyla rolleri atanması ve değiştirilmesi gereken veya girildiği gibi kalması gereken anlamsal renkler, markaya özgü renkler, hatta ürüne özgü renkler olabilir.
Genişletilmiş renk şeması, dinamik (kullanıcı tarafından oluşturulan) renkleri marka renklerinizle birleştirme olanağı da sunar. Marka renkleri genişletilmiş şemada ayarlanırken temel şemanın kişiselleştirilmiş kullanıcı etkisine sahip olmasına izin verin. Bu sayede kullanıcı arayüzü öğeleri, kullanıcılarınız için daha kişisel olabilir ve marka renkleriniz uygulamada daha etkili anlar yaratabilir.
Temel şema, özel renkleri içerecek şekilde genişletilebilir. 
9. Genişletme ve özelleştirme
Şemayı özel renklerle genişletmek, anlamsal renkler veya ek marka renkleri gibi renklerin eklenmesine olanak tanır.
Özel renkler eklenmiş özel şema.
- Eklenti kalıcı öğesinde, ana renklerin altında Renk Ekle'yi tıklayın.
- Mevcut tema, yeni bir Custom0 satırıyla güncellenir. Renk kutusunu tıklayarak bu rengi güncelleyin ve yeni bir renk seçin.
- Bu genişletilmiş renkler, salt okunur stiller içinde Custom0 olarak stil şeklinde bulunabilir. Hem ton paleti hem de şema mevcuttur. Etiket arka planını seçip eklenen renk rollerinden birini (on-custom0 container) atayarak listedeki etiketlerden bazılarını yeni renkle eşleyelim.
Seçili renklerde özel renk ayarlama.
- Material Theme Builder, renkleri otomatik olarak Custom# şeklinde oluşturur. Eklenen özel bir rengi yeniden adlandırmak için stil panelinde temanın stil grubunu genişletin (bu, hiçbir şey seçilmediğinde gösterilir). Ardından, kaynak alt grubunda Custom0'ı bulun. Burada kaynağı yeniden adlandırmak, eklenti kalıcı öğesindeki rengi yeniden adlandırır.
Özel renk stillerini stiller panelinde bulabilirsiniz.
- Eklenen rengi silmek için benzer şekilde sağ tıklayıp stili silebilirsiniz. Eklenti bir sonraki açılışında eklenen renk kaldırılır. Yeniden adlandırma ve silme işlemleri renk şemasında yansıtılmayabilir.
10. Tebrikler
Material Theme Builder'ı kullanarak özel bir renk teması oluşturmayı, bunu tasarım maketlerine uygulamayı ve renk şemasına eklemeyi öğrendiğiniz için tebrik ederiz. Yeni Material 3 renk sistemi, tasarımlara erişilebilir, esnek ve tutarlı renkler getiriyor. Bu renkleri nasıl kullanacağınızı görmek için sabırsızlanıyoruz.
Sorularınız varsa Twitter'da@MaterialDesign hesabını kullanarak dilediğiniz zaman bize sorabilirsiniz.
youtube.com/MaterialDesign adresinde daha fazla tasarım içeriği ve eğitim bulabilirsiniz.