как создать окошко для приложений
Как создать иконки для приложений на Android и iOS
Иконка приложения для Android
1. Разрешение экранов устройств
Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.
Размер и формат иконок запуска приложения (launcher icon) для Android
Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.
Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.
Вы, конечно, помните: любое масштабирование должно сохранять пропорции изображения.
Иконки приложения для публикации на Google Play
Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.
В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения.
Требования к иконке в разделе «Рекомендуемые» :
Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».
Цели иконки приложения
У иконки приложения есть 3 основных цели:
Образцы иконок приложений.
Помогите пользователю найти приложение в Google Play
Правила дизайна иконки для Android
Слишком растянутые в длину иконки, занимающие мало пространства, не привлекают внимания пользователей и плохо сочетаются с различными фонами.
Правильно и неправильно
Детали слишком сложного значка плохо различаются в маленьком размере.
Обрезанный и глянцевый значок проигрывает такому же матовому и целому значку. Изображение не должно быть обрезанным, лучше использовать целое изображение уникальной формы. Избегайте глянца, если представленный объект сделан не из глянцевого материала.
Значок со слишком тонким контуром плохо выделяется среди других значков.
Создавайте иконки с альфа-каналом, иконки не должны занимать все пространство рамки. Тонкая визуальная обработка выделит иконку среди других.
Иконка для приложения на iOS
У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.
Необходимо создать несколько маленьких иконок разных размеров для различных устройств. Маленькая и большая иконки должны соответствовать друг другу, но могут различаться количеством деталей.
Также маленькие иконки нужны для показа:
Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.
Правила дизайна иконки для iOS:
Найдите элемент, который передает суть приложения и поместите его в простую, запоминающуюся форму. Аккуратно добавьте детали. Слишком сложные содержание или форма иконки плохо различимы, особенно в уменьшенных размерах.
Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.
Никто не будет анализировать иконку, чтобы понять ее значение.
Без прозрачности, простой фон
Иконка должна быть без прозрачности, фон не загроможден. Простой фон не подавляет другие элементы рядом.
Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.
Без фото, скриншотов и элементов интерфейса
Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии сложно рассмотреть в маленьком размере. Скриншоты не расскажут о цели приложения. Элементы интерфейса в иконке вводят пользователя в заблуждение.
Без точных копий продуктов Apple
Продукты Apple защищены авторским правом, их нельзя использовать в изображениях и иконках. К тому же, аппаратные проекты от Apple часто обновляются, иконка при этом будет выглядеть устаревшей.
Не помещайте повсюду в интерфейсе иконку приложения
Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.
Протестируйте иконку на разных обоях
Люди выбирают различные обои для домашних экранов, поэтому вы должны протестировать иконку приложения на различных фонах.
Сохраняйте углы иконки квадратными
Система округляет углы иконки автоматически.
Вот и все! Желаем удачи и много красивых иконок для ваших приложений.
Как создать отличную иконку для приложения
Перевод статьи от студии Gapsy «How to Design a Great App Icon» о советах, правилах и принципах, которых стоит придерживаться при разработке очередной иконки для мобильного приложения.
А вы знали об этом шокирующем факте? Теперь пользователи проводят более 90% своего времени со смартфонами, используя мобильные приложения. У каждого из нас на телефоне установлено более десяти программ, и это число с каждым годом только растет. Чтобы быть на шаг впереди своих конкурентов, создайте уникальную иконку приложения, которая повысит узнаваемость вашего бренда. О том, как это сделать, мы расскажем в этой статье. Воспользуйтесь нашими советами о том, как сделать отличную иконку для вашего мобильного приложения.
Что такое иконка приложения?
Иконка мобильного приложения — это небольшое изображение, представляющее приложение на рынке, таком как Google Play или App Store. Небольшое изображение, которое пользователи видят на экране телефона, является одним из самых важных элементов идентичности вашего проекта. Иконка поможет вам выделиться, запомнить бренд и раскрыть суть вашего уникального делового предложения.
Согласно статистике, в настоящее время в Google Play Store доступно более 2,9 миллиона приложений, а в Apple App Store — почти 4,4 миллиона. Поэтому ваша задача — создать иконку приложения, которая мгновенно привлечет внимание и заставит пользователя захотеть узнать, что стоит за изображением.
В чем разница между иконкой и логотипом?
Некоторые люди думают, что нет большой разницы между логотипом и иконкой. Но главное отличие заключается в следующем:
Иконки:
Логотипы:
Категории иконок
В дизайне существует два типа иконок — иконки для операционной системы Android и операционной системы IOS. Хотя на первый взгляд они очень похожи, они отличаются многими техническими нюансами, которые следует учитывать при разработке.
Советы о том, как создать отличную иконку для вашего приложения
Углубляясь в тему создания иконок для мобильного приложения, мы предлагаем вам несколько советов о том, как создать классную иконку, которая понравится вашей целевой аудитории.
а) Сделайте значок вашего приложения уникальным
Не забывайте, что вы делаете иконку для конкурентноспособного рынка, и будете соревноваться с самыми разными другими иконками мобильных приложений. Вот почему, если хотите, чтобы вас выбрали, вам нужно выделиться и быть уникальным, не таким, как все. Нужно, чтобы ваша аудитория обратила на вашу иконку внимание и использовала ваше приложение изо дня в день.
Вам нужно проанализировать конкурентов, чтобы оценить дизайн их иконок и определиться на этом основании со своей. Исследуйте самые популярные мобильные приложения в вашей нише, посмотрите на их иконки, какие у них есть особенности, есть ли у них что-то общее, отличное, какие цвета они в основном используют, и подумайте о том, как вы можете выделиться среди них. Возможно, создать иконку с противоположным цветом или использовать другой графический дизайн, чтобы ваша иконка выделялась из толпы. Но будьте осторожны с экспериментами, ведь ваша главная задача — удовлетворить вкусы целевой аудитории, поэтому, прежде всего, вы должны детально изучить ее вкусы и понять, что ее привлекает и нравится в целом.
б) Придерживайтесь простоты
Пусть ваша иконка будет простой, но продуманной до мельчайших деталей. Не используйте слишком сложные конструкции. Во-первых, ваша иконка малюсенькая; мало кто сможет увидеть в ней какой-либо текст или детали. Чем больше деталей, тем труднее будет пользователю распознать и правильно воспринять ее. Ваша иконка должна легко масштабироваться на разных носителях и быть легко узнаваемой, будь то экран телефона, магазин приложений, или панель управления.
Давайте возьмем в качестве примера несколько иконок известных мобильных приложений. Учиться и черпать вдохновение у успешных брендов — это отличная идея!
Посмотрите на большинство приложений на вашем телефоне — все иконки будут максимально простыми и понятными, выражающими главную идею приложения.
в) Используйте условные обозначения, а не слова
Для большего привлечения внимания пользователя лучше использовать условные обозначения, а не текст. Текст всегда затрудняет для аудитории восприятие иконки. Точно так же лучше не использовать фотографию в качестве значка, так как это тоже запутает пользователей. Для большей вовлеченности используйте эмблему, которая лучше всего описывает вашу компанию или бренд.
Чтобы правильно определить, какая эмблема лучше всего описывает ваш бренд, составьте список вещей, которые ассоциируются у вас с продуктом. Это значительно облегчит поиск нужной эмблемы и превращение слов в изображение. Взгляните на логотип одного из наших проектов в качестве примера. Эмблема с самолетом дает нам понять, что приложение предназначено для бронирования авиабилетов. Всего одна картинка вместо тысячи слов.
г) Работайте в корпоративной стилистике бренда
Все пользователи ценят, когда созданный дизайн продуман до мельчайших деталей. Убедитесь, что ваша иконка отражает суть вашего мобильного приложения. Вот почему смешивание контента и дизайна — один из вернейших способов установить связь с вашей аудиторией и создать визуальную идентичность.
Используйте корпоративные цвета, формы и текстуры, чтобы убедиться, что ваша иконка соответствует вашему брендингу. Если, к примеру, у вашего приложения есть геометрия или градиент, попробуйте вставить это в иконку.
Также стоит сочетать дизайн иконок и функциональность. Когда пользователи впервые видят иконку вашего приложения, они должны с первого взгляда понять, для каких целей это приложение используется. Например, приложение Airbnb.
Они использовали самолет в дизайне своих иконок, что сразу дает понять пользователям, что это приложение связано с туриндустрией.
e) Подумайте о цвете
Поскольку для многих цвет может быть определяющим фактором при выборе приложения, выбор цветовой темы для иконки должен быть сделан тщательно. Вот несколько советов по использованию цветов для вашей иконки:
ж) Протестируйте свою иконку и продолжайте ее улучшать.
Тестирование иконки — это как проверка карта перед гонкой. Лучше потратить несколько минут на проверку перед началом, чем потратить много времени и денег на исправление ошибок позже.
Чтобы создать эффективную иконку для приложения, которая будет не только хорошо смотреться среди конкурентов, но и также повышать конверсию, ее необходимо подвергнуть двум этапам тестирования:
Техническое тестирование иконки может разделяться на этапы:
Этот аспект всегда нужно тестировать в контексте.
Во-первых, задайте себе следующие вопросы и сделайте эвристический анализ:
После этого вы сможете понять, сколько времени потребуется новым пользователям, чтобы найти ту или иную иконку. Во время тестирования попросите людей, незнакомых с вашим сайтом или приложением, выполнить определенное действие и запишите следующую информацию:
Подведем итоги
Итак, давайте вкратце подытожим, каким должен быть дизайн иконок для вашего мобильного приложения:
Пленительная простота
Найдите элемент, который передает суть приложения, и облеките его в простую, запоминающуюся форму. Тщательно добавляйте детали. Слишком сложное содержание или форма иконки трудно различать, особенно при уменьшенных размерах.
Резкий фокус
Создайте иконку приложения с четким фокусом, который привлекает внимание и идентифицирует приложение.
Узнаваемость
Никто не будет анализировать икону, чтобы понять ее значение.
Например, изображение конверта традиционно используется в качестве иконки для почтового приложения, которое ассоциируется с почтой. Если вам нужна хорошая иконка, потратьте время на разработку привлекательной и понятной абстрактной эмблемы.
Никаких фотографий, скриншотов или элементов интерфейса.
Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии трудно разглядеть, когда они маленькие. Скриншоты не расскажут вам о цели приложения. Элементы интерфейса в пиктограмме вводят пользователя в заблуждение.
Проверьте значок на разных обоях
Люди выбирают разные обои для своих домашних экранов, поэтому, когда вы делаете иконку приложения, вы должны протестировать его на разных фонах.
Вот и все! Мы желаем Вам удачи и много красивых иконок для ваших приложений.
Виджеты, лаунчеры и минимализм: 20 способов организовать приложения на экране телефона
Коллекция скриншотов читателей Т—Ж
Мы попросили читателей поделиться скриншотами экранов телефонов и рассказать, как они организуют и выбирают приложения.
Собрали снимки самых структурированных и необычных экранов, которые помогают не теряться среди десятков и сотен программ.
Это комментарии читателей из Сообщества Т—Ж. Собраны в один материал, бережно отредактированы и оформлены по стандартам редакции.
На главном экране только то, чем пользуюсь ежедневно. Это лаунчер для Андроида в стиле «Виндоус 10». Он классный.
У меня шесть экранов. Каждый условно разделен по темам: мусор, мессенджеры, магазины, банки, «Яндекс», игры.
В какой-то момент надоело искать среди кучи одинаковых иконок нужную, написал свой лаунчер. Все приложения отображаются одним списком, неиспользуемые скрываю либо удаляю, поэтому вижу только то, чем пользуюсь регулярно. Ориентируюсь в основном по положению на экране, а текст и цвет помогают не теряться. На соседней странице пара виджетов: погода и календарь — без календаря жить не могу.
Как-то так. Удалось себя приучить сортировать приложения по папкам, чтобы не создавать 15 разных экранов. Но пока не могу привыкнуть к библиотеке приложений на Ай-ос 14.
У меня всего два экрана с приложениями, остальное — через поиск. На главном экране стопка виджетов: календарь, погода и Streaks, который помогает мне отслеживать цели по активности на день и более глобально — привычки. Недавно убрал из закрепа внизу стандартную камеру Айфона и поставил Halide, но пока непривычно.
Одного экрана достаточно, остальное в библиотеке.
На экране пусто, все приложения в меню.
За минимализм. Очень понравился Niagara Launcher.
Все остальные — через меню приложений. Люблю минимализм.
Остальные приложения через поиск, как и контакты.
Вот основной. Второй — экран потребления: «Твич», «Тикток», заказ еды. Третий — экран сервисов: госуслуги, VPN, налоги.
Самый часто используемый экран.
Один экран — много эмодзи.
Я тут доверился Сири. Чаще всего она подставляет нужные приложения. Если вдруг его нет, а такое бывает редко, свайп вниз — и через поиск достаю нужное. Начинал с одного виджета, сейчас их три.
Всю личную инфу свернул в одну строку на виджет, обычно развернуто на длинную ленту.
Какие у всех скучные экраны. Это второй из двух моих: тут каршеринги, карты и банки.
Технологии. Что происходит в мире технологий, какие устройства стоит купить и как выжать максимум из вашего телефона и компьютера
>виджеты, лаунчеры
>на обложке айфон
Не спрашивайте зачем
Эдуард, супер! Один из немногих, на какие приятно смотреть
Эдуард, что зачем? глупый вопрос, чтобы использывать
Андрей, как называется сей чудо лаунчер?
Сильный,
Nova launcher prime
Виджеты KWGT
Иконки Aline Yellow icon pack
Fluid NG для тонкой настройки жестов (вместо нижней панели и вместо стандартных в телефоне)
Сильный, нова лаунчер
Оч люблю разглядывать чужие рабочие столы, всегда было интересно, как люди их организовывают
У меня вот этот экран основной (аполло = реддит, только гораздо удобнее и быстрее оригинального приложения + большое количество виджетов на любой вкус)
А у меня котик. Просто котик.
Самые нужные приложения в баре снизу, а все остальные: провожу по экрану, что открылся поисковик, ввожу первые три буквы названия приложения, запускаю из поисковой выдачи
Ответ на вопрос: приложение с ДМС, вообще не пользуюсь, но спокойнее когда оно под рукой.
Боже, храни Samsung за edge panel — ТОП-10 приложений на каждый день тут. На главном экране только лаконичный виджет погоды + внизу 5 стандартных иконок (звонки, смс, камера, галерея, Chrome). Всё остальное разбито по тематическим папкам в меню приложений.
мой билайн. заглядываю туда раз в месяц, когда надо оплачивать сотовую связь или отследить куда у меня ушло 40 смс после бурной ночи и попытки позвонить бывшему
Интересно узнать что за лаунчер/виджет на телефоне
Денис Лифанов
Тиндер)) но это шутка
Самые важные приложения, плюс два дополнительных часовых пояса для мамы и папы
Вот как организовано у меня. На первом экране чаще всего используемые приложения, на втором реже используемые. В папке «Контент» фитнес-приложения, онлайн-кинотеатры, приложения для обработки фото и видео, игры и реже используемые социальные сети. В папке «Разное» системные приложения типа почты, которые не добавлены в стандартный почтовик, приложения для получения кодов доступа, приложение для Apple Watch, приложения умного дома и т.п. В папке «Сервисы» приложения онлайн-магазинов, бонусных программ и госуслуг. На третьем экране один виджет, этот экран нужен для того, чтобы если я случайно на него попаду, то не увижу экран с библиотекой приложений, которая меня очень раздражает. Расстраивает, что её нельзя скрыть через настройки.
Не крепится скрин. Говорит что фото должно быть до 5 мб
А вообще, у меня сортируются по степени срочности: чем ближе к левому большому пальцу, тем чаще я его запускаю где то в неудобных для долгого поиска условиях. Так в углу у меня сканер перекрестка, раньше был каршеринг, набор скидочных карт, vk.
Так же как и многие приучил себя сортировать по папкам основное. А верхняя часть экрана занята большим виждетов-стопкой с погодой, расписанием и… все.
Второй экран занимает второстепенный хлам, чем иногда пользуюсь. Остальное скрыто в библиотеку. И тоже пользуюсь поиском по свайпу вниз, если нужно найти приложение, посчитать или валюту конвертнуть. К библиотеке не приучусь наверное никогда.