Дизайн інтерфейсу для початківців: основи UI за 5 кроків

Крок 1

Навчіться бачити компоненти

UI (user interface) — це все, що людина бачить і чого торкається в продукті: текст, кнопки, поля, іконки, навігація. Майже кожен екран зібраний з обмеженого набору повторюваних деталей — компонентів. Відкрийте три застосунки, якими користуєтеся щодня (банк, месенджер, доставку), зробіть по два-три скриншоти і підпишіть на них усе, що повторюється:

• •кнопки: головна, другорядна, текстова;
• •поля введення, перемикачі, чекбокси, випадні списки;
• •картки й рядки списку;
• •навігація: нижня панель вкладок, верхня панель із заголовком, кнопка «Назад».

💡 Звертайте увагу, що однакові речі всюди виглядають однаково. Це евристика юзабіліті «Узгодженість і стандарти» Якоба Нільсена: людям не треба гадати, чи різні слова й кнопки означають одне й те саме.

Крок 2

Побудуйте ієрархію: одна головна дія на екрані

Візуальна ієрархія веде погляд від найважливішого до другорядного. За Nielsen Norman Group, її створюють трьома засобами: колір і контраст, розмір та групування. Для екрана застосунку це означає просте правило: вирішіть, яку одну дію людина найчастіше робить тут, і зробіть її кнопку найпомітнішою. Решта дій — другорядні кнопки або текстові посилання.

• •заголовок екрана — найбільший текст, підписи й допоміжний текст — найменші;
• •акцентний колір — лише для головної дії та активних станів, не для декору;
• •небезпечні дії (видалити, скасувати підписку) не робіть головною кнопкою і позначайте не лише червоним кольором;
• •небагато розмірів тексту: кожен новий розмір має щось означати в ієрархії, а не з'являтися випадково.

💡 Тест примруженого ока, який описує NN/g: примружтеся або розмийте скриншот. Якщо першою помітною лишається головна дія — ієрархія працює.

Крок 3

Відступи й сітка: охайність без кольору

Екран часто «ламають» не кольорами, а випадковими відступами: тут 13 px, там 17 px. Оберіть базову величину, наприклад 8 px, і робіть усі відступи кратними їй (дрібні — 4 px). Групуйте за близькістю: елементи, що стосуються одного, — ближче один до одного, різні групи — далі. Тоді структуру видно навіть у чорно-білому макеті.

• •однакові бічні поля по всьому екрану;
• •відступ між групами більший, ніж усередині групи;
• •вирівнювання по спільних лініях, а не «на око»;
• •у Figma Auto layout сам тримає відступи між елементами, якщо ви задали їх один раз.

Крок 4

Продумайте стани, а не лише «гарну картинку»

Готовий макет показує один момент, а інтерфейс живе в різних ситуаціях. Перша евристика Нільсена — видимість стану системи: людина завжди має розуміти, що відбувається. Тому кожен компонент — це набір станів:

• •кнопка: звичайна, наведення курсора (на десктопі), натиснута, вимкнена, фокус із клавіатури, завантаження;
• •поле: порожнє, у фокусі, заповнене, з помилкою. Підпис ставте над полем, а не всередині: NN/g пояснює, що текст-підказка всередині поля зникає під час введення, і людині важче перевірити, що вона заповнила;
• •повідомлення про помилку — конкретне і поруч із полем, позначене не лише кольором, а й текстом чи іконкою;
• •екран: завантаження (наприклад, скелетон — сірі заготовки замість контенту), порожній стан, помилка мережі.

💡 Порожній стан — не порожнеча. NN/g радить використовувати його, щоб пояснити, що тут з'явиться, і дати кнопку для першої дії.

Крок 5

Перевірте доступність і зробіть вправу

Кілька чисел зі стандарту доступності WCAG 2.2 варто знати напам'ять: звичайний текст має контрастувати з фоном щонайменше 4.5:1, великий текст — 3:1; межі полів, іконки й інші важливі елементи інтерфейсу — теж щонайменше 3:1 до сусіднього кольору. Мінімальна ціль для натискання — 24 на 24 CSS-пікселі, а для головних кнопок краще більше. Тепер вправа на вечір:

• •намалюйте у Figma екран входу або реєстрації для вигаданого застосунку;
• •зробіть кнопку й поле компонентами з усіма станами з кроку 4;
• •додайте екран з помилкою (неправильний пароль) і екран завантаження;
• •перевірте контраст плагіном або онлайн-перевіркою і виправте все, що не проходить.

💡 Покажіть результат у спільноті й поставте конкретне питання: «Що на цьому екрані помітно першим?» Відповідь одразу скаже, чи працює ваша ієрархія.