Гайдлайн по iOS на русском. Часть 84 — Расширения: Сообщения

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

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

iMessage приложения

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

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

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

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

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

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

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

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

Стикеры

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

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

Мыслите глобально. Обмен сообщениями — это универсальная форма общения. Стремитесь к созданию стикеров, которые будут привлекательно смотреться в любой народности.

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

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

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

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

Размеры стикеров

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

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

Помните об ограничениях на размер файла. Для повышения эффективности каждый отдельный стикер не может превышать 500 КБ. Обратите внимание, что Xcode сохраняет анимацию в формате PNG с использованием 24-битной палитры, что может привести к увеличению размера файла больше ожидаемого.

Форматы стикеров

Сообщения поддерживают стикеры в следующих форматах файлов:

Иконки приложений iMessage и наборов стикеров

Как и приложения iOS, приложения iMessage и наборы стикеров нуждаются в узнаваемых иконках.

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

Оставляйте углы иконок квадратными. Система создаст маску, которая автоматически округляет углы иконок.

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