Як зробити інтерфейс приємним: дрібниці, що вирішують усе

Що означає «приємний інтерфейс» простими словами

Уяви дві кави з собою. Перша - стаканчик зімʼятий, кришка сіла косо, по боці повзе крапля. Друга - стаканчик щільний, кришка клацнула рівно, тримати приємно. Кава всередині одна й та сама. Але першу ти викинеш дорогою, а другу захочеш сфоткати.

З інтерфейсами рівно так само. Кажуть «сайт виглядає дешево» або «якось саморобно» - і це майже ніколи не про одну велику помилку. Це сума мікродеталей. Відступи трохи різні. Кнопка не реагує на палець. Кути в картки й кнопки всередині неї бʼються. Цифри в лічильнику смикаються туди-сюди.

Спіймати кожну дрібницю окремо око не встигає. А разом вони складаються в одне відчуття, і мозок тихо шепоче: «тут щось не так». Довіра до продукту витікає - а ти навіть не зрозумів, у який момент.

Навіщо вайбкодеру розбиратися в деталях інтерфейсу

Зібрав сайт за вечір з ШІ - начебто працює, але «виглядає як начерк у блокноті». Знайомо? Річ майже завжди в цих самих дрібницях. Розберешся в них - і одразу:

• перестанеш кидати ШІ розпливчасте «зроби красивіше» і почнеш давати конкретні правила. На конкретику модель відповідає в рази точніше;
• за 15 хвилин доведеш сирий інтерфейс до стану «стоп, це що, готовий продукт?»;
• сам поставиш діагноз, коли друг скаже «виглядає дешево, а чому - не втямлю»;
• не вбʼєш швидкість сайту кривими анімаціями. Класична пастка новачка, і в неї легко влетіти.

Між «накидав на коліні» і «виглядає дорого» лежить десяток деталей. Усі вони вміщаються в один промпт. Зараз пройдемося по кожній.

Які прийоми роблять інтерфейс приємним на дотик

Скруглення кутів: як налаштувати, щоб не сперечалися

Візьми картку зі скругленими кутами, а всередині неї - кнопку, теж скруглену. Якщо радіус у них однаковий, кут кнопки буквально втикається в кут картки. І око спотикається на рівному місці, хоча ти начебто нічого не зламав.

Правило просте:

зовнішній радіус = внутрішній радіус + відступ

Називається це концентричні скруглення Концентричні скруглення - коли вкладені скруглені елементи повторюють вигин одне одного, як кола на воді. Зовнішній кут трохи кругліший за внутрішній рівно на величину відступу між ними. . Відступ великий - не мучся з формулою, вважай елементи просто різними поверхнями. Мета не в математичній точності до пікселя. Мета - щоб кути виглядали заодно.

Кнопка має відгукуватися на палець: ховер, натискання, фокус

Хороша кнопка - як хороша клавіша на ноутбуці: тиснеш, і вона трохи просідає. Це тактильне відчуття, що натискання спрацювало, а не провалилося в порожнечу.

• Наведення (ховер): плавно змінюється колір або тінь.
• Натискання: кнопка трохи зменшується, scale(0.96) - наче ти продавив її пальцем.
• Фокус: помітна рамка, коли по кнопці пройшлися клавішею Tab. Це про доступність: без рамки людина, яка ходить по сайту з клавіатури, просто губиться на сторінці.

Чому «анімуй усе» - найгірший промпт для швидкості

Спокуса сказати ШІ «зроби плавним узагалі все» величезна. Але за цією фразою ховається transition: all - команда «стеж за зміною будь-якої властивості». Браузер починає відстежувати купу зайвого і гальмує. Особливо на телефонах, де запасу потужності й так нема.

Як треба: перерахувати конкретні властивості, які реально змінюються. Колір фону. Тінь. Розмір. Так швидше, легше і передбачуваніше.

Дрібниці, які роблять інтерфейс «дорогим»

Ці штуки непомітні, поки вони на місці, і одразу лізуть в очі, коли їх нема:

• Зона натискання. Клікабельний елемент - не менше 44×44 пікселя, навіть якщо сама іконка крихітна. Інакше влучити пальцем на телефоні перетворюється на міні-гру «снайпер».
• Табличні цифри. У лічильниках, таймерах і цінах вмикай табличні цифри Табличні цифри (tabular-nums) - режим шрифту, де всі цифри однакової ширини. Тоді змінне число не смикає сусідні елементи туди-сюди. , щоб під час зміни значення число не стрибало і не штовхало сусідів.
• Контур у картинок. Тонка напівпрозора обводка (чорна на світлому фоні, біла на темному), щоб край картинки не зливався з фоном. І запамʼятай: контур нейтральний, не фарбуй його у фірмовий колір.
• Перенесення тексту. Заголовки переноси «збалансовано» (text-wrap: balance), короткі описи - «красиво» (text-wrap: pretty), щоб на останньому рядку не висіла самотня літера-сирота.

Приклад із життя: лендинг, який виглядає саморобно

Зібрав з ШІ лендинг для своєї міні-студії. Друзі дивляться і хмикають: «ну… норм, але якось саморобно». А ти не второпаєш, що не так - начебто все на місці, кольори навіть приємні.

А не так ось що:

1. Кнопки ніяк не реагують на наведення й натискання - сайт відчувається «мертвим».
2. У карток і кнопок усередині них однакові скруглення - кути бʼються.
3. Лічильник підписників смикає сусідній текст щоразу, як змінюється цифра.
4. Картинки зливаються з фоном, наче їх приліпили в останню секунду.

Жодної з цих дрібниць друг не назве конкретно. А разом вони горлають «саморобно». Ось промпт, який лагодить усе за один захід:

Зроби цей інтерфейс більш відполірованим. Пройдися по деталях:

Кнопки і клікабельні картки: додай плавний ховер (колір і тінь),
легке зменшення під час натискання приблизно до 96 відсотків, і помітну
рамку для фокусу з клавіатури.
Скруглення: у вкладених елементів зовнішній радіус = внутрішній плюс
відступ, щоб кути не сперечалися.
Анімації: перерахуй конкретні властивості, які змінюються. Ніколи
не використовуй transition all. Поява мʼяка, зникнення коротше.
Усі цифри в лічильниках і цінах зроби табличними, щоб не стрибали.
У картинок додай тонкий нейтральний контур, щоб край не зливався
з фоном.
Будь-який клікабельний елемент - мінімум 44 на 44 пікселі для пальця.
Покажи список того, що змінив: було і стало.

Часті помилки, через які інтерфейс виглядає дешево

• Просити «зроби красивіше» і чекати дива. Надто розмито. Дай конкретику: відступи, ховери, скруглення.
• Ставити transition: all заради економії часу. Заощадиш хвилину зараз - отримаєш лаги на телефонах потім. Перераховуй властивості поіменно.
• Робити клікабельні іконки крихітними. Мишкою на десктопі влучиш, пальцем на телефоні - дзуськи. Тримай 44×44.
• Забувати про стан натискання й фокуса. Без відгуку інтерфейс відчувається зламаним, навіть якщо всередині все працює як слід.
• Фарбувати контур картинки у фірмовий колір. Виглядає як баг. Контур завжди нейтральний - чорний або білий, напівпрозорий.
• Анімувати заради анімації. Якщо все смикається і мигає - це не «живо», це «голова паморочиться». Менше руху, але плавно.