Arayüzünüzde kullanıcının gözünü yoracak bir renk mi kullanıyorsunuz?
Arka planınız için parlak ve doygun bir renk kullanırsanız kullanıcının sayfanızda geçirdiği süreyi azaltırsınız. Parlak ve zengin renklerçok dikkat çekiyor. Ancak bu tür renklerin kullanımı Büyük miktarlar kullanıcının gözlerini ciddi şekilde yorar.
Hangi konuşmacıya daha uzun süre bakabilirsin?
Örnek. Yukarıdaki görseldeki renklere yakından bakın.
Sol sütun maksimum parlaklığa ve doygunluğa sahip renkleri içerir. Sağ sütunda parlaklık ve doygunluk %80'e eşit olan renkler bulunur.
Sol sütuna olan dikkatiniz sağ sütuna göre daha düşük olacaktır, çünkü parlak renkler gözlere çok fazla baskı uygular.
Parlaklık ve Doygunluk
Parlaklık ve Doygunluk farklı renk özellikleridir. İlk özellik, bir renge ne kadar beyaz veya siyah karıştırıldığını ifade eder. İkinci özellik ise rengin ne kadar gri içerdiğidir.
Parlaklığı artırarak doygunluğu azaltmazsınız. Doygunluğu düşürdüğünüzde rengi grinin bir tonuyla karıştırırsınız. Parlaklığı artırdığınızda rengi daha açık hale getirirsiniz ancak gri yapmazsınız.
Üst: artan parlaklık - daha fazla beyaz. Alt: Doygunluğun azaltılması - daha fazla gri
Rengin dikkat ve uyarılma üzerindeki etkisi
“Ton, Doygunluk ve Parlaklığın Etkisi” çalışmasının sonuçlarına göre, yüksek doygunluğa ve parlaklığa sahip renklerin dikkat çektiği tespit edildi. en büyük dikkat. Bu çalışmanın yazarı, bu renk özelliklerinin dikkat çekmede tonlardan daha önemli olduğu sonucuna varmıştır.
Diğer iki çalışma - "Renk doygunluğunun uyandırıcı etkisi" ve "Renk ve duygu", doygun renklerin en büyük heyecan. Renk tonu aynı zamanda uyarılmayı da etkiler, ancak doygunluk ve parlaklık en güçlü etkiye sahiptir.
Düğmelerde parlak ve zengin renkler kullanın
Parlak ve doygun renkler kullanıcının dikkatini çeker ancak uzun süre tutmaz. Bu renkleri kullanmak kullanıcının yanında çığlık atmak gibidir. Sadece bir süreliğine onların dikkatini çekeceksiniz.
Bu nedenle, bu tür renkleri yalnızca kullanıcının işlem yapmasını gerektiren arayüz öğelerinde (örneğin düğmeler) kullanmalısınız. Bu renkler kullanıcının dikkatini kontrollere çekecek ve kontrollerin doğru zamanda bulunmasını kolaylaştıracaktır.
Sol: Arka plan parlak ve doygun. Bu nedenle tüm dikkat düğmeye değil arka plana verilir. Sağ: Düğme parlak ve doygun bir renk kullanır. Kullanıcının dikkatini çeker
Arka plan için koyu ve daha az doygun bir renk kullanın
Arka plan rengini daha koyu ve daha az doygun hale getirmek daha iyidir. Renk koyulaştıkça içerik azalır beyaz. Doygunluk azaldıkça gri miktarı artar.
Ortaya çıkan arka plan, kullanıcının dikkatini sayfadaki metinden veya içerikten uzaklaştırmayacaktır. Bu, kullanıcının sayfayı kolayca ve dikkati dağılmadan okumasını sağlar.
Sol: Gözler için rahatsız edici. Arka plan parlak ve zengindir. Soldaki resimde maksimum parlaklık ve doygunluk. Sağda: Gözleri yormaz. Arka plan karanlık ve daha az doygun. Parlaklık ve doygunluk daha düşük
En uygun arka plan rengini bulma
Arka plan renginiz için kullanabileceğiniz birçok parlaklık ve doygunluk oranı vardır. Renk örneklerinden oluşan bir ızgara oluşturmak, bulmanıza yardımcı olacaktır. en uygun renk arka plan için.
Öncelikle ana tonu seçin ve parlaklığını ve doygunluğunu maksimuma ayarlayın. Renk tonu değeri kaydedilir ve parlaklık ve doygunluğun ayarlanması için bir referans noktası görevi görür.
Daha düşük doygunluk ve parlaklık düzeylerine sahip dört yeni renk örneği oluşturmak için ana renk tonunu (renk örneğini) çoğaltın.
Oluşturulan iki renk örneğinin parlaklık düzeyini azaltın. Ve diğer iki numunenin doygunluğunu azaltın. Rengi ayarlarken onluk artışlar kullanın.
Doymuş renk örneklerini, Parlaklık ve Doygunluk %100'e ayarlanmış şekilde orijinal renk tonunun soluna yerleştirin. Sağ tarafa minimum ve maksimum parlaklığa sahip renk örneklerini yerleştirin.
Şimdi ikinci bir renk örneği sırası oluşturun. İlk renk sırasına göre parlaklığı ve doygunluğu azaltın. Değerleri azaltırken her renk örneği kümesi için aynı değeri kullanın.
Sonuç olarak ikinci sıradaki renklerin hiçbiri %100 doygunluğa ve parlaklığa sahip değildir. Bu, bu renklerin işte kullanıma en uygun olduğu anlamına gelir.
Sonuçlardan memnun değilseniz başka bir renk örneği dizisi oluşturmayı deneyebilirsiniz. Bunu yapmak için üçüncü düzeyde renk örnekleri oluşturun ve her birinin parlaklık ve doygunluk değerlerini azaltın.
Artık farklı parlaklık ve doygunluk oranlarına sahip toplam sekiz optimum renge sahipsiniz.
Bir web sitesinin arka planında kullanılacak iyi ve kötü renk örnekleri
Aşağıda göze hoş gelen ve hoş gelen sayfa örnekleri verilmiştir. Örnek sayfaların her birine ne kadar süreyle bakabileceğinize dikkat edin.
Solda kötü bir yeşil var (Panik veya Prizmik). Sağda güzel bir yeşil (
Arayüzünüz için kullanıcının gözünü yoracak renkler mi seçiyorsunuz?
Arka plan için parlak ve doygun bir renk kullanırsanız, kullanıcıların hayatını zorlaştırırsınız: sayfayı görüntülemeleri anında zorlaşır. Parlak, zengin renkler en çok ilgiyi çeker. Ancak bu kadar çok parlak renk varsa, retina üzerinde artan bir yük oluşturur ve gözlerinizi çok fazla zorlamanız gerekir.
Örneğin yukarıdaki görseldeki renk örneklerine bir göz atın. Sol sütun maksimum parlaklık ve doygunluğa sahip renklerden oluşur. Sağdaki sütun %80 parlaklık ve %80 doygunluktaki renklerden oluşur. Parlak, doygun renkler gözlerinizi çok yorduğundan sol sütunun toleransı sağdakinden daha düşük olacaktır.
Bir web sitesinin veya uygulamanın arka planı için neden parlak renkler kullanmamanız gerektiğinden bahsedelim. Evet, bugün yeni çıkmış bir trend - parlaklığı sonuna kadar vermek. Ancak her zaman modayı takip etmek zorunda değilsiniz, özellikle de çılgınlık sınırındaysa veya ürününüzün kullanımına engel oluyorsa.
Teoriyle başlayalım.
Parlaklık Vs. Doyma
Parlaklık ve doygunluk farklı özellikler renkler. Birincisi belirli bir renkte ne kadar beyaz veya siyahın karıştırıldığı, ikincisi ise grinin miktarıdır.
Parlaklığın artması doygunluğun da azaldığı anlamına gelmez. Doygunluğu azalttığınızda rengi grinin bir tonuna dönüştürürsünüz. Parlaklığı artırdığınızda renk bileşeninin miktarını artırırsınız ancak rengi gri () yapmazsınız.
Arka plan rengi yeterli önemli unsur herhangi bir web sayfası. Birincisi sitenin istenilen havasını ve genel havasını belirler, ikincisi metnin algılanmasını kolaylaştırır.
Bir web sayfasının arka plan rengi, etiketin bgcolor özelliği kullanılarak ayarlanır.
.Örnek 1: Arka plan rengini değiştirme
Renk, onaltılık bir değer olarak veya adına göre belirtilebilir.
Arka plan için herhangi bir renk belirtebilmenize rağmen çoğu site Beyaz arkaplan ve en köklü seçenek olarak siyah harfler.
Arka plan görüntüsü
Uygun herhangi bir resmi arka plan olarak kullanabilirsiniz. Arka plan dikkati metinden uzaklaştırmamalı ancak metinle iyi uyum sağlamalıdır. renk uyumu Web sayfalarının hızlı yüklenmesi için boyutları küçük olmalıdır. Yukarıdakilerin hepsinden sonra yine de sayfaya arka plan resmi eklemek istiyorsanız, etiketin arka plan özelliğini kullanmalısınız.
.Örnek 2: Duvar kağıdı ekleme
Eğer görüntü daha küçük beden monitör ekranı yatay ve dikey olarak çoğaltılacaktır.
Arka plan resmi arka plan rengine göre daha yavaş yüklendiğinden, resimler yüklenene kadar bir süre okunamayan metinlerle karşılaşabilirsiniz. Tarayıcıda resimler devre dışı bırakılırsa aynı şey olabilir. Bu nedenle, arka plan renginin her zaman arka plan resmiyle birlikte ayarlanması önerilir (örnek 3).
Örnek 3: Bir arka plan resmi ve arka plan rengi kullanma
Sabit arkaplan
Varsayılan olarak kaydırma çubuğunu kullandığınızda arka plan resmi web sayfasının içeriğiyle birlikte hareket eder. Internet Explorer, bgproperties ="fixed" etiketi özelliğini kullanarak arka planı düzeltmenize olanak tanır
.Örnek 4: Sabit bir arka plan ayarlama
Örnek 4'te gösterildiği gibi bgproperties özniteliğini belirleyerek web sayfasındaki arka plan görüntüsü sabit kalacak ancak metin, grafikler ve diğer öğeler kaydırma çubuğuyla birlikte hareket edecektir.
Yükleniyor...
