14 січня 2022 р.

14 порад щодо дизайну іконок для мобільних додатків, яких слід дотримуватися

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

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

Тому візьміть до уваги такі поради щодо створення дизайну іконки для додатка:

1. Дотримуйтесь вимог керівництв

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

Ось керівництва, з яких варто почати:

1. Офіційний вебсайт Android Material Design. Тут можна прочитати про стиль, анімацію, компоненти, патерни, макети і юзабіліті, а також завантажити матеріали на допомогу дизайнеру.
2. Посібники з iOS Human Interface від Apple стануть у пригоді, якщо ви хочете створити іконку для iPad або iPhone.

Вивчивши тенденції та стандарти, дотримання яких від вас очікує виробник ОС, можна переходити до наступного кроку.

2. Знайте свою аудиторію

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

3. Створюйте іконку потрібного розміру

Те, що має гарний вигляд, займаючи аркуш A4, не обов'язково "вистрілить" у розмірі 120 x 120 пікселів. Професійний дизайн іконки має це враховувати.

4. Спрощуйте і не перевантажуйте іконку зайвими деталями

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

5. Правильно використовуйте світло і тіні

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

6. Перевірте, який вигляд має іконка на тлі іншого кольору (темному, світлому, кольоровому)

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

7. Не бійтеся використовувати перспективу

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

8. Створіть цікаву форму

Іконки нижче запам'ятовуються завдяки використаним на них формам:

Форма допомагає розпізнати іконку навіть якщо вона дуже маленького розміру.

9. Відповідально підійдіть до кольору

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

10. Не використовуйте фотографії

Існують фотореалістичні іконки, але використання фотографій - це табу.

11. Створюйте іконки додатків без зайвого тексту

Дрібний текст важко читати, і його використання створить проблеми в разі локалізації, якщо, наприклад, застосунок вийде для китайського ринку. При цьому ви можете використовувати перші одну-дві літери з назви компанії, як це роблять Tumblr або Pinterest:

12. Не використовуйте на іконці елементи з інтерфейсу програми

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

13. Створюйте іконки, які розказують про головну функцію програми

З хорошою іконкою користувачеві навіть не доведеться зазирати в опис: для плеєрів зазвичай використовують ноти, інструменти або візуалайзер, для камер - зображення фотоапарата або об'єктива, а для месенджерів на кшталт Viber - хмаринки повідомлень:

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

14. Вивчіть іконки конкурентів

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

А ось іконка, яку ми створили для застосунку KeepSnap орієнтованого на фотографів:

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

Зміна іконки - це теж не жарти. Наприклад, власникам Radium, застосунку-агрегатора радіостанцій, довелося змінювати іконку кілька разів за місяць, бо вона не припала до смаку користувачам.

Наш досвід

MeinFernbus

MeinFernbus є провідним постачальником послуг пасажирських автобусних перевезень у Німеччині. У 2015 році компанія потрапила в заголовки газет, оголосивши про злиття з іншою компанією, тим самим зміцнивши свою позицію провідного гравця на ринку пасажирських перевезень Німеччини. Наразі MeinFernbus працює у 20 європейських країнах, пропонуючи широку мережу з 100 000 різних маршрутів. Компанія контролює різні важливі аспекти, включаючи узгодженість бренду, планування мережі, ціноутворення, маркетинг, продажі, дистрибуцію, управління перевезеннями та обслуговування клієнтів. Тим часом, регіональні автобусні компанії працюють над підвищенням ефективності завдяки невпинному дотриманню стандартів якості та безпеки.

BBGO

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

• Зручний домашній екран з вибраними адресами.
• Спрощений вибір категорій автомобілів з фіксованими цінами.
• Прозоре та безпомилкове підтвердження обраного автомобіля.
• Інтуїтивно зрозумілу систему відгуків після поїздки.

Висновок

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

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