Як задизайнити мобільний додаток: покроково для початківців

Крок 1

Один головний сценарій замість списку функцій

Типова помилка новачка — одразу малювати десятки екранів «про все». Почніть з однієї людини й однієї задачі. Наприклад, навчальний проєкт: застосунок для запису до сусідньої кав'ярні або трекер звичок. Опишіть сценарій текстом, крок за кроком, від відкриття застосунку до результату:

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

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

Крок 2

Навігація за правилами платформи

Мобільні застосунки не вигадують навігацію з нуля: в Apple є Human Interface Guidelines, у Google — Material Design. Почніть з розділів про навігацію. Наприклад, Apple радить використовувати панель вкладок (tab bar) для переходу між розділами, а не для дій, підписувати кожну вкладку, бажано одним словом, і пам'ятати, що між меншою кількістю вкладок орієнтуватися простіше. Якщо вкладки не вміщаються, iOS ховає зайві в розділ «Ще», і до них важче дістатися.

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

Крок 3

Розміри, текст і безпечні зони

У Figma створіть фрейм із готових розмірів телефона й одразу пам'ятайте про безпечну зону: Apple визначає її як область, яку не перекривають апаратні особливості й системні панелі, як-от Dynamic Island, рядок стану чи панель вкладок. Важливий вміст і кнопки — лише всередині неї. Далі кілька чисел, які варто знати:

• •Apple рекомендує розмір елементів керування на iPhone 44 на 44 pt (мінімум — 28 на 28 pt);
• •у документації Android для доступності — ціль для дотику щонайменше 48 на 48 dp;
• •на iOS стандартний розмір основного тексту — 17 pt, мінімальний — 11 pt;
• •між кнопками, які стоять поруч, залишайте місце: Apple наголошує, що відстань між елементами важить не менше, ніж їхній розмір.

💡 Вашим застосунком користуватимуться й люди з великим системним шрифтом. Перевірте свій екран зі збільшеним текстом: де заголовок не вмістився, там потрібне перенесення рядка, а не дрібніший шрифт.

Крок 4

Стани екранів і незручні випадки

Гарний екран із ідеальними даними — лише один із варіантів. Для кожного екрана сценарію додайте стани, у яких застосунок опиняється насправді:

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

Крок 5

Прототип на справжньому телефоні

Мобільний макет на великому моніторі обманює: кнопки здаються більшими, а текст — читабельнішим. З'єднайте екрани в клікабельний прототип у Figma і відкрийте його на телефоні: мобільний застосунок Figma дає переглядати й тестувати прототипи, а також транслювати вибрані фрейми з комп'ютера на телефон. Потім дайте телефон кільком людям із задачею зі сценарію і мовчки спостерігайте.

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

💡 Як зробити прототип із переходами й оверлеями, детально описано в гайді Прототип у Figma. А готовий сценарій покажіть у спільноті: людям, які не бачили ваших чернеток, видно більше.