Загальні принципи створення мобільних додатків для початківця UX/UI-дизайнера



Привіт! Після попередніх моїх постів мені часто писали хлопці, які починають вивчати тему UI/UX. Це так класно, дякую вам! І в цій статті я ділюся принципами, які будуть цікаві і корисні новачку.


Навчання (Onboarding)
Починати знайомство з додатком через onboarding — добре. Для чого це потрібно? Коли користувач завантажує додаток, він «приблизно» уявляє собі функціонал. При старті зручно показати основні функції програми, щоб користувач не плутався і почав ним користуватися.

Ще вони потрібні, коли виходить класне оновлення в додатку, і гріх його не виділити.


Яндекс.Транспорт розповідає про нові можливості.

Середня кількість слайдів 3-4, більше читати нецікаво.



Методичні рекомендації (guidelines)
iOS, Чоловічий, <a href=«dev.windows.com/ru-ru/design/design-basics>Windows — у кожної осі є своя «модель поведінки», тобто всі користувальницькі сценарії часто відрізняються один від одного, щоб краще розуміти логіку кожної платформи, необхідно дивитися гайди та додатки на пристрої.

Наприклад, в iOS основне меню знаходиться знизу Tab bar, а в Android — це бічне меню.



Приклад відображення екрану на iOS і Android.

Отже, перш ніж робити додаток одній компанії, варто подивитися, як воно реалізовано в інших.

Шрифт (iOS)
9-а операційна система підтримується не на всіх пристроях, тобто малюючи макети для iPhone 6, використовуючи шрифт SF, необхідно розуміти, що у деяких користувачів буде стара добра гельветика. (Це нестрашно, хіба що, може перешкодити в максимальному значенні символів в одному рядку)



В принципі, різниця не дратує, а комусь і зовсім не видно.

Елементи (iOS)
Використовувати прилипає кнопку в дизайні не варто. Це пов'язано з тим, що вона добре виглядає на продуманому (промальованому) макеті, але на інших екранах перекриває більшу частину разом з клавіатурою. Тут є два виходи:

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



Один екран на різних дозволах.

Nothing
Краса в деталях. Особливо приємно, коли в додатку продумані всі дрібниці: що робити, якщо вмісту поки немає? Не завантажився? Завантажилася частина? Відвалився інтернет? Все це необхідно промалювати і віддати розробнику, інакше він все зробить за вас.

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

Шрифт (android)

Нещодавно я зіткнулася з тим, що в Аndroid кожна компанія визначає свій шрифт, тобто може скластися така ситуація, що у моделі немає шрифту roboto. Або користувач встановив свій шрифт в смартфоні (рукописний чи ін.). Що робити в цьому випадку? Ідеальна картина на nexus, це дуже маленький відсоток, щоб орієнтуватися лише на нього.



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



А ще можна зустріти ось такі баги.

Елементи (Android)
Тут ситуація ще цікавіша, ніж iOS. Розмірів смартфонів навіть в одній гілці (XH, наприклад) багато, і зробити на всіх пристроях ідеально неможливо. Але може допомогти вироблення принципу відображення елементів. Як варіант, з'ясувати для себе, що відображення функцій на екрані девайса 2:1 і передати цю інформацію розробнику.



Тут варто не забувати опрацювати момент з клавіатурою і набором тексту.

Будь ласка, любите деталі!

Ви знали, що клавіатуру в iOS по-доброму не можна згортати, якщо вона з'являється за замовчуванням в Android можна? І тоді залишається порожнє, пусте простір.

Якщо у вас залишились запитання або ви вважаєте інакше, то я буду рада поспілкуватися з вами! І спасибі вам за ваші коментарі!
Мій e-mail: le.ktrna@gmail.com

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.