Разрабатывая иконки для Android

[pullquote align=right]
Майкл Фларап, дизайнер Appicontemplate.com, поделился тем, как создавать самые лучшие иконки для Android
[/pullquote]

В конце прошлого года Google представил новые гайдлайны для иконок Android Launcher или, как они еще называются, Product Icons. Это очень хорошая документация для направления дизайнеров по пути унифицированного визуального языка и, возможно, лучшее, что происходило с иконками на Android. Поэтому, конечно, мой новый шаблон иконок несколько запоздал. Вы можете сразу скачать PSD или почитать побольше об основных отличиях новых «продуктовых» иконок.

Ограничения ­ это естественно при работе с иконками, и в течение многих лет иконки на Android существовали без правил. На iOS мы все ограничены скруглением, там нет прозрачности, дизайнеры находятся в более строгих рамках. Если вы когда-нибудь разрабатывали иконки для любой версии Android, вы знаете, что можно делать практически что угодно с этими 512*512 пикселями. В Google Play можно найти любые формы, эффекты, там нет ограничений на альфа­канал. Было сделано несколько попыток установить стандартные размеры и формы на прозрачных холстах, но Google сам изменял решения не по одному разу. Так что свобода ­ это хорошо, правда? Но не когда вы смотрите на это с точки зрения пользовательских впечатлений. Подобные друг другу иконки формируют намного более удобную, читаемую и надежную ОС. Google об этом знает и предпринимает гигантские шаги по приведению в порядок всей этой системы приложений сторонних разработчиков при помощи хорошо документированных руководств по дизайну. Иконки теперь стали частью этих усилий, а обновленным шаблоном я надеюсь облегчить вам движение по этому пути.

Так как эти гайдлайны помогают разработчикам унифицировать дизайн иконок? Они состоят из нескольких указаний по разным аспектам. Я не буду пытаться перефразировать существующие (и отличные) материалы самих гайдлайнов, а собираюсь сфокусироваться на нескольких вещах, с которыми вам поможет мой шаблон. Когда вы закончите читать, вы поймете основные концепты, которые составляют дизайн иконки приложения и как этот шаблон вам в этом поможет.

Сетка и направляющие

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

Вы не должны строго придерживаться только этих форм, но это отличное начало и, возможно, послужит мощнейшим источником единообразия иконок. Построение из этих элементов сделает вашу иконку легитимной. Она естественным образом будет сочетаться с другими иконками, которые соблюдают сетку, и даст ощущение согласованности. Как описано выше, и преимуществом, и недостатком приложения на Android является возможность создавать уникальные силуэты ­ то, что недоступно на iOS. Это преимущество, потому что дизайнер меньше загнан в рамки, что позволяет ему обратить внимание на его приложение. Это слабость, потому что открывает дверь визуальной фрагментации. Сетка и направляющие ­ — попытка Google сочетать эти две крайности. Прозрачность все еще ок, и вы все еще можете делать, что хотите, но есть руководство и стандартные формы сделают ваше приложение частью единой вселенной.

Свет и цвет

Ядро визуального материала ­ тактильность и физичность. Для описания света Google использует аналогию с нарезанной, согнутой и освещенной бумагой.

Материал ­ жесткий, с четкими краями и сгибами. Матирование сочетается с легким проникающим светом и устойчивыми тенями.

Отсюда рождается в целом предсказуемый паттерн света; небольшие легкие тени прямо под компонентами, за которыми идет известная ныне “длинная тень”. Обычно используется градиент в 45 градусов от черного к полупрозрачному черному с 20-­40 ­процентной непрозрачностью. Все эти стили слоев вы можете найти внутри шаблона, так что вы сможете сделать собственные тени.

Цветовая схема хорошо организована, и вам не надо долго смотреть на презентации палитр для того, чтобы оценить, какая была проделана работа при отборе. Шаблон иконки связан с 28 базовыми цветами, 5 теневыми цветами и белым для оттенения.

Выше вы видите предлагаемые цвета для иконки продукта на Android.

Верхние и нижние края материального элемента дают ощущение глубины и поверхности.

Края материала ­ 1 dp толщиной и 20­процентный прозрачный полутон (сверху) или тень (снизу). Цветовая схема диктует, какие полутона и тени подходят определенным группам цветов. Все они связаны в шаблоне как отдельные маски слоев, которые можно включить и отключить для простоты эксперимента.

Большинство иконок используют очень легкий финиш ­ источник света под 45 градусов. Он идет из левого верхнего угла к внешним краям формы иконки. Это дается как один клипированный слой в шаблоне.

Геометрия и анатомия

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

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

1. Финиш
2. Материальный задний план
3. Материальный передний план
4. Цвет
5. Тень

Стоит познакомиться с этими элементами, и у Google все очень четко прописано в гайдах.

Намного больше описано в официальных гайдлайнах, и я предлагаю использовать их перед созданием своего шедевра. Google выполнил свою домашнюю работу и выпустил документ дизайна, который устанавливает правила для более понятной среды иконок для платформы. Шаблон PSD, который я вам дал, объясняет базу, на которой легче строить добавленную стоимость; умное масштабирование объектов, превью среды и экспорт всех размеров в один клик. Старый шаблон давно пора было обновить и, надеюсь, это поможет авторам иконок для Android начать производить маленькие сверкающие брильянты под строгим присмотром гайдлайнов Google.