Размер иконок

Содержание

Какие размеры значков должны включать значок приложения Windows?

Размер иконок

У меня есть приложение Windows, которое будет работать в Windows XP и новее (т. е. Vista/7). Согласно Vista UI Guidelines, стандартные размеры 16×16, 32×32, 48×48, 256×256 (стандартные размеры XP не включают значок 256×256). В дополнение к этим размерам у меня также есть 96×96 и 128×128 (и может создать больше).

какой из этих размеров значков Я должен включить? Будет ли оболочка фактически использовать “нестандартные” размеры, или я просто раздую заявление?

Мне потребовалось некоторое время, чтобы проверить его в деталях. Я создал икону, изображения имеют размеры 16, 24, 32, 40, 48, 64, 96, 128 и 256. Затем я проверил, какое изображение показано. Все это было сделано с нормальным 96dpi. При использовании большего DPI могут использоваться большие размеры (только немного проверено в Windows 7). Результаты:

Windows XP:

  • вид проводника :
    • Детали / Список: 16
    • иконки: 32
    • плитка / Миниатюры: 48
  • щелкните правой кнопкой мыши – > Свойства / выбор нового значка: 32
  • область быстрого запуска: 16
  • рабочий стол: 32

Windows 7:

  • вид проводника :
    • детали / список / маленькие символы: 16
    • все остальные параметры: 256 (при необходимости изменить размер)
  • щелкните правой кнопкой мыши – > Свойства / выбор нового значка: 32
  • приперся панель задач: 32
    • правой кнопкой мыши-меню: 16
  • рабочий стол:
    • маленькие символы: 32
    • средние символы: 48
    • большие символы: 256 (при необходимости изменить размер)
    • масштабирование с помощью Ctrl+колесо мыши: 16, 32, 48, 256

Среда Выполнения Windows: (отсюда)

  • основной плитки: 150х150, значение “310×150” (широкий версия)
  • небольшой логотип: 30х30
  • значок (для экрана блокировки): 24×24, монохроматический
  • Splashscreen: 620×300
  • магазин: 50×50

Итак, результат: Windows XP использует значки 16, 32, 48-размера, в то время как Windows 7 (и, предположительно, Vista) также использует значки 256-размера. все другие промежуточные размеры значков игнорируются (они мая использоваться в некоторой области, которую я не проверял).

Я также проверил в Windows 7, что произойдет, если размеры значков отсутствуют:

генерируются недостающие размеры (очевидно). При размерах 16, 32 и 48, если один отсутствует, предпочтительнее масштабирование. Поэтому, если у нас есть значки размером 16 и 48, значок 32 создается из значка 48. значок 256 используется только для них, если нет других размеров! Итак, если значки имеют размер 16 и 256, другие размеры масштабируются от значка 16!

кроме того, если значок 256 отсутствует, (возможно, сгенерированный) Значок 48 используется, но больше не изменяется. Таким образом, у нас есть (возможно, большая) пустая область со значком 48 в середине.

обратите внимание, что размер значка рабочего стола по умолчанию в XP был 32×32, а в Windows 7-48×48.как следствие, для Windows 7 относительно важно иметь значок 48. в противном случае он масштабируется от меньшего значка, который может выглядеть довольно уродливо.

просто примечание о совместимости Windows XP: если вы повторно используете значок в качестве значка окна, затем обратите внимание, что это может привести к сбою приложения, если вы используете значок сжатого 256. Решение состоит в том, чтобы либо не сжимать значок, либо создать вторую версию без (сжатого) значка 256. См.здесь для получения дополнительной информации.

после некоторого тестирования со значком с 8, 16, 20, 24, 32, 40, 48, 64, 96, 128 и 256 пикселей (256 в PNG) в Windows 7:

  • при 100% разрешении: Explorer использует 16, 40, 48 и 256. Windows Photo Viewer использует 96. Краски использует 256.
  • при разрешении 125%: Explorer использует 20, 40 и 256. Windows Photo Viewer использует 96. Краски использует 256.
  • при разрешении 150%: Explorer использует 24, 48 и 256. Windows Photo Viewer использует 96. Краски использует 256.
  • при разрешении 200%: Explorer использует 40, 64, 96 и 256. Windows Photo Viewer использует 128. Краски использует 256.

таким образом, 8, 32 никогда не использовались (мне странно для 32) и 128 только Windows Photo Viewer с очень высоким экраном dpi, т. е. почти никогда не использовались.

Это означает, что ваш значок должен по крайней мере 16, 48 и 256 для Windows 7. Для поддержки новых экранов с высоким разрешением необходимо предоставить 16, 20, 24, 40, 48, 64, 96, и 256. Для Windows 7, Все изображения можно обжать используя PNG но для обратной совместимости с Windows XP, 16 до 48 не должны быть обжаты.

на Microsoft UX значок руководство говорит:

“значки приложений и элементы панели управления: полный набор включает 16×16, 32×32, 48×48 и 256×256 (кодовые шкалы между 32 и 256).”

для меня это означает (но, к сожалению, явно не указано), что вы должны предоставить эти 4 размера.

дополнительные сведения о цветовых форматах, которые вы также можете найти полезными:

  • “файлы значков также требуют 8-разрядных и 4-разрядных версий палитры, чтобы поддерживать настройку по умолчанию на удаленном рабочем столе.”
  • ” должна быть включена только 32-разрядная копия пиксельного изображения 256×256, и только пиксельное изображение 256×256 должно быть сжато [как PNG], чтобы уменьшить размер файла.”

Не 96×96, вместо этого используйте 64×64. Я обычно использую:

  • 16-кнопка статус / заголовок
  • 32 – значок рабочего стола
  • 48-вид папки
  • 64/128 – дополнительные размеры

256 работает как на XP, Однако старые компиляторы ресурсов иногда жаловались на “ошибки памяти”.

в случае Windows 10 это не совсем точно, на самом деле ни один из ответов на stackoverflow не был, я обнаружил это, когда я пытался использовать пиксельную графику в качестве значка, и он был масштабирован, когда он не должен был(было легко увидеть в этом случае причину интерполяции и сглаживания окон), даже ты я использовал размеры из этого поста.

поэтому я сделал приложение и сделал работу над всеми настройками DPI, см. Его здесь:
Windows 10 все разрешения значков на всех DPI настройки
Вы также можете использовать мое приложение для создания иконок, также с интерполяцией ближайшего соседа с сглаживанием, что не делается ни с одним из плохих редакторов, которые я видел.

Если вы хотите только резолюции:
16, 20, 24, 28, 30, 31, 32, 40, 42, 47, 48, 56, 60, 63, 84, 256
и вы должны использовать все значки PNG, и все, что вы кладете рядом с ними, не будет отображаться. Смотрите мой в должности почему.

с рекомендации Microsoft MSDN:

значки приложений и элементы панели управления: полный набор включает 16×16, 32×32, 48×48, и 256×256 (маштабы кода между 32 и 256). Этот.требуется формат файла ico. Для классического режима полный набор-16×16, 24×24, 32×32, 48×48 и 64×64.

таким образом, у нас уже есть стандартные рекомендуемые размеры:

  • 16 x 16,
  • 24 x 24,
  • 32 x 32,
  • 48 x 48,
  • 64 x 64,
  • 256 x 256.

Если мы хотим поддерживать высокие настройки DPI, полный список будет включать в себя следующие размеры:

  • 20 x 20,
  • 30 x 30,
  • 36 x 36,
  • 40 x 40,
  • 60 x 60,
  • 72 x 72,
  • 80 x 80,
  • 96 x 96,
  • 128 x 128,
  • 320 x 320,
  • 384 x 384,
  • 512 x 512.

Источник: https://askdev.ru/q/kakie-razmery-znachkov-dolzhny-vklyuchat-znachok-prilozheniya-windows-7563/

Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?

Размер иконок

От переводчика. Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить.

Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.

https://www.youtube.com/watch?v=ZWbwwfOrd4Q

С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?

Устроим викторину!

Каков основной файл фавикона?

Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.

Вопрос: Какого размера должен быть favicon.ico?

A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.

Ответ: D.

Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.

Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:
16х16 на вкладке Chrome. Пока всё хорошо. Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.
16х16 в панели задач.
16х16 на рабочем столе. Не хорошо. Когда иконка содержит несколько изображений, результат гораздо лучше.
16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.
16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.

Вопрос: Каково назначение favicon.png?

На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом. Что это на самом деле?

A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?

B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.

Ответ: D.

Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Так что мы должны объявлять? Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.

favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.

Вопрос: Какой формат необходим для поддержки мобильных платформ?

Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?

A: favicon.ico. Это работало 15 лет назад, работает и сегодня.

B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.

Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.

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

Вопрос: Какого размера должны быть PNG иконки?

A: 96х96 для Google TV B: 196х196 для Android Chrome C: 228х228 для Opera Coast

D: Все перечисленные

Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.

Вопрос: Каков размер Apple Touch icon?

Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.

Ответ: Вплоть до 180х180.

После появления первого iPhone, было 3 важных релиза:

  • iPad. С экраном гораздо большего размера.
  • Retina-экраны. С удвоеной плотностью пикселов.
  • iOS7. Плоский дизайн отличается на iPhone/iPad.

Всего есть 9 комбинаций.

Устройство Экран Версия iOS Размер иконки
iPhoneClassic6 и ниже57×57
760×60
Retina6 и ниже114×114
7120×120
6 Plus8 и выше180×180
iPadClassic6 и ниже72×72
776×76
Retina6 и ниже144×144
7152×152

Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.
Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.

Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно.

Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.

Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?

A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но…

Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.

Вопрос: Как объявить плитку для планшетов на Windows 8?

A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.

Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.

Объявление для Windows 8.0 выглядит как-то так: Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например: #2b5797 Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
Плитки сайтов в Windows 8.

A: 150х150. Вы не умеете читать?
B: Иной.

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

Поздравляем, вы закончили викторину! Как вы это сделали?

Суть этих вопросов — показать какой сложной может быть действительность, несмотря на кажущуюся простоту. Времена, когда фавикон был единственным favicon.ico давно ушли.

Но старые привычки сохраняются и могут привести к абсурдным ситуациям.

Мы тратим дни на аккуратный отзывчивый дизайн и добавляем только 57х57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.

  • favicon
  • favicon.ico
  • apple touch icon
  • tile icon
  • web-разработка
  • фавиконы

Хабы:

  • Разработка веб-сайтов
  • Разработка мобильных приложений
  • HTML

Источник: https://habr.com/ru/post/260777/

Как изменить размер значков на рабочем столе с Windows 10?

Размер иконок

Рад вас видеть на fast-wolker.ru !Сегодня мы займемся дизайном рабочего стола в операционной системе Windows 10. При установке любой операционной системы, все настройки в ней устанавливаются по умолчанию. Не всех пользователей эти настройки могут устраивать, например размер значков как на рабочем столе, так и в окне проводника.

Кого-то не устраивает, что значки на рабочем столе слишком мелкие, кому-то, наоборот, нужны очень крупные значки. Провести такие настройки совсем несложно. Существует несколько способов проведения подобной операции, которые мы и рассмотрим.

Самый простой и быстрый способ изменения размера значков – это кликнуть правой кнопкой мыши в любом месте экрана. В открывшемся окне выбираем пункт «вид». Сбоку от первого окна, откроется еще одно, где будут представлены три варианта изменения размера: крупные значки, обычные и мелкие. Выбираем любой вариант и изменения тут же вступят в силу.

Так же можно аналогичную операцию провести в проводнике. В окне проводника находим вкладку вид и открываем ее. Здесь к трем вариантам изменения размера, которые мы видели ранее, добавляется еще один вариант – огромные значки.

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

В проводнике, после того, как выбрали нужное значение размеров переходим во вкладку «параметры» и выбираем «изменить параметры папок и поиска».

В открывшемся вновь окне, выбираем вкладку «вид» и нажимаем на кнопку «применить к папкам». Подтверждаем изменения.

В результате мы изменим параметры не только папок в окне проводника, но и другие тоже. Изменить размеры значков можно и через «Разрешение экрана»

Меняем размер значков и шрифта на рабочем столе через «Разрешение экрана»

Изменить значки можно и через параметры «Разрешение экрана», правда настроек там не так у ж и много.

Кликаем правой кнопкой мыши в любом месте экрана и в открывшемся меню выбираем пункт «параметры экрана».

Откроется окно, где можно произвести изменения двумя способами.

В первом способе передвигаем ползунок «изменение размеров текста и….» влево, в результате увеличиваем размер всех перечисленных элементов до 125%. Но и только.

Во втором случае, идем через пункт «дополнительные параметры экрана».

В открывшемся окне переходим по строке «дополнительные изменения размеров текста и…»

В новой вкладке можно изменять как размеры текста и других элементов, так и только размеры текста.

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

Легкий способ изменения размера значков и ярлыков рабочего стола при помощи мыши

Вообще, самых простых способов с использованием только горячих клавиш можно выделить два.

Первый способ заключается в следующем. Нажимаем и удерживаем на клавиатуре клавишу Ctrl. Затем вращаем колесико мыши вверх или вниз. При этом увидим, как изменяется размер иконок на рабочем столе.

Чем хорош этот способ, мы имеем много вариантов, а не два или три, как это делается через контекстное меню.

Второй вариант – нажимаем комбинацию клавиш. При этом мы имеем только четыре варианта изменения размера:

  • Ctrl+Shift+1 — огромные иконки;
  • Ctrl+Shift+2 — большие иконки;
  • Ctrl+Shift+3 — средние иконки;
  • Ctrl+Shift+4 — маленькие иконки.

Впрочем, кому-то хватит и этих вариантов.

Как сменить герцовку монитора в Windows 10?

Герцовка — это частота обновления монитора или скорость изменения изображения на экране за определенный момент времени. Очень часто у людей болят глаза от монитора или начинает болеть голова. Если позволяет монитор и видеокарта можно изменить частоту обновления экрана монитора. Лично для меня комфортным значением является частота 75  Гц,

За начало отсчета взята средняя частота монитора в 60 герц. Это значит, что за секунду  изображение обновляется 60 раз. Вот отсюда головные боли или усталые глаза.

Чем выше частота, тем лучше отображается на экране картинка. Что бы не только узнать, какая частота экрана вашего компьютера, но и по необходимости изменить ее, надо нажать в любом месте экрана правой кнопкой мыши. И выбрать строку «параметры экрана». В открывшемся окне находим внизу строку «дополнительные параметры экрана».

Переходим по ней, и в новом окне, так же в самом низу находим: «свойства графического адаптера».

Откроется окно, где открываем вкладку Монитор. Здесь видим окно «частота обновления экрана».

В зависимости от графического адаптера, который у вас установлен (или просто, видеокарта) здесь будет показано максимально допустимая частота. По умолчанию – если у вас стандартный адаптер, то будет стоять частота в 60 герц. Если же у вас не встроенный адаптер, можно будет менять частоту, раскрыв это окно.

И выбрать наиболее комфотную и поддерживаемую вашим адаптером. Вот так можно произвести настройки монитора компьютера или ноутбука в системе Windows 10. Успехов!

Источник: https://fast-wolker.ru/kak-izmenit-razmer-znachkov-windows-10.html

Выбираем правильный размер иконок

Размер иконок

Для каждой операционной системы существуют свои стандартные размеры иконок. Кликните на названии операционной системы, чтобы прокрутить страницу вниз к интересующему разделу.

Windows16×16, 24×24, 32×32, 48×48, 256×256
Mac OS X16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024
Linux16×16, 24×24, 48×48, and 96×96
iOS 629×29, 50×50, 57×57, 58×58, 72×72, 100×100, 114×114, 144×144, 1024×1024
iOS 729×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 1024×1024
Android36×36, 48×48, 72×72, 96×96, 512×512
Windows Phone62×62, 99×99, 173×173, 200×200

Иконки должны быть в формате .ico.
Полный набор должен включать следующие размеры:

  • 16×16
  • 32×32
  • 48×48
  • 256×256

Иконки для Windows 8 (Metro Design)

  • Иконка приложения 30х30, 50×50, 150×150
  • Иконки панели инструментов 26х26

Необходимые размеры: 16×16, 24×24, 32×32.
Помните, иконки должны быть плоскими даже в максимальном размере 32×32.

Необходимые размеры: 32×32 и 48×48

Если вы хотите быть уверены, что ваша иконка будет смотреться одинаково хорошо на экранах любого разрешения, необходимо создать ее в следующих размерах:

  • 1024×1024
  • 512×512
  • 256×256
  • 128×128
  • 64×64
  • 32×32
  • 16×16

оздавайте иконки в стандартном и высоком разрешении (для мониторов с «Ретина» дисплеем). Необходимо подготовить два размера иконок:

Сохраняйте иконки в формате PNG.

Создавайте иконки в трех размерах:

  • 16×16
  • 18×18
  • 32×32 пиксела (если используете PDF)

Если вы сохраните иконки для бокового меню в формате PDF, что рекомендуется компаниемй Apple, OS X автоматически изменит размер вашей иконки для мониторов высокого разрешения. Если же вы сохраняете иконки в формате PNG, необходимо подготовить следующие размеры:

  • 16×16
  • 16×16@2x
  • 18×18
  • 18×18@2x
  • 32×32
  • 32×32@2x

В Linux используются трехмерные иконки.

Жирным выделен основной размер для каждого типа иконок.

Объект и документ24×24,48×48, and 96×96
Иконка приложения24×24,48×48
Панель инструментов24×24,48×48
Меню16×16
ОписаниеСтандартное разрешениеВысокое разрешение (Ретина дисплей)
Иконка приложения57×57114×114
Настройки29×2958×58
Поиск29×2958×58
Иконка приложения для интернет магазина Apple512×5121024×1024

iPad

ОписаниеСтандартное разрешениеВысокое разрешение (Ретина дисплей)
Иконка приложения72×72144×144
Настройки29×2958×58
Поиск100×10050×50
Иконка приложения для интернет магазина Apple512×5121024×1024
ОписаниеРазмер иконки
Иконка приложения120×120
Настройки58×58
Поиск80×80
Иконка приложения для интернет магазина Apple1024×1024

Панель действий

Самое высокое разрешение (xhdpi)96×96
Очень высокое разрешение (xhdpi)64×64
Высокое разрешение (hdpi)48×48
Среднее разрешение (mdpi)36×36

  Минуточку внимания: советуем брать плоские иконки в нашем новом проекте Icons8. Их 35000 и ежедневно появляются новые.

Необходимые икнки в пакете XAPРазмер иконки
Иконка приложения62×62
Плитка под иконкой приложения173×173

Иконки для интернет магазина Windows

IconSize
Иконка приложения для мобильного интернет магазина Windows (маленькая)99×99
Иконка приложения для мобильного интернет магазина Windows (маленькая)173×173
Иконка приложения для настольного интернет магазина Windows200×200

Источник: https://www.visualpharm.ru/articles/icon_sizes.html

Как создать иконки для приложений на Android и iOS

Размер иконок

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

96px

144px

192px

Вы, конечно, помните: любое масштабирование должно сохранять пропорции изображения.

Иконки приложения для публикации на Google Play

Иконка приложения для публикации в Google Play должна быть 512 x 512 пикселей, с высоким разрешением.

Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.

Раздел “Рекомендуемые”

В разделе “Рекомендуемые” можно продемонстрировать потенциальным пользователям графические возможности приложения. 

Требования к иконке в разделе “Рекомендуемые” :

  • JPEG или 24-битный PNG (без альфа-канала)
  • 1024 х 500 пикселей

Расположение

Картинка для раздела “Рекомендуемые” располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка “Воспроизвести”.

Советы

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

Цели иконки приложения

У иконки приложения есть 3 основных цели:

  1. Продвижение бренда, рассказ о цели приложения.
  2. Помощь пользователю в поиске приложения в Google Play.  
  3. Функция запуска.

Продвижение бренда

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

Образцы иконок приложений.

Помогите пользователю найти приложение в Google Play

Иконка должна привлекать внимание пользователя во время скроллинга. Качественный дизайн иконки – однозначный сигнал, о том, что Ваше приложение такого же высокого качества.

Для разработки иконки приложения лучше обратиться к дизайнеру.

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

Для 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 пиксель ко всем иконкам, чтобы они хорошо смотрелись на белом фоне в параметрах настройки.

Подкупающая простота

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

Четкий фокус

Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.

Узнаваемость

Никто не будет анализировать иконку, чтобы понять ее значение.

К примеру, в качестве иконки почтового приложения традиционно используется изображение конверта, который ассоциируется с почтой. Хотите хорошую иконку – потратьте время на разработку привлекательного и понятного всем абстрактного символа.

Без прозрачности, простой фон

Иконка должна быть без прозрачности, фон не загроможден. Простой фон не подавляет другие элементы рядом.

Без надписей

Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.

Без фото, скриншотов и элементов интерфейса

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

Без точных копий продуктов Apple

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

Не помещайте повсюду в интерфейсе иконку приложения

Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.

Протестируйте иконку на разных обоях

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

Сохраняйте углы иконки квадратными

Система округляет углы иконки автоматически.

Вот и все! Желаем удачи и много красивых иконок для ваших приложений.

Источник: https://blog.sbssoft.ru/post/kak-sozdat-ikonki-dlya-prilozheniy-na-android-i-ios

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.