А вы знали об этом шокирующем факте? Теперь пользователи проводят более 90% своего времени со смартфонами, используя мобильные приложения. У каждого из нас на телефоне установлено более десяти программ, и это число с каждым годом только растет. Чтобы быть на шаг впереди своих конкурентов, создайте уникальную иконку приложения, которая повысит узнаваемость вашего бренда.
О том, как это сделать, мы расскажем в этой статье. Воспользуйтесь нашими советами о том, как сделать отличную иконку для вашего мобильного приложения.
Что такое иконка приложения?
Иконка мобильного приложения — это небольшое изображение, представляющее приложение на рынке, таком как Google Play или App Store. Небольшое изображение, которое пользователи видят на экране телефона, является одним из самых важных элементов идентичности вашего проекта. Иконка поможет вам выделиться, запомнить бренд и раскрыть суть вашего уникального делового предложения.
Согласно статистике, в настоящее время в Google Play Store доступно более 2,9 миллиона приложений, а в Apple App Store — почти 4,4 миллиона. Поэтому ваша задача — создать иконку приложения, которая мгновенно привлечет внимание и заставит пользователя захотеть узнать, что стоит за изображением.
Футбольные эмблемы
В чем разница между иконкой и логотипом?
Некоторые люди думают, что нет большой разницы между логотипом и иконкой. Но главное отличие заключается в следующем:
Иконки:
- Иконка непосредственно представляет идею, концепцию или действие. Она облегчает работу с графическим представлением для пользователя.
- Иконки обычно используются в приложениях для представления того, для чего оно используется, и являются ключевым элементом интерфейса UI/UX.
Логотипы:
- Логотип используется для распознавания основной части эмблемы, используемой для представления организации. Способ представления организации может быть прямым или скрытым. Логотип должен быть связан с организацией. Это отражает мышление организации и представляет собой ее графическое резюме.
Категории иконок
В дизайне существует два типа иконок — иконки для операционной системы Android и операционной системы IOS. Хотя на первый взгляд они очень похожи, они отличаются многими техническими нюансами, которые следует учитывать при разработке.
Советы о том, как создать отличную иконку для вашего приложения
Углубляясь в тему создания иконок для мобильного приложения, мы предлагаем вам несколько советов о том, как создать классную иконку, которая понравится вашей целевой аудитории.
а) Сделайте значок вашего приложения уникальным
Не забывайте, что вы делаете иконку для конкурентноспособного рынка, и будете соревноваться с самыми разными другими иконками мобильных приложений. Вот почему, если хотите, чтобы вас выбрали, вам нужно выделиться и быть уникальным, не таким, как все. Нужно, чтобы ваша аудитория обратила на вашу иконку внимание и использовала ваше приложение изо дня в день.
Как установить Алису на телефон Андроид?
Вам нужно проанализировать конкурентов, чтобы оценить дизайн их иконок и определиться на этом основании со своей. Исследуйте самые популярные мобильные приложения в вашей нише, посмотрите на их иконки, какие у них есть особенности, есть ли у них что-то общее, отличное, какие цвета они в основном используют, и подумайте о том, как вы можете выделиться среди них. Возможно, создать иконку с противоположным цветом или использовать другой графический дизайн, чтобы ваша иконка выделялась из толпы. Но будьте осторожны с экспериментами, ведь ваша главная задача — удовлетворить вкусы целевой аудитории, поэтому, прежде всего, вы должны детально изучить ее вкусы и понять, что ее привлекает и нравится в целом.
б) Придерживайтесь простоты
Пусть ваша иконка будет простой, но продуманной до мельчайших деталей. Не используйте слишком сложные конструкции. Во-первых, ваша иконка малюсенькая; мало кто сможет увидеть в ней какой-либо текст или детали. Чем больше деталей, тем труднее будет пользователю распознать и правильно воспринять ее. Ваша иконка должна легко масштабироваться на разных носителях и быть легко узнаваемой, будь то экран телефона, магазин приложений, или панель управления.
Давайте возьмем в качестве примера несколько иконок известных мобильных приложений. Учиться и черпать вдохновение у успешных брендов — это отличная идея!
- Иконка WhatsApp — телефон на зеленом фоне;
- Иконка приложения Google Maps — самый простой белый фон и разноцветная булавка;
- Иконка приложения Zoom — это просто видеокамера.
Посмотрите на большинство приложений на вашем телефоне — все иконки будут максимально простыми и понятными, выражающими главную идею приложения.
в) Используйте условные обозначения, а не слова
Для большего привлечения внимания пользователя лучше использовать условные обозначения, а не текст. Текст всегда затрудняет для аудитории восприятие иконки. Точно так же лучше не использовать фотографию в качестве значка, так как это тоже запутает пользователей. Для большей вовлеченности используйте эмблему, которая лучше всего описывает вашу компанию или бренд.
Чтобы правильно определить, какая эмблема лучше всего описывает ваш бренд, составьте список вещей, которые ассоциируются у вас с продуктом. Это значительно облегчит поиск нужной эмблемы и превращение слов в изображение. Взгляните на логотип одного из наших проектов в качестве примера. Эмблема с самолетом дает нам понять, что приложение предназначено для бронирования авиабилетов. Всего одна картинка вместо тысячи слов.
г) Работайте в корпоративной стилистике бренда
Все пользователи ценят, когда созданный дизайн продуман до мельчайших деталей. Убедитесь, что ваша иконка отражает суть вашего мобильного приложения. Вот почему смешивание контента и дизайна — один из вернейших способов установить связь с вашей аудиторией и создать визуальную идентичность.
Используйте корпоративные цвета, формы и текстуры, чтобы убедиться, что ваша иконка соответствует вашему брендингу. Если, к примеру, у вашего приложения есть геометрия или градиент, попробуйте вставить это в иконку.
Также стоит сочетать дизайн иконок и функциональность. Когда пользователи впервые видят иконку вашего приложения, они должны с первого взгляда понять, для каких целей это приложение используется. Например, приложение Airbnb.
Они использовали самолет в дизайне своих иконок, что сразу дает понять пользователям, что это приложение связано с туриндустрией.
e) Подумайте о цвете
Поскольку для многих цвет может быть определяющим фактором при выборе приложения, выбор цветовой темы для иконки должен быть сделан тщательно. Вот несколько советов по использованию цветов для вашей иконки:
- Выбранный цвет вашей иконки должен быть связан целиком с вашим брендом и цветовой палитрой вашего приложения. Цвета вашего приложения и иконок должны быть одинаковыми и хорошо смотреться на разных фонах (будь то черный, белый или цветной)
- Не используйте слишком много оттенков в дизайне иконок, так как есть риск превратить ваш дизайн в беспорядок и путаницу.
- Среди самых известных цветов, используемых для иконок, — синий, красный, белый. Следите за цветовой статистикой, учитывайте, для какого рынка вы делаете приложение, и не забывайте все факторы, влияющие на выбор цвета для вашей целевой аудитории.
ж) Протестируйте свою иконку и продолжайте ее улучшать.
Тестирование иконки — это как проверка карта перед гонкой. Лучше потратить несколько минут на проверку перед началом, чем потратить много времени и денег на исправление ошибок позже.
Чтобы создать эффективную иконку для приложения, которая будет не только хорошо смотреться среди конкурентов, но и также повышать конверсию, ее необходимо подвергнуть двум этапам тестирования:
- Техническое тестирование;
- Тестирование на аудитории.
Техническое тестирование иконки может разделяться на этапы:
- Тестирование на разных устройствах (посмотрите, как иконка смотрится на экранах разных размеров);
- Тестирование в разных размерах (давайте посмотрим, как иконка смотрится с самого маленького масштаба и до самого большого);
- Тестирование на различных вариантах фона (тестирование иконки на белом, черном, сером и других фонах и обоях);
- Тестирование среди конкурентов (мы проверяем, как иконка выглядит среди других приложений в магазинах). Тестирование на аудитории.
- Легко ли найти иконку?
Этот аспект всегда нужно тестировать в контексте.
Во-первых, задайте себе следующие вопросы и сделайте эвристический анализ:
- Гармонирует ли она с другими иконками?
- Находится ли она там, где ожидалось?
- Не отвлекают ли другие элементы на странице от нее?
После этого вы сможете понять, сколько времени потребуется новым пользователям, чтобы найти ту или иную иконку. Во время тестирования попросите людей, незнакомых с вашим сайтом или приложением, выполнить определенное действие и запишите следующую информацию:
- Сколько времени им понадобилось, чтобы найти нужную иконку?
- Как часто им удавалось с первого раза выбрать нужную иконку?
Подведем итоги
Итак, давайте вкратце подытожим, каким должен быть дизайн иконок для вашего мобильного приложения:
Пленительная простота
Резкий фокус
Создайте иконку приложения с четким фокусом, который привлекает внимание и идентифицирует приложение.
Узнаваемость
Никто не будет анализировать икону, чтобы понять ее значение.
Например, изображение конверта традиционно используется в качестве иконки для почтового приложения, которое ассоциируется с почтой. Если вам нужна хорошая иконка, потратьте время на разработку привлекательной и понятной абстрактной эмблемы.
Никаких фотографий, скриншотов или элементов интерфейса.
Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии трудно разглядеть, когда они маленькие. Скриншоты не расскажут вам о цели приложения. Элементы интерфейса в пиктограмме вводят пользователя в заблуждение.
Проверьте значок на разных обоях
Люди выбирают разные обои для своих домашних экранов, поэтому, когда вы делаете иконку приложения, вы должны протестировать его на разных фонах.
Вот и все! Мы желаем Вам удачи и много красивых иконок для ваших приложений.
Источник: infogra.ru
Значок в Windows
Значки приложений — это визуальные индикаторы, которые мы используем для поиска и запуска приложения пользователями.
Это первое впечатление вашего приложения, и мы хотим помочь убедиться, что это отличный. В этой статье рассматриваются рекомендации по проектированию и реализации значков приложений Windows, чтобы обеспечить лучший интерфейс в экосистеме Windows.
Где отображаются значки приложений?
Значки приложений отображаются в различных местах Windows
- Уведомления
- Список «Открыть с помощью»
- Диспетчер задач
- JumpLists
- Параметры
- Окно обмена файлами
Принципы для отличных значков приложений
Простота
Создавайте чистые, простые, безвременные макеты . Значки — это быстрые визуальные подсказки, представляющие ваше приложение. простые, простые в понимании макеты помогают пользователям быстрее распознавать ваше приложение.
Сохраняйте его универсальным
Сделайте его доступным, приглашать и легко понять . Избегайте сложных или чрезмерно абстрактных форм. Сложная форма может быть уместной в некоторых культурах, но не в других. Инклюзивные значки лучше для всех. Мы сосредоточимся на человеческих унифицирователях — наших мотивациях, отношениях и возможностях. Мы разрабатываем, чтобы расширить человеческие способности и создать чувство принадлежности.
Делать меньше, лучше
Когда каждая деталь тщательно создана, восторг происходит — Лучшие приложения предлагают красивый дизайн и надежный опыт. Значок должен проиллюстрировать приложение в единственном элементе с помощью простых форм.
Проектирование и создание значка приложения
Узнайте, как использовать метафору, форму, цвет и тень для создания красивого и функционального значка приложения.
Создавайте значки, которые хорошо выглядят на любом размере на любом экране.
Если приложение поддерживает Windows 10, значки приложения будут отображаться в динамических плитках. Дополнительные сведения о значках в Windows 10
Источник: learn.microsoft.com
Как менялись иконки от Windows 1.x до Windows 11
Операционная система Windows всегда развивалась не сама по себе, а параллельно с совершенствованием компонентов компьютеров. Это же касается и иконок в ней — если в последние годы значки в Windows менялись только из-за смены дизайнерского стиля, то раньше их перерисовывали исключительно из-за совершенствования дисплеев.
Подписывайтесь на наш Телеграм
- В тему:Как менялся дизайн Windows — о главных изменениях, начиная с версии 3.0
Windows 1.x (1985) и Windows 2.x (1987)
В первых двух версиях Windows иконки появлялись только в том случае, если пользователь сворачивал программу на панель задач (Windows 1.x) или закреплял её на рабочем столе (Windows 2.x). Иконки были простейшими чёрно-белыми иллюстрациями размером 32×32 пикселя.
Чтобы запустить приложение, пользователи могли выбрать имя файла из списка в программе MS-DOS Executive. В ней отображались только названия, без значков — грубо говоря, как в терминале. В те времена Windows работала как базовая графическая оболочка поверх MS-DOS, поэтому простого списка файлов было достаточно даже без вычурного дизайна.
Windows 3.0 (1990)
В Windows 3.0 появилась поддержка 16-цветных значков, поэтому не стало удивлением, что обновлённые иконки стали именно такими (с прежним размером 32×32 пикселя). Они были выполнены с имитацией тени и в то время именовались 3D-значками — по сравнению с прошлыми, новые иконки действительно выглядели объёмными и существенно улучшенными. Их нарисовала Сьюзен Кэр (Susan Kare), которая ранее разработала значки и шрифты для оригинального Macintosh.
Иконки в Windows 3.0 впервые стали цветными, и Кэр правильно совместила в них красоту и деловой стиль — система стала привлекательнее даже для суровых офисных сотрудников, которые в то время в основном и использовали компьютеры.
Windows 3.1 (1992)
Иконки в Windows 3.1 всё ещё были 16-цветными и размером 32×32 пикселя, но они стали выглядеть гораздо выразительнее. Художники из Microsoft сумели перерисовать значки, добившись большей глубины и лучшей тени за счёт эффекта дизеринга — шахматного расположения пикселей двух цветов.
Получение фиолетового цвета за счёт эффекта дизеринга — шахматной расстоновки пикселей красного и синего цветов
Windows 95 (1995)
В Windows 95 перерисовали только часть значков — некоторые просто перенесли из Windows 3.1 в оригинальном виде. Большинство системных иконок по-прежнему являлись 16-цветными изображениями размером 32×32 пикселя, но Win32 API добавил поддержку иконок размером 256×256 пикселей с 16,7 млн цветов. На том момент это было небольшой революцией на рынке технологий.
Обычная (слева) и высокоцветная иконки (справа)
Более того, пакет дополнений Microsoft Plus! (или лазейка в реестре) позволял включить иконки на 65 536 цветов (в то время они назывались «высокоцветными» — high color), но их активировали далеко не все пользователи.
Windows 98 (1998)
В отличие от предшественников, Windows 98 поставлялась уже с 256-цветными значками по умолчанию. Многие из системных иконок Microsoft впервые сделала в большем размере — 48×48 пикселей, они идеально подходили для дисплеев с высоким разрешением (которые, по правде говоря, были редкостью).
- В тему:Время ностальгировать — как запустить Windows 98 в 2 клика
Несмотря на существенно более широкую цветовую палитру, разработчики перерисовали только некоторые иконки (наподобие «Моего компьютера» и «Корзины»). Часть иконок были взяты из Windows 95.
Windows 2000 и Windows ME (2000)
Иконки в этих операционных системах практически не изменились со времён предшественницы: всё те же 256 цветов, такие же размеры 32×32 или 48×48 пикселей. Но Microsoft перерисовала некоторые значки, чтобы отобразить в них больше деталей с большей глубиной цвета. В частности, изменились «главные» иконки — «Корзина» и «Мой компьютер».
Windows XP (2001)
А вот значки в Windows XP полностью преобразились. Во-первых, система получила 32-битные иконки (16,7 млн цветов и альфа-канал для прозрачности). Благодаря этому стали возможны полупрозрачные тени и стеклянный эффект, а улучшенное сглаживание положительно отразилось на гранях. Большинство системных значков по-прежнему были в размерах 32×32 или 48×48 пикселей.
Дизайнеры полностью перерисовали практически все иконки, и это бросалось в глаза (в хорошем смысле этого слова). У них были сглаженные углы, бо́льшая глубина цвета и плавные градиенты. Но эти изменения затронули не все значки, некоторые иконки не очень популярных приложений просто перенесли из более ранних версий Windows.
Windows Vista (2007)
В Vista дизайнеры сделали огромную ставку на новый визуальный интерфейс Aero, которому свойственны полупрозрачные эффекты и тени. Эта версия Windows первой получила иконки размером 256×256 пикселей, однако Microsoft перерисовала не весь набор — некоторые значки всё ещё были меньшего размера, хотя их можно было искусственно масштабировать.
Общий дизайнерский стиль иконок в Vista очевиден: они стали гладкими, глянцевыми и выполненными по канонам Aero. А ещё Microsoft постаралась последовать примеру операционной системы Mac OS X, которая выглядела одинаково независимо от разрешения дисплея.
Windows 7 (2009)
Значки в Windows 7 были практически идентичны таковым в Vista, но некоторые из ключевых иконок дизайнеры всё же переработали — в частности, «Панель управления» и Paint. Новые перерисованные иконки отличались плоскостью и анфасом, и это противоречило другим иконкам с глянцевостью и разворотом на 3/4.
- В тему:Вам придётся обновиться с Windows 7. Заставит не Microsoft, а видеокарта
Windows 8 (2012) и 8.1 (2013)
В Windows 8 разработчики представили радикально новый дизайн пользовательского интерфейса, получивший название Metro. Microsoft сделала огромную ставку на сенсорные устройства, поэтому всю систему адаптировала именно под них — на смену стандартным иконкам пришли «живые плитки» четырёх размеров, которые одновременно служили виджетами и могли отображать информацию.
- В тему:3 худшие в истории версии Windows — почему они провалились
Многие значки максимально упростили в сторону минимализма: они стали просто силуэтами объектов и фигур на каком-либо однотонном цветном фоне. Но одновременно с этим в системе всё же остались иконки из старых Windows, среди которых и «Проводник» — Microsoft не перерисовала даже его.
Windows 10 (2015)
После неудачной Windows 8 и не особо исправившей ситуацию Windows 8.1 разработчики представили Windows 10. При её создании Microsoft осознала свои ошибки, отказавшись от Metro-интерфейса, но свою идею оптимизации под планшеты и использования «живых плиток» не оставила. Это отразилось на иконках, причём не самым лучшим образом: какие-то значки были выполнены в стиле Windows 7, какие-то остались неизменными из Windows 8 (силуэт объекта на монотонном цветном фоне), а некоторые получили новый угловатый стиль. В 2020 году Microsoft начала обновлять дизайн некоторых иконок через обновления Windows 10, но изменения коснулись далеко не всех приложений.
Как итог, в Windows 10 получилась полная неразбериха со значками, поскольку каталог иконок состоял из трёх или четырёх разных стилей прошлых версий Windows.
Windows 11 (2021)
Похоже, что при разработке Windows 11 разработчики наконец осознали неразбериху иконок в Windows 10, избавившись от неё в обновлении. Первым делом они полностью отказалась от Metro-стиля как такового и «живых плиток» в частности — идея, которую Microsoft продвигала с 2012 года, канула в лету.
В Windows 10 ещё можно найти остатки «души» Windows 95. В Windows 11 их нет
Также разработчики наконец избавились от устаревших вариантов иконок, которые преследовали систему многие годы. К примеру, в Windows 10 были иконки ещё из Windows 95, но в обновлённой системе им не нашлось места.
- В тему:Всё о Windows 11 — секреты, инструкции, лайфхаки и полезные статьи
Оценивая новые иконки, можно сделать вывод, что Microsoft отдала предпочтение плоскому мультяшному дизайну с низкой детализацией и нежными градиентами.
Материалы по теме:
- Эта утилита показывает, где используется выбранный файл в Windows и что мешает удалить его
- Мод Windows 10 для игр: тестирую Atlas OS, из которого вырезали лишнее ради производительности
- Стандартные курсоры в Windows надоели — нашла 15 альтернатив. Рассказываю, как их установить
- Windows 7 мертва. Как стала лучшей и почему осталась такой до сих пор
- Эта скрытая опция Windows ощутимо ускоряет компьютер. Даже очень старый
Источник: trashbox.ru