Karanlık Bir Kullanıcı Arayüzü Tasarlamak İçin 7 Faydalı İpucu

Karanlık kullanıcı arayüzleri popülerlik kazandı ve birçok uygulama artık aydınlık ve karanlık mod arasında geçiş yapma seçeneği sunuyor. Bununla birlikte, karanlık bir kullanıcı arayüzü uygulamak, kullanılan renklere, yazı tiplerine, resimlere ve boşluklara dikkat gerektiren zorlu bir görev olabilir.

Bu öğelerdeki herhangi bir hata, kötü bir kullanıcı deneyimine neden olabilir. Aşağıdaki ipuçları, ilk karanlık kullanıcı arayüzünüzü tasarlarken size yardımcı olacaktır.

1. Saf Siyah Kullanmayın

Karanlık bir kullanıcı arayüzü tasarlarken, saf siyah arka planlar kullanmaktan kaçının. Koyu bir gri tonu kullanmak daha iyidir. Örneğin, Google'ın materyal tasarım teması #121212 rengini önerir.

Beyaz metinle birleştirilmiş siyah bir arka plan çok fazla kontrasta sahip olabilir ve göz yorgunluğuna neden olabilir. Bunun yerine grinin daha koyu tonları, gölgeleri, derinliği ve yüksekliği kolayca gösterebilir.

2. Metin Kontrastını Sağlayın WCAG 2.0 Yönergelerini Karşılayın

Metnin okunaklı olması için uygun düzeyde kontrast sunan bir renk kombinasyonu seçin. WCAG 2.0 yönergeleri, metin veya resimlerin kontrast oranının en az 4,5:1 olması gerektiğini ve büyük metinlerin (en az 18 punto veya 14 punto kalın) kontrast oranının en az 3:1 olması gerektiğini belirtir.

Aşağıdakiler de dahil olmak üzere renk kontrastını kontrol etmek için çeşitli araçlar vardır: DALGA Renklerin ne kadar erişilebilir olduğunu da kontrol eden Chrome uzantısı.

3. Doğru Yazı Tipi Stilini Seçin

Metninizin yazı tipi stillerini de (boyut, ağırlık ve satır yüksekliği dahil) hesaba katmalısınız. Yazı tipi seçenekleri arıyorsanız, orada olduğunu unutmayın. ücretsiz yazı tipi sunan birçok site. Yazı tipi boyutuna gelince, metnin net ve koyu bir arka plan üzerinde görünür olmasını sağlamak için yeterli değerler kullanın.

Bir web sayfası için aşağıdaki stilleri göz önünde bulundurun:

vücut {
font ailesi: "KuryeYeni", tek aralıklı;
yazı Boyutu: 12piksel;
yazı tipi ağırlığı: 200;
satır yüksekliği: 1; 
renk: #333333;
}

Yazı tipi ailesinin okunması zor, yazı tipi boyutu çok küçük ve yazı tipi ağırlığı çok hafif. Bu stiller, aşağıdaki ekran görüntüsünden de görebileceğiniz gibi sayfanın okunmasını zorlaştırıyor.

Bunun yerine kullanabileceğiniz bazı uygun stiller aşağıda verilmiştir.

vücut {
font ailesi: "Arial", sans Serif;
yazı Boyutu: 16piksel; 
yazı tipi ağırlığı: 400; 
satır yüksekliği: 1.5; 
renk: #FFFFFF;
arka plan rengi: #121212; 
}

Ve işte ortaya çıkan sayfa:

4. Doymuş Vurgu Renklerinden Kaçının

Doygun renkler, koyu arka planlarda çok parlak ve bulanık olabilir. Bunun yerine, daha az yoğun ve sessiz renkler kullanın. Bu şekilde, görünür metne sahip bir kullanıcı arabirimi oluşturursunuz.

Göstermek için şu iki düğme stilini göz önünde bulundurun:

/* Doymuş mavi */
.btn-doymuş-mavi {
arka plan rengi: #121212;
renk: #0e0bf6;
}
/* Sessiz mavi */
.btn-sessiz-mavi {
arka plan rengi: #121212; 
renk: #4c5ab3;
}

Doymuş mavi renk çok parlak olabilir ve koyu bir arka plan üzerinde okunması zor olabilir, sessiz mavi renk ise iyi bir kontrast sağlar ve okunması daha kolaydır.

gibi bir araç renklendirilebilir erişilebilirlik yönergelerine uyan renk kombinasyonları oluşturmak için yararlıdır.

5. Ağır Bir Kullanıcı Arayüzü Oluşturmayı Önlemek İçin Negatif Boşluk Kullanın

Koyu renk paleti, kullanıcı arayüzünün kullanıcılara ağır görünmesine neden olabilir. Düzgün kullanıldığında negatif boşluk, önemli kullanıcı arabirimi öğelerini vurgulamanıza ve metnin kolay taranmasını sağlamanıza yardımcı olabilir. Yeterli boşluk, tasarımı daha temiz ve daha modern hale getirebilir.

Örneğin, Apple'ın açılış sayfası. Öğeler arasındaki boşluk, sayfanın çok modern ve görsel olarak ilgi çekici görünmesini sağlayarak önemli öğelerin öne çıkmasını sağlar.

6. Kullanıcı Arayüzüne Derinlik Eklemek için Farklı Renk Tonları Kullanın

Hafif kullanıcı arayüzleri tasarlarken, öğelere derinlik ve yükseklik eklemek için gölgeleri kullanabilirsiniz. Bununla birlikte, koyu arka planlar nedeniyle, karanlık kullanıcı arayüzlerinde gölgeleri görmek bazen zordur.

Birden fazla koyu renk tonu kullanarak karanlık bir kullanıcı arayüzünde derinlik elde edebilirsiniz. Örneğin, tek bir koyu arka plan yerine, aynı rengin daha açık tonlarını düğmeler ve kipler gibi farklı öğelere ekleyebilirsiniz.

7. Resimlerinizin Karanlık Kullanıcı Arayüzüyle Eşleştiğinden Emin Olun

Aydınlık mod ve karanlık mod için aynı görselleri kullanmanıza gerek yok. Karanlık modu kullanabilirsiniz CSS medya sorguları kullanıcı karanlık moda geçtiğinde karanlık kullanıcı arayüzüyle eşleşen görüntüleri kapatmak için.

Örneğin, karanlık modda sayfanızın bölümlerine belirli bir arka plan deseni uygulamak için .bgpattern sınıf adını kullanabilir ve aşağıdaki kodu stil sayfanıza ekleyebilirsiniz.

@medya (renk şemasını tercih eder: karanlık) {
/* Bu stili yalnızca karanlık modda uygula */
.bgpattern {
arka plan görüntüsü: url("/karanlık.jpg");
 }
}

Bu medya sorgusu, başvurulan arka plan görüntüsünün yalnızca kullanıcının tercih ettiği renk düzeni koyu olduğunda görüntülenmesini sağlar.

Karanlık Kullanıcı Arayüzü Ne Zaman Kullanılır?

Dark UI tasarımları, web sitenize veya uygulamanıza modern bir estetik katmanın harika bir yoludur. Ayrıca göz yorgunluğunu en aza indirebilir ve pil ömrünü koruyabilirler. Bununla birlikte, karanlık kullanıcı arayüzleri her uygulama için uygun değildir ve her zaman markayı ve kullanıcı tabanını göz önünde bulundurmalısınız.

Genel olarak karanlık kullanıcı arayüzleri, lükse, prestije, minimalizme veya gizeme öncelik veren markalar için en uygun olanıdır. Panolar ve görselleştirme araçları için de mükemmel bir seçim olabilirler.