Neden saf siyah (# 000) ve saf beyaz (#FFF) kullanmıyorsunuz?


17

Stack Exchange için Yeni Bir Üst Çubuk ,

Fark edeceğiniz ilk şey, gerçekten siyah olmasıdır* .

* Jin, teknik olarak oldukça siyah olmadığını belirtiyor: # 212121.

CSS'sinde görüyorum,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Neden "gerçekten siyah" değil: "oldukça siyah" daha iyi?

Benzer şekilde, arka planın geri kalanı için şöyle bir şey görüyorum,

background: #fdfdfd

Neden saf beyaz olmasın?

Özellikle StackExchange hakkında sormuyorum - ne demek, bu herhangi bir / tüm web siteleri için iyi bir genel kuraldır: tasarım spec siyah veya beyaz için sormak gibi görünüyor, gerçekten yerine neredeyse siyah beyaz kullanmak gerekir siyah ve beyaz?

Bu 'kural' diğer renkler için de geçerli mi (kural tam olarak nedir)?

Kural aygıta bağımlı mı?


Google her zaman saf beyaz arka planlar kullanır.
Pacerier

Yanıtlar:


18

Kısacası, gözler üzerinde kolaydır;

Basitçe söylemek gerekirse, kontrast iki renk arasındaki farktır. Bir web sayfasında, gereken kontrast miktarı sayfanın farklı bölümlerine göre değişir. Genellikle metin ve arka plan rengi arasında yüksek bir kontrast istersiniz. Ancak tasarım öğeleri arasındaki çok yüksek kontrast, huzursuz ve dağınık bir izlenim verebilir. Siyah beyaz mümkün olan en yüksek kontrastı yaratır. ' Dan -Quote burada

Bu , UX renk önerileri / örnekleri ve teorisi için harika bir sitedir. Ve arka plandaki farklı renklerin kontrastını tartışır, hatta oldukça kullanışlı olan hex kodunu verir.

Kontrast ve renk dengesi burada da tartışılmıştır .

Bu aynı zamanda renk ile görüldüğü gibi bckgrounds arasındaki alt karşıtlık (Bence) metnin biraz daha güzel kontrastını yapar çünkü trend bir tarz gibi görünüyor burada ve burada . burada iletişim kurmak istediklerimin şartları.

Bu ille de bir tercih ya da tarzın kuralı olmak zorunda değildir. Cihaza bağlı olandan daha içeriğe bağlıdır. En çok vurgu veya odaklanmak istediğiniz yerle ilgilidir - nerede olursa olsun en fazla kontrastın olması gereken yer burasıdır. StackExchange söz konusu olduğunda her şey sorular ve cevaplarla ilgilidir, böylece vücut en alakalı olduğu yerde olduğu gibi en çok kontrastın olduğu yerdedir.

Gelecekte renk seçimlerinizde iyi şanslar, bu dikkate alınması gereken başka bir husustur: D


1
Buradaki yanıtların kısa olması gerektiğinin farkındayım, bu yüzden daha ayrıntılı okuma için bağlantılar sağlamak için sizinkini kullandığınız için teşekkür ederim (tam bir acemi olduğum).
ChrisW

Yardım etmekten memnunum (sadece biraz). Bu sorunun cevabının 3 ana bileşeni vardır: renk teorisi, tercih / stil ve UX tasarımı. Her birini% 100'ü tek bir cevapta (imzanızda belirtildiği gibi) kapsamak imkansızdır. Bu yüzden size neyi keşfedeceğinizle ilgili bir fikrin yanı sıra kısa bir cevap vermek istedim.
Jenna

6

Saf siyah bir üst çubuk, birçok web sitesi tarafından kullanılan beyaz arka plana karşı çok çarpıcı görünecektir, bu kötüdür çünkü odak, ekranın üst kısmına bakmak yerine içerik üzerinde olmalıdır. Açıklaştırmak (gri), üst çubuk ile vücudun arka planı arasındaki kontrastı azaltır.

Ancak, herhangi bir şeydeki gri arka plan, metin ve arka plan arasındaki olası kontrastı azaltarak okunabilirliği engeller. İnsan gözü parlaklıktaki farklılıklara en duyarlıdır, bu nedenle% 50 gri seçmek, hangi metin rengini seçerseniz seçin, kullanıcının ekranının üretebileceği parlaklık farkının en fazla yarısını kullandığınız anlamına gelir.

Bu nedenle,% 80 siyah seçiminin, üst çubuğu daha az sarsıntı yapma ve içindeki kontrastı koruma arasında bir uzlaşma olduğunu düşünüyorum.

Vücut Metin için, genellikle do kontrast ve böylece okunabilirliği üst düzeye çıkarmak için, ışık art saf siyah kullanmak istiyorum. (Bu hem ekran hem de baskı için geçerlidir.) Gövde için arka plan renginin saf beyazdan çok az farklı olduğuna dikkat edin. Genel olarak, web siteleri genellikle çok az beyaz olmayan arka planlar seçer. Bir amaç, soluk pembe veya mavi seçerek sitenin daha sıcak veya daha serin hissetmesini sağlamaktır (burada nötr gri renktedir).


Bu sitede div.post-textön plan rengi bile color: #111;saf siyah değil. Optimize etmek için neden okunabilirliği veya ekran parlaklığını tarayıcı / cihaz / kullanıcı varsayılanına bırakmıyorsunuz?
ChrisW

0

Bence ... Sadece moda, trendler.

Kullanıcı web sayfalarının gözlerini incittiğini hissederse, ekranın parlaklığını ayarlayabilir. Mobil cihazlarda insanlar bunu her zaman yaparlar.

"Vintage" görüntülerde bir eğilim var. Düşük doygunluk, yıkanmış.

Yıkanmış görünüm en koyu veya beyaz noktayı gri yapıyor olabilir.

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih=1007

Sadece fotoğraflarda değil, videolarda da ... "mutlu" videolar da dahil.

https://www.youtube.com/watch?v=9HjrFnKEE8w

Çok fazla kontrastın anoying, beyaz yazı ile özel olarak koyu arka plan olabileceği doğrudur ... 90'ların web tasarımını , siyah arka planlara ve aşırı doymuş animasyonlu giflere sahip olun ...

Eğilim daha "dost" görünümlü web sitelerine, daha "samimi" olmaktır. Ayrıca "TV" görünümü yerine daha "sinematik" bir görünüm verebilir.

Görüntülerdeki bir gözenekli eğilim , örneğin kontrast ve mikro kontrastı vurgulayan " Hdri görünümü " veya draggan stili.

Bazı durumlarda, soluk görüntü, gerçek bir Yüksek dinamik aralık görüntüsünün ton eşlemeli gelişmiş kontrastına karşı daha iç dinamik aralığın görünümünü verebilir.


Ayrıca tüm paletiniz bir şekilde sınırlanmışsa, gözünüzün otomatik dengesini kandırabilirsiniz. Daha yüksek dinamik aralığınıza öncülük edin. Ressamlar bunu her zaman kullanırlar.
joojaa

1
Bu sadece geçerli bir cevap değil. Bilim bilim, değil görüş - Tersine etrafında, siyah kullanılarak beyaz kullanarak, sadece bu.
Mike Earley
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.