Гайдлайн по iOS на русском. Часть 47 — Иконки и картинки: Иконка приложения

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

Каждому приложению нужна красивая и запоминающаяся иконка, которая привлекает внимание в магазине App Store и выделяется на домашнем экране. Ваша иконка — это первая возможность с первого взгляда рассказать о цели вашего приложения. Она также видна во всей системе, например в настройках и результатах поиска.

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

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

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

Сделайте фон простым и избегайте прозрачности. Убедитесь, что ваша иконка непрозрачна и не загромождает фон. Задайте ей простой фон, чтобы он не конфликтовал с другими иконками приложений поблизости. Вам не нужно впихивать контент и кучу деталей лишь бы забить всю область иконки.

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

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

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

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

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

Всегда сохраняйте форму иконки квадратной. Система сама применит маску, которая автоматически скгругляет углы иконок.

Атрибуты иконки приложения

Все иконки приложений должны соответствовать следующим спецификациям.

Размеры значков Приложений

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

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

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

Spotlight (Поиск), Настройки и иконки уведомлений

Каждое приложение также должно содержать небольшую иконку, которую iOS может отобразить, когда название приложения совпадает с результатом в поиске Spotlight. Кроме того, приложения, у которых могут быть настройки должны показать небольшую иконку для отображения в системном приложении “Настройки”, а приложения, поддерживающие уведомления, должны отображать небольшую иконку в уведомлениях. Все иконки должны четко характеризовать ваше приложение — в идеале они должны соответствовать в точности иконке вашего приложения. Если вы не предоставите эти значки, iOS может уменьшить вашу основную иконку приложения для отображения в этих местах.

Не добавляйте наложение или обводку к иконке в системных настройках. iOS автоматически добавляет обводку в 1 пиксель ко всем иконкам, чтобы они хорошо выделялись на белом фоне настроек.

📌 Если ваше приложение умеет создает документы, вам не нужно создавать иконки документов, потому что iOS использует иконку вашего приложения для автоматического создания значков документов в файлах.

Иконки приложений, выбираемые юзером

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

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