10 дизайнерських прийомів для створення чудових значків програм
Піктограми програм – це перше, на що звертають увагу ваші користувачі, коли вони натрапляють на вашу програму. З мільярдами додатків, які борються за увагу в магазині додатків, піктограма додатка стала важливою ознакою, яка розбиває безлад і залучає користувачів до вашого додатка. Вони справді є першою точкою дотику, з якою стикаються ваші користувачі. Тому вкрай важливо відразу використати цей досвід.
У цій публікації я запропоную кілька дизайнерських прийомів, які допоможуть вам створити круті піктограми додатків, які виділятимуться в магазині додатків і, можливо, виділять вашу програму серед інших конкуруючих за встановлення.
Перш ніж розповісти вам про те, ви повинні розуміти, що основна мета значка додатка — створити негайний зв'язок і створити когнітивні сигнали. Все, що пропонується в цій публікації, принципово стосується досягнення цього.
Ось деякі дизайнерські прийоми для створення чудових піктограм програм
Правило 70%.
Серед дизайнерів існує консенсус щодо використання 70% простору значків для виділення головного об’єкта, пов’язаного з програмою. Об’єктом може бути будь-що, пов’язане з програмою. Якщо ви розробляєте додаток для фотографій, об’єктом може бути фотоапарат або об’єктив. Для гри це може бути обличчя персонажа тощо.
Іншими словами, об'єкт повинен займати більшу частину (70%) площі значка. Ідея полягає в тому, щоб розвинути миттєве пізнання користувачів і змусити їх переходити на сторінку програми для опису. Коли вони переходять на сторінку програми з описом, вам стає набагато простіше залучити користувача.
Однак недостатньо лише збільшити простір для об’єкта. Він також повинен бути вільним від безладу. Лише тоді він зможе з’єднатися та створити швидше пізнання, що підводить нас до наступного пункту.
Зріжте безлад, доки основи не почнуть розвалюватися
Продовжуйте знищувати безлад, доки не почне виявлятися основна ідея об’єкта всередині значка. Іншими словами, зменшіть свою піктограму до точки, де об’єкт на піктограмі стане безглуздим. Вирізайте, доки об’єкт не збереже свою універсальну форму та його впізнає більшість людей.
Наприклад, якщо ви створюєте програму для приховування зображень, ви можете придумати піктограму програми, яка має «ключі та замок» як основний об’єкт. Тепер ви можете видалити тіні чи лічильники та вибрати абсолютно плоску піктограму. Після Після цього ви можете створити мінімалістичний дизайн, повністю граючи з кольорами, щоб створити 3D-ефекти для форми «замок і ключ», яка використовується в піктограмі.
Тупий за блискучим і блискучий за тьмяним
Наступне, що виділяє піктограму програми, це відповідне використання контрасту. Дизайнери часто використовують контраст між об’єктом і фоном значка програми. Якщо ви можете виконати два кроки, згадані вище, ви можете автоматично потрапити сюди.
Створення контрасту також має багато спільного з кольорами. Почніть із попередньо визначеної кольорової палітри у своєму розумі та прокладайте свій шлях. Просто пам’ятайте, що ідея полягає в тому, щоб створити яскравість і контраст між кольором фону та елементами об’єкта. Якщо ви новачок у цьому, ви можете звернутися до кількох дизайнів на Dribbble і завантажити колірні палітри на свій вибір.
Після того, як ви завершите остаточний розріз, ви можете створити 2-3 версії з більш білим або чорним кольорами. Тепер ви можете вибрати той, який підходить вашим очам. Після iOS 7 велика увага приділяється свіжим кольорам із сильнішими відтінками білого.
Не обманюйте себе своїм Big Mac
Після встановлення на пристрої піктограма програми відображається з різною роздільною здатністю. Щоб він виглядав значущим навіть у своєму найменшому аватарі, його потрібно створити, дотримуючись пропорцій. Часто дизайнери працюють над великими екранами Mac, на яких можна продумати навіть найдрібніші деталі. Однак, коли одна і та сама піктограма тестується на смартфоні з різними розмірами піктограм, деталі губляться.
Якщо ви працюєте на Mac і спочатку створюєте магазин додатків іконок, ви можете легко дозволити собі додати деякі дрібні деталі. Але майте на увазі, що найменша піктограма, призначена для меню налаштувань, — це зображення розміром 29×29 пікселів. Більш дрібні деталі, як-от дрібні тексти чи інші символи, на ньому не будуть помітні.
Що вам найкраще зробити, так це пам’ятати про розмір і використовувати основні форми та візерунки, щоб виконати роботу. Прийміть простоту та зосередьтеся на одному об’єкті. Бажано унікальну форму або елемент, який зберігає свої контури та деталі, незважаючи на масштабування. Таким чином, ваша піктограма виглядатиме належним чином у всіх роздільних здатностях, запропонованих інструкціями Apple і Android.
Спробуйте свою піктограму на фоні безлічі шпалер
Користувачі мають різноманітні смаки та вподобання, що відображається у виборі шпалер і тем для їхніх смартфонів. Це означає, що значок вашої програми повинен буде виділятися на тлі безлічі кольорів. Тому завжди доцільно перевірити видимість вашого значка на шпалерах семи основних кольорів. Ви можете збільшити або зменшити насиченість білого/чорного в шпалерах, які ви використовуєте, щоб завершити задовільний тест.
Може бути кілька ситуацій, коли шпалери заважатимуть видимості. Такі шпалери, як селфі, можуть мати нерівномірні кольори та можуть заважати видимості значка. Ви не можете багато чого зробити, але, як я вже сказав, ви можете перевірити їх на сім основних кольорів, щоб почати.
Виберіть абстракцію та зробіть ітерації
Дизайнери страждають від постійної дилеми між абстракцією та реальним зображенням головного об’єкта в значку. З появою плоских піктограм та інтерфейсів користувача вік ваги значно змістився в бік абстракції, але неможливо просто відмовитися від реального зображення об’єкта. Реальні об’єкти або скевоморфні значки все ще популярні в магазині програм, і на це є вагомі причини.
Наприклад, якщо ви створюєте програму для покращення звуку, ви можете намалювати скевоморфний підсилювач на піктограмі програми замість того, щоб зводити його чи робити піктограму лінії. Але враховуючи той факт, що підсилювач не є звичайним товаром, його пізнавальна здатність зменшиться, якщо його сплющити. Для речей, які є відносно поширеними та користуються загальним знайомством серед мас (камера для додатка для фотографій), ви точно можете отримати плоский значок. Однак, якщо додаток пов’язано з чимось незрозумілим, краще зберегти його справжнім або скевоморфним.
Ще один чудовий спосіб досягти гарного дизайну значка — зробити кілька ітерацій зі скевоморфним і плоским. При цьому ви можете пам’ятати про другий момент. Зробіть кілька ітерацій, видаляючи кілька деталей за раз. Складіть їх усі поруч і вирішіть, який із них вам подобається найбільше та чому.
Для ігор визначте персонажа
Створення ігрових піктограм може бути справжньою забавою, оскільки багато творчих речей можна досягти, зробивши одну. У середині цього ви, мабуть, помітили, що в іграх часто є історії та персонажі. Якщо ми дотримуємося правила побудови пізнання з користувачами, то Обличчя персонажів із самої гри можуть зробити чудову роботу. Насправді, це причина, чому обличчя персонажів так часто зустрічаються на значках ігрових програм.
Якщо ви створюєте гру, вам потрібно знайти головного героя або персонажа, який є загальним для всіх рівнів. Завдяки міцному знайомству персонажа з гравцями, персонаж може бути використаний для створення сильного відкликання для гри. І з тієї ж причини він також може стати піктограмою вашої ігрової програми.
Ви можете вибрати колірну палітру та створити піктограму програми навколо них. Відверто кажучи, це стає набагато легше, якщо ви підете на обличчя. Але в той же час вам може знадобитися додати деякі додаткові ефекти, щоб виділити його.
Послідовні колірні палітри та умовні позначення для піктограм та інтерфейсу користувача
Інтерфейс програми матиме певну тему та використання певних кольорів. Найкраще використовувати ті самі кольори для оформлення значка. Ви також можете зробити те саме з певними елементами, які ви реалізували в інтерфейсі користувача, і використовувати їх у піктограмі. Це зробить ваш дизайн більш однорідним і допоможе користувачам краще запам’ятати вашу програму.
Креативність рятує ситуацію
Запустіть пошук «додатків для справ» у Google Play, і ви натрапите на сітку, повну галочок. Так, більшість розробників програм із справами могли придумати лише галочку як піктограму своєї програми – звичайну піктограму для справ. Однак посеред цього шуму значок Evernote зручно виділяється.
Результати пошуку за терміном «робити програми». Зверніть увагу, що значок Evernote виділяється серед інших.
Ідея ікони походить від того, що слон ніколи не забуває. Він поєднується з блискучим виконанням складеного вуха слона, яке позначає блокнот. Це одразу відрізняє Evernote від інших додатків із справами в магазині та забезпечує ефективне пізнання.
Ще один приклад чудового дизайну значків можна віднести до Pocket. Почнемо з того, що ідея програми унікальна. Хоча додавання закладок існувало протягом тривалого часу, воно не могло змусити користувачів повернутися до читання вмісту, який вони зберегли.
З іншого боку, Pocket використовував мініатюри для створення чіткої візуальної пам’яті. Додаток викликає емоцію «зберегти цей вміст», і це чітко та розумно зображено на самому значку. Червона фігура означає «кишеню», тоді як стрілка вниз зображує «завантаження», без сумніву.
Не використовуйте фотографії чи зображення
Крім згаданих вище вказівок, ви також можете уникнути прямого використання фотографій і зображень у піктограмі програми. Навіть якщо ви посилаєтеся на фотографію, ви повинні створити власні вектори в Illustrator або Photoshop. Тільки тоді він буде виглядати автентично і матиме магнетичний ефект.
Це може звучати як кліше, але ваш дизайн повинен бути чистим. Я вже згадував про змішування білого або чорного до кольорів, щоб отримати ідеальний колірний тон, який вам потрібен. Це дуже зручно, щоб розчистити піктограму. Якщо деякі кольори зробити яскравішими або навпаки, загальний рівень шуму в різних випадках знижується.
Піктограми додатків мають бути схожими на популярні пісні, які будь-хто зможе впізнати, а наведені нижче прийоми дизайну допоможуть вам створити чудову іконку додатка. Сподіваюся, ці бали були для вас цінними. Якщо у вас є що додати або запропонувати, залишайте свої коментарі нижче.