Karanlık Mod Nasıl Tasarlanır: Mobil Uygulama Tasarımcıları için 2021 Kılavuzu

Işıkları kısın, gözlerinizi rahatlatın ve enerjinizi koruyun. Karanlık mod, tasarımdaki en büyük trendlerden biri ve WhatsApp, Instagram, Google, Facebook ve Apple gibi birinci sınıf markalar şimdiden karanlık mod tasarım trenine atladı.

Android 10 ve iOS 13'ün resmi lansmanı, Karanlık Tema Kullanıcı Arayüzü'nü ön plana çıkardı. Hem Apple hem de Google, geçtiğimiz bir yıldan beri kaynaklarını ve dikkatlerini karanlık moda adadı.

Doğru yapılırsa, karanlık modun faydaları emsalsizdir. Düşük ışıkta daha kolay okunabilirler. Göz yorgunluğunu azaltırlar. Ekrana bağlı olarak pil tüketimini büyük ölçüde ortadan kaldırabilirler.

Karanlık Temayı bir uygulama için hazırlamak, her mobil uygulama tasarım şirketi için bir zorunluluk haline geliyor. Bununla birlikte, karanlık mod uygulama tasarımı zorlukları göz ardı edilemez. Renkleri basitçe yeniden kullanmak veya renkleri tersine çevirmek mümkün değildir. Bunu yaparsanız, ihtiyacınız olanın tam tersini elde edersiniz.

Karanlık mod yanlış tasarlandığında göz yorgunluğuna neden olur ve düşük ışıkta okumayı zorlaştırır. Bu temanın düşük parlaklığı, karanlık bir ortamda bir güvenlik hissi yaratır. Sonuç olarak, kasvetli temalar oluştururken eğlenceli, dengeli ve okunabilir olduklarından emin olun.

Bu makalede, mobil uygulama tasarımcılarının kullanıcılarına karanlık mod UI tasarım deneyimi sunmaya nasıl başlayabileceklerini inceleyeceğiz.

Android Uygulaması için Karanlık Tema Nasıl Tasarlanır?

Google, tasarımcıların Android uygulaması için karanlık temaları nasıl tasarlayacaklarını anlamaya başlamasına yardımcı olan kapsamlı bir belge desteğiyle birlikte gelir .

Teknoloji devi, karanlık tema Kullanıcı Arayüzünü tanımlayan ve karanlık mod uygulama tasarımının nasıl geliştirileceğine dair bir başlangıç ​​noktası veren dört ilke belirledi :

1. Gri ve siyah

Fark edebileceğiniz ilk şey, karanlık temadaki uygulamalar için varsayılan arka planın siyah değil, koyu gri olmasıdır: #121212.

Özellikle Android 10'daki platform siyah bir arka plan kullandığından, neden griyi siyahı seçtiğimize dair birçok tartışma var. Bu, büyük ölçüde kullanılabilirlik ile güç tasarrufu arasındaki bir dengedir.

Platformda arka plan olarak saf siyah #000000 renk kullanmak, sistem uygulamalarının ve yüzeylerin OLED ekranlarda açıkken mümkün olduğunca az güç kullanmasını sağlar. Bu sistem yüzeyleri oldukça basit olma eğilimindedir, genellikle yalnızca metin ve basit simgeler, bu nedenle kontrast sorunlarıyla mücadele etmek için metin ve simge renklerini uygun şekilde ayarlayabiliriz.

Ancak uygulamalarda yüzeyleriniz her şeyi içerebilir: karmaşık renkli vektör animasyonları, parlak görüntüler, zıt markalı yüzeyler ve çok daha fazlası. Bunları saf siyah bir arka plana yerleştirmek, ortaya çıkan kontrastın çok daha yüksek olduğu anlamına gelir ve bu da göz yorgunluğunu artırabilir. Bu nedenle açık renkli veya gri bir arka plan kullanmak çözümdür.

2. Vurgulu Renkli Ayrıntılara Dikkat

Karanlık bir kullanıcı arayüzü için bir renk şeması tanımlarken, Google , koyu tema kullanıcı arayüzlerinde sınırlı renk vurguları uygulanmasını önerir, bu nedenle alanın çoğu karanlık yüzeylere ayrılmıştır. Ayrıca koyu arka planı korumak, fotoğraf görsellerini daha derinleştirir ve vurgu rengiyle göze hoş gelen bir kontrast oluşturur. 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.

3. Pil Ömrünü Koruyun

Koyu temalar, cihaz ekranlarının yaydığı parlaklığı azaltırken minimum renk kontrast oranlarını karşılamaya devam eder. Pil gücünden tasarruf ederken göz yorgunluğunu azaltarak, parlaklığı mevcut aydınlatma koşullarına göre ayarlayarak ve karanlık ortamlarda ekran kullanımını kolaylaştırarak görsel ergonomiyi geliştirmeye yardımcı olurlar. OLED ekranlı cihazlar, günün herhangi bir saatinde siyah pikselleri kapatabilme veya açık piksellerin kullanımını azaltabilme özelliğinden yararlanır.

4. Erişilebilirlikle uyumlu renk kombinasyonlarını seçme

Erişilebilirlik renk kontrastı standartlarını karşılayarak normal karanlık tema kullanıcılarını (az görenler gibi) barındırın .

Koyu renk şeması ve genel mod için Google Materyal Tasarımı Yönergelerinde düzelttikleri farklı özellikler vardır –

Yükseklik: Koyu tema tasarlama sürecinde, bileşenler, açık tema durumunda olduğu gibi aynı varsayılan gölge bileşenlerini ve yükseklik seviyelerini korur. Farklı olan, yükseklik seviyelerinin yüzeyinin aydınlatılmasıdır.

Yüzey yüksekliği ne kadar yüksek olursa, yüzey o kadar hafif olur. Hafiflik, yarı saydam bir kaplama uygulamasıyla gösterilir. Kaplamalar ayrıca bileşenler arasında ayrım yapmayı ve gölgeleri görmeyi mümkün kılar.

Erişilebilirlik ve kontrast: Koyu tema UI tasarımındaki arka plan, beyaz metni gösterecek kadar karanlık olmalıdır. Arka plan ve metin arasında en az 15.8:1 kontrast kullanmalıdırlar. Bunu yapmak, gövde metninin, en yüksek yükseklikteki yüzeylere eklendiğinde, WCAG'nin 4.5:5:1 AA standardını geçmesini sağlar.

Renkler: Tasarımcılar, okunabilirliği artırmak için doymamış renkleri kullanmaya odaklanmalıdır. Birincil ve ikincil renklerin seçimi, hem açık hem de koyu UI temalarının dikkate alınmasına bağlı olmalıdır.

Koyu arka planlar üzerinde açık metin: Koyu arka plan üzerinde açık bir metin geldiğinde, şu opaklık düzeylerini kullanmalıdır:

• Yüksek vurgulu metnin opaklığı %87'dir
• Orta vurgulu metin ve ipucu metni %60 opaklığa sahiptir
• Devre dışı bırakılan metnin opaklığı %38'dir

Durumlar: Durumlar , koyu tema düzenleri veya bileşenleri için etkileşimli öğelerin durumunu kaplamaları kullanarak iletir. Koyu temada durumlar, varsayılan açık tema ile aynı kaplama değerlerini kullanmalıdır. Durum kaplamalarını devralan iki kapsayıcı vardır: Yüzey ve Birincil .

Yüzey rengini kullanan yüzey kapları, metin veya simgenin rengiyle eşleşen bir kaplama uygulamalıdır. Birincil rengi kullanan yüzey kapları için durum katmanı beyaz olmalıdır.

Karanlık Modda iOS için Uygulama Nasıl Tasarlanır?

Karanlık mod ile Apple, iOS'ta UI stilinin ve renklerin anlamını yeniden ziyaret etti. Apple'ın iOS 13'te karanlık mod için tasarım yapmanıza yardımcı olmak için getirdiği değişikliklere bakalım .

anlamsal renkler

Apple, hem açık hem de karanlık modda iOS uygulamalarının hissini ve görünümünü dengelemek için yaygın olarak kullanılan UI bileşenleri için anlamsal renkler sundu. Bu renkler en iyi RGB değerine sahip değildir; bunun yerine, doğrudan iOS arayüz stilini değiştirirler. Ayrıca, karanlık modda, bu anlamsal tonlar, kaplama rengi ve metinle uğraşmaya yardımcı olur.

Sistem renkleri

Apple, sistem genelinde karanlık görünümü ve dinamiği destekleyen önceden tanımlanmış dokuz sistem rengi getirdi. Bu nedenle, bu renkler seçilen arayüz stillerine göre değişir.

Canlılık ve Bulanıklık Efektleri

iOS 13 ile Apple, iOS arayüz stiline otomatik olarak uyum sağlayan 4 bulanıklaştırma efekti ve 8 canlılık efektini tanıttı.

İşte karanlık ve aydınlık moddaki bulanıklık efektleri:

Apple ayrıca iOS karanlık mod tipografi paketinde, 3'ü bindirmede ve 1'i ayırıcı için olmak üzere 4 canlılık efektini tanıttı. İşte buradalar:

SF Sembolleri

Apple, İnsan Arayüzü Yönergelerinde Ürün geliştiricilerin ve tasarımcıların uygulamalarında kullanmaları için 1500'den fazla sembolden oluşan bir koleksiyon sunar. Hem açık hem de karanlık kullanıcı arayüzü için optimize edildikleri için Karanlık Modda otomatik olarak harika görünüyorlar.

Etkili Mobil Uygulama Karanlık Tema Tasarımı İçin İpuçları

Karanlık mod, son birkaç yılda en çok istenen özelliklerden biridir. Hem Apple hem de Google, karanlık temayı kullanıcı arayüzünün önemli bir parçası haline getirdi. Karanlık modun azaltılmış parlaklığı, karanlık ortamlarda güvenlik sağlar ve göz yorgunluğunu en aza indirebilir.

Karanlık mod kullanıcı arayüzü oluştururken düzgün çalışması gereken belirli işlemler vardır. Sonuçta, ürününüzün harika olmasını istiyorsunuz, değil mi? Uygulamanız için bir karanlık modun nasıl tasarlanacağına ilişkin en iyi uygulamalar kontrol listesi için tüm kutuları işaretleyelim.

1. Saf siyah renkten kaçının

Karanlık bir tema, siyah arka plan üzerinde beyaz metin olmamalıdır. Aslında, yüksek kontrastlı bir ekrana bakmak zor olabilir.

Uygulamanıza koyu modu eklediğinizde , koyu mod bileşenleri için ana renk olarak koyu gri kullanmak , göz yorgunluğunu azalttığı ve ayrıca gri bir yüzeyde gölgelere bakmak siyaha kıyasla çok daha kolay olduğu için en güvenlisidir. .

2. Koyu temalarda doygun renk kullanımından kaçının

Açık yüzeylerde harika görünen doygun renkler, koyu arka plana karşı titreyerek metnin okunmasını son derece zorlaştırabilir.

Açık tonlar kullanmalısınız, çünkü bunlar daha iyi okunabilirliğe sahiptir ve kullanıcı arayüzünü gereksiz yere anlamlı hale getirmez, bu da gereksiz göz yorgunluğunu önler.

3. Uygulama tasarımınızın duygusal yönünü düşünün

Uygulamanız için karanlık bir tema tasarladığınızda, açık tema tasarımınızın aynı duygusal hissini karanlık temaya da çevirmeyi hedefliyor olmalısınız.

Ama bunu yapmak akıllıca değil. Çünkü sonuçta farklı renkler farklı duygular yansıtır. Sonuç olarak karanlık mod renkleriniz farklı bir duygu uyandıracaktır. Bu nedenle, her iki tema kullanıcı arayüzünüz için ortak bir duygusal zemin seti bulmanız gerekiyor.

4. Tasarımı her iki görünümde de test edin

Kullanıcılarınızın günün farklı saatlerinde iki tema kullanıcı arayüzü arasında nasıl geçiş yaptıkları gibi, farklı ışık koşullarında nasıl çalıştığını görmek için uygulamayı günde iki kez test etmek gerekir. Ve kriterlerinizi karşıladığından emin olmak için.

5. Karanlık modu animasyonlara ve illüstrasyonlara dahil edin

Uygulamanız animasyonlar veya yoğun grafik öğeler içeriyorsa, bunların karanlık temada da benimsenmesi için hazırlanmanız gerekir. Çizimin bir özne ve bir arka plan içermesi durumunda, dikkatin özne üzerinde kalmasına yardımcı olmak için arka plan renklerini tamamen bozmak iyi olur.

6. Erişilebilirlik renk kontrastı standartlarını karşılayın

İçeriğinizin Karanlık Modda rahatça okunabilir durumda kaldığından emin olun. Koyu tema yüzeyleri, beyaz metni görüntüleyecek kadar karanlık olmalıdır. Google Material Design, metin ve arka plan arasında en az 15.8:1 kontrast düzeyi kullanılmasını önerir. Kontrast oranını test etmek için renk kontrastı araçlarını kullanın .

7. Sadece tersine çevirmeyin

Standart moddan karanlık moda geçiyorsanız, orijinal tema kullanışlı görsel sinyaller sağlayabilir. Karanlık bir tema oluşturmak için sadece renkleri çevirmeyin. Psikolojik öneme sahip renkleri anlamsız yumuşak tonlara dönüştürüyor olabilirsiniz. Kullandığınız renklerle ilgili bilinçli bir karar verin.

8. Doğru “açık” renkleri kullanın

"Açık" renkler, anahtar yüzeylerin ve öğelerin üzerinde bulunur. Genellikle metin için kullanılırlar. Karanlık bir tema için varsayılan 'açık' renk saf beyazdır. Ancak parlak bir renktir ve koyu arka planlara karşı görsel olarak titreşir. Bu nedenle Google Material Design, biraz daha koyu beyaz kullanmanızı önerir.

• Devre dışı bırakılmış metin, %38 koyuluk kullanır.
• %60'ta orta vurgulu metin yürütülür.
• Yüksek vurgulu metin %87 koyuluğa sahip olmalıdır.

9. Derine inin

Katman ne kadar yüksekse, o kadar hafif olmalıdır. Bu, karanlık modda ekranınızda en çok kullanılan öğelerden en az kullanılanlara giden bir görsel hiyerarşi oluşturacaktır.

Bununla, artık uygulamanızın karanlık mod sürümünü tasarlama hakkında bilmeniz gereken her şeyi biliyorsunuz. Bir sonraki eyleme geçirilebilir adım, uygulamalarda UI'yi uygulayan uzmanlardan oluşan bir ekiple konuşmaktır. Bunu, son kullanıcılarınıza sağlıklı bir deneyim sunma amacınıza yaklaşmanın bir yolu olarak görmelisiniz.

Toplama

Bununla, artık uygulamanızın karanlık mod sürümünü tasarlama hakkında bilmeniz gereken her şeyi biliyorsunuz. Karanlık mod uygulama tasarımı, yeni yeni alevlenen bir devrimdir. Bu, karanlıkta kalmak ve yaratıcı olmak için mükemmel bir zaman olduğu anlamına gelir. Bir sonraki eyleme geçirilebilir adım, UI'yi uygulamalarda uygulayan UI uzmanlarından oluşan bir ekiple konuşmak ve UI tasarımının uygulama geliştirmedeki önemi hakkında gerçek bir fikir edinmektir . Bunu, son kullanıcılarınıza sağlıklı bir deneyim sunma amacınıza yaklaşmanın bir yolu olarak görmelisiniz.

Karanlık mod uygulama tasarımı hakkında daha fazla bilgi edinmek ister misiniz? Uygulama geliştirme alanındaki uzmanlarla iletişime geçin .

Karanlık Mod Uygulaması Tasarlama Hakkında SSS

1. Karanlık mod göz için daha mı iyi?

Evet. Karanlık mod uygulaması tasarımı, uzun süreli cep telefonu kullanımı ile gözlerin yorulmasını ve kurumasını önler. Zıtlık oluşturmamak, kullanıcıların karanlıkta uygulamada gezinmesini kolaylaştırır.

2. Karanlık mod için nasıl tasarım yapıyorsunuz?

Hem Apple hem de Google'ın karanlık tema uygulaması tasarlama sürecini açıklayan belgeleri olsa da, dikkate alınması gereken bazı ipuçları var. Bunlardan bazıları şunlardır: düz siyah renkten kaçının, siyah rengi kullanmanın duygusal yönünü göz önünde bulundurun, beyaz ve koyu mod uygulama tasarımı arasındaki geçiş farkına bakın.

3. Sağlıksız karanlık mod diye bir şey var mı?

Evet, karanlık modun yarardan çok zarar verebileceği durumlar vardır. Hazing etkisi yapabilirler veya kontrast stiline yeterince dikkat edilmediğinde gözleri çok fazla yorabilirler.