1 7 800x440 - Дизайн и анатомия push-уведомлений в 2020 году

Push-уведомления существуют уже более 10 лет. Они впервые появились в iOS в 2009 году, после чего были быстро добавлены во все основные мобильные операционные системы. Затем в 2014 году появились веб push-уведомления.

На сегодняшний день push-уведомления поддерживаются в Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge… список можно продолжать.

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

В этой статье я попытаюсь помочь вам сориентироваться в дизайне push-уведомлений путем анализа их анатомии. И, если вы дизайнер, то вам пригодится этот UI kit push-уведомлений для Figma.

Web push-уведомления Chrome для macOS

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Push-уведомление Chrome для macOS
  1. Иконка браузера
    Иконка Chrome. Ее нельзя изменить.
  2. Заголовок
    Ограничен до 20-40 символов.
  3. Домен
    Сайт, на который подписан пользователь. Его нельзя изменить.
  4. Контент
    Ограничен до 20-80 символов.
  5. Иконка
    192×192 или больше. Файлы в форматах PNG, JPG, GIF (не анимированные).

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

Web push-уведомления Firefox для macOS

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Push-уведомление Firefox для macOS
  1. Иконка браузера
    Иконка Firefox. Ее нельзя изменить.
  2. Заголовок
    Ограничен до 20-40 символов.
  3. Домен
    Сайт, на который подписан пользователь. Его нельзя изменить.
  4. Контент
    Ограничен до 20-80 символов.
  5. Иконка
    192×192 или больше. Файлы в форматах PNG, JPG, GIF (не анимированные).

Обратите внимание, что ограничения символов зависят от наличия иконки и используемых символов.

Web push-уведомления Safari для macOS

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Push-уведомление Safari для macOS
  1. Иконка
    Устанавливается один раз и не может быть изменена для отдельного сообщения. Она должна быть размером 256×256. Файлы в форматах PNG, JPG, GIF (не анимированные).
  2. Заголовок
    Ограничен до 40 символов.
  3. Контент
    Ограничен до 90 символов.

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

Web push-уведомления Chrome для Windows

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Push-уведомление Chrome для Windows
  1. Изображение баннера
    360×180 или соотношение сторон 2:1. В форматах PNG, JPG, GIF (не анимированные).
  2. Иконка
    192×192 или больше. Файлы в форматах PNG, JPG, GIF (не анимированные).
  3. Браузер
    Не может быть изменен.
  4. Кнопки действий
    Поддерживает до 2 кнопок действий
  5. Заголовок
    Ограничен до 60 символов.
  6. Контент
    Ограничен до 120 символов.
  7. Домен
    Сайт, на который подписан пользователь. Его нельзя изменить.

Windows предлагает большую часть экранного пространства для отображения баннера и иконки.

Web push-уведомления Firefox для Windows

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Push-уведомление Firefox для Windows
  1. Заголовок
    Ограничен до 40 символов.
  2. Иконка
    192×192 или больше. Файлы в форматах PNG, JPG, GIF (не анимированные).
  3. Домен
    Сайт, на который подписан пользователь. Его нельзя изменить.
  4. Контент
    Ограничен до 140-190 символов.
  5. Настройки
    Не могут быть изменены.

Web push-уведомления Chrome для Android

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Push-уведомление Chrome для Android
  1. Бейдж
    72×72 или больше. Должен быть белым с прозрачным фоном. В формате PNG.
  2. Заголовок
    Ограничен до 50 символов.
  3. Body
    Ограничен до 150 символов.
  4. Большое изображение
    1024×512 или соотношение сторон 2:1. В форматах PNG, JPG, GIF (не анимированные).
  5. Браузер
    Нельзя изменить.
  6. Домен
    Сайт, на который подписан пользователь. Его нельзя изменить.
  7. Временная метка
    Когда сообщение было доставлено.
  8. Иконка
    192×192 или больше. PNG, JPG, GIF (не анимированные).

Мобильное push-уведомление, нативное уведомление Android

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Нативное push-уведомление Android
  1. Небольшая иконка
    24×24 – 96×96, чтобы соответствовать устройствам любых размеров. Должна быть белой с прозрачным фоном. В формате PNG.
  2. Заголовок
    Ограничен до 50 символов.
  3. Основной текст
    Ограничен до 150 символов.
  4. Большое изображение
    1440×720 или соотношение сторон 2:1. В формате PNG, JPG, GIF (не анимированные).
  5. Кнопки действий
    Поддерживает до 3 кнопок.
  6. Название приложения
    Не может быть изменено.
  7. Временная метка
    Время, когда сообщение было доставлено.
  8. Иконка
    192×192 или больше. В формате PNG, JPG, GIF (не анимированные).

Нативное мобильное push-уведомление, уведомление iOS

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году
Нативные push-уведомления для iOS
  1. Иконка приложения
    Использует иконку приложения по умолчанию и не может быть изменена
  2. Rich Media
    1024×1024 или соотношение сторон 1:1. В форматах PNG, JPG, GIF, MP4, MP3, WAV.
  3. Заголовок
    Ограничен до 25-50 символов.
  4. Сообщение
    Ограничено до 150 символов.
  5. Название приложения
    Не может быть изменено.
  6. Настройки
    Не могут быть изменены.
  7. Кнопки действия
    Поддерживает до 4 кнопок.

iOS также имеет поддержку подзаголовков. Обратите внимание, что в отличие от Android, iOS в настоящее время не поддерживает веб push-уведомления.

Бесплатный набор push-уведомлений для Figma

Если ваш проект использует push-уведомления, ознакомьтесь с этим бесплатным дизайн-файлом Figma.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Дизайн и анатомия push-уведомлений в 2020 году

UI kit push-уведомлений для Figma

Полезные ресурсы по push-уведомлениям:

Свежие вакансии
                        GermanLanguage.ph LLC GermanLanguage.ph LLC German Language School – Product Designer (UX/UI) Удаленно Ереван
                        Региональная Академия делового образования Региональная Академия делового образования Технический дизайнер Удаленно Самарская область
                        BR LAb BR LAb UX/ UI web-designer Удаленно Москва 80 000 - 120 000 ₽
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
Все вакансии

Оригинал: onesignal.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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