Stili ifade etmek ve anlamı ifade etmek için renklerden yararlanın. Uygulamanızın renklerini ayarlamak; kişiselleştirme, anlamsal amacı tanımlama ve tabii ki marka kimliğini tanımlama açısından çok önemli olabilir.
Çalmalar
- Erişilebilirliği sağlamak için:
- Renk kontrastını kontrol edin ve benzer tonlara sahip renkler eşlemekten kaçının.
- Kırmızı ve yeşilin sık karşılaşılan kalıplar olduğunu, ancak aynı zamanda belirli renk körlüğü olan kullanıcıların bunlara erişemediğini de unutmayın.
- Renkleri anlamlı bir şekilde kullanarak alıştırma yapın: Uygulamalar canlı ve ifade gücü yüksek olabilir, ancak bir renk paletine bağlı olabilir. Şemanızı çok fazla anlamsal renkle genişletmek kafa karıştırıcı olabilir ancak çok fazla dekoratif renk kullanmak da yorucu olabilir.
- Renklerin desenleri olabilir. Bu nedenle, belirlediğiniz renk desenlerini tekrarlayın. Uygulamanızda anlamsal renkler kullanıyorsanız tutarlı renkler kullanın.
- Uygulamanızın farklı bağlamlarda iyi performans göstermesi için açık ve koyu renk şeması oluşturun (ve ideal olarak temalar arasında kontrast oluşturun).
- Sabit kodlu bir değer kullanmak yerine, öğenin renk rolünü belirtmek için jetonlarla renkleri atayın.
- Renkler çeşitli dinamik ve statik kaynaklardan gelebilir, ancak aynı görünümde çok fazla renk karıştırmaktan kaçının.
- Dinamik içerik rengini kullanırken birden çok içerik parçasından renk almaktan kaçınmaya çalışın.
Android'de renk alanı
Android'in kullanıcı arayüzünüze nasıl renk uyguladığını doğru bir şekilde anlamak için öncelikle bunun bir cihazda nasıl göründüğünü tanımanız önemlidir.
Renk bir cihazda nasıl gösterilir?
Uygulamanız, dijital renk kullanan, gözlerimizin bu rengi algılamasına yardımcı olan belirli model ve kurallara uyan, arkadan aydınlatmalı bir ekranda görüntülenir. Dijital renk, tam bir renk spektrumu oluşturmak için farklı ışıkların "eklenmesi" veya karıştırılmasıyla oluşturulan ek renktir. İnsanların bir ekrandan diğerine renk algılama şekli, cihazın renk kalibrasyonu, ekran türü, ayarları ve renk alanına bağlı olarak büyük ölçüde değişebilir.
Bir uygulama tasarlarken, bu faktörler nedeniyle kullanılan renklerin aynı olmayabileceğini göz önünde bulundurun.
Renk alanları hakkında
Renk alanı, renk modeli kullanan bir renk organizasyonudur. RGB, kırmızı, yeşil ve mavinin renk spektrumunu oluşturan eklemeli bir renk modelidir. Baskı için kullanılan CMYK ise çıkarma amaçlıdır. Bu nedenle, etkileşimli tasarımcılar renkleri seçmek için genellikle RGB veya benzer modeller kullanır.
3. Malzeme (M3), HSL gibi diğer modellere kıyasla algısal olarak doğru olan renkleri tanımlamak için ton, renk ve ton kullanan yeni bir renk alanı olan HCT'yi kullanıma sunmuştur
Renk bilimi ve HCT'nin gelişimi hakkında daha fazla bilgi edinmek için Renk ve Tasarım Bilimi bölümünü okuyun.
Ton, renk ve ton
HCT, sistem parametreleri dahilinde kalan daha kişiselleştirilmiş ve esnek renk kullanımlarına olanak tanır. HCT, renkleri ton, renk ve ton kullanarak modeller:
- Ton: Ton, bireysel bir kullanıcının rengi tanımlamak için kullanabileceği sıfata benzer; örneğin, "kırmızı" veya "elektrik menekşesi". Tonun HCT değeri 0-360 arasında değişir.
- Renk: Renk, nötr griden tam canlılığa kadar renk tonunu temsil eder. HCT renk alanında renk değeri yaklaşık 120 civarındadır.
- Ton: Ton, rengin parlaklığı veya parlaklığıdır. HCT, kontrast oluşturmak için tonu kullanır. Aynı ton değerine ayarlanmış renklere bazı erişilebilirlik bağlamlarında erişilemez. Düşük değerli tonlar daha koyu, yüksek değerli tonlar daha parlaktır.
Renkli sistem işlemi
M3 rengi, uyumlu erişilebilir renk şemaları elde etmek ve dinamik renk özelliklerine yardımcı olmak için HCT modeli temel alınarak geliştirilmiştir. M3 renk sistemi, kaynak renginden başlar. Bu kaynak rengi beş temel renge dönüştürülür: birincil, ikincil, üçüncül, nötr ve nötr varyant. Bu beş temel renk, her bir anahtar rengin ton artışlarından oluşan ton paletleri oluşturur.
Bir tuş rengini manuel olarak atarsanız rengin tonu, renk rolünün ton değeri olmayabileceğinden girişin renk ve tonunu dikkate alın.
M3 renk sistemi, uygulamanızda renk temaları ve şemalar geliştirmenizi kolaylaştıran algoritmalar ve yardımcı programlar içeren Materyal Renk Yardımcı Programları (MCU) tarafından desteklenir.
Aşağıdaki videoda renk şemalarının nasıl elde edildiği açıklanmaktadır.
Renk sınırlamaları
Renk sınırlamaları, rengin fiziksel sınırlarıdır. Gerçek fizik, kendi biyolojik görsel sınırlamalarımız veya ekranda renk işlemeyle ilgili sınırlamalar olabilir. Örneğin, bazı tonlar belirli renk veya tonlarla mevcut olamaz. Açık mavi veya parlak açık kırmızı gibi renklerin pek mümkün olmamasının nedeni renk sınırlamalarıdır. Ton rengi eşleme, tüm ton değerlerinde tutarlı olmalıdır.
Yukarıdaki şekilde H105, H25 ve H285 ton değerleri için üç farklı ton eşleme grafiği gösterilmektedir.
Grafik 1 - ton 105 (sarı). Rengin kullanılabilirliğini gösterir. Renk ve Ton bir grafik gibi çalışır. Sarı ton, grafik boyunca belirli tonlarla sınırlı bir renk tonuna sahiptir. Sarı tonlarda geniş bir canlılık yelpazesine sahip değildir.
Grafik 2- ton 25 (kırmızı). Ton 105'ten (sarı) daha fazla renk seçeneği gösterir. Bu ton haritasında, en yüksek renkli nokta daha düşük bir ton düzeyindedir.
Grafik 3 - ton 285 (mavi). En yüksek renkliliğin daha da koyu bir tonda bulunduğunu gösterir. Öte yandan, daha açık bir tonda renk kapasitesi kaybolur.
Renk şeması
Renk şeması, belirli tonlardan türetilen ve renk rollerine atanan vurgu ve yüzey grubudur. Bunlar, daha sonra kullanıcı arayüzü öğeleriyle ve bileşenleriyle eşlenir. Renk rolleri, rengin tonundan ziyade rengin kullanımını ifade eder. Örneğin, açık-mavi yerine birincil.
Renk şemaları uyumlu olacak, erişilebilir metin sağlayacak ve kullanıcı arayüzü öğeleriyle yüzeyleri birbirinden ayıracak şekilde tasarlanmıştır. Renk rolü çiftleri (kapsayıcı ve kapsayıcı rollerinden oluşan), erişilebilir kontrast sağlayan ton değerlerine sahiptir.
Açık ve koyu şemalar oluşturulur ve kendi ton atamaları vardır.
Malzeme renk sistemi ve özel şemalar, özelleştirmenin başlangıç noktası olarak renk için varsayılan değerler sağlar.
M3 renk sistemi hakkında daha fazla bilgi edinin.
Özelleştirilebilir renk şeması için Android Kullanıcı Arayüzü Kiti'ni keşfedin.
Kullanıcı arayüzünüze renk uygulama
Kullanıcı arayüzü rengi vurgu, anlamsal ve yüzey renklerinden oluşur.
- Vurgu renkleri, genellikle Android markasının renk paletinin parçası olan temel renkleri ifade eder.
- Anlamsal renkler (veya Materyal 3'teki özel renkler), belirli bir anlamı olan renklerdir.
- Yüzey renkleri, arka plan renkleri için kullanılan nötr türetilmiş renkleri ifade eder.
Vurgu rengi
Vurgu renkleri genellikle marka bilinci oluşturma, vurgulama eylemleri, kişisel ifade veya kullanıcı ifadesi için olsun kullanıcı arayüzünde en fazla etkiyi gösterir.
Her bir vurgu rengi (birincil, ikincil ve üçüncül); eşleme, vurgu ve görsel ifade için farklı tonlarda dört ila sekiz uyumlu renkten oluşan bir grup halinde sağlanır.
Dinamik renk
Vurgu renkleri, dinamik kaynaklardan tanımlanabilir.
Android 12'den (API düzeyi 31) itibaren dinamik renk özelliği sayesinde sistem, kullanıcının duvar kağıdından veya uygulama içi içerikten (ör. animasyon öğesi) kaynak rengi çıkarabilir. Dinamik renk, şemalar oluşturmak ve bunları çok az çabayla uygulamak için MCU algoritmalarını ve süreçlerini kullanır. Uygulamanıza dinamik renk uygulamak için Kullanıcıların uygulamanızdaki renk deneyimlerini kişiselleştirmesine izin verin başlıklı makaleyi okuyun.
Dinamik rengi uygulamalı bir şekilde incelemek için Dinamik rengi görselleştirme konulu kod laboratuvarını deneyin.
Statik
Statik şema, değişmeyen (veya göreceli) değerlere sahip olan şemadır. Statik bir şema oluşturmanın yaygın yollarından biri, marka renklerinin birincil, ikincil ve üçüncül renkleri markanın ana renk paletiyle uyumlu hale getirmektir.
Dinamik renk kullanıyor olsanız bile, kullanıcının cihazında dinamik renk mevcut değilse yedek olarak statik bir şema oluşturmanızı önemle tavsiye ederiz. Aksi takdirde, sistem referans mor renk şemasını kullanır.
Malzeme Teması Oluşturucu'yu kullanarak statik ve özel bir tema oluşturmak için MCU renk algoritmasını uygulayabilirsiniz. Bu işlem sonucunda, seçtiğiniz ancak M3 renk sistemi jetonları ve uyumlu erişilebilirlik ilkeleriyle uyumlu renkler elde edilir.
Tamamen özelleştirilmiş bir statik şema oluşturmak da mümkündür. Bunu yapmak için renk stilleri içinde farklı değerler (color.kt veya color.xml) atayın veya Figma stili özelliklerini güncelledikten sonra tema dosyasını Figma için Materyal Tema Oluşturucu'dan dışa aktarın.
Kullanım
Malzeme bileşenlerine önceden atanmış renk rolleri vardır, ancak kullanıcı arayüzünüz ve özel öğeleriniz genelinde renk jetonlarını kullanabilirsiniz. İnsan gözünün özellikle canlı renklerden hoşlandığını göz önünde bulundurarak tüm vurgu renklerini dikkatli bir şekilde kullanın.
Türde olduğu gibi sistem, rengi bir hiyerarşi içinde uygular. Burada birincil renk ve ilgili roller önemli harekete geçirici mesajlara (CTA'lar) atanır. Birincil rolleri üstlenmesi için kayan işlem düğmeleri (FAB) gibi bileşenleri öneririz.
Birincil renk seçerken markanızın birincil rengini atamak iyi bir fikirdir. Alternatif olarak, etkileşimli bileşenleri temsil edecek bir renk seçebilir, marka renklerinizin daha tutumlu bir şekilde kullanılmasını sağlayabilirsiniz. İkincil ve üçüncü renkler, önemlerini vurgulama hiyerarşisinde aşağı doğru ilerler.
Aşırı doymuş bir görünüm yalnızca birincil, ikincil veya üçüncül renk rollerinin kullanılmasına neden olabilir. Renk hiyerarşinizi iyileştirmek için daha az canlı kapsayıcı renkleri ve dış çizgi rolleri eklemek için renk şemaları uygulayın.
Daha iyi bir kullanıcı deneyimi sağlamak amacıyla, uygulamanızın görsel hiyerarşisinde işlemleri daha belirgin hale getirmek için daha canlı birincil renkler kullanın. Aşağıdaki şekilde, ilk resimdeki FAB, gezinmeyle aynı ton ve renkle yumuşak bir renge sahiptir ve bu sayede uyum sağlar. İkinci resimde, canlı bir birincil renkle kendisine daha fazla dikkat çeken bir FAB gösterilmektedir.
Dinamik rengi uygulamalı olarak incelemek için Malzeme rengini özelleştirme kod laboratuvarını deneyin.
Anlamsal renk
Anlamsal renkler, belirli anlamlar taşıyan renklerdir. Örneğin, Hata, anlamsal bir renktir.
Rengin anlamında tutarlı olun. Bir desen oluşturursanız bunu uygulama genelinde tekrarlayın. Örneğin, bir üyelik özelliğini belirtmek için moru ayarladıysanız bu üyelik özelliğinin tüm örneklerinde mor değerini kullanın.
Aşağıdaki örnekte, bir uygulama, bir metin alanında hata olduğunu göstermek için kırmızı rengi, diğer metin alanında mor değerini kullanmaktadır. Bu durum, forma göz atarken kafa karışıklığına neden olur.
Malzeme renk şeması, anlamsal hata rengini sağlar, ancak renk şemanızı genişletmek için özel renkler aracılığıyla ek semantik renkler oluşturulur. Özel renkler hakkında daha fazla bilgi edinin.
Uyumlaştırma, daha uyumlu renk paletleri oluşturmak için kullanıcı tarafından oluşturulan dinamik rengi uygulamanızdaki özel renklerle hizalamanıza olanak tanır.
Yüzey renkleri
Yüzey renkleri; bileşen kapsayıcı, e-tablo ve bölme gibi arka plan öğeleri için tasarlanmıştır ve uygulamanızın renklerinin çoğunu temsil eder. Çok fazla yüzey alanı kullanmaktan çekinmeyin; insan gözü rahatlamak için alana ihtiyaç duyar. Yüzeyler aynı zamanda içeriğin barındırılmasına ve okuyucunun yönlendirilmesine de yardımcı olur.
M3, ton yüzeyleri kavramını ortaya koydu, yani tüm renkler ton paletlerinden türetildi. Tonlar, erişilebilirliğe yardımcı olmak için hem derinlik hem de daha fazla kontrast oluşturur. Yüzey rolleri hakkında daha fazla bilgi için yüzey rolleri M3 kılavuzunu inceleyin.
Erişilebilirlik ve renk
Kullanıcılar, renkleri farklı şekillerde görür. Bu durum, görüş keskinliklerine bağlıdır. Bazı okuyucular renk körlüğü nedeniyle, kullanıcı arayüzü öğelerinin birbirine karışmadığından emin olmak için renk kombinasyonlarını kontrol etmeniz gerekir. Opaklık ve ağırlık, rengin gerçek tonu olmasa da kullanıcıların rengi algılama biçiminde güçlü bir görsel etkiye sahiptir.
Renk kontrastı, oran biçiminde sunulan ön plan ve arka plan öğelerinin parlaklığı arasındaki farktır. Bu oran kriterlerine not verilir. Örneğin, bir düğmedeki metin ile kapsayıcısı arasındaki kontrastı ölçmek, metnin okunabilirliğini belirlemeye yardımcı olur. Renk kontrastı yönergeleri, her biri kendi not gruplarına sahip olan metin ve metin olmayan şeklinde ikiye ayrılır. Daha fazla ayrıntı için Erişilebilir renklerle tasarlayın bölümünü okuyun.
Rengi, bir işlem için hiçbir zaman tek seçenek veya gösterge haline getirmeyin. Kullanıcınıza öğeyle etkileşimde bulunabileceklerini bildirmek için bir bileşen düğmesi, yazı tipi ağırlığı değişikliği, hatta bir simge kullanın.
Renk uygulayın
Jetonlar, tasarım verilerinin değişken anlamsal temsilleridir. Bunlar tekrarlanabilir ve rengin onaltılık kodları gibi statik değerlerin yerine açıklayıcı adlar kullanır. Bir öğenin renk rolünü atamak için sabit kodlu renk değerleri yerine jetonlar kullanın.
Renk rolü eşleme örnekleri için Now in Android Figma örneğine göz atın.
Renk değerleri, Compose (veya Görünümler) kullanılarak color.xml kullanılarak color.kt renk dosyasında ayarlanır. Stil olarak ayarlanan bu renkler bir temanın
parçasıdır. Bu konuda daha fazla bilgiyi Android için tasarım mobil temaları bölümünde bulabilirsiniz.
Android'de renk değerlerini ayarlamak için, RGB'yi 6 haneli biçimde temsil eden onaltılık kodu kullanın. Opaklığı yakalamak için değeri en başa ekleyerek 8 haneli bir kod oluşturun.
Malzeme Teması Oluşturucu'yu kullanma:
Materyal Tema Oluşturucu'yu (MTB) kullanarak özelleştirilmiş açık ve koyu renk şemaları oluşturabilirsiniz.
MTB, dinamik rengi görselleştirmenize, Materyal tasarım jetonları oluşturmanıza ve renk şemalarınızı özelleştirmenize olanak tanır.
Renk şeması, Figma denetleyici panelindeki stil özellikleri güncellenerek tamamen özelleştirilebilir. Değiştirilen bu değerler dışa aktarılır.
