Дизайн и анатомия 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

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

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

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

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

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

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

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

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

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

1. Иконка Устанавливается один раз и не может быть изменена для отдельного сообщения. Она должна быть размером 256x256. Файлы в форматах PNG, JPG, GIF (не анимированные).
2. Заголовок Ограничен до 40 символов.
3. Контент Ограничен до 90 символов.

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

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

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

1. Изображение баннера 360x180 или соотношение сторон 2:1. В форматах PNG, JPG, GIF (не анимированные).
2. Иконка 192x192 или больше. Файлы в форматах PNG, JPG, GIF (не анимированные).
3. Браузер Не может быть изменен.
4. Кнопки действий Поддерживает до 2 кнопок действий
5. Заголовок Ограничен до 60 символов.
6. Контент Ограничен до 120 символов.
7. Домен Сайт, на который подписан пользователь. Его нельзя изменить.

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

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

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

1. Заголовок Ограничен до 40 символов.
2. Иконка 192x192 или больше. Файлы в форматах PNG, JPG, GIF (не анимированные).
3. Домен Сайт, на который подписан пользователь. Его нельзя изменить.
4. Контент Ограничен до 140-190 символов.
5. Настройки Не могут быть изменены.

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

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

1. Бейдж 72x72 или больше. Должен быть белым с прозрачным фоном. В формате PNG.
2. Заголовок Ограничен до 50 символов.
3. Body Ограничен до 150 символов.
4. Большое изображение 1024x512 или соотношение сторон 2:1. В форматах PNG, JPG, GIF (не анимированные).
5. Браузер Нельзя изменить.
6. Домен Сайт, на который подписан пользователь. Его нельзя изменить.
7. Временная метка Когда сообщение было доставлено.
8. Иконка 192x192 или больше. PNG, JPG, GIF (не анимированные).

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

Нативное push-уведомление Android

1. Небольшая иконка 24x24 - 96x96, чтобы соответствовать устройствам любых размеров. Должна быть белой с прозрачным фоном. В формате PNG.
2. Заголовок Ограничен до 50 символов.
3. Основной текст Ограничен до 150 символов.
4. Большое изображение 1440x720 или соотношение сторон 2:1. В формате PNG, JPG, GIF (не анимированные).
5. Кнопки действий Поддерживает до 3 кнопок.
6. Название приложения Не может быть изменено.
7. Временная метка Время, когда сообщение было доставлено.
8. Иконка 192x192 или больше. В формате PNG, JPG, GIF (не анимированные).

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

Нативные push-уведомления для iOS

1. Иконка приложения Использует иконку приложения по умолчанию и не может быть изменена
2. Rich Media 1024x1024 или соотношение сторон 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.

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

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

• Notification preview tool
• Push notification guide
• Rich media guide
• Android notification icon guide
• Web push icons and images guide

---

Перевод статьи onesignal.com