Темний режим, донедавна, була заповідником розробників та професійних креативників, таких як фотографи та кіношники.
Але у 2019 році, що змінилося. Ряд компаній від Apple до Google, щоб Facebook не всі сприйняли ідею про те, що не все має бути білим весь час, і почали пропонувати користувачам можливість вибрати альтернативну палітру кольорів, яка була легша на очах пізно вночі.
Ми раді повідомити, що тепер ви можете додати кишеню на список компаній, що пропонують темному режимі при перегляді веб-сайту, а з сьогоднішнього дня ви можете читати ваші улюблені новини, огляди, характеристики, покупка та багато іншого в світло-або темно -режим режимі на нашому сайті.
Але чому ми вирішили додати темний режим в кишені щось смачненьке, Які переваги, і як ви можете насолоджуватися його самостійно?
Навіщо йти у темряві?
Є низка переваг у використанні темно-режимі, починаючи від легше на очах - особливо пізно вночі, роблячи зображення більше, покращення життя батареї, а головне підвищення доступності.
Google каже, що він виявив, що одна з найбільших переваг темний режим після реалізації його на останній версії Android (10) полягає в тому, що він може призвести до покращення життя батареї.
Apple не привести продуктивність батареї прибутку, але сказав кишеню-небудь смачненьке раніше, що причиною поголовної темряві режим через численних творчих професіоналів, які запитує компанія користуйся нагодою, щоб видалити будь-які відволікаючі фактори.
Для кишенькового щось смачненьке, рішення йти «темна» була комбінація всіх цих причин, але також через прохання команди, що вони хотіли і були впевнені, що наші читачі також хотіли.
Працюючи в різних середовищах з офісу протягом дня або літака, що летить через Атлантику, щоб події у віддалені місця десь у світі, це зрозуміло. Команда Pocket-небудь смачне витратити дуже багато часу не тільки дивлячись на екран на телефон, планшет або комп'ютер, а також на Pocket-небудь смачненьке.
Темний режим був запитаний і проблеми його реалізації почалася.
Як це працює
Ми розглянемо процес проектування за хвилину, але варто відзначити, як це працює і як ви можете увімкнути темний режим.
Що було зрозуміло з самого початку було, що темний режим це не те, що підходить для всіх середовищ і всіх додатків. Тому це не те, що повинно бути автоматично змушували на відвідувачів незалежно від того, чи хочуть вони цього чи ні. І так це підхід, який ми взяли на кишені щось смачненьке. Ви можете повністю ігнорувати кишеню-небудь смачненький темний режим, якщо ви любите і продовжуєте користуватися світловим режимом у звичайному режимі. Це було дуже важливо.
Темний режим, і зараз відповідний світловий режим, мають бути переваги користувачів, щоб насолоджуватися контентом, а не щось, що у вас немає вибору.
Деяким подобається ідея темний фон, світлий текст і все, що приходить з темно-режимі, в той час як інші вважають його надто поляризації і занадто різкий у порівнянні з тим, як вони звикли бачити сайти.
У зв'язку з цим ми пропонуємо темному режимі трьома різними способами:
- Визначається через операційну систему пристрою
- Включається за допомогою тумблера у верхній частині сайту у заголовку
- Контрольованих за часом доби
Перший робить логічне значення. Якщо ви працюєте в темному загальносистемному режимі, тому що ви вирішили через системні налаштування пристрою ви використовуєте, так що ви хочете бачити кишені-небудь смачненьке в темно-режимі.
Другий призначений, щоб дозволити вам увімкнути темний режим, Якщо вам не подобається це, але також щоб він якщо ви не використовуєте темний режим на системному рівні.
Третій, як здається, намагається зрозуміти потреби користувача без них, турбуючись про неї самі. Темний режим краще зайнятися, коли на вулиці темно, тобто вночі - і тому ми вирішили помістити його на 10 вечора до 7 ранку, навіть якщо в налаштуваннях системи встановлено режим світла. Ми можемо зробити це шляхом розуміння того, що часовий пояс користувача задати його відповідним чином. Звичайно, ви можете перевизначити це налаштування, якщо ви захочете, через що все-важливий тумблер.
Проектування темний режим
Темний режим це не тільки інвертування кольорів від чорного до білого і від білого до Чорного.
У кишені-Лінт ми подивився на ряд темних палітр режим, щоб аналізувати те, що краще не тільки з точки зору доступності, але і з точки зору читальності.
Документації в інтернеті ще дуже багато в зародковому стані і в той час, як деякі палітри хороші в деяких середовищах вони не працюють в інших.
Пройти "повний чорний", і довгі статті з великою кількістю слів стало стомлюючи читати, а вибирати занадто світлий сірий означає темні ефекти в режимі губляться. Ви також повинні враховувати колір шрифту та шрифт, інтервал шрифту в плані Кернінгу та провідних, а також елементи, такі як гіперпосилання, заголовки, зображення та інші кредити «шрифту меблі» по сторінці.
Кінцевий результат був підібрати колірну палітру з сильним синьо-сірий та бірюзовий вплив доставки, ми вважаємо, темний режим, який є доступним на декількох рівнях, а також пройшовши ряд випробувань, доступності для використання та читабельність.
Для початку ми використали colorhunt.ко. Простий у використанні веб-сайт дозволяє побачити різні палітри кольорів і як кольори взаємно доповнюють один одного. Це фантастичний ресурс, незалежно від вашого темного режиму проектування.
Як тільки ми вибрали палітру, яку ми хотіли працювати з ми приступили до втілення цих тонах у кишеню-небудь смачненький дизайн.
Ми використовували найтемніший колір у палітрі, як наші за замовчуванням фон другий темний як хайлайтер на цьому тлі.
Ви побачите ці кольори найбільш помітно на наших новостворених сторінках маточок. Вживання кольору тут ліфти наша «карта» дизайн від сторінки та значно покращує читабельність. Ми також використовували колір для горизонтальних правил навколо місця, щоб розбити на сторінки списків.
Інстинктивною реакцією було б використовувати бірюзовий колір у палітрі гіперпосилання, на світлому фоні, що добре працює, проте це одна з поширених помилок, коли справа доходить до темного режиму. Кольоровий текст на темному тлі не працює.
Для боротьби з цим, ми змінили кишеню стиль lint гіперпосилання на товсті підкреслити, що підкреслюється при наведенні, а не забарвлення пов'язаного слова або словосполучення. Такий підхід робить його набагато легшим на очах, і ми навіть прийняли його у нашу тему світловий режим теж йде вперед.
Для покращення читабельності, ми вибрали колір тексту на сторінці від білий/світло-сірий, остаточний колір у вибраній палітрі, а не вибирати "повний білий". Це створює більш м'який досвід, і ми вважаємо, що набагато простіше на око, коли справа доходить до читання.
Так, темний режим-це про контраст, але ви не хочете це занадто контрастний. Чорний і білий дійсно може бути дуже різким пліч-о-пліч.
Як тільки ми завершили темно-режим, ми звернулися до оновлення нашого тепер нового світлового режиму. Раніше єдиний спосіб, щоб тримати єдиний стиль дизайну і дух його теж довелося змінювати, щоб відповідати такому ж підходу та переконання.
Для Pocket-lint, що означає новий стиль гіперпосилання та новий колір шрифту – темний колір у новій палітрі, а також кілька налаштувань та змін в інших місцях, щоб тримати речі послідовні.
Доступність
Хоча багато хто просто бачу темний режим якось це «круто» існує ряд основних причин, чому це добре і з точки зору транспортної доступності. Це було те, що ми хотіли переконатися, що однією з переваг застосування темний режим на Pocket є щось смачненьке.
Є низка інструментів, які можна використовувати для тестування контрастних кольорів. Консорціум Всесвітнього павутиння є головною міжнародною організацією стандартів для Всесвітньої павутини і має низку керівних принципів для завершення у більш доступному місці.
Веб-контент, доступність керівництва (групи) 2.1 , зокрема, охоплює широкий спектр рекомендацій щодо створення веб-контенту більш доступним.
Переконавшись, що обидві світлі і темні режими представлений кишеньковий Лінт пройшли через ці випробування, має першорядне значення.
І так ми працювали з керівними принципами, використовувати контрастні кольори, щоб зробити все якнайкраще.
Проблеми проектування
Як тільки ми розробили палітру кольорів, перекладаючи, що на сайті досить легко, хоча і трудомістко.
Кишеньковий Лінт працює вже 16 років і це був гарний час, щоб привести до ладу і покращити код у файлі майстер УСБ. CSS-файл-це файл, який обробляє всі стилі та макети статей та сторінок на сайті, це велика робота.
Протягом багатьох років з численними виробниками додавання та зміна коду намітилася тенденція, щоб додати стилі в залежності від того, як вони виглядають, у тому числі їх колір. Це великий ні-ні, коли справа доходить до реалізації темних та світлих дизайн і те, що, коли у вас є позитивне та негативне колірній гамі, потрібно міняти.
Іншою проблемою було прийняття рішення про єдиний значок, який буде використовуватися на сайті, щоб представляти читачам, що вони можуть перемикатися між світлим і темним режимом, коли вони хотіли.
З темного режиму ще в зародковому стані немає жодної ікони, що використовується в інтернеті. Ті, які вже реалізували темний режим вибрали різні іконки та тексти до символізації є вибір. Місяця, Сонця, лампочки, а також слова використовуються з невеликою кількістю турботи та уваги.
Після розробки та тестування кількох різних іконок з членами команди, сім'ї та друзів ми зупинилися на піктограму Півмісяця, що-небудь тверде або порожнім залежно від того, темний режим або вимкнути. Ми вважаємо, що це зробив самий сенс і легко зрозуміти, незалежно від того, де ви знаходитесь і якою мовою ви говорите.
наступні кроки
Зараз ми реалізували темний режим на кишеню-Лінт ми плануємо продовжувати стежити за тим, як він використовується читачами і чи наш вибір конструкції викликати будь-які проблеми або питання, коли доступний набагато ширшій аудиторії.
темний режим