пятница, 7 октября 2011 г.

Руководство по дизайну иконок запуска приложений для OS ANDROID


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


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

Иконка приложения в андроид маркете
Если вы публикуете приложения в маркете, вы также должны предоставить иконку 512x512 пикселей в консоли разработчика, которая будет отображаться на время загрузки приложения. Эта иконка будет использоваться в различных местах в маркете, но она не заменяет иконку запуска.
Для получения спецификации графики для в Android Market, см.статью:


Android 2.0 и более поздние версии
Начиная с Android 2.0, иконки запуска должны быть фронтальными, а не в перспективе на три четверти. Дальше идут рекомендации для дизайна иконок запуска для Android 2.0 (API уровень 5) и более поздних версий.

Стиль
Иконка запуска, создаваемая ваши, должна следовать общим принципам стиля изложенного ниже. Это необязательные указания для ограничения вашей фантазии, а скорее общие подходы для гармонии иконки запуска с другими. На рисунке 1 приводятся примеры иконок для запуска.

Рисунок 1. Иконки запуска для разных приложений Андроида

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

Простой и знаковый:
Иконки запуска андроида имеют карикатурный характер, иконки должны быть сильно упрощенны и преувеличенны, потому что они должны быть хорошо узнаваемы при малых размерах, при этом они не должны быть слишком сложными.
Попробуйте использовать одну часть приложения, как его символическое или схематическое представление (например, значек для плеера в виде динамика).
Попробуйте использовать естественные очертания и формы, как геометрические и органические, с реалистичным (но не фотореалистичным) рендерингом.
Ваши иконки не должны быть каким-то обрезанным изображением приложения.

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

Фронтальность и подсветка сверху:
Нововведение в андроиде версии 2.0 (и оно будет сохранятся для следующих версий): иконка запуска должна быть фронтальной, камера должна быть недалеко от неё и она должна иметь подсветку сверху.
Примечание: Android подписывает иконку запуска текстом – названием приложения на специальной этикетке под ней, поэтому вам следует избегать использование текста в иконке, а вместо этого сосредотачивать силы на проектировании легкозапоминаемой иконки.

Размер и положение
Иконки запуска должна быть колоритной, свежей и оригинальной, легко масштабируемой, чтобы она смотрелась так же увесисто, как и другие иконки приложений.
Рисунки ниже иллюстрируют различные способы позиционирования непосредственно иконки внутри всей области отведенной под неё. Необходимо задавать размеры иконок меньше, чем фактические границы самого поля отведенного под него,  для того чтобы иконка имела визуальный вес и не сливалась с другими и чтобы было место для теней.
Если ваша иконка квадратная или почти квадратная, она должна быть отмасштабирована.
Для того чтобы задать, рекомендуемый размер для иконки, каждый пример на рисунках снизу, включает в себя три прямоугольника разного цвета, обозначающие:
  • Красный,- все поле иконки;
  • Синий, обозначает границы фактического значка, он меньше, чем все поле(красный прямоугольник), т.к. это обеспечивает бордюр для теней и спецэффектов.
  • Поле ограниченное оранжевым прямоугольником рекомендуется использовать для квадратного значка, оно меньше для того чтобы колоритность иконки не закрывала остальные.
Иконка запуска для экранов с высоким разрешением (hdpi) :
Полный размер: 72 х 72 пикселей;
Фактический размер иконки: 60 ​​х 60 пикселей;
Размер квадратной иконки: 56 х 56 пикселей.
Иконка запуска для экранов с среднем разрешением (mdpi) :
Полный размер: 48 х 48 пикселей;
Фактический размер иконки: 40 х 40 пикселей;
Размер квадратной иконки: 38 х 38 пикселей.

Иконка запуска для экранов с низким разрешением (ldpi) :
Полный размер: 36 х 36 пикселей;
Фактический размер иконки: 30 х 30 пикселей;
Размер квадратной иконки: 28 х 28 пикселей.

Материалы и цвета
Иконки запуска должны использовать тактильные, подсвеченные сверху и текстурированые материалы. Даже если ваша иконка простой формы, вы должны попытаться сделать так, чтобы сделать его похожим на некоторую скульптуру из реальных материалов.
Иконки запуска андроид приложений обычно состоят из некоторого маленького объекта переходящего в большое основание и комбинации одного нейтрального цвета и одно из основных цветов. Иконки могут использовать сочетания нейтральных цветов, но при этом они должны быть контрастными и кроме этого иконки не должны использовать более одного основного цвета в иконке, если это возможно.
Иконки запуска должны использовать ограниченную цветовую палитру, которая включает в себя ряд нейтральных и основных цветов, при этом они не должны быть слишком насыщенным.
Рекомендуемая цветовая палитры показана на рисунке 3. Вы можете использовать элементы палитры как для основного цвета так и для цветов выделения. Вы можете использовать цвета палитры в сочетании с наложенным на них линейным градиентом белого-к-черному снизу вверх. Это создаст впечатление, что иконка подсвечена сверху и сделает меньшую насыщенность цветов.
Рисунок 3. Рекомендуемая цветовая палитра для икон.

При объединении материалов из рисунка 4 с цветами из палитры выше, вы можете создавать комбинации материалов, например таких, какие показаны на рисунке 5. Для удобства, архив шаблонов содержит файл формата Photoshop с имем (ic_launcher_template / example_materials.psd), который в свою очередь содержит базовый набор материалов, цветов и градиентов.

Рисунок 4. Пример материалов, которые можно использовать для создания иконок.

Рисунок 5. Примеры сочетаний базовых цветов из рекомендованной палитры и материалов
Эффекты
Иконки запуска должны быть плоскими с фронтальной перспективой, а не располагаться под углом. Тени должны использоваться чтобы создать ощущение глубины. Иконка запуска может содержать разные текстуры и эффекты освещения, но основное освещение должен быть прямо сверху.
В целях обеспечения общей стилистики, все иконки запуска приложения должны использовать тот же самый эффект тени, какой показан на рисунке 6.
Рисунок 6. Стиль, свет и эффекты для иконки запуска.
Примечание: все размеры в пикселях для средних разрешений экранов, они должны быть изменены для других разрешений экранов соответственно.
На рисунке 6 цифрами обозначенно:
1.
Освещение:
сверху, освещая детали иконки
2.
Тень:
Цвет #000000 , 75% непрозрачности под уголом 90 ° с расстоянием в 1px
и размером 3px
3.
Текстура:
Тактильная, чтобы было ощущение как будто использованы реальные материалы (монохромый шум, например в этом примере изображения)
Как надо и как не надо поступать
Ниже приведены несколько примеров, как надо и как ни надо делать, которые следует учитывать при создании иконок запуска для вашего приложения.
Иконка запуска приложения
Современная, минимальная, матовая,       тактильная, текстурированная,  
обращенная вперед, подсвечена сверху, целая, ограниченая в цветовой палитре.
Иконка запуска приложения
не античная, не чрезмерно сложная, не блестящая, не   плоское векторное изображение, не перенасыщенная, не обрезанная и неповернутая.




Рисунок 7. Примеры “правильных” и “неправильных” иконок запуска приложений в Андроиде
Пример иконки запуска
Ниже приведены примеры иконок запуска для высокого разрешения, которые используются в Андроиде. Иконки предоставляются только для примера,- пожалуйста, не используйте эти иконки в ваших приложениях.

Комментариев нет:

Отправить комментарий