Малките правила в UI дизайна, които оказват голямо влияние
от Иван Георгиев
11.11.2023
Дизайнът на потребителския интерфейс е труден. С толкова много възможности за избор по отношение на оформление, разстояние, типография и цвят, вземането на дизайнерски решения може да бъде непосилно. Когато добавите използваемост, достъпност и психология към сместа, става още по-трудно :)
За щастие дизайнът на потребителския интерфейс не e чак толкова труден. В продължение на почти 10 години, работейки в дигитална агенция Update.bg, разбрах, че повечето от моите решения за UI дизайн се управляват от система логически правила.
Запомнете: Най-добрият начин да се научите е чрез правене, така че не се бавете.
Нека поправим този пример с помощта на логически правила
Следните 2 дизайна са за страницата с подробности за имот на приложение за краткосрочно наемане на имот. Първият е оригиналният дизайн. Вторият е резултат от прилагането на някои логически правила или насоки.
Дори и без много UI дизайн опит, вероятно ще забележите, че оригиналният дизайн изглежда объркан, сложен и труден за използване. Това е така, защото съдържа много проблемни детайли на дизайна, които представляват риск за използваемостта.
1. Използвайте отстояния (spacing), за да групирате свързаните елементи
Разделянето на информацията на по-малки групи от свързани елементи помага за структурирането и организирането на интерфейса. Това го прави по-бърз и лесен за разбиране и запомняне от хората.
Можете да групирате свързани елементи, като използвате следните методи:
- Поставете свързаните елементи в един и същи контейнер;
- Елементите, свързани с пространството, близо един до друг;
- Направете свързаните елементи да изглеждат подобни;
- Подравнете свързаните елементи в непрекъсната линия;
Увеличаването на разстоянието помага за ясното групиране на съдържанието, което го прави по-организирано и по-лесно за разбиране.
2. Бъдете консистентни
Консистентността в дизайна на потребителския интерфейс означава, че подобни елементи изглеждат и работят по подобен начин. Тази предвидима функционалност подобрява използваемостта и намалява грешките, тъй като не е необходимо хората да продължават да учат как работят нещата.
В нашия пример стиловете на иконите са непоследователни, тъй като някои са запълнени, а други не. Това може да обърка някои хора, тъй като запълнените икони често показват, че даден елемент е избран.
3. Уверете се, че подобни на вид елементи функционират по подобен начин
Ако елементите изглеждат подобни, хората ще очакват те да работят по подобен начин. Затова се опитайте да се уверите, че използвате последователно визуално третиране на елементи с еднаква функционалност. Обратно, опитайте се да гарантирате, че елементите с различна функционалност изглеждат различно.
В нашия пример контейнерите с икони имат подобен визуален стил като бутона „Book now“. Това ги кара да изглеждат интерактивни, въпреки че не са. Премахването на синия цвят и стила на бутоните от иконите помага да се избегне погрешното им бъркане с интерактивни елементи.
4. Премахнете ненужните стилове
Ненужната информация и визуални стилове могат да разсейват и могат да увеличат когнитивното натоварване (количеството мозъчна сила, необходимо за използване на интерфейс). Избягвайте ненужните линии, цветове, фонове и анимации, за да създадете по-прост, по-фокусиран интерфейс.
6. Използвайте цветовете целенасочено
Използвайте цветовете пестеливо и целенасочено. Опитайте се да избягвате използването на цвят само за декорация, тъй като може да бъде объркващо и разсейващо. Започнете с черно и бяло и въведете цвета там, където той предава значение.
Прост и ефективен подход е да приложите цвета на бранда към интерактивни елементи като текстови връзки и бутони. Това помага на хората да научат какво е интерактивно и какво не. Опитайте се да избягвате използването на цвета на марката върху неинтерактивни елементи.
7. Уверете се, че елементите на интерфейса имат съотношение на контраст 3:1
Контрастът е мярка за разликата във възприеманата яркост между два цвята. Изразява се като съотношение, вариращо от 1:1 до 21:1. Например черният текст на черен фон има най-ниското съотношение на контраст 1:1, докато черният текст на бял фон има най-високото съотношение 21:1. Има много онлайн инструменти, които да ви помогнат да измерите контрастните съотношения между различните цветове.
За да гарантирате, че хората със зрителни увреждания могат ясно да виждат детайлите на интерфейса, стремете се поне да отговаряте на изискванията за цветови контраст на ниво 2.1 на Указанията за достъпност на уеб съдържанието (WCAG). Това означава, че елементите на потребителския интерфейс, като полета на формуляри и бутони, трябва да имат поне контрастно съотношение 3:1.
8. Уверете се, че текстът има съотношение на контраст 4,5:1
За да се гарантира, че хората със зрителни увреждания могат ясно да четат текст, той трябва да отговаря на следните изисквания за контраст на ниво AA на WCAG 2.1:
Малък текст (18 пиксела и по-малко) се нуждае от минимален контраст от 4,5:1.
Големият текст (над 18px с удебелен шрифт или над 24px с нормално тегло) се нуждае от минимален контраст от 3:1.
9. Използвайте един "sans serif typeface"
Typeface е набор от свързани шрифтове с подобен стил или естетика. Helvetica е пример за typeface. Шрифтовете са вариации в typeface-a, като тегла или размери. Например Helvetica bold и Helvetica regular са 2 различни шрифта в typeface-a на Helvetica.
Най-безопасно е да използвате един sans serif typeface за дизайн на интерфейса, тъй като те обикновено са най-четливите, неутрални и прости.
10. Ограничете използването на главни букви
Освен ако не крещите на хората, няма много основателни причини да използвате главни букви. ТОВА Е СИЛНО И ТРУДНО ЗА ЧЕТЕНЕ.
Когато четете, вие гледате формата на думата, а не всяка буква. Формата ви помага да разпознаете думата по-бързо. Всички думи с главни букви имат еднаква правоъгълна форма. Това ви принуждава да четете всяка буква една по една.
11. Използвайте само regular и bold шрифтове
Само защото има много дебелини на шрифта, налични в един шрифт, не означава, че трябва да използвате всички тях във вашите дизайни. Използването на много различни дебелини на шрифта може да добави шум и бъркотия към вашия интерфейс. Това също прави по-трудно последователното използване на теглото на всеки шрифт.
Поддържайте вашата дизайнерска система проста и кратка, като използвате само regular и bold шрифтове.
12. Избягвайте чисто черен текст
За дизайна на потребителския интерфейс обикновено е най-безопасно да избягвате чисто черно, тъй като има много висок контраст спрямо бялото. Този висок контраст може да причини напрежение и умора на очите при четене на текст.
Черното има 0% яркост на цвета, а бялото има 100% яркост на цвета. Голямата разлика в яркостта на цветовете кара очите ни да работят по-усилено. Най-безопасно е да избягвате чисто черно срещу бяло и вместо това да изберете тъмно сиво.
13. Ляво подравняване на текста
Текста се чете отляво надясно, надолу във F-образна форма. Затова е най-добре текстът да е подравнен вляво за оптимална четливост. За дълъг основен текст е най-безопасно да избягвате централно подравнен или justified текст.
По-трудно е за четене, особено за хора с когнитивни увреждания.
Централното подравняване може да работи за заглавия и кратък текст, тъй като може да се чете бързо. Централното подравняване обаче затруднява четенето на по-дълъг основен текст, тъй като началната точка на всеки ред постоянно се променя. Очите ви трябва да работят повече, за да намерят началната точка на всяка линия.