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

Физиците казват, че черното всъщност не е цвят; това е липсата на светлина . В експериментите си, променящи слънчева светлина през призми, сър Исак Нютон дори не я включва в спектъра на цветовете.

В психологията на цветовете повечето цветове представляват различни неща за различните хора. В западните култури черното често се свързва със смърт, мистерия и зло. Зеленото често се свързва с растежа поради природата. Синьото е почти универсално успокояващо, защото е свързано с небето и водата. Цветът е емоционална .

Други ефекти са културни. Лилавото, например, все още се свързва с лукса, защото в много древни култури лилавото багрило е било скъпо и рядко - само кралски особи могат да си го позволят. Това беше значителна част от културния Zeitgeist достатъчно дълго, за да станете част от човешката психика .

Цифрови продукти с тъмни потребителски интерфейси— свързани със сила, елегантност и мистерия —Са страховита тенденция. Въпреки че често се казва, че тъмният режим може да намали напрежението на очите, няма доказателства, че това е вярно. Под определени обстоятелства , трябва също да спести живота на батерията. И все пак, по-често тъмните теми са естетически избор.

Dark UI срещу Light UI

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

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

Потребителски интерфейси за B2B SaaS приложение са известни трудности за проектиране. Стандартните компоненти на уеб потребителския интерфейс като таблици с данни, приспособления, формуляри и падащи менюта могат да изглеждат странно на тъмен потребителски интерфейс. Защото много цветови схеми не работят добре с тъмни потребителски интерфейси, определени марки и продукти - в зависимост от вида, контекста и факторите на околната среда - не са подходящи и могат да се окажат непреодолимо предизвикателство.

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

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

• Когато дизайнът е оскъден и минималистичен само с няколко типа съдържание
• Когато е подходящо за контекста и употребата, като приложения за нощно забавление
• За да създадете поразителен, драматичен външен вид

И има сценарии, когато не се препоръчва:

• Когато има голямо количество текст (четенето на тъмен фон е трудно)
• Когато има много смесени типове съдържание
• Когато дизайнът изисква широка гама от цветове

Контраст в Dark UI Design

Тъмната тема не е черна тема. Най-добре би било разглеждано като тема с „слабо осветление“. Едно от основните притеснения при тъмните потребителски интерфейси е постигането на достатъчно контраст, така че визуалните елементи да се разделят, а текстът да е четлив. Повечето дизайнери биха помислили, че използването на черен цвят би било оптимално за постигане на силен контраст. Въпреки това е най-добре да не се използва истинско черно (# 000000) за фонове или цветове на повърхността . Черното е най-добре запазено за други елементи на потребителския интерфейс и се използва пестеливо. Например истинският черен цвят може да се използва за малки елементи на потребителския интерфейс или околен панел.

Google Материален дизайн тъмна тема препоръчва да се използва тъмно сиво (# 121212) като тъмен цвят на повърхността на темата „за изразяване на надморска височина и пространство в среда с по-широк диапазон от дълбочина.“ В допълнение, много дизайнери препоръчват да се добави фин тъмно син оттенък към тъмните сиви при определяне на цветовата схема. Той има тенденция да създава по-добър тъмен тон за цифровите екрани и по-приятна тъмна цветова палитра на потребителския интерфейс.

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

Особено внимание трябва да се обърне на контраста на текста в тъмни потребителски интерфейси.

Указания за достъпност на уеб съдържание (WCAG) призовава „визуалното представяне на текст да има най-малко контрастно съотношение 4,5: 1 , ”С изключение на широкомащабен текст, който трябва да има контрастно съотношение най-малко 3: 1 . Следователно, дизайнери трябва да се уверите, че съдържанието остава удобно четливо в тъмен режим.

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

Фокусиране Внимание: Цвят

Цветът се откроява в тъмните потребителски интерфейси. Най-добре е да използвате схеми с по-светли, ненаситени цветове с акцент. Избягвайте да използвате наситени цветове в тъмни потребителски интерфейси, тъй като те могат визуално да вибрират срещу тъмни повърхности. Нещо повече, като най-добра практика, цветовете трябва да преминат най-малко стандарта AA на WCAG 4,5: 1 когато се използва с текст.

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

Правилната цветова схема може да помогне за създаването на добър контраст. Цветни е полезен инструмент за избор на съвместими с достъпност цветови комбинации от цветове на текст и фон.

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

Материалният дизайн на Google сайт има полезен генератор на цветови палитри (под „Инструменти за избор на цветове“), с който дизайнерите могат да създават и прилагат цветови палитри към потребителски интерфейс. Нивото на достъпност на цветовите комбинации също може да бъде измерено с придружител Цветен инструмент .

„Използвайте силно контрастни цветове, за да подобрите четливостта. Много фактори влияят върху възприемането на цвета, включително размер и тегло на шрифта, яркост на цвета, разделителна способност на екрана и условия на осветление. ' Насоки за човешкия интерфейс на Apple

По-малкото е повече: Използване на отрицателното пространство

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

Френският композитор Клод Дебюси веднъж казано, „ Музиката е пространството между нотите . ' Същото настроение важи и за сканируемостта - отрицателното пространство между елементите е това, което кара оформлението да работи. Либералното количество отрицателно пространство около елементите на потребителския интерфейс е това, което им дава определение. Той подчертава важно съдържание и осигурява необходимото пространство за дишане, за да гарантира, че дизайнът не се чувства плътен и претрупан. Без място за дишане, човешкият мозък е по-малко вероятно да сканира интересни точки и по-вероятно да се скита.

Интерфейсите, претъпкани с твърде много елементи и текст, са проклятието на висококачествен тъмен UI дизайн. Чрез внимателно обмисляне на визуалната йерархия в тъмни потребителски интерфейси, дизайнери могат да направят своите творения по-лесно сканируеми, като по този начин повишават потребителското изживяване.

Стайлинг думи: Типография

Всяко парче текст в тъмни потребителски интерфейси изисква проверка. Притеснението е двойно: четливост и контраст. Първо, става въпрос за размера. Текстът трябва да е достатъчно голям за добра четливост (малкият текст на тъмен фон е по-труден за четене). Второ, трябва да има достатъчно контраст между текста и фона.

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

Препоръката на W3C AAA за текст с редовен размер (по-малко от 18 точки, ако не е получер) е да има контрастно съотношение поне 7: 1 . Това се отнася и за други елементи на потребителския интерфейс: икони, изображения на текст и текстови етикети, като етикети на бутони. Това е задължение дизайнери за да се гарантира, че всички цифрови продукти са достъпни за всички. Това не само подобрява използваемостта и следователно UX, това е законът в повечето страни .

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

Дълбочина на комуникация: Кота

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

Защо дълбочина? Повечето съвременни системи за проектиране използват система от нива на надморска височина за предаване на дълбочина. Усещането за дълбочина съответства на природния свят. Визията ни има възприятие за дълбочина и ние живеем в 3D свят. Дълбочината помага да се подчертае визуалната йерархия на интерфейса. Елементите на преден план например привличат вниманието към себе си, като например предупредителен диалог.

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

Изработването на цвета на повърхността на всяко ниво изисква грижи. Най-добре е да нямате повече от четири или пет нива. Дизайнерите трябва да отчетат контраста на текста, тъй като повърхностите стават по-високи в стека и стават по-леки. Ако цветът на фона не е достатъчно тъмен, за да постигне ниво на контраст от поне 15,8: 1 между бял текст и повърхността, текстът на най-високата (и най-светлата) повдигната повърхност няма да премине стандарта 4,5: 1. В някои случаи може да е най-добре да посочите цвета на текста на даден елемент като истински черен (# 000000) в системата за дизайн за постигане на добър контраст на светлосив фон.

Вдъхновение от дизайна на Dark UI

Размишлявайки върху принципите, описани по-горе, ето няколко отлични примера за тъмен дизайн на потребителския интерфейс:

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

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

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

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

Обобщение

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

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

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

---

Кажете ни какво мислите! Моля, оставете вашите мисли, коментари и отзиви по-долу.

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• Тъмни потребителски интерфейси. Добрите и лошите. Какво да правим и какво не.
• Принципите на дизайна и тяхното значение
• Проучване на Гещалтските принципи на дизайна
• Убеждаване и преместване - Ръководство за принципите на дизайна на движението
• Увеличете UX с тези успешни принципи на проектиране на взаимодействието

Разбиране на основите

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

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

Добър или лош е тъмният режим?

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

Какво представляват цветовете на потребителския интерфейс?

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

Каква е основната роля на цвета в дизайна на потребителския интерфейс?

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

Какъв е правилният начин за избор и използване на цвят за дизайн на потребителския интерфейс?

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