Connect with us

Дизайн и прототипирование

Дизайн иконок мобильных приложений: 3 правила

UXPUB перевел статью Ивана Тучкова о дизайне иконок и важных особенностях, которые стоит учитывать при их создании.

AppTractor

Опубликовано

/

     
     

Дизайн иконок всегда был сложным, и когда я впервые столкнулся с проблемой рисования иконки приложения, у меня возникло много вопросов – ответы на некоторые из них я нашел только после первых нескольких завершенных проектов. Теперь, я, как дизайнер в агентстве по разработке приложений хочу поделиться тем, что заняло у меня времени и энергии, для понимания.

Давайте начнем:

  • Почему каждому приложению нужен значок
  • Важность масштабируемости
  • Как сделать дизайн простым и интересным
  • Поддержание согласованности между устройствами
  • Соответствие рекомендациям iOS и Android
  • Почему каждому приложению нужен значок

Почему каждому приложению нужна иконка

Иконка приложения – это уникальное изображение, обязательное для каждого мобильного приложения, это первое, что пользователи видят, когда они находят приложение в Apple App Store и Google Play.

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

Плохая иконка делает в два раза больше, но наоборот. Это сбивает с толку и ставит под сомнение пользу приложения.

Однако, как только пользователь устанавливает приложение, цель значка меняется. Теперь он помогает в поиске приложения на главном экране среди других значков.

Но что же делает иконку приложения «хорошей»?

Дизайн иконок: 3 правила оформления

Давайте разберемся с этим понятием: значок приложения ≠ логотип.

Если вы хотите узнать, как создать хороший логотип, существует множество различных идей, и большинство из них основаны хотя бы частично на принципах дизайна бренда Пола Рэнда. И это не удивительно! Значок приложения является частью фирменного стиля, и между значками и логотипами часто происходит преднамеренное наложение. Тем не менее, я не могу на этом сильно настаивать: они не одинаковы.

Логотип и значок приложения имеют разные цели, и хотя это не означает, что логотип не может пересекаться со значком, необходимо учитывать их отдельные цели.

Теперь, когда с этим вопросом разобрались, вот четыре вещи, которые вы должны сделать в рамках процесса создания иконок.

1. Масштабируемость

Размер значков не отличается гибкостью – они бывают крошечными и миниатюрными, их нельзя растянуть или изменить. Это означает, что удобочитаемость является первым приоритетом для значков приложений. Вы заметите, что значки не появляются только на главной странице, они также появляются в подменю с еще более уменьшенным размером.

Дизайн иконок

Значки приложений в настройках iOS и Android

Пользователи не должны напрягаться, напрягать глаза, пытаясь уловить задумку дизайнера. Тестирование здесь на всех типах устройств является ключевым (для этого мы используем Appsparky); хотя потеря деталей неизбежна, идея всегда должна быть ясной.

Дизайн иконок

Вот хороший пример того, как российский модный ритейлер Lamoda упростил свой логотип для приложения

И это подводит нас ко второму рассмотрению дизайна иконок приложений …

2. Узнаваемость

Здесь приложения и логотипы перекрываются.

В Messapps мы советуем, что для узнаваемости простота является ключевой – и это не означает скучно.

Смотри, разве эти значки не детализированы?

Дизайн иконок

Hello Neighbor, Tiny wings, Prune, Pandora Music, Silly Sausage in Meat Land, Old Man’s Journey

Простота в данном случае, означает, что нужно сосредоточиться на идее и избавиться от любых ненужных или повторяющихся элементов. Каждый пиксель должен помочь пользователю понять и заинтересоваться большой идеей.

Мы, в Messapps, постоянно работаем над созданием дизайнов, чтобы клиенты могли быть действительно поражены результатами. Эта работа включает в себя изменение концепций и идей, которые мы внедряем в дизайн – и это то, что мы сделали с приложением Mentissana.

Дизайн иконок

С Mentissana мы работали над несколькими вариантами дизайна, пока не пришли к окончательному значку приложения

Ключевым моментом в узнаваемости является дифференциация: уникальность приложения.

Почти два миллиона приложений в App Store и 2,1 миллиона в Google Play. Это два миллиона значков приложений, и все они борются за внимание. Крупные бренды могут использовать свои логотипы, чтобы привлечь внимание, но что делают менее известные приложения?

Покажите что-то новое и необычное!

Todoist использует стандарт для менеджеров задач «галочка», но в интересной композиции

Чтобы убедиться, что ваш значок выделяется, потратьте немного времени на просмотр приложений в вашей нише.

Если большинство значков, которые вы видите, красочные, попробуйте использовать монохромную палитру. Если на одном изображении много изображений, покажите что-то другое.

Всегда ищите свой персональный способ решения проблем!

Трудно придумать что-то новое. Создайте доски настроения, создайте карты разума, попросите совета у друзей и коллег. Вы никогда не знаете, где вы найдете отличную идею.

3. Согласованность

Значок является частью приложения, и брендинг должен оставаться согласованным между ними. Значок должен описывать приложение и показывать его основные функции. Это особенно важно для игр, где приложение может получить миллион загрузок только из-за одной игровой механики.
Jazz Smash показывает основной игровой элемент в значке приложения. В игре вы разбиваете разные предметы битой.

Иконка JazzSmash, объясняющая особенности игры с первого взгляда

Значок Slack является отличным примером соответствия между значком и интерфейсом

Не используйте скриншоты и элементы интерфейса при создании значка – это может ввести пользователя в заблуждение. Вместо этого ознакомьтесь с функциональностью приложения и придерживайтесь того же стиля и цветов, что и само приложение. И рекомендации могут помочь вам достичь этого!

Соответствие рекомендациям по дизайну иконок

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

Руководство по iOS здесь.

Правила для Android здесь.

Это не значит, что вам нужно рисовать различные значки приложений; на самом деле, существенные различия уменьшат узнаваемость приложения.

Вместо тысячи слов…

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

Есть также многочисленные курсы и ресурсы, которые мы используем и следуем в нашей команде, и мы хотим поделиться некоторыми из них с вами:

Я рекомендую ознакомиться с примерами из UX Planet – 10 случаев, которые показывают, как значок приложения влияет на коэффициент конверсии приложения, также там обсуждают как маркетинг приложений, так и дизайн иконок приложений. При работе над концепциями значков приложений мы ежедневно используем iOS Icon Gallery.

Самый важный совет, который я могу дать, это то, что вы никогда не должны забывать о самом приложении! В конце концов, для удаления приложения требуется всего несколько нажатий. Независимо от того, насколько крут ваш значок, если приложение бесполезно, пользователь его удалит.

Источник: The 3 rules of mobile app icon design

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.