Чому б не використовувати чисто чорний (# 000) та чисто білий (#FFF)?


17

Новий верхній рядок для обміну стеками говорить:

Перше, що ви помітите - це дійсно чорний колір* .

* Джин вказує, що технічно це не зовсім чорно: це # 212121.

У його CSS я бачу,

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

Чому б не "справді чорний": чому краще "не зовсім чорний"?

Так само я бачу щось подібне,

background: #fdfdfd

Чому б не чисто білий?

Я не питаю конкретно про StackExchange - що я маю на увазі, чи є це хорошим загальним правилом для будь-якого / всіх веб-сайтів: коли дизайнерська специфіка, здається, запитує чорне або біле, чи варто використовувати майже чорно-біле, а не дійсно чорний і білий?

Чи застосовується це «правило» і до інших кольорів (яке саме правило)?

Чи залежить від пристрою правило?


Google завжди використовує чисто-білий фон.
Pacerier

Відповіді:


18

Словом, на очах це легко;

«Простіше кажучи, контраст - це різниця між двома кольорами. На веб-сторінці необхідна кількість контрасту варіюється в залежності від різних частин сторінки. Зазвичай потрібно високий контраст між текстом та кольором тла. Але занадто високий контраст між елементами дизайну може створити невпорядковане і безладне враження. Чорно-білі створюють максимально можливий контраст. ' -Ціть звідси

Це чудовий сайт для UX кольорових пропозицій / прикладів та теорії. І обговорюється контраст різних кольорів на фоні, навіть надаючи шестигранний код, який досить зручно.

Тут також обговорюється контрастність та колірний баланс .

Це також здається трендом стилю, оскільки нижчий контраст між bckgrounds робить контраст тексту трохи приємнішим (на мій погляд), як це бачимо з кольором тут і тут. Ці зразки скоріше шукають колір, ніж їх вміст у умови того, що я хочу тут спілкуватися.

Це не обов'язково правило, більше вподобання чи стиль. Це більше залежить від вмісту, ніж залежать від пристрою. Йдеться про те, де ти хочеш зробити найбільше акценту чи зосередити увагу - де б це не було, там, де має бути найбільше контрасту. У випадку StackExchange все стосується питань і відповідей, тому тіло знаходиться там, де є найбільше контрасту, а саме там, де це найбільш актуально.

Удачі вам у виборі кольорів у майбутньому, це ще одне врахування, яке слід врахувати: D


1
Я усвідомлюю, що відповіді тут повинні бути короткими, тому дякую, що використовували ваші, щоб надати посилання для подальшого більш детального читання (я повний новачок).
ChrisW

Радий допомогти (хоч трохи). Відповідь на це питання має 3 основні компоненти: теорія кольорів, уподобання / стиль та UX-дизайн. Неможливо покрити кожного 100% однією відповіддю (як ви вже згадували). Тому я просто хотів дати вам коротку відповідь, а також ідею, що слід досліджувати.
Дженна

6

Чисто-чорна верхня смужка виглядатиме дуже яскраво на білому тлі, який використовується багатьма веб-сайтами, що погано, оскільки фокус повинен бути зосереджений на вмісті, а не наближати погляд до верхньої частини екрана. Зростання його світлішим (сірим) зменшує контраст між верхньою смугою та фоном тіла.

Однак сірий фон ні на чому не перешкоджає розбірливості, зменшуючи можливий контраст між текстом і фоном. Людське око найбільш чутливе до різниці яскравості, тому вибір 50% сірого означає, що незалежно від того, який колір тексту ви виберете, ви використовуєте щонайменше половину різниці в яскравості, яку може створювати екран користувача.

Отже, я вважаю, що вибір чорного кольору на 80% - це компроміс між тим, щоб зробити верхню смугу менш бляшаючою та зберегти контраст всередині неї.

Для основного тексту, зазвичай ви дійсно хочете використовувати чистий чорний колір на світлому тлі, щоб максимізувати контраст і , отже , читаність. (Це стосується як екрана, так і друку.) Зауважте, що колір фону для тіла відрізняється від чисто-білого лише крихітним шматочком. В основному веб-сайти часто вибирають фони, які дуже трохи не білі. Одна мета - зробити сайт тепліше чи прохолоднішим, вибравши блідо-рожевий або синій (хоча тут це нейтральний сірий колір).


На цьому сайті навіть div.post-textколір переднього плану color: #111;замість чистого чорного. Чому б не залишити читабельність або яскравість екрана для браузера / пристрою / користувача за замовчуванням для оптимізації?
ChrisW

0

На мою думку ... Просто мода, тенденції.

Якщо користувач відчуває, що веб-сторінки болять його очі, він може просто регулювати яскравість екрана. У мобільних пристроях люди роблять це постійно.

Існує тенденція «старовинних» образів. Низька насиченість, вимита.

Вимитий вигляд може зробити найтемнішим або / і білу точку сірим.

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

Не лише у фотографіях, а й у відео ... включаючи "щасливі" відео.

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

Це правда, що багато контрасту може бути неприємним, особливо темний фон з білим текстом ... Пам’ятайте веб-дизайн 90-х , з чорними фонами та перенасиченими анімованими gif ...

Тенденція полягає в тому, щоб веб-сайти були більш "привітними", більш "інтимними", тому це м'якість. Це також може надати більш "кінематографічний" вигляд, а не "телевізійний" погляд.

Однією суперечливою тенденцією в образах є стиль " Hdri look " або стиль драгган, наприклад, акценти - контраст і мікроконтраст.

У деяких випадках вимите зображення може надати вигляд більш внутрішнього динамічного діапазону, порівняно з підсиленим контрастом тонального зображення контрасту реального високого динамічного діапазону зображення.


Крім того, якщо вся ваша палітра якимось чином обмежена, ви можете обдурити автобаланс вашого ока. Ведучий до вашого більш високого динамічного діапазону. Художники користуються цим постійно.
joojaa

1
Це просто неправдива відповідь. Науки навколо контрасту, використовуючи чорний колір, використовуючи білий, це просто , що - наука, а не думка.
Майк Ерлі
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.