Kaiten

[PMO] База знаний функциональности (интернет)

To Kaiten

4.1 Лого, цвета и иллюстрации для приложений

Что нужно знать о брендировании приложений?

Актуальные материалы по брендированию здесь

Брендирование — это замена логотипов, картинок, иконок и цветов на экранах приложения под ваш бренд.

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

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

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

Обратите внимание, в базовом тарифе запуска мы используем наши стандартные иконки объектов и станций на карте. Их визуал вы можете посмотреть в п.5—п.9

Если вы желаете создать и добавить свои фирменные иконки, обратите внимание,

эта услуга платная.

Кроме того, в базовом тарифе запуска предусмотрено добавление вашего лого на экране авторизации на стандартном фоне (см. п.2 таблицы). Если вы хотели бы иметь цветной фон в приложении для этого экрана, то эту услугу тоже можно оформить дополнительно.

Подробнее о процессе брендирования:

  1. Вы присылаете нам материалы в фирменном стиле согласно требованиям ниже, также актуальные требования публикуются здесь.

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

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

  4. Передаем дизайн в работу Android и iOS-разработчикам для создания вашего мобильного приложения. Тестируем результат на соответствие дизайну.

  5. Вы можете увидеть ваши брендированные приложения до публикации на 5 этапе запуска сервиса — в процессе тестирования.

Материалы для брендирования

Экраны

1. Splash screen — это первый загрузочный экран при открытии приложения.

Можно использовать короткое видео или лого вашей компании.
Лого может быть на прозрачном фоне или на фоне изображения.

Видео:
MP4, 1080х1920 px

Картинка логотипа:
PNG + SVG, 150х100 px

Лого с фоном изображения:
PNG + SVG, 1080х1920 px

2. Онбординг-экраны (приветственные экраны)

— до 7 экранов

К каждому экрану:

— картинка или видео

— заголовок

— текст

Заголовок и текст на русском и английском

Видео:

MP4, 1080х1920

Картинки:

PNG + SVG, 1080х1920

Рекомендуем без контента оставить нижние 20% экрана, чтобы часть контента не накладывалась на кнопку управления.

Советы:

  • Не рекомендуем размещать на экране текст больше 2 строчек.

  • Вы можете прислать только иллюстрации, заголовок и текст к ним. Тогда мы добавим его программно. Второй вариант — оформить надписи как часть иллюстраций (пример на картинке выше).

  • Помните, что текст должен быть читабельным, не делайте тонкий и маленький шрифт.

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

  • Не рисуйте на экранах основную кнопку «далее» (внизу экрана), кнопку «пропустить» (справа наверху), page controls (кружочки) на картинках и нижнюю панель навигации (это системные компоненты, которые добавляются поверх изображения).

3. Авторизация

Варианты:

1. Лого - SVG, 328х176

2. Фон - SVG, 1080х1920

3. Лого + фон.

4. О нас

Варианты:

1. Лого - SVG, 128х88

2. Фон - SVG, 1080х1920

3. Лого + фон.

5. Иконка объекта на отдалении

Картинка:

SVG, 24х24

6. Иконка объекта при приближении

Картинки, 6 шт:

1. ТС не выбрано:

— полный заряд

— средний заряд

— низкий заряд

2. ТС выбрано:

— полный заряд

— средний заряд

— низкий заряд

Картинки:

SVG, 36х40

7. Иконки батарейки

Картинки, 3 шт:

— полный заряд

— средний заряд

— низкий заряд

Картинки:

SVG, 40х16 px

8. Иконки парковок

Картинки:

SVG, 19х24

9. Иконки станций (применяются только для проектов со станционной арендой)

Картинки, 4 шт:

— не в аренде, не выбрана

— не в аренде, выбрана

— в аренде, не выбрана

— в аренде, выбрана

Картинки:

SVG, 39х43

10. Картинки инструкций, до 3-х штук на начало и на завершение поездки.

Картинки инструкций задаются для каждого типа замка в проекте

Картинки:

PNG + SVG, 384х384

11. Аватарки

Картинки:

SVG, 64х64

12. Картинка-заглушка банковские карты

Картинки:

SVG, 232х176

13. Картинка "Поездка завершена", также отображается на экране Истории поездок, если ещё не было поездок

Картинки:

SVG, 188х104

14. Картинка "Сканируйте QR-код"

Указываем, где на самокате найти QR-код

Расположена под областью сканера.

Картинки:

PNG + SVG, 636х304

15. Картинка модели самоката.

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

Картинки:

PNG + SVG, 272х264

с прозрачным фоном

16. Иконка приложения

Картинки:

JPG, 1080х1920

18. Доп. баннер для Google Play

Картинки:

JPG, 1024х500

19. Баннеры для App Store (iPhone 8), от 4-х штук

Картинки:

JPG, 1242х2208

20. Баннеры для App Store (iPhone Х), от 4-х штук

Картинки:

JPG, 1242х2688