Истории в мобильном приложении «Мой Tele2

В мобильном приложении «Мой Tele2» существуют истории — набор картинок, связанных
одной темой. Истории мо
гут рассказывать о новых функциях в приложении, популярных услугах или предложениях партнеров. Тема и предназначение истории определяет ее дизайн. Ниже
мы рассказываем, как определить стиль истории и правильно ее оформить.
 

Набор историй в приложении «Мой Tele2»

Cервисы, для которых тоже готовятся истории
Tele2 TV, Tele2 Гудок, АвтоштрафыTele2, Tele2 Travel.

О контенте

Мы не готовим однослайдовые истории. Минимальное количество слайдов — два. 
Также мы не расстягивает контент искусственно. 

Например:

Пример искусственно раздутого контента

Что не так:
Речь идет об одном украшении, из этого не нужно делать историю на 6 слайдов.
Достаточно экрана с изображением украшения и экрана с инструкцией, как его получить.

Техническая часть

Общие параметры для всех историй
Артборд: 375х667px

Безопасная зона: 303×513px 

Зона размещения контента: 267x513px
(чтобы контент умещался в узкие экраны)

Финальный макет: готовится без текста

Размер макета: 375х667px

Формат: прогрессивный JPGH, 3x

Вес: не более 350 Кб одно изображение

Текст

Заголовок всегда набирается шрифтом Tele2DisplaySerif Bold.
Остальной текст набирается шрифтом Tele2TextSans Regular.

Размеры шрифта, которые мы можем использовать

Обложка

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

Обложки могут быть графическими и фотографичными. 

Графичная обложка
Фотографичная обложка
Снова графичная обложка

Требования

Если не будет первым слайдом в истории

Размер:
200х200px
Формат: прогрессивный JPGH, 3x
Вес: не более 250 Кб

Изображение отдается в продуктив без текста.

 

Если будет первым слайдом в истории

Что дизайнер отдает контенту в итоге

Архив, в котором находятся:

1. Папка с превью (полноценная история с картинкой и текстом)
2. Папка с финальными макетами (без текста) 
3. Документ с текстом, где указаны кегли, которые использовались в макете.

Как называть макеты

Final/Preview(Состояние макета)_Stories (Тип макета)_Change_SIM (Тема истории)

Стили историй

Факты

В чем суть
Факты о фильме, сериале, музыке, картинах и т.п., лайфхаки и другая емкая информация.
Часто используется для рассказов о сервисах, подборках фильмов или альбомов.

Как делать
Изображение всегда располагается в верхней части макета.
Высота: 318px

Пример истории в таком стиле



При необходимости ставится маркировка (16+ и т.д.).

Параметры маркировки

Текст
Заголовок и основной текст располагаются в нижней части экрана. Максимальное количество символов всего текста (и заголовок, и описание) — 265.

Кнопка
В некоторых случаях под текстом может появиться кнопка.
На белом (светлом) фоне — черная, на черном (темном) фоне — белая, то есть кнопка должна быть контрастной.

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

Пример истории с кнопкой и картинкой
Пример истории с кнопкой и текстом

Как и какие фото мы используем
Используем фото того, о чем говорим — постеры фильмов, картины, фото людей, офисов, культурных объектов. Используем строго фото объекта, о котором идет речь. Если все слайды истории о местах отдыха, а один о том, как подключить роуминг, то фото на фон выбирается в общей стилистике истории, либо используется слайд только с текстом.

Фото используются только цветные. Исключение — постер фильма сделан в ч/б. 

Так надо:

Корректный подбор изображений

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

    Так не надо
Некорректный подбор изображений и использование стиля
Что не так:
  1. Неправильно выбран стиль истории для такой темы.
  2. Это просто набор картинок, которые никак не поддерживают текст.

О стилях фото
С фильмами все понятно. Как подбирать фото для других тем, объясняем ниже.

Так можно
И так можно
Так тоже можно

Почему:
  1. Фото эстетичные, без засветов и без контражура, понятно, что изображено на фото, нет множества мелких деталей.
  2. На фото присутствует человек, ракурс со спины, нет пластиковых стоковых лиц, зато есть настроение путешественника.
  3. Фото поддерживают то, о чем говорится в тексте.
ТАК НЕ НАДО

Почему:

  1. Фото с неественными ракурсами, размытым фокусом , с неудачной композицией и довольно сложно понять, какой текст они могут поддержать.
  2. Возможно, последнее фото может подойти, если мы будем рассказывать о каплях россы (нет).

Иллюстрации

В чем суть 
Используем этот стиль, если хотим рассказать о чем-то подробно, например: преимущества конкретного тарифа, акции (например, «Понедельники»), услуги, роуминг.

Как делать
Берем фотореалистичное изображение или хорошее 3D того, о чем идет речь в тексте. Это может быть прямая ассоциация или метафора, все зависит от контекста. Если мы говорим о бесплатном кофе в «Шоколаднице», то показываем их стакан, если говорим о чем-то более абстрактном, например, о SOS-пакете, то используем метафору. Эти изображения поддерживаем векторными объектами — от простых форм, таких как линии или круги, до примитивных иконок/иллюстраций. Фигура должна поддерживать изображение, дополнять его по смыслу, а не использоваться ради того, чтобы занять пустое место. Миксовать фото и 3D нельзя. 

Вместо картинки можно использовать mockup гаджета с реальным скриншотом интерфейса. 


Текст

Максимальное количество символов текста-описания  — 150.
Для заголовка — 50.

Кнопка
В некоторых случаях под текстом может появиться кнопка.
На белом (светлом) фоне — черная, на черном (темном) фоне — белая, то есть кнопка должна быть контрастной.
Так надо:

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

Так не надо:

Так не должна выглядеть история в таком стиле

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

Скриншоты

В чем суть 
Используем этот стиль, если нам нужно показать часть реального интерфейса.

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

Примеры

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

Пример

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

Примеры


Текст

Максимальное количество символов текста-описания  — 150. Для заголовка — 50.
180 cимволов мы можем использовать только для текстового слайда, где нет скриншотов,
как на примере выше.

Так надо

Так может выглядеть история в таком стиле
Почему
1. История выдержана в одной цветовой гамме
2. Используются реальные скриншоты, на экранах со скриншотами не используются иконки
3. Заголовки набраны антиквой и не привышают 50 символов
4. Иконки используются только на экранах с текстом


Так не надо:

Так не может выглядеть история в этом стиле

Почему
1. Здесь смешаны стили «Иллюстрация» и «Скриншоты» — используются и мокапы телефонов, и иконки,
не надо так.
2. На первом слайде иконка используется с текстом, так можно, но в данном случае текста очень мало.  
В таком случае либо дописывается текст, либо текст разбивается на заголовок и описание, либо используется скриншот и шейп без иконки. 
3. На втором слайде текст набран заголовочным шрифтом. Ограничение для заголовка — 50 символов,
здесь явно больше. В таком случае текст должен быть набран другим шрифтом. 
4. На последнем экране два очень шумных контрастных экрана, но телефоны одинаковые. В таком случае надо показывать только один телефон.