7 полезни съвета за проектиране на тъмен потребителски интерфейс

Тъмните потребителски интерфейси придобиха популярност и много приложения вече предлагат опция за превключване между светъл и тъмен режим. Внедряването на тъмен потребителски интерфейс обаче може да бъде предизвикателна задача, която изисква внимателно внимание към използваните цветове, шрифтове, изображения и разстояние.

Всички грешки в тези елементи могат да доведат до лошо потребителско изживяване. Следните съвети трябва да ви помогнат, когато проектирате първия си тъмен потребителски интерфейс.

1. Не използвайте чисто черно

Когато проектирате тъмен потребителски интерфейс, избягвайте използването на чисто черен фон. По-добре е да използвате тъмен нюанс на сивото. Например, Темата за материален дизайн на Google препоръчва цвят #121212.

Черният фон, съчетан с бял текст, може да има твърде силен контраст и да причини напрежение на очите. Вместо това по-тъмните нюанси на сивото могат лесно да покажат сенки, дълбочина и височина.

2. Уверете се, че контрастът на текста отговаря на указанията на WCAG 2.0

Изберете цветова комбинация, която предлага подходящо ниво на контраст, така че текстът да е четлив. Указанията на WCAG 2.0 гласят, че текстът или изображенията на текст трябва да имат контрастно съотношение най-малко 4,5:1, а големият текст (най-малко 18 пункта или 14 пункта получер) трябва да има контрастно съотношение поне 3:1.

Има няколко инструмента за проверка на цветовия контраст, включително ВЪЛНА Разширение за Chrome, което също проверява колко са достъпни цветовете.

3. Изберете правилния стил на шрифта

Трябва също така да вземете под внимание стиловете на шрифта на вашия текст, включително размера, теглото и височината на реда. Ако търсите опции за шрифтове, не забравяйте, че има много сайтове, които предлагат безплатни шрифтове. Що се отнася до размера на шрифта, използвайте стойности, които са достатъчни, за да гарантират, че текстът е ясен и видим на тъмен фон.

Помислете за следните стилове за уеб страница:

тяло {
шрифтово семейство: "КуриерНов", монопространство;
размер на шрифта: 12px;
тегло на шрифта: 200;
височина на линията: 1; 
цвят: #333333;
}

Семейството шрифтове е трудно за четене, размерът на шрифта е твърде малък и теглото на шрифта е твърде малко. Тези стилове правят страницата трудна за четене, както можете да видите от екранната снимка по-долу.

По-долу са някои подходящи стилове, които можете да използвате вместо тях.

тяло {
шрифтово семейство: "Arial", безсерифен;
размер на шрифта: 16px; 
тегло на шрифта: 400; 
височина на линията: 1.5; 
цвят: #FFFFFF;
Цвят на фона: #121212; 
}

И ето резултатната страница:

4. Избягвайте наситените акцентни цветове

Наситените цветове могат да бъдат твърде ярки и размазани на тъмен фон. Вместо това използвайте цветове, които са по-малко интензивни и приглушени. По този начин създавате потребителски интерфейс, който има видим текст.

За да демонстрирате, разгледайте тези два стила на бутоните:

/* наситено синьо */
.btn-наситено-синьо {
Цвят на фона: #121212;
цвят: #0e0bf6;
}
/* Приглушено синьо */
.btn-приглушено-синьо {
Цвят на фона: #121212; 
цвят: #4c5ab3;
}

Наситеният син цвят може да е твърде ярък и труден за четене на тъмен фон, докато приглушеният син цвят осигурява добър контраст и се чете по-лесно.

Инструмент като оцветяем е полезно за генериране на цветови комбинации, които следват указанията за достъпност.

5. Използвайте отрицателно пространство, за да предотвратите създаването на тежък потребителски интерфейс

Тъмната цветова палитра може да направи потребителския интерфейс да изглежда тежък за потребителите. Когато се използва правилно, отрицателното пространство може да ви помогне да подчертаете важни елементи на потребителския интерфейс и да направите текста лесен за сканиране. Достатъчното разстояние също може да направи дизайна по-изчистен и модерен.

Вземете, например, Целевата страница на Apple. Разстоянието между елементите прави страницата да изглежда много модерна и визуално интересна, позволявайки важните елементи да се открояват.

6. Използвайте различни цветови нюанси, за да добавите дълбочина към потребителския интерфейс

Когато проектирате светли потребителски интерфейси, можете да използвате сенки, за да добавите дълбочина и височина на елементите. Въпреки това, поради тъмния фон, сенките понякога се виждат трудно в тъмните потребителски интерфейси.

Можете да постигнете дълбочина в тъмен потребителски интерфейс, като използвате множество нюанси на тъмни цветове. Например, вместо само един тъмен фон, можете да добавите по-светли нюанси от същия цвят към различни елементи като бутони и модали.

7. Уверете се, че вашите изображения съответстват на тъмния потребителски интерфейс

Не е необходимо да използвате едни и същи изображения за светъл и тъмен режим. Можете да използвате тъмен режим CSS медийни заявки за изключване на изображения, които съответстват на тъмния потребителски интерфейс, когато потребителят превключи на тъмен режим.

Например, за да приложите конкретен фонов шаблон към секции от вашата страница в тъмен режим, можете да използвате името на класа .bgpattern и да добавите следния код към вашия лист със стилове.

@медия (предпочита-цветова-схема: тъмен) {
/* Приложете този стил само в тъмен режим */
.bgpattern {
фоново изображение: URL адрес("/тъмно.jpg");
 }
}

Тази медийна заявка гарантира, че референтното фоново изображение се показва само когато предпочитаната от потребителя цветова схема е тъмна.

Кога да използвате тъмен потребителски интерфейс

Тъмните дизайни на потребителския интерфейс са чудесен начин да придадете модерна естетика на вашия уебсайт или приложение. Те също така могат да намалят напрежението на очите и да запазят живота на батерията. Тъмните потребителски интерфейси обаче не са подходящи за всяко приложение и винаги трябва да имате предвид марката и потребителската база.

Като цяло, тъмните потребителски интерфейси са най-подходящи за марки, които дават приоритет на лукса, престижа, минимализма или мистерията. Те също могат да бъдат чудесен избор за табла за управление и инструменти за визуализация.