Как создать иконки для приложений на Android и iOS
Иконка приложения для Android
1. Разрешение экранов устройств
Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.
Графика и разметка в приложениях измеряются в единицах — DPI (количество точек на дюйм).
2. Категории DPI
- Low DPI (LDPI) = 120DPI
- Medium DPI (MDPI) = 160DPI
- High DPI (HDPI) = 240DPI (Nexus S, SGS2)
- Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
- Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4)
Размер и формат иконок запуска приложения (launcher icon) для Android
Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.
Главное:
Иконка запуска приложения должна быть 32-битной, в формате PNGs с альфа-каналом (с прозрачным фоном).
Базовый размер — 48dp, с краями 1dp — для низкого разрешения. Чем выше плотность пикселей экрана (DPI), тем больше отображается деталей. Для остальных разрешений нужно увеличить масштаб на 400% 192 x 192 dp (с краями 4dp).
Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.
MDPI (160dpi) базовый размер |
HDPI (240dpi) 1,5x |
XHDPI (320dpi) 2x |
XXHDPI (480dpi) 3x |
XXXHDPI (640dpi) 4x |
|
Иконка |
48px |
72px |
|
144px |
192px |
Вы, конечно, помните: любое масштабирование должно сохранять пропорции изображения.
Иконки приложения для публикации на Google Play
Иконка приложения для публикации в Google Play должна быть 512 x 512 пикселей, с высоким разрешением.
Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.
Раздел “Рекомендуемые”
В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения.
Требования к иконке в разделе «Рекомендуемые» :
- JPEG или 24-битный PNG (без альфа-канала)
- 1024 х 500 пикселей
Расположение
Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».
Советы
- Не размещайте важную информацию по краям, особенно в нижней трети рамки.
- Логотип поместите по центру, выровняйте по горизонтали и вертикали.
- Для текста используйте крупный шрифт.
- Помните, что картинка может показываться отдельно, без иконки приложения.
Цели иконки приложения
У иконки приложения есть 3 основных цели:
- Продвижение бренда, рассказ о цели приложения.
- Помощь пользователю в поиске приложения в Google Play.
- Функция запуска.
Продвижение бренда
Создайте уникальную и незабываемую иконку. Используйте цветовую схему Вашего бренда. Не пытайтесь рассказать слишком много с помощью иконки. Простой значок производит лучшее впечатление. Не включайте название приложения в иконку — название будет всегда показываться рядом с иконкой.
Образцы иконок приложений.
Помогите пользователю найти приложение в Google Play
Иконка должна привлекать внимание пользователя во время скроллинга. Качественный дизайн иконки — однозначный сигнал, о том, что Ваше приложение такого же высокого качества.
Для разработки иконки приложения лучше обратиться к дизайнеру.
Правила дизайна иконки для Android
- Смотрится детально и четко в небольшом размере.
- Сочетается с любым фоном.
- Освещается верхней подсветкой.
- Может быть уникальной формы.
- Не является обрезанным вариантом большего изображения.
- Имеет одинаковый вес с другими иконками.
Для 3D-иконки:
- Перспектива не противоречит другим иконкам.
- Располагается ее по ходу движения.
- Имеет небольшую глубину.
Слишком растянутые в длину иконки, занимающие мало пространства, не привлекают внимания пользователей и плохо сочетаются с различными фонами.
Правильно и неправильно
Детали слишком сложного значка плохо различаются в маленьком размере. Обрезанный и глянцевый значок проигрывает такому же матовому и целому значку. Изображение не должно быть обрезанным, лучше использовать целое изображение уникальной формы. Избегайте глянца, если представленный объект сделан не из глянцевого материала. Значок со слишком тонким контуром плохо выделяется среди других значков. Создавайте иконки с альфа-каналом, иконки не должны занимать все пространство рамки. Тонкая визуальная обработка выделит иконку среди других. |
Иконка для приложения на iOS
У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.
Устройство или контекст |
Размер иконки |
iPhone 6s Plus и выше, iPhone 6 Plus и выше |
180x180px |
iPhone 6s и выше, iPhone 6 и выше, iPhone SE и выше |
120x120px |
iPad Pro |
167x167px |
iPad, iPad mini |
152x152px |
App Store |
1024x1024px |
Необходимо создать несколько маленьких иконок разных размеров для различных устройств. Маленькая и большая иконки должны соответствовать друг другу, но могут различаться количеством деталей.
Также маленькие иконки нужны для показа:
- в поиске Spotlight,
- в приложении настроек смартфона.
Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.
Устройство |
Размер иконок в поиске Spotlight |
Размер иконки настроек |
iPhone 6s Plus и выше, iPhone 6 Plus и выше |
120x120px |
87x87px |
iPhone 6s и выше, iPhone 6 и выше, iPhone SE и выше |
80x80px |
58x58px |
iPad Pro, iPad, iPad mini |
80x80px |
58x58px |
Внимание:
не добавляйте к иконке настроек наложение или границу. iOS автоматически добавляет отступ на 1 пиксель ко всем иконкам, чтобы они хорошо смотрелись на белом фоне в параметрах настройки.
Правила дизайна иконки для iOS:
Подкупающая простота
Найдите элемент, который передает суть приложения и поместите его в простую, запоминающуюся форму. Аккуратно добавьте детали. Слишком сложные содержание или форма иконки плохо различимы, особенно в уменьшенных размерах.
Четкий фокус
Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.
Узнаваемость
Никто не будет анализировать иконку, чтобы понять ее значение.
К примеру, в качестве иконки почтового приложения традиционно используется изображение конверта, который ассоциируется с почтой. Хотите хорошую иконку — потратьте время на разработку привлекательного и понятного всем абстрактного символа.
Без прозрачности, простой фон
Иконка должна быть без прозрачности, фон не загроможден. Простой фон не подавляет другие элементы рядом.
Без надписей
Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.
Без фото, скриншотов и элементов интерфейса
Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии сложно рассмотреть в маленьком размере. Скриншоты не расскажут о цели приложения. Элементы интерфейса в иконке вводят пользователя в заблуждение.
Без точных копий продуктов Apple
Продукты Apple защищены авторским правом, их нельзя использовать в изображениях и иконках. К тому же, аппаратные проекты от Apple часто обновляются, иконка при этом будет выглядеть устаревшей.
Не помещайте повсюду в интерфейсе иконку приложения
Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.
Протестируйте иконку на разных обоях
Люди выбирают различные обои для домашних экранов, поэтому вы должны протестировать иконку приложения на различных фонах.
Сохраняйте углы иконки квадратными
Система округляет углы иконки автоматически.
Вот и все! Желаем удачи и много красивых иконок для ваших приложений.
10 великолепных наборов иконок для Android
Операционная система Android позволяет в самых широких пределах изменять внешний вид своего устройства. Вы можете раскрашивать в разные цвета рабочие столы и менять их количество, добавлять виджеты и дополнительные панели, менять стандартные значки и иконки установленных приложений. Для этого существуют специальные комплекты иконок, которые одним махом могут заменить все значки в вашей системе. Мы предлагаем 10 таких наборов, которые придадут вашему гаджету совершенно новый вид.
Для использования одного из представленных ниже пакетов иконок вам необходимо установить и активировать какую-либо из сторонних оболочек. Вы можете выбрать любой из таких замечательных лаунчеров, как Nova, Apex, ADW, Go Launcher, Holo Launcher или Action Launcher Pro. После того, как вы установите понравившийся вам пакет иконок, откройте настройки лаунчера и выберите там нужные значки.
MIUI 5 Icons
Этот пакет значков предлагает более 1900 бесплатных иконок, которые повторяют дизайн используемый в MIUI ROM, про который мы писали здесь. Огромное количество иконок позволяет обеспечить большинство установленных у вас приложений новыми значками.
Разработчик: tung91Цена: Бесплатно
DCikonZ Theme
DCikonZ является бесплатной темой, которая включает в себя колоссальные 4000+ иконки выполненных в одном стиле. Этот пакет отличается не только количеством, но и превосходным качеством проработки каждого значка.
Цена: Бесплатно
Holo Icons
Это иконки из операционной системы Android, которые могут вам пригодиться в том случае, если вы мечтаете вернуться к каноническому holo-стилю системы.
Square Icon Pack
Square Icon Pack превращает все ваши иконки, в том числе и круглые, в идеальные квадраты. Значки здесь выглядят как маленькие плитки из Windows Phone и Windows 8.1. Бесплатная версия не предлагает столько значков как платная, но и ее вполне достаточно для успешного использования.
Rounded
Если вам не нравятся квадратные, то может быть круглые значки придутся по вкусу. Разработчики темы говорят, что они были вдохновлены дизайном новой Firefox OS от Mozilla.
Crumbled Icon Pack
После применения этого пакета все ваши иконки приобретут несколько помятый и обветшалый вид. Обратите внимание, что здесь вместо замены ваших иконок на кастомные, просто применяется специальный эффект, так что любой ваш значок будет иметь единообразный стиль оформления.
Dainty Icon Pack
Если вы устали от буйства красок, то обратите внимание на эту изысканную тему, предлагающую стильные серо-белые иконки для более чем 1200 приложений. Они идеально смотрятся на каком-либо однородном фоне.
Simplex Icons
Иконки Simplex выглядят более контрастными, чем предыдущая тема, но тоже выполнены в духе минимализма. Этот пакет значков может украсить ваш гаджет, особенно если вы подберете и другие элементы оформления в таком же стиле.
Min Icon Set
Этот иконпак является квинтэссенцией примитивизма в чистом виде. Все значки для более чем 570 приложений представляют собой простые белые символы. Однако отсутствующие в комплекте приложения будут представлены собственными значками в белом круге.
Elegance
Elegance на фоне предыдущих комплектов выглядит несколько переполненным большим числом деталей и градиентов. Эти значки, а всего их более чем 1200, выглядят настоящими произведениями искусства, почти как полноценные картины.
А какие шедевры иконописи любите вы? Кидайте ссылки в комментариях.
Лучшие наборы иконок для Android
Проще всего обновить интерфейс смартфона при помощи смены иконок. Осталось подобрать интересный набор.
Как известно, многие владельцы мобильных устройств обожают разнообразие. И если менять один смартфон на другой каждые два-три месяца не позволяют финансы, то можно хотя бы время от времени ставить новые иконки. В Google Play легко можно найти пакеты, содержащие в себе иконки предустановленных и самых популярных приложений.
Обратите внимание, что заменить значки на стоковом Android невозможно. Перед использованием указанных ниже наборов следует установить на чистый Android какой-нибудь популярный лаунчер. После этого на устройстве обязательно появится возможность замены иконок.
Rondo
Если на смартфоне присутствует более двух сотен приложений, то для установки подойдет далеко не каждый пакет иконок. Идеальным вариантом, пожалуй, станет Rondo. В состав этого набора входят примерно 3500 иконок! Можно с уверенностью утверждать, что пакет охватит собой как минимум 85% имеющихся на устройстве приложений. Не сменятся ярлыки только у тех программ, которые не пользуются особой популярностью.
Данная программа позволяет сменить и обои. Программисты специально подобрали такие картинки, которые будут идеально смотреться в паре с использующимися иконками. Заметим, что все ярлыки, внедренные в этот пакет, имеют разрешение 192 x 192 пикселя. То есть, к качеству изображений у пользователя не будет никаких претензий.
Достоинства:
- Распространяется бесплатно.
- Дополнительно присутствуют 20 обоев.
- Регулярные обновления.
- Используется панель уведомлений Material Design.
- Все иконки имеют круглую форму и тень.
- Высокое разрешение ярлыков.
Недостатки:
- Некоторый контент предлагается за деньги.
- Присутствует реклама.
Siru
Уже менее наполненный набор, содержащий примерно 260 иконок. Но зато каждый из ярлыков сохранён разработчиками в очень высоком качестве. Также здесь можно воспользоваться «обратной связью», запросив у создателей иконки для специфических программ, которых пока не обнаружилось в данном пакете. Ежемесячно разработчики создают примерно по одному десятку новых ярлыков, дополняя тем самым свой набор.
Главное преимущество Siru заключается в оригинальном дизайне иконок. К их созданию причастен Хампуса Олссон, рисовавший в своё время многие элементы интерфейса для смартфонов OnePlus. Специально для Siru этот человек создал и параноидальные обои, как нельзя лучше сочетающиеся с данными ярлыками.
Достоинства:
- Уникальные иконки.
- Имеются идеально подходящие обои.
- Бесплатное распространение.
- Отсутствует реклама.
- Очень высокое разрешение каждого ярлыка.
- Можно отправить запрос на создание дополнительных иконок.
Недостатки:
- Количество иконок не слишком велико.
- Расширение функционала стоит денег.
iOS 11
iOS 11 Icon Pack — это пакет иконок, который полностью отражает стиль иконок iOS 11. Приложение отлично подходит для тех, кто хочет стилизовать свой Android под iOS. Для его работы потребуется дополнительно установить лаунчер Nova Launcher или Apex, он не будет работать с тем, который установлен в смартфоне изначально. Полный список поддерживаемых лаунчеров можно найти на странице приложения в Play Маркет.
Набор содержит огромное количество иконок в стиле iOS 11 и постоянно обновляется. Они подходят как для предустановленных, так и сторонних приложений. Размер иконок, прозрачность и другие основные параметры настраиваются непосредственно через лаунчер.
Достоинства:
- Бесплатное распространение.
- Постоянно обновляется.
- Внушительный список поддерживаемых лаунчеров.
Недостатки:
- Узконаправленный, подходит только тем, кто хочет сделать Android похожим на iOS.
MaterialOS
MaterialOS — это бесплатный набор иконок с помощью которого вы сможете полностью персонализировать свой Android. Приложение совместимо с большинством популярных лаучнеров, поэтому перед установкой пакета обязательно ознакомьтесь с их списком в Play Маркет.
MaterialOS включает более 500 иконок, которых более чем достаточно для кастомизации большинства предустановленных и сторонних приложений. Дополнительно в состав пакета входят обои и темы. Приложение постоянно обновляется и пополняется новыми иконками. Также разработчики стараются расширить список поддерживаемых лаунчеров.
Достоинства:
- Распространяется бесплатно.
- Поддерживает большинство популярных лаунчеров.
- Хорошее качество значков.
- Включает в себя обои высокого разрешения.
Недостатки:
- Не самый большой набор иконок.
- Часть значков дублирует друг друга с небольшими изменениями.
VIT
Набор, содержащий более 2000 иконок. Скачивание такого пакета займёт некоторое время, но зато заменены окажутся значки практически всех приложений, присутствующих на смартфоне. Обделёнными окажутся только инструкции для ремонта велосипеда и программы, касающиеся конкретных городских предприятий. Но подобные приложения редко вытаскиваются на рабочий экран, оставаясь лишь в меню, поэтому переживать не нужно.
Использующиеся здесь иконки выполнены в черно-белой цветовой гамме. Более того, многие значки имеют минималистичный стиль, будто бы рисунок начертили парой росчерков карандаша. Конечно, для таких иконок нужен и какой-нибудь двухцветный виджет часов. К счастью, создатели не забыли ни о нём, ни о подходящих обоях, на которых изображены город, природа и космос.
В целом, это самый оригинальный пакет иконок для Android в данной подборке. Радует, что распространяется набор совершенно бесплатно, никаких платных опций внутри нет. Некоторое огорчение вызывает лишь присутствие рекламы.
Достоинства:
- Оригинальный внешний вид иконок.
- Набор состоит из как минимум 2000 значков.
- Присутствует некоторое количество обоев.
- Поддерживается особый виджет часов и календаря.
- Бесплатное распространение.
Недостатки:
Галопом по Европам
В Google Play находится несколько сотен наборов иконок. Рассказывать подробно о каждом достойном экземпляре не имеет смысла. Но упомянуть о некоторых пакетах кратко всё же стоит:
- CandyCons— ещё один набор, 1070 иконок которого выполнены в «плоском» стиле, а в дополнение к которым идёт симпатичный виджет часов. Ни рекламы, ни требования оплаты — это ли не счастье?
- Moonshine— очередной набор из 925 иконок, позволяющий осуществить редизайн операционной системы. Содержит рекламу, устранить которую позволено покупкой платной версии.
- Materis— бесплатный пакет, иконки которого (более 920 штук) созданы в стиле Material Design. Ещё пользователя ждут как минимум 70 обоев. Есть наглая реклама, которая портит впечатление.
- Whicons— бесплатный набор иконок, выполненных полностью в белом цвете. Пакет включает более 5000 значков и различные обои. Приложение поддерживает большинство популярных лаунчеров и постоянно обновляется разработчиками.
- Simply 8-bit— хороший набор для любителей ретро-консолей. Состоит из 700 иконок в виде персонажей восьмибитных игр и соответствующих обоев. Распространяется бесплатно, встроенный покупок и рекламы не имеет.
Заключение
Напомним, что для использования рассмотренных выше наборов иконок требуется сторонний лаунчер. Обязательно попробуйте в деле хотя бы несколько вариантов. Замена ярлыков — лучший способ изменить внешний вид операционной системы!
Бесплатные иконки под Android
Если вам не по душе стандартные иконки Android, а тем более, если вы делаете сайт или другое приложение под эту систему, вам пригодится наша коллекция ярких, красивых иконок. Они и глаз порадуют, и юзабилити улучшат, а тем, кто делает комплекты иконок для Android самостоятельно, послужат источником идей и вдохновения.
Я встретила здесь иконки в тиле Android для таких приложений, как AK Notepad, Android Comic Viewer, Andoku, Angry Birds, BeyondPod, Browser, Calculator, Calendar, Camera, Clock, Contacts, Dropbox, Facebook, Gallery, Gmail, Google Earth, Last.fm, Maps, Market, Mint, Music, Opera, Phone, Skype, TuneIn Radio, Wapedia, XBMC Remote, YouTube и потом мне надоело перечислять. Смотрите сами, качайте — все они беспланты для некоммерческого пользования.
18 иконок в высоком разрешении для Windows and Mac от wwalczyszyn. Формат ICO+PNG. Скачать
Более 40 иконок в PNG формате от cultinium
Мега-пак иконок под Андроид от Champi-Design — 139 штук! ICO+PNG на прозрачном фоне.
Яркие иконки для дизайна с черным фоном. 420 штук! Автор — iRide113. Скачать
Иконки под Андроид в зеленом тоне от midhunstar. Крупные PNG на прозрачном фоне в количестве 37 штук.
Квадратные иконки от milanioom, качественные и тоже PNG без фона. Скачать
Иконки для личных мультимедиа приложений под ваш телефон или планшет на Android. 48 штук в наборе. Скачать
Классные иконки в PNG-формате от arrioch, в четырех размерах — от 36×36 до 128×128. 72 иконки в наборе, все просто супер красивые. Скачать
Прикольные иконки от Raadius в формате PSD, 37 штучек. Скачать
Еще один набор из 10 забавных квадратных иконок от того же автора, формат PNG. Скачать
Круглые кнопки-иконки от omar1one, 48 в наборе. Скачать
9 полупрозрачных черных иконок под Android OS, размер 92×92 пикселя, автор foxcreationsdesign, качаем
26 белых объемных иконок 65×72, от Krokiart. Скачать
Еще десяток иконок от Raadius, примерно в том же скругленно-квадратном стиле, PNG-формат. Скачать
Набор из 14 квадратных иконок от kocco — вариации на тему стандарта. Скачать
Стильные белые иконки от Jubba в стиле быстрых смазанных скетчей. Набор из 74 PNG с прозрачным фоном. Скачать
Набор аж из 286 квадратных иконок с объемными рамочками для Android. Размер 92×94, формат PNG. Скачать
whiterabbit007 и его 26 серых иконок в PNG формате. 72×72 пикселя. Скачать
По материалам blueblots.com
Комментарии
Оставить ответ
Похожие статьи
Случайные статьи
6 лучших наборов иконок для Android
Все пользователи Android делятся на две категории. Одни ценят прежде всего стабильность и предсказуемость, поэтому боятся что-либо нажать лишнее в своём смартфоне и даже редко устанавливают новые приложения. Другие любят разнообразие и эксперименты, постоянно меняют обои и иконки в своём аппарате. Для них и предназначен этот пост.
Polycon
Эти иконки созданы в полном соответствии с последними наставлениями по Material Design от компании Google. Значки из этого набора будут отлично смотреться на смартфонах, работающих под управлением последних версий Android. Иконпак содержит 14 различных значков для папок, так что вы сможете сгруппировать свои приложения по тематическим каталогам и обозначить каждый из них своей иконкой.
MaterialOS
Каждый поклонник Material Design просто обязан установить этот набор иконок на своё устройство. Это один из лучших наборов, созданных в этом стиле. Всего здесь содержится более 450 значков для приложений и несколько уникальных рисунков для рабочего стола. Новые иконки добавляются каждую неделю при поддержке сообщества пользователей в Google+.
Цена: Бесплатно
CandyCons
CandyCons отличает великолепное качество каждого значка. Внутри иконпака содержится 1 060 значков, причём для многих популярных приложений имеется по несколько разных вариантов. Дополнительно представлены 20 различных фоновых рисунков, отлично подходящих для этих иконок.
Цена: Бесплатно
Rondo
Хочется чего-то необычного? Попробуйте Rondo! Это набор содержит иконки круглой формы с длинными тенями. В настоящее время Rondo содержит около 2 600 различных элементов, так что можно надеяться, что для всех ваших программ найдутся подходящие значки.
Цена: Бесплатно
Matris
Matris — это еще один иконпак в стиле Material Design, который поможет оживить внешний вид вашего устройства. Цвета иконок не слишком яркие, а сами они прекрасно прорисованы. Сразу видно, что над набором трудились профессиональные дизайнеры.
Siru
Siru содержит не так много значков (200+), но все они высокого качества. Если же вы не обнаружите нужной иконки, то всегда можно послать разработчикам запрос на её создание с помощью встроенного инструмента для сбора пожеланий и предложений.
Цена: Бесплатно
В заключение хотим вам напомнить, что для использования любого из описанных выше наборов иконок вам понадобится установить какой-либо сторонний лаунчер, например Nova, ADW, Apex и так далее. Подобрать самый лучший из них вы сможете с помощью этой статьи.
Иконка это графическое изображение, которое занимает небольшую часть экрана и обеспечивает быстрый, интуитивно понятное представление действия, статуса, или приложения. При проектировании иконки для вашего приложения, важно иметь в виду, что ваше приложение может быть установлено на различных устройствах, которые предлагают диапазон плотностей пикселей, как описано в статье Поддержка разных разрешений экрана в android приложениях. Но вы можете заставить ваши иконки отлично смотреться на всех устройствах, предоставляя каждый значок в нескольких размерах. Когда ваше приложение работает, Android проверяет характеристики экрана устройства и загружает ресурсы для вашего приложения соответствующие плотности экрана.Т.к. вы будете поставлять каждый значок в нескольких размерах, чтобы поддержать различные плотности, руководство дизайна приведенное ниже опирается на размеры иконок в независимых от плотности пикселях ( dp ), которые основаны на размерах в пикселях экрана средней плотности (MDPI).Таким образом, чтобы создать иконку для различных плотностей, вы должны следовать отношению масштабирования 2:3:4:6:8 между пятью главными плотностями (medium, high, x-high, xx-high, и xxx-high соответственно). Например, предположим, что размер для значка запуска должен быть 48×48 dp. Это означает, что базовой плотности (MDPI) размер будет 48×48 px (пикселей), и высокой плотности (HDPI) размер должен быть 1.5x от базового — 72×72 точек, и x-high плотности (XHDPI) размер должен быть 2x от базового — 96×96 точек, и т.д..
Примечание: Android также поддерживает экраны низкой плотности (LDPI), но вам обычно не нужно создавать собственные наборы для таких размеров, потому что Android эффективно уменьшает ресурсы HDPI на 1/2, чтобы соответствовать ожидаемому размеру.
Запуск
Значок запуска является визуальным представлением вашего приложения на главном экране или экранах всех приложений. Поскольку пользователь может изменить обои на главном экране, убедитесь, что ваш значок запуска отчетливо видно на любом фоне.
Размеры и масштаб
- Иконки запуска на мобильном устройстве должны быть 48×48 dp.
- Иконки запуска для отображения на Google Play должны быть 512×512 точек.
Пропорции
- Полный набор, 48×48 dp
Стиль
Используйте разные силуэты. Трехмерные, вид спереди, с незначительной перспективой, как если смотреть сверху, так что пользователи смогут воспринимать некоторую глубину.
Панель действий
Иконки панели действий это графические кнопки, которые представляют самые важные действия людей, которые они могут принять в вашем приложении. Каждый должен использовать простую модель, представляющую единственное понятие, которое большинство людей может понять с первого взгляда.
Предустановленные символы должны использоваться для некоторых общих действий, таких как «обновить» и «поделиться». Ссылка для скачивания ниже предоставляет пакет с иконками, которые отмасштабированы для различных плотностей экрана, и подходят для использования с темами Holo Light и Holo Dark. Пакет также включает в себя иконоки без стилей, которые можно изменять в соответствии с вашей темой, в дополнение к исходным файлам Adobe® Illustrator® для дальнейшего изменения.
Скачать набор иконок для панели действий
Размеры и масштаб
- Иконки панели действий для телефонов должны быть 32×32 dp.
Основная область и пропорции
- Полный набор, 32×32 dpВидимый квадрат, 24×24 dp
Стиль
Пиктографический, плоский, не слишком подробный, с плавными изгибами или острыми формами. Если графика тонкая, поверните её на 45° влево или вправо, чтобы заполнить фокусное пространство. Толщина штрихов и негативных пространств должна быть не менее 2 dp.
Цвета
Цвета: #333333
Доступный: 60%непрозрачности
Недоступный: 30%непрозрачности
Цвета: #FFFFFF
Доступный: 80%непрозрачности
Недоступный: 30%непрозрачности
Маленькие / Контекстные иконки
В теле вашего приложения, используйте маленькие значки для действий и/или предоставления статуса по конкретным пунктам. Например, в приложении Gmail, каждое сообщение имеет значок звездочки, которая отмечает сообщение как важное.
Размеры и масштаб
- Маленькие значки должны быть 16×16 dp.
Основная область и пропорции
- Полный набор, 16×16 dpВидимый квадрат, 12×12 dp
Стиль
Нейтральный, плоский, и простой. Заполненные формы легче увидеть, по сравнению с тонкими штрихами. Используйте простую визуальную модель, которое большинство людей сможет легко распознать и понять её назначение.
Цвета
Используйте не нейтральные цвета экономно и с целью. Например, Gmail использует желтый значок звезды, чтобы указать отмеченное сообщение. Если значок связан с действием, выбрерите цвет, который хорошо контрастирует с фоном.
Значки уведомлений
Если ваше приложение генерирует уведомления, предоставьте икону, которую система может отображать в строке состояния, когда доступно новое уведомление.
Размеры и масштаб
- Значки уведомлений должны быть 24×24 dp.
Основная область и пропорции
- Полный набор, 24×24 dpВидимый квадрат, 22×22 dp
Стиль
Держите стиль плоским и простым, используя ту же единую визуальную модель, что и для значка запуска.
Цвета
Значки уведомлений должны быть полностью белым. Кроме того, система может уменьшать и/или затемнять значки.
Советы по проектированию
Вот несколько советов, которые могут оказаться полезными по созданию иконок или других графических наборов для вашего приложения. Эти советы предполагают, что вы используете Adobe® Photoshop® или аналогичную растровую и векторную программу для редактирования изображений.
Используйте векторные фигуры, где это возможно
Многие программы редактирования изображений, такие как Adobe® Photoshop® позволяют использовать комбинацию векторных форм и растровых слоев и эффектов. Когда это возможно, используйте векторные фигуры, так что если возникнет такая необходимость, наборы могут быть увеличены без потери детализации и четкости краёв.
Использование векторов также позволяет легко выровнять края и углы с пиксельным границам на меньших разрешениях.
Начните с большими размеров
Т.к. вам нужно будет создать наборы для различных плотностей экрана, то лучше начать с дизайна значков больших размеров, кратных размерам целевых значков. Например, иконки запуска 48, 72, 96 или 144 точек в ширину, в зависимости от плотности экрана (mdpi, hdpi, xhdpi, и xxhdpi, соответственно). Если вы изначально нарисовали иконки запуска размером 864×864точек, вам будет проще подгонять иконки, когда вы будете масштабировать к целевым размерам для создания окончательного набора.
При масштабировании, перерисуйте растровые слои по мере необходимости
Если вы масштабируете вверх изображение растрового слоя, а не векторного, то эти слои должны быть перерисованы вручную, что бы быть четкими при более высоких плотностях. Например, если круг 60×60 был нарисован как растровое изображение для mdpi он должен быть перерисован в круг 90×90 для hdpi.
Используйте общие соглашения об именах для набора значков
Попробуйте называть файлы так, чтобы соответствующие наборы были сгруппированы внутри директории, когда они сортируются в алфавитном порядке. В частности, помогает использование общих префиксов для каждого типа значков. Например:
Тип набора | Префикс | Пример |
---|---|---|
Иконки | ic_ | ic_star.png |
Иконки запуска | ic_launcher | ic_launcher_calendar.png |
Значки меню и иконки панели действий | ic_menu | ic_menu_archive.png |
Значки панели состояния | ic_stat_notify | ic_stat_notify_msg.png |
Иконки вкладок | ic_tab | ic_tab_recent.png |
Иконки диалогов | ic_dialog | ic_dialog_info.png |
Обратите внимание, что вы не обязаны использовать общий префикс любого типа — делайте это только для вашего удобства.
Настройка рабочего пространства, которое организует файлы по плотности
Поддержка нескольких плотности экрана означает, что вы должны создать несколько версий одного и того же значка. Чтобы помочь сохранить несколько копий файлов в безопасности и их было легче найти, мы рекомендуем создать структуру каталогов в вашем рабочем пространстве, которая организует файлы ресурсов на основе плотности. Например:
art/… mdpi/… _pre_production/… working_file.psd finished_asset.png hdpi/… _pre_production/… working_file.psd finished_asset.png xhdpi/… _pre_production/… working_file.psd finished_asset.png
art/… mdpi/… _pre_production/… working_file.psd finished_asset.png hdpi/… _pre_production/… working_file.psd finished_asset.png xhdpi/… _pre_production/… working_file.psd finished_asset.png |
xxhdpi/… _pre_production/… working_file.psd finished_asset.pngПоскольку структура вашего рабочего пространства похожа на структуру приложения, вы можете быстро определить, какие наборы должны быть скопированы в каждый каталог ресурсов. Разделение наборов по плотности также поможет вам обнаружить любые отклонения в именах файлов, которые важны поскольку соответствующие наборы для различных плотностей должны иметь одни и те же имя файлов.
Для сравнения, вот структура каталога ресурсов типичного приложения:
res/… drawable-ldpi/… finished_asset.png drawable-mdpi/… finished_asset.png drawable-hdpi/… finished_asset.png drawable-xhdpi/… finished_asset.png
res/… drawable-ldpi/… finished_asset.png drawable-mdpi/… finished_asset.png drawable-hdpi/… finished_asset.png drawable-xhdpi/… finished_asset.png |
Для получения дополнительной информации о том, как сэкономить ресурсы в проекте приложения см. Предоставление ресурсов.
Удалите ненужные метаданные из конечных наборов
Хотя инструменты SDK Android автоматически сжимают PNG файлы при упаковке ресурсов приложения в пакет установки, хорошая практика заключается в удалении ненужных заголовков и метаданных из ваших PNG наборов. Такие инструменты, как OptiPNG или Pngcrush могут гарантировать, что эти метаданные удалятся и, что размеры файлов ваших наборов изображений будет оптимизированы.
Читайте также: Курс для начинающих разработчиков Android приложений
14 ноября, 2012
Автор: Maksim
Дизайн – немаловажная часть любой программы для операционной системы Android, так же как и для любой другой ОС. И одной из составляющих пресловутого дизайна являются иконки для меню, области уведомлений и так далее. Об их создании мы и поговорим.
Процесс создания иконок достаточно длительный и утомительный, и гарантирует потерю достаточного числа нервных клеток, которые, как уверяют врачи, не восстанавливаются.
Благо есть вспомогательные утилиты для автоматизации процесса рисования в некоторой мере, кроме того результат получается именно такой, как нужно. Речь идет об утилите Android Asset Studio.
Android Asset Studio – достаточно молодой, но достаточно перспективный и на данный момент уже весьма функциональный проект. Создание иконки для приложения в Android Asset Studio занимает не больше минуты, даже если подходящей готовой картинки нет. Но ближе к делу. Утилита на данный момент может создавать 4 типа иконок:
Launcher Icons – то есть, иконки для лаунчера. Проще говоря, это именно те иконки, которые отображаются в меню запуска приложений или на рабочем столе.
Menu Icons – иконки для элементов меню.
Tab Icons – иконки для вкладок («табов»).
Notification Icons – иконки, которые отображаются в строке состояния.
Интерфейс у Android Asset Studio несложный и достаточно дружелюбный по отношению к новым пользователям, так что освоиться не составит особого труда.
Важной отличительной чертой данной утилиты является возможность одновременного формирования трёх иконок под разные виды экранов с разным разрешением и, соответственно, детализацией.
Сам же стиль иконок в целом повторяет тот, которого придерживается Google в операционной системе Android в целом. Так что данный инструмент по большому счету незаменим для разработчиков программного обеспечения для данной мобильной ОС.
90000 Android app 200 free icons (SVG, EPS, PSD, PNG files) 90001 90002 90003 90004 Introducing Collections 90005 90006 Collections are an accessible way to manage your icons library, and the core of our web app. Do you want to know how to use them? Press the right arrow or use the top navigation to watch the guide. 90007 90008 90002 90010 90004 Add icons 90005 90006 Browse the packs or search icons and add them to your active collection with this button.90007 90008 90002 90017 90004 List view 90005 90006 This is a list of your collections. You can change their names, and they are sorted by use. Click on one of them to start using it. 90007 90008 90002 90024 90004 Create a collection 90005 90006 Click on this button to create a new collection. 90007 90008 90002 90031 90004 Active collection 90005 90006 This is your active collection.A collection can have up to 256 icons if you are a registered user or 50 if you are not registered. 90007 90008 90002 90038 90004 Collection options 90005 90006 Access this menu to edit your collection; edit your icons separately, duplicate your collection, sort the icons in your collection or share it with the rest of the world. 90007 90008 90002 90045 90004 SVG Upload 90005 90006 Drag & drop your SVGs to the active collection to upload your own icons.There is a limitation of 3 icons per collection for free users. 90007 90008 90002 90052 90004 Fullscreen 90005 90006 Not enough space? Now you can see your collections in fullscreen mode to make it easier for you. 90007 90008 90002 90059 90004 Delete 90005 90006 Are you done with this collection? Delete it and create a new one here. 90007 90008 90002 90066 90004 Enjoy! 90005 90006 And that is all.If you have any questions, you can contact our support team here. 90007 90006 Thank you for using Flaticon, we hope you enjoy our service 90007 × Close 90008 .90000 Android app 200 free icons (SVG, EPS, PSD, PNG files) 90001 90002 90003 90004 Introducing Collections 90005 90006 Collections are an accessible way to manage your icons library, and the core of our web app. Do you want to know how to use them? Press the right arrow or use the top navigation to watch the guide. 90007 90008 90002 90010 90004 Add icons 90005 90006 Browse the packs or search icons and add them to your active collection with this button.90007 90008 90002 90017 90004 List view 90005 90006 This is a list of your collections. You can change their names, and they are sorted by use. Click on one of them to start using it. 90007 90008 90002 90024 90004 Create a collection 90005 90006 Click on this button to create a new collection. 90007 90008 90002 90031 90004 Active collection 90005 90006 This is your active collection.A collection can have up to 256 icons if you are a registered user or 50 if you are not registered. 90007 90008 90002 90038 90004 Collection options 90005 90006 Access this menu to edit your collection; edit your icons separately, duplicate your collection, sort the icons in your collection or share it with the rest of the world. 90007 90008 90002 90045 90004 SVG Upload 90005 90006 Drag & drop your SVGs to the active collection to upload your own icons.There is a limitation of 3 icons per collection for free users. 90007 90008 90002 90052 90004 Fullscreen 90005 90006 Not enough space? Now you can see your collections in fullscreen mode to make it easier for you. 90007 90008 90002 90059 90004 Delete 90005 90006 Are you done with this collection? Delete it and create a new one here. 90007 90008 90002 90066 90004 Enjoy! 90005 90006 And that is all.If you have any questions, you can contact our support team here. 90007 90006 Thank you for using Flaticon, we hope you enjoy our service 90007 × Close 90008 .90000 Android Icons — 1,616 free vector icons 90001 90002 90003 90004 Introducing Collections 90005 90006 Collections are an accessible way to manage your icons library, and the core of our web app. Do you want to know how to use them? Press the right arrow or use the top navigation to watch the guide. 90007 90008 90002 90010 90004 Add icons 90005 90006 Browse the packs or search icons and add them to your active collection with this button.90007 90008 90002 90017 90004 List view 90005 90006 This is a list of your collections. You can change their names, and they are sorted by use. Click on one of them to start using it. 90007 90008 90002 90024 90004 Create a collection 90005 90006 Click on this button to create a new collection. 90007 90008 90002 90031 90004 Active collection 90005 90006 This is your active collection.A collection can have up to 256 icons if you are a registered user or 50 if you are not registered. 90007 90008 90002 90038 90004 Collection options 90005 90006 Access this menu to edit your collection; edit your icons separately, duplicate your collection, sort the icons in your collection or share it with the rest of the world. 90007 90008 90002 90045 90004 SVG Upload 90005 90006 Drag & drop your SVGs to the active collection to upload your own icons.There is a limitation of 3 icons per collection for free users. 90007 90008 90002 90052 90004 Fullscreen 90005 90006 Not enough space? Now you can see your collections in fullscreen mode to make it easier for you. 90007 90008 90002 90059 90004 Delete 90005 90006 Are you done with this collection? Delete it and create a new one here. 90007 90008 90002 90066 90004 Enjoy! 90005 90006 And that is all.If you have any questions, you can contact our support team here. 90007 90006 Thank you for using Flaticon, we hope you enjoy our service 90007 × Close 90008 .90000 Site not found · GitHub Pages 90001 Site not found · GitHub Pages 90002 90003 There is not a GitHub Pages site here. 90004 90005 90002 If you’re trying to publish one, read the full documentation to learn how to set up 90003 GitHub Pages 90004 for your repository, organization, or user account. 90005 .