Uygulamanızdaki dinamik rengi görselleştirme

1. Giriş

Son güncelleme: 21.09.2021

Uygulamalar, temel şemalardan, kullanıcı tarafından oluşturulan dinamik renklerden veya marka renklerinden oluşan bir dizi renk kullanabilir.

Material You ile kullanıma sunulan yeni dinamik renk özelliklerini keşfetmeye hazır olun. Bu laboratuvarda, renk sisteminin nasıl çalıştığını, erişilebilir renk paletleri oluşturan temel kavramları ve en yeni tasarım araçlarını kullanarak uygulamanızı dinamik renklerle görselleştirmeye yardımcı olacak yöntemleri öğrenmek için dinamik renk paletleri oluşturacaksınız.

Neler öğreneceksiniz?

Materyal Tasarım renklerindeki yenilikler
Kullanıcı tarafından oluşturulan rengi uygulamanıza uygulama
Yardımcı araçlar

Ö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

İhtiyacınız olanlar

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

Visualizing dynamic color in your app with Material Design (Materyal Tasarım ile uygulamanızda dinamik rengi görselleştirme) dosyasına gidin veya Figma Community'de Visualizing dynamic color in your app with Material Design (Materyal Tasarım ile uygulamanızda dinamik rengi görselleştirme) ifadesini arayın. Dosyayı dosyalarınıza kopyalamak için sağ üst köşedeki Kopyala'yı tıklayın.

Dosya Düzeni

Dosyaya göz atın. Dosyanın, girişle başlayan bağımsız 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 bazı temel kavramlar ve ardından alıştırmalar yer alır. Bölümler ve alıştırmalar birbirini tamamladığından sırayla tamamlanmalıdır.

Bu codelab'de bu kavramlar ve alıştırmalar daha ayrıntılı olarak açıklanmaktadır. Yeni Material You özellikleri hakkında daha fazla bilgi edinmek için codelab ile birlikte okumanızı öneririz.

Intro (Giriş) adlı çalışma yüzeyinden başlayarak çalışma yüzeylerini sırayla birbirine bağlayan düğmeler bulunur. Düğmeyi tıklayarak bağlantıya erişebilirsiniz.

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. Renk kavramları

Dinamik renk nedir?

Material You, rengi daha kişisel bir deneyim olarak yeniden tasarlar. Dinamik renk uyarlama sayesinde, olası renk deneyimlerinin aralığı önemli ölçüde genişler.

Dinamik renk, Material You'nun önemli bir parçasıdır. Bu özellik sayesinde bir algoritma, kullanıcının duvar kağıdından özel renkler türetir ve bunları uygulamalarına ve sistem kullanıcı arayüzüne uygular.

Parlaklık

Dinamik renk, öngörülemeyen bağlamlarda çalışacak şekilde tasarlanmıştır. Çeşitli görüntüleme bağlamlarında kontrast oranlarını yönetmek için parlaklık seviyeleri, ürün ekibinin her bir renk kombinasyonunu test etmesine gerek kalmadan renklerin başarılı bir şekilde birleşmesini sağlayan temel özelliktir.

Parlaklığı benzer olan öğeler okunabilirlik için uygun kontrasta sahip olmazken farklı parlaklık değerlerine sahip öğeler daha ayırt edilebilir olur.

Tonal paletler

Ton paleti, bir tonun (dinamik olarak çıkarılan bir renk) ilgili tonların spektrumuna çevrilmesidir. Bir rengin on üç tona çevrilmesi, bileşen içindeki tek tek öğelerden tüm uygulama temalarına kadar farklı bağlamlarda uygulanabilen, tonal palet adı verilen bir grup tonal aralığın kullanılmasını sağlar.

Renk, ton aralığına dönüştürülür.

4. Renkleri alma

Başlangıçtan plana

Dinamik rengin Material Theme Builder ile nasıl çalıştığına bakalım.

Material Theme Builder'ı açın. Dinamik seçiliyken bir resim bırakın veya dosya tarayıcısından bir resim seçin. Başlangıç renginin, resme göre güncellendiğini göreceksiniz.
Renk değerleri duvar kağıdından alınır ve renge, şemadaki diğer renklerle ilişkisini belirleyen bir "tür" atanır. Bu değerleri yansıtmak için sağdaki "ana renkler" güncellendi.

Ardından, parlaklığa dayalı tonal paletlere çevrilerek açık tondan koyu tona kadar beş renk aralığı oluşturulur. Ton paletleri, renk çıkışında bu şekilde etiketlenir.
Beş ton aralığından belirli tonlar (parlaklığa göre), bir şemayı oluşturan önceden tanımlanmış rollere yerleştirilir. Renkler, tasarım jetonları aracılığıyla bir şemaya eşlenir.

Üçüncül ton aralığından oluşturulan ve bileşenlerle eşlenen üçüncül renk rolleri.

5. Temalar ve jetonlar

Tasarım jetonları, tasarımcıların örneğin bir öğenin kullanıcı arayüzündeki renk rolünü sabit bir değer yerine atamasına olanak tanıyarak bir ürün genelinde esneklik ve tutarlılık sağlar. Jetonlar, bir öğenin atanmış rolü ile bir rol için seçilen renk değeri arasında köprü görevi görür. Dinamik rengin kullanıma sunulmasıyla birlikte, belirli bir renk yerine rengin rolüne göre tasarım yapmak daha temel bir yaklaşım haline geldi.

Temalar, hem renk hem de tür için Materyal Tasarım jetonları içerir. Böylece tasarımlar ve kodlar, kullanıcı tarafından oluşturulan paletler ve özel değerlerle birlikte temel çizgiyi temsil etmek için tek bir doğru kaynağa sahip olur.

Eklenti, Figma'da bu jetonları stil olarak oluşturur. Yani oluşturulan stilleri kullanıyorsanız MD jetonlarını kullanıyorsunuz demektir.

Ton paletindeki renkler, tasarım jetonları aracılığıyla açık veya koyu bir şemaya eşlenir.

Eşleme sistemi, bir bileşendeki her öğeye bir ton atar.

Kurulum jetonları

Dinamik rengi tasarımlarınıza uygulamak için maketi mevcut material-theme'deki jetonlara ayarlamamız gerekir.

Düzenin çerçevesini seçip değiştir'i tıklayarak bu temayı kullanmak için düzenin sağ tarafındaki tüm jetonları (Figma stilleri) ayarlayalım. Stil önekini, seçim renklerinde güncellenmiş olarak görürsünüz.

Seçili tasarımda kullanılan bağlı temayı güncellemek için değiştir'i tıklayın.

Şimdi bir resim bırakın veya dosya tarayıcısından bir resim seçin. Mockup'ın değerleri, resimden alınan dinamik rengi alır.
Karıştır düğmesini tıklayın. Bu işlem, resimden renk almak yerine, temel rengi rastgele hale getirerek renkleri tahmin etmenizi sağlar. Bu, dinamik rengin tasarım mock'larınızı nasıl etkileyebileceğini hızlıca görmenin başka bir yoludur.

Başlangıç rengini rastgele belirlemek için karıştırma düğmesini tıklayın.

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" stilini Figma stil grubu olarak oluşturur.

6. Kullanıcı arayüzüne başvurma

Sağlanan düzenler, Materyal Tasarım jetonlarını kullanan Materyal Tasarım Kiti ile oluşturuldu ancak eşlenmemiş birkaç özel öğe var.

Makale kartlarını seçin. Dolgu bölümünde stili material-theme/surface olarak ayarlayın (dört nokta simgesi). (Yüzey de arayabilirsiniz.)
Benzer bir işlemle kartlardaki türü seçin ve on-surface olarak ayarlayın. Onay kutularını birincil olarak ayarlayın.

Tasarımın kartlarında kullanılan Figma stilleri.

Ardından, şemaların geri kalanını yinelemek için ek sahte veriler oluşturacağız.

Tema oluşturma ve yineleme

Artık dinamik rengi görselleştirmek için bir mock-up'ı tamamen bağladık. Ancak aynı anda bir dizi dinamik rengi görselleştirmek için birden fazla tema oluşturup bunları ayrı mock-up'lara da aktarabiliriz.

Eklenti kalıcı öğesinde açılır listeyi tıklayın ve "Yeni tema ekle"'yi seçin.

Benzersiz bir tema adı oluşturun ve Tema oluştur'u tıklayın. Bu işlem, oluşturulan her tema için yeni renk şemaları da oluşturur.

Açılır menüden yeni bir tema ekleme

Resim ekleyin veya başlangıç rengini karıştırın.
Eklenti kalıcı öğesinde bir mock-up (uygulama kullanıcı arayüzü bileşeni) seçin ve değiştir'i tıklayın. Bu işlem, stil değerlerini açılır listede gösterilen mevcut temaya göre günceller.
Mockup'ı kopyalayın (CMD + D).

Seçili tasarımda kullanılan bağlı temayı güncellemek için değiştir'i tıklayın.

1-5 arasındaki adımları tekrarlayın.

Artık farklı dinamik renk yinelemeleri içeren birden fazla tasarımınız var.

7. Tebrikler

Dinamik rengi öğrenip uyguladığınız için tebrikler. Material Theme Builder, dinamik rengi görselleştirerek, özel temalar oluşturarak ve kodu dışa aktararak Materyal Tasarım'da rengi sizin için kolaylaştırmaya yardımcı olur.

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.