Або про що слід пам'ятати при розробці темного режиму програми або сайту
2018 показав: темні режими на підході. Тепер, коли ми вже на півдорозі в 2019, ми можемо впевнено сказати: вони тут, і вони скрізь.
Почнемо з того, що темний режим це зовсім не нова концепція. Його використовують уже досить давно. А колись насправді давно тільки його і використовували: монітори були виду «зеленим-по-чорному», але тільки тому, що люмінесцентне покриття всередині випромінювало зелене свічення при дії на нього випромінювання.
Але навіть після застосування кольорових моніторів темний режим продовжував жити. Чому так?
Є два основні мотиви, які пояснюють, чому сьогодні кожен другий поспішає додати темну тему до свого додатку. Насамперед: комп'ютери всюди. Куди б ми не подивилися, скрізь якийсь екран. Ми використовуємо наші мобільні пристрої з ранку до пізньої ночі. Наявність темного режиму знижує навантаження на очі, коли у ліжку перед сном «останній раз» гортаєте стрічку соц. мережі. (Якщо ви схожі на мене, то останній раз може означати 3-годинну прокрутку . Темний режим? Так, будьте ласкаві! )
Ще одна причина – нові технології виробництва дисплеїв. Флагманські моделі великих компаній – Apple, Google, Samsung, Huawei – усі оснащені OLED-екранами, які, на відміну від LCD дисплеїв, не вимагають підсвічування. І це справді гарна новина для вашої батареї. Уявіть, що ви переглядаєте зображення чорного квадрата на телефоні; з РК-дисплеєм підсвічування буде висвітлювати весь екран, хоча більша його частина чорна. Але при перегляді того ж таки зображення на OLED-дисплеї пікселі, з яких чорний квадрат складається, просто відключаються. Отже, взагалі не споживають енергію.
Ці типи дисплеїв роблять темні режими набагато цікавішими. Використовуючи темний інтерфейс, можна значно продовжити термін служби батареї вашого пристрою. . Темні режими, звичайно ж, йдуть рука об руку зі змінами UI так що давайте освіжимо наші знання!
Темні режими 101
Насамперед: «темний» не дорівнює «чорному». Не намагайтеся замінити білий фон на чорний, оскільки це унеможливить використання тіней. Подібний дизайн буде супер плоским (погано).
Важливо мати на увазі базові принципи затінення/освітлення. Об'єкти, які більш піднесені, повинні бути світлішими в тіні, імітуючи реальне освітлення та затінення. Отже, легше розрізняти різні компоненти та його ієрархію.
Два однаково сірих квадратів з тінню, один на 100% чорному тлі, інший на #121212. При підйомі об'єкт набуває світлішого відтінку сірого.
У темній темі все ще можна працювати з звичайним основним кольором, якщо контраст в порядку. Пояснимо на прикладі.
У цьому інтерфейсі основною дією є велика блакитна кнопка в нижній панелі. Тут немає проблеми з погляду контрасту при перемиканні між світлим або темним режимом, кнопка, як і раніше, привертає увагу, значок чіткий, загалом, все добре.
Коли той самий колір використовується по-різному, наприклад у тексті — будуть проблеми. Спробуйте використати (набагато) менш насичений відтінок основного кольору або шукайте інші способи включення кольорів бренду в інтерфейс.
Ліворуч: червоне на чорному виглядає погано. Справа: зменшимо насиченість - і все стає добре. - прим. перев.
Те саме стосується і всіх інших насичених кольорів, які ви могли використовувати, наприклад, кольори попередження або помилки. Google використовує накладання білого шару в 40% поверх кольору дефолтної помилки у своїх під час перемикання в темний режим. Це досить хороша відправна точка, тому що це покращить рівні контрастності до відповідності стандартам АА. Ви, звичайно, завжди можете змінювати налаштування на свій розсуд, але не забудьте перевіряти рівні контрастності. До речі, корисним інструментом для цієї мети є плагін для Sketch. , Що точно показує скільки контрасту між 2 шарами.
Як щодо тексту?
Тут все просто: ніщо не повинно бути 100% чорним на 100% білому і навпаки. Білий відбиває світлові хвилі всіх довжин, чорний - поглинає. Якщо помістити 100% білий текст на 100% чорне тло, літери будуть відображати світло, розмазуватись і ставати менш зручними для сприйняття, що негативно вплине на читання.
Те саме стосується і 100% білого фону, який відображає надто багато світла, аби повністю зосередитись на словах. Спробуйте трохи пом'якшити білий колір, використовуйте світло-сірий для фонів та текстів на чорних фонах. Це знизить навантаження на очі, запобігаючи
Темний режим тут і не збирається йти
Кількість часу, яке ми проводимо біля екранів, зростає постійно, і кожен новий день, нові екрани з'являються в нашому житті, з моменту пробудження і поки ми не заснемо. Це досить нове явище, наші очі ще не звикли до такого зростання часу біля екрану пізно ввечері. Тут темний режим і вступає у справу. Після введення цієї функції в macOS і Material Design (і, швидше за все, в iOS) ми вважаємо, що рано чи пізно вона стане дефолтною у всіх додатках як мобільних, так і десктопних. І краще бути готовим до цього!
Єдина причина не впроваджувати темний режим, це коли ви абсолютно на всі 100% впевнені, що ваша програма використовується виключно при яскравому денному світлі. Таке, щоправда, буває нечасто.
Варто згадати кілька речей, які вимагатимуть особливої уваги під час реалізації темного режиму, крім основних принципів, підсумованих раніше.
З погляду доступності, темний режим перестав бути найзручнішим, оскільки контраст загалом нижче, що у своє чергу зовсім поліпшує читаність.
Але, уявіть, що ви готуєтеся до сну, дуже хочете спати, але перед тим, як заснути, ви згадали, що треба відправити комусь супер важливе повідомлення, яке не може почекати навіть одну ніч. Ви берете свій телефон, включаєте його і АААААА… світле тло вашого iMessage не дасть вам заснути ще години 3. У той час як світлий текст на темному тлі не вважається максимально доступним, наявність темного режиму прямо в цю секунду збільшила б зручність на мільйон. Все залежить від ситуації, в якій знаходиться користувач.
Ось чому ми вважаємо автоматичний темний режим такою крутою ідеєю. Він включається ввечері та вимикається вранці. Користувачеві навіть не потрібно думати про це дуже зручно. Twitter провів чудову роботу з налаштуваннями темного режиму. Крім того, у них є як просто темний режим, так і ще темніший режим для всіх цих OLED-екранів, економії батареї і всього пов'язаного з цим. Тут важливо помітити: дайте користувачеві можливість перемикатися вручну, коли він цього захоче: немає нічого гіршого за автоматичну зміну інтерфейсу без можливості його переключитися назад.
У Twitter є автоматичний темний режим, який вмикається ввечері та вимикається вранці.
Так само при розробці теми варто мати на увазі, що деякі речі темними просто не зробити.
Візьміть текстовий редактор, наприклад Pages. Можна зробити інтерфейс темним, але сам аркуш завжди буде білим, імітуючи справжній аркуш паперу.
Pages з увімкненим темним режимом
Те саме стосується всіх видів редакторів для створення контенту, типу Sketch або Illustrator. Хоча інтерфейс можна зробити темним, монтажна панель, з якою ви працюєте, завжди буде білою за промовчанням.
Sketch в темному режимі і, як і раніше, яскрава біла монтажна панель.
Тому незалежно від програми ми вважаємо, що темні режими стануть нативними для використовуваної вами операційної системи, а значить, краще заздалегідь підготуватися до майбутнього, воно буде темним.
Якщо ви хочете дізнатися більше про створення темних інтерфейсів, обов'язково ознайомтеся з гайдлайнами Це було наше основне джерело інформації для цієї статті.
Джерело: habr.com