10 лайфхаків розробки дизайну нативних мобільних додатків

Розробка дизайну мобільних додатків швидко зайняла центральне місце серед основних вимог до скілів сучасного UI-дизайнера. На Google Play і серед користувачів IOS, найбільше цінується нативність у UX та UI рішеннях. Якщо мобільний додаток розроблено з використанням гайдлайнів, то App Store набагато легше пропускає його в роботу, а користувачі радіють, побачивши щось знайоме та давно улюблене. Все це означає, що дизайнеру необхідно орієнтуватися в загальних вимогах і не забувати відстежувати оновлення, що виходять із завидною періодичністю. Тільки в цьому випадку він зможе зберігати професіоналізм і залишатися затребуваним на ринку праці.

Особливо складним завданням може стати дизайн мобільних додатків для IOS, оскільки існує перелік суворих правил, яких необхідно дотримуватися, якщо завданням є збереження нативної поведінки та UI. Максимально важко доводиться новачкам і користувачам Android, адже IOS-юзабіліті кардинально відрізняється від звичної поведінки додатків на їхніх девайсах.

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

Скелет екрана додатку

Скелет екрана додатку складається зі Status bar, Navigation bar, Tabbar, Modals/Popovers/Alerts, Search bar, Picker. Далі ми описали всі ці частини.

Status bar

Рядок стану містить основну системну інформацію, таку як поточний оператор, час, стан батареї та багато іншого. Вона візуально пов'язана з навігаційною панеллю і використовує ту ж фонову заливку. Щоб відповідати стилю програми, яку ви розробляєте, існує два варіанти кольору контенту в рядку стану — білий та чорний. Ви самі вирішуєте, який з них крутіше виглядатиме в конкретному продукті.

Який би не був пристрій, висота статус бару завжди становить 20 pt. Винятком є тільки iPnone X, де розмір рядка стану становить 44 pt, за рахунок наявності "чубчика".

P.S.: Зовсім не обов'язково малювати status bar самостійно. Можна звернутися до готових GUI, які є у вільному доступі. Існує офіційна версія від розробників IOS.

Navigation bar

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

Висота панелі без status bar у будь-якому пристрої (крім iPnone X) становить 44 pt. В IOS-версіях, вищих за 10, панель навігації можна, за потреби, розширити. Тобто додати додаткову область, заввишки 52 pt, з великим заголовком рядка. Не варто забувати про відступи - в IOS вони мають бути кратні восьми.

В основній частині навігаційної панелі необхідно задавати відступ у 8 pt, а в додатковій частині із заголовком - 16 pt.

Tabbar

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

Якщо ви вирішили зробити панель прозорою, то найкращим рішенням буде додати блюр на задній фон.

Висота таббара - 49 pt у всіх моделях iPhone. Іконка може бути з підписом або без, але в будь-якому разі, контент центрується. Розмір іконки - 24 pt. Потрібно враховувати, що область для кліка становить 44 pt - розміщувати інші іконки в області кліка не рекомендується. Щоб зрозуміти, як розміщувати іконки в таббарі, потрібно визначити їхню кількість, розбити ширину екрана на кількість іконок/табів. Потім кожну іконку центрувати за шириною і висотою області таба, незалежно від того, чи буде текст під іконкою.

Modals, Popovers and Alerts

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

Існують такі види спливаючих вікон:

1) Action Sheet.

Використовується для того, щоб надати користувачеві вибрати одну дію, серед списку доступних операцій.

2) Alerts

Містить повідомлення, яке необхідно побачити користувачеві. Зазвичай він пропонує вибір із двох варіантів (наприклад, "Так" або "Ні") або один варіант відповіді, як підтвердження прочитаного ("Ок"). Крім цього, в алерті можна запропонувати заповнити один інпут - ввести свій Email/телефон.

Не рекомендується часто використовувати алерти. Вони розцінюються користувачами як примус, а це зайвий негатив. Постарайтеся задіяти їх тільки в крайньому випадку.

3) Edit Menu. 

Дозволяє користувачеві здійснити такі дії, як "Скопіювати", "Вирізати", "Вставити", коли елемент виділено. З'являється, якщо клікнути на виділений об'єкт.

4) Popover.

Такі спливаючі вікна корисні, коли одна дія дає змогу вибрати кілька пунктів. Наприклад, щоб відповісти на запитання: "У яких дизайнерських програмах ви працюєте?", - найімовірніше, потрібно буде поставити не одну галочку.

Search bar

Панелі пошуку, за замовчуванням, представлені у двох різних стилях: видимий і мінімальний. Обидві версії мають однакову функціональність.

Видиму версію складно не помітити. Вона добре виділена за допомогою суцільної заливки, найчастіше білого кольору. Поки користувач не вводив текст, усередині панелі відображається текст-заповнювач. Він зникає після введення умови пошуку, а праворуч з'являється кнопка для видалення введеного. Хорошим тоном буде підказати користувачеві, що він може вписати в поле, наприклад: "Введіть місто, вулицю, будинок".

Picker

Пікер використовується для вибору одного значення зі списку. Що цікаво, можна використовувати відразу кілька видів списків в одному пікері. Чудовий приклад його застосування - вибір дати народження, де ми використовуємо в одному вікні вибір дати, місяця і року.

Шрифти та їх параметри

У разі, коли перед фахівцем стоїть завдання: "Створити нативний дизайн додатка під IOS", - у нього не буде необхідності у виборі шрифту. Розробники платформи вже подбали про це - прописали в гайдлайнах, що необхідно використовувати їхній власний шрифт "San Francisco".

Він представлений у двох накресленнях: "SF UI Display" і "SF UI Text. Display". Перший, в основному, використовується для стандартних елементів інтерфейсу, а "Text" - для заголовків і основного тексту. Основний текст заведено робити з невеликою розрядкою.

Розміри шрифтів для основних елементів інтерфейсу

Безумовно, можна використовувати і кастомні шрифти. Але такий підхід може збільшити трудовитрати розробника. Якщо цього моменту не обійти, будьте уважні з ліцензією.

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

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

Якщо ж точно потрібно використати два різні шрифти, є пара ресурсів, які допомагають знайти ідеальні шрифтові пари для будь-якого випадку життя. Найвідоміший - Google Fonts, де при відкритті детальної сторінки шрифту, у бічній панелі показують ідеальні шрифтові пари для нього. Цікавий факт - на цьому сайті ви можете завантажити всі опубліковані на ньому шрифти абсолютно безкоштовно і з ліцензією. Тож, go ahead!

Onboarding - знайомство з додатком і перше враження користувача про вашу роботу

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

Onboarding може стати як навчальним посібником з роботи з додатком, так і просто демонстрацією переваг.

Варіанти використання Onboarding

Привітання

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

Інформування

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

Навчання

Добре продумані навчалки залучають користувачів, пропонуючи спробувати корисні функції додатку - безпечніше робити перші кроки в невідомість. Крім того, екрани onboarding забезпечують перше знайомство зі стилем і зовнішнім виглядом додатку. Ґрунтуючись на аналізі цільової аудиторії, це може стати ще одним гачком для захоплення інтересу користувачів.

Персоналізація

Користувачі можуть налаштувати додаток "під себе", перш ніж почнуть реальну взаємодію. Наприклад, під час встановлення додатку з музикою, в onboarding можна запропонувати вибрати свої улюблені жанри, а на наступному кроці запропонувати вибрати улюблених виконавців, щоб скласти максимально приємний плейлист.

І ще кілька порад щодо створення onboarding

1. Ніколи не вставляйте занадто багато таких екранів. Досить буде показати три-чотири. Це не втомить людину і залишить тільки найприємніші емоції від знайомства з додатком.
2. Використовуйте ілюстрації, що чіпляють, які передаватимуть сенс інформації. Важливо максимально чітко передати суть тексту за допомогою одного зображення, оскільки користувачі часто пропускають етап навчання, якщо його екран здається нудним. Намагайтеся малювати або підбирати ілюстрації в трендовому стилі. У будь-якому разі, прагніть робити їх мінімалістичними.
3. Анімація - ваш друг. Добре, якщо ви просто намалюєте ілюстрацію для онбордингу, яка передасть сенс усього екрану. Але це не завжди можливо. Іноді, ілюстрації недостатньо для того, щоб, наприклад, відобразити флоу функціоналу додатка, або просто повзаємодіяти з користувачем. У цих випадках картинку можна заанімувати і онбординг стане більш цікавим і живим.
4. Показуйте пагінацію, щоб людина розуміла, скільки сторінок ще належить подивитися.
5. Не позбавляйте користувача можливості пропустити онбординг, щоб у нього не з'явилося відчуття примусу. А для того, щоб його не пропускали, зробіть візуал цікавим, користуючись підказками вище.

Основи роботи з кольором, програмні складнощі реалізації деяких колірних рішень

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

Поради щодо використання кольорів під час розробки IOS-додатку

1. Задіюйте кольори, що виділяються, щоб показати, що елемент клікабельний.
2. Ваші найкращі друзі - компліментарні кольори.
3. Використовуйте обмежену кількість кольорів, в ідеалі, два-три основних, один з яких відповідатиме за кнопки й активні елементи додатку.
4. Не вводьте користувача в оману, використовуючи колір, який традиційно прирівнюється до якоїсь дії. Червоний, зелений, синій і нейтральні відтінки потрібно використовувати з розумом. Наприклад, не заливайте зеленим кнопку "Видалити", а червоним - "Продовжити", адже всі знають, що червоний - деструктивна дія, зелений - позитивна, а сірий має на увазі неактивність.
5. Якщо у компанії, для якої розробляється додаток, є лого та/або гайдлайн, варто використовувати наявні дані, щоб не порушити зв'язок із брендом.
6. Градієнти в основних елементах додатку сильно ускладнюють роботу програміста. Якщо стоїть завдання використовувати градієнт, постарайтеся зробити його максимально простим і не використовувати незвичайні повороти - їх дуже складно реалізувати програмно.

Види кнопок і нестандартні приклади їх використання в дизайні додатків на IOS

Кнопки - важливий і один із найскладніших компонентів мобільних додатків. IOS вміщує велику кількість видів кнопок, але їх можна розділити на кілька категорій.

Системні кнопки

Системні кнопки часто розміщують на панелях навігації/інструментів, але вони можуть використовуватися де завгодно.

Кілька порад щодо створення системних кнопок

1. У назвах кнопок завжди використовуйте дієслова, щоб користувач сприймав це як заклик до дії, а не просто напис.
2. Виділяйте кнопки кольором активного елемента. Можете навіть задати більш жирне накреслення.
3. Назва має бути короткою.
4. Якщо системна кнопка розташована в тілі додатку (не в навігаційному барі), заголовок можна зробити великими літерами і не жирним.
5. Намагайтеся не додавати системним кнопкам рамку або тло.

Segmented Controls

Segmented Controls - панель, яка складається з двох і більше сегментів (вкладок). Кожна відображає свою інформацію або функціонал. Ідея в тому, щоб під час перемикання вкладок контент змінювався, а користувачі залишалися на поточній сторінці.

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

При використанні панелі Segmented Controls, кожен сегмент можна розцінювати, як окрему кнопку. Тут можна додавати кастомні іконки, налаштовувати заокруглення.

Call to Action (CTA)

Call to Action - кнопки заклику до дії. Вони часто займають всю ширину екрана і можуть містити не тільки текст, а й іконки.

Особливості CTA

1. Кнопку першої важливості краще залити повністю, а другорядній - задати обведення без заливки.
2. Якщо кнопка неактивна до того моменту, поки користувач не виконає дію (наприклад, заповнить форму), їй можна задати нейтральний сірий відтінок, колір тексту теж не повинен занадто виділятися.
3. Кнопки можна розміщувати як у середині контенту, якщо це не основна дія екрана, так і закріплювати по нижньому краю. Найчастіше, так робимо у спливаючому екрані або на внутрішніх екранах додатку.
4. Іконки в кнопках CTA мають стандартний розмір - 24 х 24 pt.
5. Кнопкам Call to Action бажано задавати розмір не менше 44 pt.

Ілюстрація, як wow-ефект, і сфери її використання

Ілюстрації в мобільних додатках давно в тренді. З кожним роком до них висувають дедалі жорсткіші вимоги: більше унікальності, дружелюбності, інтеграції з брендом. Дизайнеру/ілюстратору вже недостатньо черпати натхнення у векторних чоловічках на фотостоках - потрібно орієнтуватися на тренди в стилістиці та поданні інформації. Нижче ми перерахували кілька трендів в ілюстрації у 2019-2020 роках.

Яскраві кольори і прості форми

"Просто, але складно", - фраза, якою можна описати нові віяння в ілюстрації. Але робота, що складається з простих форм, не обов'язково буде простою. Найчастіше, важливо використовувати сміливі прості форми, які складаються в складні комплекси з яскравими кольорами. Можна навіть задіяти градієнти. Головне - не переборщити з простотою і пам'ятати, що ілюстрації мають бути гранично зрозумілими. Їм необхідно чіпляти і виділятися з натовпу.

Химерні та абстрактні

Зараз все більше і більше ілюстраторів змішують зображення, текстури, форми та лінії для створення кумедних абстрактних дизайнів. Якщо правильно витримати баланс, це виглядатиме чудово. Не бійтеся експериментувати! Надихайтеся такими гігантами як Google, Facebook, Slack, Asana.

Сфера використання ілюстрацій у мобільних додатках надзвичайно широка

1. Onboarding.
2. Екрани "Дякую" виглядають набагато цікавіше з ілюстраціями. Користувачі неабияк розчулюються, коли після завершеної дії розробники надають їм такого роду смаколики.
3. Стартові екрани кроку процесу.
4. Туторіали, які з'являються вже після запуску програми.
5. Splash - екран завантаження програми.
6. Та й будь-які екрани, де це доречно.

Іконки - інструмент, яким можна задати стиль

Не варто недооцінювати важливість іконок у розробці мобільних додатків. У стилістиці вони відіграють одну з найважливіших ролей.

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

Організація робочого простору в основних редакторах для розробки додатків

У наш час, коли дизайнер малює мобільний додаток у середовищі Photoshop, UI-щики хапаються за голову з криками: "Яяяк? Навіщо?". Тож не дивно, адже цей редактор давно ніхто не використовує під час розробки мобільних додатків.

На зміну звичному фотошопу прийшли векторні редактори Figma, Sketch, XD та інші.

Дизайнери Artjoker всією командою по вуха закохані в Figma. Тому розповімо трохи про розробку мобільних додатків у її середовищі.

Переваги та особливості використання інструменту добре описані у відеоуроках на YouTube і в самій Figma. Ми ж розповімо про організацію робочого простору.

Для того, щоб спростити роботу з великою кількістю макетів і однаковими елементами, розробники Figma подарували своїм користувачам компоненти. Якщо якийсь елемент, наприклад, кнопку, зробити компонентом, то всі її копії будуть повторювати поведінку свого батька. Це дуже зручний і швидкий спосіб разом відкоригувати всі кнопки, змінивши лише батька. З іншого боку, якщо ви задали для копії компонента якийсь текст, то під час редагування компонента, копія дитини зміниться, а текст у ній - ні.

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

Тільки уявіть, замовник раптово просить вас округлити кути у всіх кнопках на тридцяти макетах. Наскільки відрізнятимуться витрати часу при зміні щонайменше тридцяти кнопок або всього однієї?

Але дизайнери на цьому не зупинилися. У середовищі Фігми можна створити окрему сторінку з компонентами і зробити таким чином UI Kit, який автоматизує роботу.

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

Всі макети, GUI, mobile та інші елементи дизайну потрібно організовувати в одному файлі, але на різних сторінках. Радимо зберігати старі версії сторінок, оскільки замовники часто просять повернути щось із минулої версії. Усі старі та драфтові версії, які можуть стати в пригоді, рекомендуємо зберігати на окремій сторінці "Drafts".

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

На першій сторінці можна розмістити логотип компанії, тоді всі продукти буде досить просто розпізнати за лого на сторінці проєктів.

P.S.: За посиланням доступна безкоштовна версія UI Kit, яку розробили й успішно впроваджують у проєкти дизайнери Artjoker. Усі компоненти в ній грамотно налаштовані і є "гумовими".

Навігація

З навігацією в IOS розібратися доволі просто, адже немає ні бургер-меню, ні інших прихованих способів переміщення додатком. До всіх основних сторінок має бути швидкий доступ із нижнього таббара, а елементи навігації - інтуїтивно зрозумілі.

Про деякі елементи навігації ми вже трохи розповіли, але тепер розглянемо їх та інші елементи детальніше.

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

1. Navigation bar. З'являється вгорі додатка і прикріплений до status bar. Залежно від того, на якій сторінці ми перебуваємо, навігаційна панель буде змінюватися. Важливо розміщувати на сторінках першого рівня ієрархії заголовок сторінки, щоб завжди було зрозуміло, де ми знаходимося. На внутрішніх сторінках, крім заголовка, необхідно додати стрілку назад, щоб повернутися на попередній екран. Стрілку можна навіть підписати, щоб крок був ще більш очевидним. На цій панелі також прийнято розміщувати іконки для переміщення на інші внутрішні сторінки. Наприклад, на головній сторінці профілю ми можемо додати в navigation bar іконку settings, щоб був швидкий доступ до сторінки налаштувань.
2. Tab bar. На відміну від Android-додатків, IOS ніколи не ховає свою навігацію в приховане меню. У нижній таббар виносяться основні сторінки додатку - бажано, щоб їх було не більше п'яти. Про характеристики самої панелі та іконок ми розповідали раніше. У нижню навігаційну панель цілком можна додати і кастомні елементи - виділити іконку "+", взявши її в коло, яке буде виходити за рамки панелі (дивіться картинку нижче). Але перш ніж зробити такий варіант, обговоріть із вашим розробником, наскільки це буде затратно за часом. Якщо все-таки потрібно додати більше п'яти іконок, ще раз подумайте, чи можна помістити елемент десь у навігаційній панелі. У крайньому разі, запропонуйте скрол іконок (але це не дуже хороший кейс).
3. Segmented controls - дуже важливий елемент навігації, який дає змогу розділити один екран на кілька. При переході на будь-який із сегментів, користувач залишається в рамках головної сторінки. Найчастіше цю панель розміщують нижче від усіх елементів навігаційної панелі та назви екрана (якщо така є), але буває, що segment controls розміщують у контексті якогось контенту.

Іконка додатку: як не можна і як можна робити

Значок додатку - це унікальне зображення, що додається для кожного мобільного app. Користувачі вперше побачать додаток в App Store і Google Play. На цьому етапі користувач вирішує - чи хоче він дізнатися більше про сервіс. Якщо ні, він прокручує далі. Хороший значок викликає інтерес, забезпечує впевненість, переконує користувача, що додаток може бути корисним. Водночас, погана іконка збиває з пантелику і ставить під сумнів користь/якість сервісу. Коли людина його встановлює, мета значка змінюється - це потрібно враховувати. Тепер він допомагає в пошуку програми на головному екрані, серед інших значків. Але що робить значок "хорошим"?

Хоч значок додатку і частина бренду, він не є логотипом. У цих двох елементів зовсім різні цілі. Проте іноді лого можна використовувати як значок.

Ось кілька порад від дизайнерів Artjoker, про те, як зробити ваш значок сервісу зрозумілим і привабливим

1. Намагайтеся малювати значок по сітці або, хоча б, не виходити за краї сітки.
2. Якщо ви розробляєте нативний дизайн додатку для іменитої компанії, лого якої всім відоме, варто розмістити фірмовий знак, якщо він є, як значок продукту (приклади: Behance, Facebook, Twitter тощо). Якщо лого компанії не передбачає короткої версії, не потрібно розміщувати весь повний обсяг. Краще придумайте простий і зрозумілий знак, що передає суть програми, або композицію у фірмовому стилі.
3. Іконки для IOS за гайдлайнами не передбачають використання тіней, як у Material Design для Android. Тут потрібно повністю орієнтуватися на стиль flat.
4. Розміри іконки додатка для передачі розробникам мають становити 1024х1024 pt.

Якщо ви будете дотримуватися всіх перерахованих вище правил і рекомендацій, ваш продукт буде набагато краще сприйматися, як App Store, так і користувачами.

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