Veya bir uygulama veya web sitesi için karanlık mod geliştirirken akılda tutulması gerekenler
2018 yılı karanlık modların yolda olduğunu gösterdi. Artık 2019'un yarısına geldiğimize göre şunu rahatlıkla söyleyebiliriz: Onlar buradalar ve her yerdeler.
Karanlık modun hiç de yeni bir kavram olmadığı gerçeğiyle başlayalım. Oldukça uzun süredir kullanılmaktadır. Ve bir zamanlar, aslında uzun bir süre boyunca kullandıkları tek şey buydu: monitörler "siyah üzerine yeşil" türündendi, ancak bunun tek nedeni içlerindeki parlak kaplamanın radyasyona maruz kaldığında yeşilimsi bir parıltı yaymasıydı. .
Ancak renkli monitörlerin piyasaya sürülmesinden sonra bile karanlık mod varlığını sürdürdü. Bu neden böyle?
Bugün neden her iki kişinin de uygulamalarına karanlık bir tema eklemek için acele ettiğini açıklayan iki ana sebep var. Her şeyden önce: bilgisayarlar her yerdedir. Baktığımız her yerde bir çeşit ekran var. Mobil cihazlarımızı sabahtan gece geç saatlere kadar kullanıyoruz. Karanlık modun varlığı, yatmadan önce sosyal akışınızda "son kez" gezinirken yataktayken göz yorgunluğunu azaltır. ağlar. (Eğer siz de benim gibiyseniz, "son sefer" 3 saatlik bir kaydırma anlamına gelebilir . Karanlık mod mu? Evet lütfen! )
Bir diğer neden ise yeni ekran üretim teknolojileridir. Büyük şirketlerin (Apple, Google, Samsung, Huawei) amiral gemisi modellerinin tümü, LCD ekranların aksine arkadan aydınlatma gerektirmeyen OLED ekranlarla donatılmıştır. Ve bu piliniz için gerçekten iyi bir haber. Telefonunuzda siyah bir kare görüntüsünü izlediğinizi hayal edin; LCD'de arka ışık, çoğu siyah olsa bile ekranın tamamını aydınlatacaktır. Ancak aynı görüntüyü bir OLED ekranda görüntülerken, siyah kareyi oluşturan pikseller tamamen kapatılır. Bu da hiç enerji tüketmedikleri anlamına gelir.
Bu tür ekranlar karanlık modları çok daha ilgi çekici hale getiriyor. Karanlık bir arayüz kullanarak cihazınızın pil ömrünü önemli ölçüde uzatabilirsiniz. . Karanlık modlar elbette kullanıcı arayüzü değişiklikleriyle el ele gidiyor, o yüzden hadi bilgimizi tazeleyelim!
Karanlık Modlar 101
Öncelikle “karanlık” ile “siyah” aynı şey değildir. Beyaz bir arka planı siyah bir arka planla değiştirmeye çalışmayın; bu, gölgelerin kullanılmasını imkansız hale getirecektir. Bunun gibi bir tasarım süper düz olacaktır (kötü bir şekilde).
Gölgelendirme/aydınlatmanın temel prensiplerini akılda tutmak önemlidir. Daha yüksekteki nesneler, gerçek hayattaki ışıklandırma ve gölgelemeyi simüle edecek şekilde gölgede daha açık olmalıdır. Bu, farklı bileşenler ve bunların hiyerarşisi arasında ayrım yapmayı kolaylaştırır.
Biri %100 siyah arka plan üzerinde, diğeri #121212 üzerinde gölgeli iki özdeş gri kare. Nesne yükseldikçe daha açık bir gri tonuna dönüşür.
Koyu bir temada, kontrast iyi olduğu sürece normal temel renginizle çalışmaya devam edebilirsiniz. Bir örnekle açıklayalım.
Bu arayüzde ana eylem, alt çubuktaki büyük mavi düğmedir. Açık veya koyu mod arasında geçiş yaparken kontrast açısından herhangi bir sorun yok, düğme hala dikkat çekici, simge net ve genel olarak her şey yolunda.
Aynı renk farklı şekillerde, örneğin metinde kullanıldığında sorunlar yaşanacaktır. Ana rengin (çok) daha az doygun bir tonunu kullanmayı deneyin veya marka renklerini arayüze dahil etmenin başka yollarını arayın.
Sol: Siyah üzerine kırmızı kötü görünüyor. Doğru: Doygunluğu azalttığınızda her şey iyi görünür. - yaklaşık. tercüme
Aynı durum, uyarı veya hata renkleri gibi kullanmış olabileceğiniz diğer güçlü renkler için de geçerlidir. Google, varsayılan hata renginin üstüne %40 beyaz katman katmanı kullanır. karanlık moda geçerken. Bu oldukça iyi bir başlangıç noktasıdır çünkü kontrast seviyelerini AA standartlarına uyacak şekilde iyileştirecektir. Elbette ayarları her zaman uygun gördüğünüz şekilde değiştirebilirsiniz, ancak kontrast seviyelerini kontrol ettiğinizden emin olun. Bu arada, bu amaç için kullanışlı bir araç Sketch eklentisidir - 2 katman arasında tam olarak ne kadar kontrast olduğunu gösterir.
Peki ya metin?
Burada her şey basit: hiçbir şey %100 siyah ve %100 beyaz olmamalıdır ve bunun tersi de geçerlidir. Beyaz, tüm dalga boylarındaki ışık dalgalarını yansıtır, siyah ise emer. %100 siyah arka plan üzerine %100 beyaz metin yerleştirirseniz, harfler ışığı yansıtacak, lekelenecek ve daha az okunabilir hale gelecek, bu da okunabilirliği olumsuz etkileyecektir.
Aynı şey, kelimelere tam olarak odaklanamayacak kadar fazla ışık yansıtan %100 beyaz arka plan için de geçerlidir. Beyaz rengi biraz yumuşatmayı deneyin, arka planlar ve siyah arka planlar üzerindeki metinler için açık gri kullanın. Bu, göz yorgunluğunu azaltacak ve önleyecektir.
Karanlık mod burada ve kaybolmayacak
Ekran karşısında geçirdiğimiz süre her geçen gün artıyor ve uyandığımız andan uykuya daldığımız ana kadar her yeni günde hayatımıza yeni ekranlar giriyor. Bu oldukça yeni bir olgu; gözlerimiz akşam geç saatlerde ekran başında geçirilen sürenin artmasına henüz alışamadı. Karanlık modun devreye girdiği yer burasıdır. Bu özelliğin macOS ve Materyal Tasarım'da (ve büyük olasılıkla iOS'ta) kullanıma sunulmasıyla, er ya da geç hem mobil hem de masaüstü tüm uygulamalarda varsayılan hale geleceğine inanıyoruz. Ve buna hazırlıklı olmak daha iyidir!
Karanlık modu uygulamamanın tek nedeni, uygulamanızın yalnızca parlak gün ışığında kullanıldığından kesinlikle %100 emin olmanızdır. Ancak bu pek sık gerçekleşmez.
Karanlık modu uygularken, daha önce özetlenen temel ilkelerin ötesinde, özel dikkat gerektirecek birkaç husustan bahsetmekte fayda var.
Erişilebilirlik açısından, kontrast genellikle daha düşük olduğundan karanlık mod en uygun mod değildir ve bu da okunabilirliği hiçbir şekilde iyileştirmez.
Ama düşünün ki yatmaya hazırlanıyorsunuz, gerçekten uyumak istiyorsunuz ama uykuya dalmadan hemen önce birine bir gece bile bekleyemeyecek kadar önemli bir mesaj göndermeniz gerektiğini hatırlıyorsunuz. Telefonunuzu alırsınız, açarsınız ve AAAAAAH... iMessage'ınızın açık renkli arka planı sizi 3 saat daha uyanık tutacaktır. Koyu arka plan üzerindeki açık renkli metin en erişilebilir metin olarak kabul edilmese de, tam bu anda karanlık modun olması sizi rahatsız edecektir. rahatlığı bir milyon artırın. Her şey kullanıcının şu anda içinde bulunduğu duruma bağlıdır.
Bu yüzden düşünüyoruz otomatik karanlık mod çok güzel bir fikir. Akşamları açılır ve sabahları kapanır. Kullanıcının bunu düşünmesine bile gerek kalmıyor, bu da çok kullanışlı. Twitter, karanlık mod ayarlarıyla harika bir iş çıkardı. Ek olarak, tüm bu OLED ekranlar için hem sadece karanlık bir moda hem de daha da karanlık bir moda sahipler, bu da pilden ve bununla ilgili her şeyden tasarruf sağlıyor. Burada şunu belirtmek önemlidir: kullanıcıya istediği zaman manuel olarak geçiş yapma fırsatı verin: geri dönme yeteneği olmadan arayüzü otomatik olarak değiştirmekten daha kötü bir şey olamaz.
Twitter'ın akşamları açılıp sabahları kapanan otomatik bir karanlık modu vardır.
Ayrıca bir tema geliştirirken bazı şeylerin karartılamayacağını akılda tutmakta fayda var.
Pages gibi bir metin düzenleyiciyi alın. Arayüzü karanlık yapabilirsiniz, ancak sayfanın kendisi her zaman beyaz olacak ve gerçek bir kağıt sayfasını simüle edecektir.
Karanlık modun etkin olduğu sayfalar
Aynı şey Sketch veya Illustrator gibi tüm içerik oluşturma düzenleyici türleri için de geçerlidir. Arayüz karanlık yapılabilse de, çalıştığınız çalışma yüzeyi varsayılan olarak her zaman beyaz olacaktır.
Karanlık modda çizim yapın ve yine de parlak beyaz bir çalışma yüzeyine sahip olun.
Dolayısıyla uygulama ne olursa olsun, karanlık modların kullandığınız işletim sistemine özgü olacağına inanıyoruz, bu da geleceğe hazırlanmanın en iyisi olduğu anlamına geliyor. karanlık olacak.
Karanlık kullanıcı arayüzleri geliştirme hakkında daha fazla bilgi edinmek istiyorsanız yönergelere göz atmayı unutmayın. Bu makale için ana bilgi kaynağımız buydu.
Kaynak: habr.com