Перейти к содержанию

Брендирование настольных и мобильных приложений

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

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

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

В сервисе Neon реализована поддержка версионности приложений. Для чего нужны версии:

  • Специалисты технической поддержки – тестирование новых версий, сборок перед обновлением и т.д.;
  • Специалисты по сопровождению платформы АТС – тестирование новых серверов платформы АТС, настроек инфраструктуры, систем безопасности и т.д.;
  • Дизайнеры и маркетологи – могут опробовать новый дизайн и проверить его удобство без затрат на разработку тестовых версий;
  • Менеджеры – использование отдельных версий для повседневной работы и демонстрации клиентам, а также, при необходимости, предложение персонального брендирования крупным клиентам.

Таким образом сервис Neon позволяет вам использовать несколько версий софтфонов для ПК и мобильных платформ для предоставления бесперебойного доступа к услугам связи в динамично меняющейся обстановке.

Основные понятия

Опишем основные термины и понятия, которые будут использоваться далее в статье:

  • Приложение/Приложения Neon
    Один или несколько, в зависимости от контекста написания, софтфонов Neon для компьютера или телефона. Используются для приёма/совершения звонков через Платформу облачной АТС;

  • Платформа облачной АТС
    Сервер телефонии, к которому подключаются Приложения клиентов для совершения звонков и приёма звонков;

  • Панель управления версиями, пользователями и настройками (в дальнейшем Панель управления)
    Компонент архитектуры Neon, который позволяет администраторам системы создавать версии приложений, пользователей и настраивать их параметры;

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

  • Пользователь
    Клиент Платформы облачной АТС, который использует Приложения Neon для совершения и приёма звонков. Пользователь должен быть добавлен в Панель управления для работы Приложений;

  • Сборка приложения
    Функциональная часть приложения Neon, которую выпускают разработчики Neon. Новые сборки приложений содержат новые функции и улучшают работу текущих функций приложений;

  • Базовое приложение
    Используется в качестве основы для создания Версии приложения. В качестве базового приложения может использоваться универсальное приложение Neon (используется большинством клиентов Neon), или созданное под индивидуального заказчика приложение, которое он сможет распространять под своим именем в магазинах приложений.

Базовое приложение – что такое и как создать своё

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

Если у вас есть аккаунт разработчика в Google Play и AppStore и вы хотите, чтобы ваши пользователи скачивали приложение, которое распространяется именно от вашего имени, свяжитесь с нами, чтобы обсудить возможность создания для вас индивидуального базового приложения.

Приложение под вашим брендом смогут использовать только ваши клиенты, и вы сможете распространять его от своего имени любыми удобными вам способами:

  • под своим аккаунтом разработчика в магазинах приложений;
  • в качестве установочных файлов на своём сайте;

и т.д.

Сравнение универсального и индивидуального базового приложения Neon для компьютера

Универсальное базовое приложение
Индивидуальное базовое приложение
Рабочий стол Иконка на рабочем столе ПК универсального приложения Иконка на рабочем столе ПК индивидуального приложения
Список установленных приложений Пункт списка установленных приложений на ПК - универсальное приложение Пункт списка установленных приложений на ПК - индивидуальное приложение
Внешний вид приложения Внешний вид брендированного универсального приложения для ПК Внешний вид брендированного индивидуального приложения для ПК

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

Сравнение универсального и индивидуального базового приложения Neon для мобильных устройств

Универсальное базовое приложение
Индивидуальное базовое приложение
Магазин приложений Универсальное приложение для мобильных устройств в магазине приложений Индивидуальное приложение для мобильных устройств в магазине приложений
Домашний экран Универсальное приложение для мобильных устройств на домашнем экране Индивидуальное приложение для мобильных устройств на домашнем экране
Внешний вид приложения Внешний вид брендированного универсального приложения для мобильных устройств Внешний вид брендированного универсального приложения для мобильных устройств

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

Далее в статье описано:

Управление версиями приложения

Панель управления версиями, пользователями и настройками позволяет вам:

  • Создавать новые версии приложений;
  • Редактировать настройки уже созданных версий;
  • Выбирать актуальную версию приложения;
  • Отслеживать статус сборки дистрибутивов для новой версии.

Откройте страницу Управление версиями в Панели управления. Вы увидите таблицу версий:

Таблица версий

Описание столбцов таблицы:

  • ID:
    Уникальный идентификатор версии, целое число, генерируется автоматически при создании новых версий приложения (порядковый номер). Позволяет сослаться на нужную версию приложения, например, в ссылке для создания пользователя.

  • Название:
    Указывается при создании версии. При нажатии на название открывается страница редактирования версии. Для редактирования доступны только параметры: Название, Комментарий, Сервер, Прокси, Домен и Кодеки. Для изменения остальных параметров нужно создать новую версию приложения.

  • Базовое приложение:
    Приложение, на основе которого создана версия (универсальное или брендированное) и сборка приложения для Windows/MacOS.

  • Комментарий:
    Указывается в настройках версии.

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

  • Статус сборки дистрибутивов:
    После создания новой версии запустите сборку дистрибутивов кнопкой Собрать в столбце Действия. На сборку дистрибутивов приложения требуется определённое время. Возможные статусы: пустой (не нажимали кнопку Собрать), Собирается, Готов.

  • Дата создания:
    Дата добавления Версии в Панель управления версиями, пользователями и настройками.

  • Дата изменения:
    Дата последнего изменения Версии.

  • Действия:
    Содержит кнопку Собрать (если ещё не начата сборка версии и статус в поле Статус сборки дистрибутивов пустой) и кнопку Редактировать (открывает окно редактирования версии).

TBD Кнопка Создать открывает окно создания Версии, которое подробно описано в разделе Создание версии приложения.

TBD Кнопка Изменить актуальную версию позволяет выбрать одну из Тестовых версий в качестве новой Актуальной версии и указать сроки обновления. Подробно работа с обновлением приложения и жизненный цикл версий описаны в следующей статье.

TBD Кнопка Перенести в архив позволяет сменить статус Устаревшей или Тестовой версии на Архивная. Действие необратимо. Подробно описано в статье Обновление приложений, жизненный цикл версии.

Создание версии приложения

Каждое Приложение Neon работает на базе конкретной версии приложения.

Опишем процесс создания Версии приложения и её параметры – основные и дополнительные.

Основные параметры

  1. TBD В Панели управления Neon откройте страницу Управление версиями и нажмите кнопку Создать : Создать версию

  2. Откроется страница создания версии. ID версии генерируется автоматически. Укажите Название версии – используется в Панели управления и позволяет найти нужную версию в списке: Название версии

  3. Укажите Комментарий - он отображается на странице Управление версиями в списке версий и позволяет отличить нужную версию в списке (может быть пустым): Комментарий

  4. При создании первой версии Статус версии автоматически устанавливается в значение Актуальная. При создании последующих версий он будет принимать значение Тестовая. Статус может меняться в сценариях, описанных в статье Обновление приложений.

  5. По умолчанию Версии используют в качестве основы Базовое приложение Neon, одинаковое для всех клиентов.

  6. Выберите Сборку приложения для Windows/MacOS - по умолчанию выбирается последняя стабильная версия приложения: Сборка приложения

  7. Перейдите к настройкам в разделе Внешний вид приложения. Примеры внешнего вида приведены в разделе Внешний вид приложения для компьютера и Внешний вид приложения для телефона: Настройки внешнего вида

  8. Укажите Название компании – данное название клиенты будут видеть в приложении на различных экранах. Первое введённое Название компании сохраняется в Настройках компании и подставляется автоматически при создании следующих версий приложения.

  9. Выберите Тему оформления приложения для Windows/MacOS - светлая или темная.

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

  11. В разделе Настройка общих SIP параметров задайте параметры подключения к Платформе облачной АТС, которые будут использоваться по умолчанию у всех пользователей данной Версии приложения:

    Общие настройки SIP

    • Сервер:
      Обязательный параметр. IP адрес или hostname SIP сервера (SIP server). Сервер АТС, к которому подключается приложение для совершения и приёма звонков. По умолчанию приложение подключается к порту 5060 SIP сервера. Вы можете указать другой порт в формате sip.example.com:5061;

    • Прокси:
      SIP прокси (SIP proxy, Outbound proxy). Промежуточный сервер для передачи SIP трафика между SIP клиентами и АТС;

    • Домен:
      SIP домен (Domain). Подставляется при звонках для корректной адресации звонков на АТС. Если не задан, используется значение параметра Сервер.

    При создании пользователя можно переопределить значения по умолчанию, указанные при создании версии приложения. Например, если пользователь будет подключаться к АТС на другом сервере. Описание настроек пользователей в статье Управление пользователями и централизованная настройка приложений.

  12. Укажите ваши Контакты технической поддержки в удобном вам виде: ссылки на сайт или например Telegram-бота или почту поддержки. Эти контакты отображаются в приложении, чтобы клиенту не нужно было искать их в случае возникновения вопросов:

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

  13. Нажмите Сохранить. Создание версии приложения с основными параметрами завершено.

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

Дополнительные параметры

В разделе Дополнительные параметры доступны:

  • настройки дополнительных цветов бренда;
  • настройка схемы работы мобильного приложения;
  • расширенные настройки SIP;
  • ссылки для скачивания приложений;
  • настройки контактов технической поддержки.

1. Задайте Дополнительные цвета бренда, они позволят более точно настроить внешний вид приложения под ваш дизайн: Дополнительные цвета

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

3. В разделе Расширенные SIP настройки укажите дополнительные настройки подключения пользователя к АТС: Дополнительные SIP настройки

  • Кодеки: выберите кодеки, которые использует приложение для совершения и приёма звонков. Для включения нескольких кодеков разделите их пробелами. Значение по умолчанию PCMA/8800/1 PCMU/8000/1

4. В разделе Ссылки для скачивания приложений после сохранения версии появятся ссылки на скачивание приложения для той или иной платформы. Эти ссылки подставляются в Страницу скачивания приложений, которую видит конечный клиент. Ссылки для скачивания приложений

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

После создания Версии приложения создайте пользователей Neon и отправьте им TBD ссылки на страницу скачивания приложений . Ускорить процесс создания пользователей и получения ссылок на скачивание можно разместив специальную ссылку для быстрого создания пользователей в личном кабинете вашей АТС.

Внешний вид приложения Neon на компьютере

Пользователь скачивает приложение Neon и авторизуется в нем. После авторизации приложение Neon меняет внешний вид и получает настройки в соответствии с заданными в версии параметрами.

Приведём примеры, как параметры версии влияют на внешний вид приложений Neon для компьютера. Примеры приведены для приложения, которое использует в качестве основы Универсальное приложение Neon.

Название компании и логотип в главном окне Название компании и логотип в окне входа в приложение
Название и логотип в главном окне приложения для компьютера Название и логотип в окне входа в приложение для компьютера

Цветовая тема: выбирается в настройках версии:

Светлая тема Тёмная тема
Светлая тема приложения для компьютера Тёмная тема приложения для компьютера

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

Пример:

Основной цвет в светлой теме Основной цвет в тёмной теме
Светлая тема приложения для компьютера в светлой теме Светлая тема приложения для компьютера в тёмной теме

Внешний вид приложения Neon на телефоне

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

Название компании: отображается в меню Профиль - Настройки - О приложении:

Название компании на экране О приложении

Логотип на экране О приложении Логотип на загрузочном экране
Логотип компании на экране О приложении Логотип на загрузочном экране приложения

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

В настройках версии задаются 4 цвета:

1.
Цвет подсветки фона при звонке свайпом, фон включенных переключателей, иконка SIP учётной записи, кнопка набора номера и вызова.

Пример окрашенного в основной цвет элемента (иконки SIP учётной записи):

  • Цвет по умолчанию (#156683)


    Основной цвет по умолчанию - иконка приложения

  • Свой цвет (#D11A1A)


    Брендированный основной цвет - иконка приложения

2.
Цвет включенного переключателя, цвет иконки трубки при звонке свайпом.

Пример окрашенного в основной и контрастный для основного цвета элемента (кнопка вызова в панели набора номера):

  • Цвет по умолчанию (#FFFFFF)


    Базовый и контрастный для основного цвета по умолчанию - кнопка вызова в панели набора номера

  • Свой цвет (#69CB8E)


    Брендированные основной и контрастный для основного цвета - кнопка вызова в панели набора номера

3.
Цвет фона пункта В сети, цвет фона выбранной вкладки приложения.

Пример окрашенного в дополнительный цвет элемента (подложка переключателя статуса В сети):

  • Цвет по умолчанию (#D0E6F3)


    Дополнительный цвет по умолчанию - подложка переключателя статуса В сети

  • Свой цвет (#D36EA7)


    Брендированный дополнительный цвет - подложка переключателя статуса В сети

4.
Цвет текста и иконки В сети, цвет иконки активной вкладки приложения.

Пример окрашенного в дополнительный и контрастный для дополнительного цвета элемента (переключатель В сети):

  • Цвет по умолчанию (#081E27)


    дополнительный и контрастный цвета по умолчанию - переключатель В сети

  • Свой цвет (#69CB8E)


    Брендированные дополнительный и контрастный для дополнительного цвета - переключатель В сети

Сравнение цветовой схемы приложения по умолчанию и брендированного приложения:

  • Цветовая схема по умолчанию


    Цветовая схема по умолчанию

  • Брендированное приложение


    Брендированное приложение