Aşırı rahatlığa neden olan bir "karanlık mod" yapmak ne kadar zor?
WeChatin "Karanlık Modu" nun resmi olarak kullanıma sunulmasını dört gözle bekliyoruz.
Son iki yıldır kullanıcıların en çok sevdiği özelliklerden biri "Karanlık mod" olsa da, iOS ve Android yalnızca geçen yıl karanlık moda uyum sağlamaya başladı. Daha dikkatli.
Geçen yıl WeChat ekibi Weibo'ya şaka yollu bir şekilde yanıt verdi ve "Kullanıcıların değerli gecesini meşgul etmeye dayanamıyorum." Zahmet etmeyin, her zaman WeChat'in yumuşaklığıdır.
Ancak pek çok kişinin bilmediği şey, kullanıcılara aşırı rahatlığa neden olan bir "karanlık mod" sunmanın, özellikle tasarım ve geliştirmeyi içeren ulusal düzeydeki bir uygulama için, yalnızca beyazdan siyaha geçiş olmadığıdır. Miktar, yeniden geliştirmeden daha az değil.
Karanlık mod siyah, bu ne siyah
Karanlık Mod, karanlık mod olarak da adlandırılır.Adından da anlaşılacağı gibi, insanlara en sezgisel olan siyah olan hissi verir.
Ancak "karanlık mod", ideal bir görsel deneyim elde etmek için arka plan rengini siyah ve metni beyaza çevirmek kadar basit değildir. Google'ın Materyal Tasarımı'nın karanlık mod için tasarım yönergelerinde, birincisi "% 100 saf siyah kullanma" dır.
UI tasarımcısı Ilke Verrelst bir keresinde saf beyaz bir arka planda saf siyah metin göstermediğini ve bunun tersi olduğunu söylemişti.Bu temel bir tasarım kuralıdır.
neden? Saf beyaz ışığın tüm dalga boylarını yansıttığı ve saf siyah tüm ışığı emdiği için, bunlar en yüksek kontrasta sahip iki renktir.Metin beyaz bir arka plan üzerinde siyah olduğunda, metin çok göz kamaştırıcıdır ve metin siyah bir arka plan üzerinde beyaz olduğunda metin okunaklı olmayabilir.
Saf beyaz veya saf siyahı aynı anda bir sayfada geniş bir alanda kullanırsanız, uzun süre okurken gözlerinizi yorar. Birçok araştırma, karanlık modun göz dostu olmadığını kanıtlasa da, uygulamayı kullanırken kullanıcıları daha rahatsız ediyorsa, aynı zamanda karanlık modun orijinal niyetine ters düşüyor.
Ayrıca, saf siyah ve saf beyazın yüksek kontrastı, sayfanın gölge efektleri yoluyla görsel hiyerarşi oluşturamamasına neden olur. Örneğin aşağıdaki şekilde iki kutudaki gri kutu, soldaki saf kara kutuda, gri kutunun gölgesi neredeyse görünmezdir. Sağdaki koyu gri kutuda gölge değişiklikleri çok daha belirgindir.
Aslında "koyu gri" aynı zamanda karanlık modda birçok uygulama tarafından kullanılan arka plan rengidir.Bu WeChat güncellemesinin karanlık modunda sohbet arka planı koyu gridir (# 181818).
Aynısı metin renkleri için de geçerlidir.Örneğin, parlak moddaki koyu tonlu metnin karanlık modda okunması zorlaşacaktır. Bu nedenle, net bir şekilde görüntülenebilen ve kullanıcıların görsel yorgunluğunu azaltan uygun renklerin seçilmesi de gereklidir.
Kontrastın yeterince açık olmadığını düşünüyorsanız, Twitter ve iOS karanlık moduna da bir göz atabilirsiniz. Twitter "Dim" ve "Light out" olmak üzere iki karanlık mod sağlar. Birincisinin arka plan rengi koyu gri ve ikincisi temelde saf siyahtır.
Medium'un yazarı Pudge tarafından Twitter'ın karanlık mod arayüzünde saf siyah bir arka plan ile verilen karşılaştırma tablosundan yola çıkarak, sütun listesi neredeyse arka planla bütünleşmiş durumda. Ve iOS bu yerlerde karanlık modda biraz daha parlak gri kullanır, bu daha doğal hissettirir.
WeChat'in karanlık modunu açın, benzer bir tasarım da görebilirsiniz. "Arkadaşlar Anları", "Video Numarası", "Tara" vb. Gibi etkileşimli işlev çubuğunda gri, koyu gri arka plandan daha parlaktır.
Karanlık modda iki görsel unsuru ayırt etmek zor olduğundan, bu yöntem farklı görünüm modlarında renklerin yeterli kontrasta sahip olmasını sağlayabilir.
Yalnızca arka plan rengi değil, aynı zamanda düşük kontrastlı karanlık modda, normal moddaki neredeyse tüm renklerin yeniden tasarlanması gerekir.
Örneğin, birçok uygulamanın marka rengi doygunluğu nispeten yüksektir, ancak yüksek doygunluk rengi, karanlık modun tabularından biridir. Yukarıda belirtildiği gibi, bu kontrast görsel deneyimi büyük ölçüde etkiler, bu nedenle bu renklerin doygunluğunun azaltılması gerekir. Google'ın karanlık modu "hata istemi" kırmızıya% 40 şeffaf beyaz bir katman verecektir.
Kolay ve çok kolay görünüyor, değil mi?
Bazı hafif uygulamalar için doğru olabilir, ancak bazı büyük ölçekli uygulamalar için. Karmaşık kod yapılarına sahip uygulamalar için, her sayfanın rengini yeniden ayarlamak, her simge ve öğe programcının dakikalar içinde gerçekten kan kusmasına neden olur.
Karanlık modu bir evi boyamak olarak düşünürseniz, küçük bir evi boyamanın zorluğu, düzinelerce binadan oluşan büyük bir toplulukla karşılaştırılamaz.
Aylık ömrü 1,1 milyardan fazla olan WeChat için bu elbette bir gecede yapılan bir görev değil.
Birçok uygulama karanlık mod yaptı, gerçekten bu kadar zor mu?
Aslında, WeChat'te karanlık modun başlatılmasından önce, Zhihu gibi bazı uygulamalar karanlık modu başlattı, ancak bu uygulamaların koyu renkleri temelde orijinal "gece modunu" takip ediyor ve deneyimi söylemek zor. Aşağıdaki bilgilere başvurabilirsiniz. Kullanıcı yorumları.
Çoğu insan karanlık modu gece moduyla eşitler, ancak gerçekte ikisi aynı şey değildir. Gece modu esas olarak karanlık durumdaki sahneyi ele alır ve karanlık modun da parlak ışık ortamındaki kullanımı hesaba katması gerekir.
Tasarım web sitesi UX Planet baş editörü Nick Babich, "aydınlık ve karanlık koşullarda test etme" anlamına gelen "Sekiz Karanlık Mod Tasarım Kılavuzu" nu listeledi. Şimdi karanlık mod uygulamalarının lansmanına baktığımızda, onları parlak ışıklı ortamlarda kullanmaya hala istekli olan çok fazla insan yok.
Ayrıca bazı uygulamalardaki bazı fonksiyonel modüller çoğu zaman doğrudan koyu renklere dönüştürülemez. Özellikle bazı metin düzenleme arayüzlerinde, beyaz veya açık renkli arka planlar insanlara "kağıt üzerine yazıyor" hissettirebilir.
Rusya'nın en büyük arama motoru Yandex, e-posta istemcisini tasarlarken benzer bir sorunla karşılaştı ve ardından bunu CSS değişkenlerine dayalı bir yöntemle çözerek karanlık modun belirli bir kontrast ve parlaklığı korurken uyarlamalı olarak ayarlanmasına izin verdi.
Bu sorun birçok e-ticaret uygulamasında daha belirgindir, çünkü çok sayıda ürünün resimleri ve videoları esas olarak açık renkli arka planlardır. Yalnızca arka planı karartırsanız, çok göz kamaştırıcı görünecektir. Ancak çok sayıda ürün resminin arka plan rengini ayarlamak istiyorsanız, iş yükü çok büyüktür.
Bu soruna yanıt olarak, Apple'ın önerisi, uyarlama için "Anlamsal Renkler" kullanmaktır. Sözde anlamsal renk, rengin artık belirli bir renk değeriyle tanımlanmadığı, ancak amaca göre tanımlandığı anlamına gelir, böylece arayüz öğeleri otomatik olarak mevcut görünüm moduna uyarlanabilir.
Geçtiğimiz yıl, Taobao, iOS dahili beta karanlık modunda "tarihteki en zor adaptasyon" olarak nitelendirdi. Renk adaptasyonu "anlamsal renk" ilkesine dayanıyor.
Fotoğraf: Alibaba International UED
Taobao'nun girişine göre, bu çözüm tüm sayfalar için renk anlamsal ayarının zorluğunu büyük ölçüde azaltır, böylece çoğu sahne kodu değiştirmeden karanlık moda otomatik olarak adapte olabilir ve kısa sürede hızlı ve yüksek kalitede olabilir. Karanlık modda.
Genel olarak, karanlık modu uygulamanın kendisine uyarlamanın teknik zorluğu yüksek değildir. Ancak dikkate alınması gereken çok fazla detay var, çok büyük bir uygulama ile karşılaşırsanız karmaşıklık hayal gücünün ötesinde olacaktır.
Neden karanlık moda ihtiyacınız var?
Karanlık modun rolü eskiden abartılıydı. Aslında karanlık mod sadece gözleri korumakla kalmaz, aslında birçok sahnede okuma verimliliğini düşürür. Bazı görsel araştırmalar, insanların ışığa karanlığa tercih etmek için doğduklarını göstermiştir.
Durum böyle olunca, karanlık moda uyum sağlamak için bu kadar çok kaynak harcamak gerekli mi?
Bir ürünün veya bir özelliğin kullanılabilirliğinden bahsetmek, kullanıcının kullanım senaryosundan ayrı tutulamaz. Karanlık mod, tüm ürünlerin tasarım trendi olmak zorunda değildir, ancak iyi bir karanlık mod, gerekli birçok sahne deneyimini daha insani hale getirir.
Önceki bir makalede, Aifaner karanlık modun kullanımını popüler hale getirdi. Android geliştirici web sitesindeki karanlık tema geliştirme kılavuzu, karanlık modun üç avantajını sunar:
- Güç tüketimini önemli ölçüde azaltın
- Görme yeteneği zayıf olan kullanıcılar ve güçlü ışığa duyarlı kullanıcılar için daha iyi görünürlük sağlayın
- Düşük ışıklı ortamlarda herkesin akıllı telefon kullanmasına izin verin
Kısa bir süre önce, "Fortune" dergisi dünyanın en büyük 100 modern tasarımını yayınladı ve iyi tasarım standardının saf ürün estetiğinden bir ürün veya hizmetin belirli bir amaca daha iyi ulaşıp ulaşamayacağına doğru değiştiğine dikkat çekti. İşlev ve toplum üzerinde kalıcı bir etkisi olup olmayacağı.
İPhone ve WeChat gibi ürünler için karanlık modun bu tasarım konseptinin devamının bir parçası olduğu söylenebilir.
Kaynak resim: Medium
