«Жмёшь на кнопочку — и происходит чудо!»

02 марта 2015

Это сказал об иконке один хороший клиент, а мы подумали и согласились.

Прежде всего в ней — вся суть продукта в одном простом изображении. Обычному пользователю тяжело оценить её важность. Для него срабатывает вау-эффект. Если иконка пользователю нравится, он просто по ней кликнет и начнёт загрузку. Ради этого действия дизайнер трудился не один день. Его задача — выделить одно приложение в списке среди сотен других так, чтобы на этом продукте остановили взгляд.

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

В этой статье мы расскажем о всех подводных камнях создания иконок и попутно рассмотрим новые требования к иконкам для приложений на iOS 8 и Android Lollipop.

С чего начинается иконка?

Иконка начинается с общей идеи приложения и множества версий, как эту идею передать в соответствии со следующими параметрами:

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

Ожидания пользователя

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

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

На иконке приложения брендов чаще всего изображён логотип компании (продукта, торговой марки) или его часть. Как правило, эти иконки лаконичные и утончённые.

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

Тенденции

Минимализм — больше, чем тенденция. Для иконки это необходимость. Дело в том, что физический размер иконки (то есть как видим на экране) очень маленький. Рисовать целые картины неоправданно — это больше творческие амбиции дизайнера, чем соблюдение пользовательских потребностей. Поэтому мы сторонники максимально простых и при этом оригинальных дизайнерских решений.

На упрощение иконок также повлиял flat design. В иконках он особенный лаконичными логотипами или знаками, которые отбрасывают прямую тень (flat shadow icon). Объём, градиенты и лишний смысл уже не актуальны, потому что усложняют восприятие интерфейса самой операционной системы. Плоский дизайн иконок ненативных (сделанных сторонними разработчиками) приложений отлично вписывается в экосистему iOS, начиная с 7 версии, в Android — c релиза 4.4 Kit Kat.

Android пятого поколения радикально изменил дизайн интерфейса. Новая философия Google — дизайн как реально осязаемый объект. Следовательно, в Android Lollipop иконки стали осязаемыми, то есть такими, которые визуально соответствуют тактильным и физическим качествам материала.

Изучаем матчасть

Существуют гайдлайны производителей операционных систем по дизайну иконок. Игнорировать их нельзя, потому что приложение не будет допущено в мобильный маркет. И в AppStore, и в Play Market иконку приложения обязательно проверят на пригодность по стандартам производителей.

Некоторые особенности иконок iOS 8

У иконок iOS имеются спецификации, по которым Apple рекомендует их создавать.
Иконки iOS имеют вид скруглённых прямоугольников. Этим они создают общую гармоничность в экосистеме платформы. Для иконок операционной системы iOS разработана размерная сетка, которая информирует дизайнера, как размещать элементы на иконке. С выходом iOS 8 размерных сеток стало больше.

iOS-8-icon-template

Основные рекомендации разработчикам и дизайнерам от Apple:

  • использовать универсальные образы, которые люди смогут
  • узнавать;
  • 1 иконка = 1 объект, которые передаёт суть приложения;
  • умеренно использовать прозрачность и соблюдать края иконки.

Изображение должно

  • иметь все углы по 90 градусов;
  • не иметь блеска;
  • не использовать альфа-прозрачность.

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

«Материальные» иконки Android Lollipop

С появлением «материальной» философии для иконок Android появились специальные требования по дизайну.

В первую очередь, это — размерная сетка и рекомендованные геометрические формы для иконки. Google требует правильной геометрии для иконок приложения:

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

Повороты или искажения иконки исключены. Все материальные объекты следует располагать строго по центру.

И даже уголок папки только справа! Уголок влево делать нельзя. Вряд ли дизайнерам Google не понравились уголки слева. Это требование исключает разнородность иконок в общем списке системы.

 

Анатомия иконки для Android

Все элементы изображения послойные: располагаются один за другим. Послойность выделяется тенями и создает ощущение глубины. Анатомия иконки — рекомендации по наложению элементов в иконке приложения.

1. Отделка
2. Фон
3. Передний план
4. Цвет
5. Тень

В анатомии чётко прописаны даже параметры наложения теней и цвета цветных элементов, света, градиентов и оформления контура.

Размер имеет значение

Для иконки предусмотрено несколько разрешений (ширина х высота картинки в пикселях) изображения:

  • изображения для маркета,
  • иконка запуска в приложении.

Очень большие и очень маленькие разрешения иконки рисуются с нуля, потому что чрезмерное увеличение или уменьшение при масштабировании даёт неожиданный результат. Например, если сильно уменьшить файл с разрешением 1024х1024 пикселей, то изображение станет неразборчивым.

У iOS с размерами иконок полная ясность и порядок. Причина этому — уникальная линейка мобильных устройств от Apple с iOS на борту. Размеры иконки приложения чётко установлены.

Дублируем их ещё и здесь:

 

Кстати, все эти параметры — для квадратных иконок. iOS округляет их самостоятельно и «подставит» файл нужного размера.

Для иконок Android картина совершенно иная. Эта платформа имеет более 18 тысяч видов устройств! И несколько разрешений экранов:

  • mdpi – 160 dpi;
  • hdpi – 240 dpi;
  • xhdpi – 320 dpi;
  • xxhdpi – 480 dpi;
  • xxxhdpi – 640 dpi.

Таблицу под такое не нарисуешь. Фрагментация Android затрудняет создание приложений и иконок для них. Выход — универсальные единицы измерения, которые способствуют созданию иконок и приложений для максимально хорошего отображения на экране.

ppi (Pixels per inch) Кол-во пикселей в дюйме

dpi (Dots per inch) Кол-во полутоновых точек в дюйме (полутоновая точка больше 1 пикселя)

lpi (Lines per inch) Кол-во линий в дюйме

pt (Points) Кол-во физических пикселей в экране

dp (Density independent pixels)  Кол-во пикселей, независимых от плотности. В 1 физическом (реальном) пикселе — 160 dpi

 

Иконка приложения для маркета у Android — 512 х 512 пикселей, а для запуска — 48 х 48 dpi.

Как видите, иконки требуют особого подхода. Почти как картина маслом. Как создать иконку и не сойти с ума от всей этой информации? Сами в шоке. Тем не менее, у нас получается:)