Spot Işığında: Karanlık Kullanıcı Arayüzü Tasarımının İlkeleri

Karanlık UI tasarımları, mobil ekranlardan devasa TV'lere kadar her yerde görülüyor. Karanlık bir tema gücü, lüksü, inceliği ve zarafeti ifade edebilir. Ancak, karanlık UI'ler için tasarım yapmak birden fazla zorluk sunar ve kötü uygulanırsa beklentileri karşılamaz. Tasarımcılar "karanlık tarafa" dalmadan önce, sıçramadan önce bakmalıdır.

Fizikçiler siyahın aslında bir renk olmadığını söylüyor; ışığın olmamasıdır . Sir Isaac Newton, güneş ışığını prizmalardan geçirerek yaptığı deneylerde, onu renk tayfına bile dahil etmedi.

Renk psikolojisinde çoğu renk, farklı insanlar için farklı şeyleri temsil eder. Batı kültürlerinde siyah genellikle ölüm, gizem ve kötülükle ilişkilendirilir. Yeşil, genellikle doğa nedeniyle büyüme ile ilişkilendirilir. Mavi, gökyüzü ve su ile ilişkili olduğu için neredeyse evrensel olarak sakinleştiricidir. Renk duygusaldır.

Diğer etkiler kültüreldir. Örneğin, mor hala lüksle ilişkilendirilir çünkü birçok eski kültürde mor boya pahalı ve nadirdi - sadece kraliyet ailesi bunu karşılayabilirdi. İnsan ruhunun bir parçası olacak kadar uzun süre kültürel zamanın önemli bir parçasıydı.

Güç, zarafet ve gizemle ilişkilendirilen karanlık kullanıcı arayüzlerine sahip dijital ürünler, müthiş bir trend. Karanlık modun göz yorgunluğunu azaltabileceği sıklıkla söylense de bunun doğru olduğuna dair bir kanıt yok. Belirli koşullar altında, pil ömründen de tasarruf etmesi gerekiyor. Yine de, çoğu zaman karanlık temalar estetik bir seçimdir.

Karanlık Kullanıcı Arayüzü ve Açık Arayüzü

Tüm arayüzler karanlık bir tema için uygun değildir. Tasarımcılar marka uyumuna, kültürel uygunluğa ve renk psikolojisine bakmalı ve birini seçmeden önce duygusal etkiyi düşünmelidir. Bu zor bir dengeleme eylemi.

Y kuşağını hedefleyen bir finansal uygulama, karanlık bir temayla havalı faktörü başarabilirken, büyük bir bankanın genel nüfusu hedefleyen web sitesi için uygun olmayabilir. Çok zengin, çok karanlık ve çok şık , insanların tek yapmak istedikleri bakiyelerini kontrol etmek ve bir fatura ödemek olduğunda daha sinir bozucu hale gelebilir.

B2B SaaS uygulaması karanlık kullanıcı arayüzlerini tasarlamak herkesin bildiği gibi zordur. Veri tabloları, widget'lar, formlar ve açılır menüler gibi standart web kullanıcı arabirimi bileşenleri, karanlık bir kullanıcı arabiriminde tuhaf görünebilir. Çoğu renk şeması karanlık kullanıcı arayüzleriyle iyi çalışmadığından , türe, bağlama ve çevresel faktörlere bağlı olarak belirli markalar ve ürünler uygun değildir ve aşılmaz bir zorluk olduğunu kanıtlayabilir.

Daha önce karanlık UI tasarımı ile çalışmamış ve her iki ayağıyla da atlamaya karar vermiş tasarımcılar kendilerini zorlu, keşfedilmemiş sularda bulabilirler. Karanlık kullanıcı arayüzlerinin okyanuslarında normlar bükülür, kurallar değiştirilir ve tuzaklar çoktur.

Bununla birlikte, karanlık kullanıcı arayüzlerini kullanmanın birçok iyi nedeni vardır:

• Tasarım, yalnızca birkaç içerik türüyle seyrek ve minimalist olduğunda
• Gece eğlence uygulamaları gibi bağlam ve kullanım için uygun olduğunda
• Çarpıcı, dramatik bir görünüm yaratmak için

Ayrıca tavsiye edilmediği durumlar da vardır:

• Çok miktarda metin olduğunda (koyu bir arka planda okumak zordur)
• Çok sayıda karışık içerik türü olduğunda
• Tasarım geniş bir renk yelpazesi gerektirdiğinde

Karanlık UI Tasarımında Kontrast

Karanlık bir tema, siyah bir tema değildir. En iyisi “düşük ışık” teması olarak düşünülür. Karanlık kullanıcı arayüzleriyle ilgili temel endişelerden biri, görsel öğelerin ayrılması ve metnin okunabilmesi için yeterli kontrastı elde etmektir. Çoğu tasarımcı, güçlü kontrast elde etmek için siyah kullanmanın en uygun olacağını düşünür. Ancak, arka planlar veya yüzey renkleri için gerçek siyah (#000000) kullanmamak en iyisidir. Siyah, en iyi şekilde diğer UI öğeleri için ayrılmıştır ve idareli olarak kullanılır. Örneğin, gerçek siyah, küçük UI öğeleri veya çevreleyen bir çerçeve için kullanılabilir.

Google'ın Material Design koyu teması, "daha geniş bir derinlik aralığına sahip bir ortamda yüksekliği ve alanı ifade etmek için" koyu tema yüzey rengi olarak koyu grinin (#121212) kullanılmasını önerir. Ayrıca birçok tasarımcı, renk şemasını tanımlarken koyu grilere ince bir koyu mavi renk tonu eklemeyi önerir. Dijital ekranlar için daha iyi bir koyu ton ve daha hoş bir koyu UI renk paleti oluşturma eğilimindedir.

Bir dizi gri kullanmanın bir avantajı, daha geniş bir renk yelpazesi ifade edilebildiği için tasarımcılara özgürlük vermesidir. Gri palet ayrıca derinlik oluşturmaya yardımcı olur çünkü alt gölgeler griye karşı siyaha karşı daha kolay görülebilir.

Karanlık kullanıcı arayüzlerinde metin kontrastına özellikle dikkat edilmelidir.

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), kontrast oranının en az 3:1 olması gereken büyük ölçekli metinler hariç, “metnin görsel sunumunun kontrast oranının en az 4,5:1 olmasını” gerektirir. Bu nedenle, tasarımcıların içeriğin karanlık modda rahatça okunabilir kalmasını sağlamaları gerekir.

Çeşitli ekranlarda ve cihazlarda kartlar, düğmeler, alanlar ve simgeler gibi diğer UI öğeleri arasında uygun kontrastı test etmek de iyi bir fikirdir. UI öğeleri arasında fark edilmeyen bir ayrım varsa, tasarım çok fazla karışır ve donuklaşma riski vardır.

Odaklanma Dikkat: Renk

Karanlık kullanıcı arayüzlerinde renk öne çıkıyor. Daha açık, doymamış vurgu renkleri olan şemaları kullanmak en iyisidir. Koyu yüzeylerde görsel olarak titreşebileceklerinden , koyu kullanıcı arayüzlerinde doygun renkler kullanmaktan kaçının . Ayrıca, en iyi uygulama olarak, renklerin metinle birlikte kullanıldığında WCAG'nin AA standardını en az 4,5:1 oranında geçmesi gerekir.

Karanlık bir kullanıcı arayüzü için bir renk şeması tanımlarken, Google, alanın çoğunu karanlık yüzeyler için kullanılabilir durumda tutmak için sınırlı sayıda renk vurgusu önerir. Bölünmüş tamamlayıcı renkleri kullanmak yardımcı olabilir. Şemada bir baskın renk ve baskın rengin tamamlayıcısına bitişik iki renk bulunur. Bunu yapmak, tamamlayıcı renk şemasının gerilimi olmadan gerekli kontrastı sağlar.

Doğru renk şeması, iyi bir kontrast oluşturmaya yardımcı olabilir. Colorable, metin ve arka plan renklerinin erişilebilirlikle uyumlu renk kombinasyonlarını seçmek için yararlı bir araçtır.

Düğmeler ve simgeler gibi metin ve temel öğeler, koyu arka planlarda görünürken okunaklılık standartlarını karşılamalıdır. Yukarıdaki Jabra Sound+ uygulamasında görüldüğü gibi, metin ve simgeler için beyaz dışındaki renkler kullanılabilir.

Google'ın Materyal Tasarımı sitesinde, tasarımcıların bir kullanıcı arayüzüne renk paletleri oluşturup uygulayabilecekleri ("Renk seçme araçları" altında) kullanışlı bir renk paleti oluşturucu vardır. Renk kombinasyonlarının erişilebilirlik düzeyi, tamamlayıcı bir Renk Aracı ile de ölçülebilir.

"Okunabilirliği artırmak için çok zıt renkler kullanın. Yazı tipi boyutu ve ağırlığı, renk parlaklığı, ekran çözünürlüğü ve aydınlatma koşulları dahil olmak üzere birçok faktör renk algısını etkiler.” Apple İnsan Arayüzü Yönergeleri

Az Daha Çoktur: Negatif Alandan Yararlanma

Başarılı karanlık UI tasarımının temel unsurlarından biri, negatif alanın ustaca kullanılmasıdır. Kötü tasarlanmışsa, karanlık kullanıcı arayüzleri dijital ürünlerin ağır ve zorba görünmesine neden olabilir. Dengeyi sağlamak için tasarımcılar, seyrek, minimalist tasarımlardaki negatif boşluktan yararlanarak karanlık kullanıcı arayüzlerini daha hafif hale getirebilirler. Minimalist tasarım, var olan kadar orada olmayanla da ilgilidir. Negatif boşluk, ustaca kullanıldığında, karanlık bir kullanıcı arayüzünü daha taranabilir hale getirecek ve insanların bilgileri daha kolay özümsemelerini sağlayacaktır.

Fransız besteci Claude Debussy bir keresinde “ Müzik notalar arasındaki boşluktur ” demişti. Aynı duygu, taranabilirlik için de geçerlidir; bir yerleşimin çalışmasını sağlayan öğeler arasındaki negatif boşluktur. UI öğelerinin etrafındaki liberal miktarda negatif alan, onlara tanım veren şeydir. Önemli içeriği vurgular ve tasarımın yoğun ve dağınık hissetmemesini sağlamak için gerekli nefes alma alanını sağlar. Nefes alma alanı olmadan, insan beyninin ilgi alanlarını tarama olasılığı daha düşüktür ve gezinme olasılığı daha yüksektir.

Çok fazla öğe ve metinle dolu arayüzler, yüksek kaliteli karanlık UI tasarımının belasıdır. Tasarımcılar, karanlık UI'lerdeki görsel hiyerarşiyi dikkatlice değerlendirerek, tasarımlarını daha kolay taranabilir hale getirebilir ve böylece kullanıcı deneyimini yükseltebilir.

Stil Sözleri: Tipografi

Karanlık kullanıcı arayüzlerindeki her metin parçası inceleme gerektirir. Endişe iki yönlüdür: okunaklılık ve kontrast. İlk olarak, boyutla ilgili. Metnin iyi okunabilirlik için yeterince büyük olması gerekir (koyu arka planlar üzerindeki küçük metinlerin okunması daha zordur). İkincisi, metin ve arka plan arasında yeterli kontrast olması gerekir.

Binlerce dijital yazı tipinin mevcudiyeti, başlıklar ve kahraman mesajları için etkili mesajların görüntülenmesini kolaylaştırır. Tasarımcılar, kontrastı artırarak ve daha küçük metinler için yazı tipi boyutunu, karakter aralığını ve satır yüksekliğini ayarlayarak okunabilirlik sorunlarını azaltabilir.

Normal boyutlu metin (kalın değilse 18 puntodan az) için W3C AAA önerisi, en az 7:1 kontrast oranına sahip olmaktır. Bu, diğer UI öğeleri için de geçerlidir: simgeler, metin görüntüleri ve düğme etiketleri gibi metin etiketleri. Tüm dijital ürünlerin herkes tarafından erişilebilir olmasını sağlamak tasarımcıların görevidir. Yalnızca kullanılabilirliği ve dolayısıyla UX'i geliştirmekle kalmaz, çoğu ülkede yasadır .

Tasarımcılar için karanlık kullanıcı arayüzlerinde iyi çalışan mükemmel yazı tiplerini elde etmek için sayısız seçenek mevcuttur. Google Fonts, Font Library ve Adobe Typekit, kolay uygulama veya site entegrasyonu ve çok çeşitli seçenekler sunan birkaçıdır.

İletişim Derinliği: Yükseklik

Karanlık bir tema düz anlamına gelmez. Işık temaları ile aydınlatma, gölgeleme ve gölgeler bir derinlik hissi yaratır. Koyu UI'lerde, seyrek renk vurgulu ağırlıklı olarak koyu yüzeyler içerdiğinden daha zordur. Yine de tasarımcılar, metnin derinliği iletmesi için karşılık gelen renk şemalarıyla üç veya dört yükseklik seviyesi kullanabilir.

Neden derinlik? Çoğu modern tasarım sistemi, derinliği iletmek için bir yükseklik seviyeleri sistemi kullanır. Derinlik duygusu, doğal dünyaya karşılık gelir. Vizyonumuz derinlik algısına sahiptir ve 3 boyutlu bir dünyada yaşıyoruz. Derinlik, bir arayüzün görsel hiyerarşisini vurgulamaya yardımcı olur. Örneğin, ön plandaki öğeler, uyarı iletişim kutusu gibi kendilerine dikkat çeker.

Yüzeyler, farklı yükseklik seviyelerini belirtmek için farklı şekilde aydınlatılır. Bir yüzeyin yükseklik yığınındaki konumu ne kadar yüksekse (ima edilen bir ışık kaynağına daha yakın), yüzey o kadar hafiftir. Daha parlak bir yüzey, bileşenler arasındaki yüksekliği ayırt etmeyi kolaylaştırır ve her bir yüzeyin kenarlarını daha belirgin hale getirerek gölgelerin görülmesine yardımcı olur.

Her seviyenin yüzey rengini tasarlamak özen gerektirir. Dört veya beşten fazla seviyeye sahip olmamak en iyisidir. Yüzeyler yığında yükseldikçe ve hafifledikçe tasarımcıların metin kontrastını hesaba katması gerekir. Arka plan rengi, beyaz metin ile yüzey arasında en az 15.8:1 kontrast seviyesini karşılayacak kadar koyu değilse, en yüksek (ve en açık) yükseltilmiş yüzeydeki metin 4.5:1 standardını geçemez. Bazı durumlarda, açık gri bir arka plan üzerinde iyi bir kontrast elde etmek için tasarım sisteminde bir öğenin metin rengini gerçek siyah (#000000) olarak belirtmek en iyisi olabilir.

Karanlık UI Tasarım İlhamı

Yukarıda ana hatlarıyla belirtilen ilkeleri göz önünde bulundurarak, işte karanlık UI tasarımının bazı mükemmel örnekleri:

Atom Finance , sofistike bir görünüm için karanlık bir temayı kullanır ve vurgu renklerini üç ile sınırlar. Düzen, karmaşık bir finansal web sitesi için negatif alan ve seyrek, minimalist bir tasarım kullanır. Site, kullanıcı arayüzündeki farklı bileşen yüksekliklerini belirtmek için ince gölgelendirmeyi iyi kullanır.

Bu minimalist karanlık tema web sitelerinin ikisi de cesur tipografi kullanıyor. Tek bir vurgu rengiyle dikkatli gölgeleme, koyu UI tasarımı en iyi uygulamalarıyla uyumlu olarak kullanılır.

SaaS uygulamaları için karanlık temalarla çalışmanın zorluklarına rağmen, IBM için bu veri görselleştirme panosu örnek niteliğindedir. Vurgulu renklerin sayısı minimumda tutulur ve site, farklı UI yüksekliklerini göstermek için ince gölgeleme kullanır.

Bu mobil uygulamalar, yalnızca çerçeveler için gerçek siyah , farklı yükseklik seviyeleri için öğelerin uygun şekilde gölgelenmesi ve sınırlı sayıda vurgu rengi kullanarak koyu UI tasarımı en iyi uygulamalarını gözlemler.

Özet

Geleneksel bir UI tasarımı yerine karanlık bir UI tasarımı kullanma kararına ihtiyatla yaklaşılması gerekir. Havalı, farklı veya başka birinin tasarımını taklit etmek gibi yanlış nedenlerle seçilmemelidir. Tasarımcılar , seçimleri için güçlü bir gerekçeye sahip olmalı ve içeriği, kullanım bağlamını ve tasarımın üzerinde görüneceği cihazı dikkate almalıdır.

Karanlık temalar, bazı dijital ürünler için uygundur, ancak diğerleri için uygulanması gerçek bir mücadeledir. Sadelik anahtardır. Minimal içerik, veri görselleştirmeleri, medya siteleri ve eğlence platformları sunmak için harikadırlar. Karmaşık, veri ağırlıklı B2B platformları, metin ağırlıklı sayfalar ve çok sayıda çeşitli içerik için yetersizdirler.

Yeni stilistik sınırları aşmaya ve karanlık kullanıcı arayüzlerini duygusal ve estetik bir mercekle keşfetmeye hazır cesur tasarımcılar için, “karanlık tarafta” sonsuz olasılıkların heyecan verici bir oyun alanı sunuyorlar.

Haydi ne düşündüğünü söyle! Lütfen düşüncelerinizi, yorumlarınızı ve geri bildirimlerinizi aşağıya bırakın.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Karanlık UI'ler. İyi ve kötü. Yapılması ve yapılmaması gerekenler.
• Tasarım İlkeleri ve Önemi
• Tasarımın Gestalt İlkelerini Keşfetmek
• Zorlayıcı ve Harekete Geçirici – Hareket Tasarımı İlkelerine Yönelik Bir Kılavuz
• Bu Başarılı Etkileşim Tasarım İlkeleri ile UX'inizi Güçlendirin