Оформление главного меню мобильного приложения

Оформление главного меню мобильного приложения

Кратко

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

Когда использовать

• При подготовке мобильного приложения к запуску мероприятия и оформлении его в фирменном стиле.
• Когда нужно скрыть часть пунктов меню от незарегистрированных пользователей или показать разный набор разделов разным категориям участников (например, спикерам, волонтёрам, VIP-гостям, прессе).
• Когда требуется подчеркнуть партнёров мероприятия с помощью логотипа спонсора в меню.
• Когда стандартные иконки пунктов меню не подходят по смыслу или визуально дублируются.

Как настроить

1. Фон главного меню

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

1. В боковом меню панели администрирования выберите пункт «Основное».
2. В открывшемся окне перейдите во вкладку «Внешний вид».
3. В поле «Фоновое изображение для меню» загрузите изображение.

Рекомендуемое разрешение: 1536x2668 px.

Требования к фону:

• Должен быть контрастным по отношению к цвету иконок в меню (чёрные или белые).
• Названия пунктов меню должны оставаться читаемыми.

2. Логотипы

Логотип события

Логотип события отображается в верхней части окна главного меню приложения над иконками пунктов меню. Чтобы добавить его:

1. В пункте меню «Основное» перейдите во вкладку «Внешний вид».
2. Загрузите логотип в поле, расположенное под полем «Тип лого».

Рекомендуемое разрешение: 880x440 px.

Требования к логотипу:

• Должен быть на прозрачном фоне.
• Желательно горизонтальный и читаемый.

Чтобы добавить к логотипу ссылку на сайт мероприятия (пользователь перейдёт по ней по клику на логотип), скопируйте ссылку и вставьте её в поле «Ссылка для логотипа мероприятия» в нижней части вкладки «Внешний вид».

Иконка события

Иконка события используется в качестве аватарки приложения и должна иметь размер 120x120 px. Она должна быть контрастной по отношению к фону.

Логотип спонсора

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

Чтобы добавить его:

1. В пункте меню «Основное» перейдите во вкладку «Внешний вид».
2. Загрузите изображение в поле «Показывать логотип спонсора в меню».

Рекомендуемое соотношение сторон: 3:1 (например, 580x240 px).

Требования к логотипу:

• Прозрачный фон.
• Желательно горизонтальный и читаемый.

Чтобы добавить к логотипу спонсора ссылку на его сайт, вставьте её в поле «Ссылка для логотипа спонсора» в нижней части вкладки «Внешний вид».

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

3. Выбор иконки для пункта меню

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

Чтобы изменить иконку:

1. В панели администрирования откройте раздел «Меню приложения».
2. Наведите курсор на нужный пункт меню.
3. Справа от пункта появится иконка в виде шестерёнки — нажмите на неё.
4. В открывшемся окне перейдите на вкладку «Внешний вид» и выберите любую иконку из набора.

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

Полный список иконок, доступных на данный момент (более 130 штук):

Иконки в главном меню события в приложении могут быть только белыми или чёрными. Чтобы настроить их цвет:

1. В боковом меню выберите «Основное».
2. Перейдите во вкладку «Внешний вид».
3. В поле «Цвет контролов» выберите чёрный или белый.

Ориентируйтесь на фон: на ярком, насыщенном и тёмном фоне лучше различимы белые иконки, на светлом — чёрные.

Обратите внимание: все иконки в меню события будут одного цвета — задать цвет индивидуально для отдельной иконки нельзя.

4. Переименование пункта меню

Чтобы переименовать пункт меню:

1. Нажмите на иконку в виде шестерёнки справа от пункта.
2. В открывшемся окне на вкладке «Внешний вид» измените название в соответствующем поле.
3. Щёлкните по названию пункта меню, чтобы закрыть окно.

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

• не «Программа мероприятия», а «Программа»;
• не «Анкета обратной связи участника», а «Анкета ОС»;
• не «Ответы на частые вопросы», а «Онлайн-помощь».

Кавычки в названиях пунктов меню (и в названиях докладов в Программе) не ставятся.

Некоторые пункты меню (например, ленты и добавленные в меню каталоги) нельзя переименовать этим способом — для них в диалоговом окне нет поля с названием.

Переименование опроса

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

Переименование каталога

Чтобы изменить название каталога в меню:

1. Перейдите в пункт меню с этим каталогом.
2. Наведите курсор между названием каталога и блоком «Добавить контент».
3. Нажмите на появившееся поле «Редактировать каталог».
4. В открывшемся окне измените название в поле «Название» и нажмите «Сохранить».

Переименование ленты или общего чата

1. В боковом меню админки откройте раздел «Администрирование» и выберите Новости и общение.
2. Перейдите во вкладку «Настройки».
3. Выберите нужную ленту или чат и отредактируйте поле «Название».

Переименование инфо-страницы и веб-страницы

Чтобы переименовать инфо-страницу или веб-страницу, откройте её и измените название в самом верхнем поле на странице модуля. Подробнее об инфо-страницах — в отдельной статье.

5. Доступность пункта меню для групп участников

Чтобы настроить, какие группы участников видят пункт меню:

1. Нажмите на иконку в виде шестерёнки справа от пункта меню.
2. В открывшемся окне перейдите во вкладку «Группы».
3. Выберите группы пользователей, для которых пункт будет доступен.

Подробнее о работе с группами — в статье Использование групп пользователей в приложении.

Примеры использования

• Крупная конференция с несколькими потоками. В меню для всех участников отображаются «Программа», «Спикеры», «Партнёры» и «Нетворкинг». Вкладка «Зоны выставки» показывается только зарегистрированным участникам, а пункт «Служба поддержки организаторов» — только волонтёрам и персоналу.
• Фестиваль с платными и бесплатными зонами. Неавторизованные пользователи видят только «О фестивале», «Программу» и «FAQ». После авторизации становятся доступны «Билеты», «Карта площадки» и «Чат с организаторами».
• Закрытое мероприятие для прессы. Пункт «Пресс-центр» с аккредитацией и материалами для СМИ показывается только группе «Пресса».
• Спонсорский логотип. На главном экране меню внизу размещается логотип генерального партнёра со ссылкой на его сайт — это даёт партнёру дополнительный канал продвижения среди аудитории мероприятия.

Ограничения и нюансы

• Фоновое изображение: оптимальное разрешение — 1536x2668 px; фон должен быть достаточно контрастным, чтобы иконки и подписи оставались читаемыми.
• Логотип события: рекомендуемый размер 880x440 px, прозрачный фон, горизонтальная композиция.
• Иконка события: фиксированный размер 120x120 px, контрастная по отношению к фону.
• Логотип спонсора: рекомендуемое соотношение сторон 3:1 (например, 580x240 px), прозрачный фон.
• Иконки пунктов меню: доступны только из встроенного набора (134 штуки на текущий момент). Загружать собственные иконки нельзя. Все иконки в меню одного цвета — чёрного или белого; задать цвет индивидуально нельзя.
• Переименование пунктов: у некоторых типов пунктов меню (ленты, каталоги) нет поля с названием в диалоговом окне — переименование выполняется в соответствующих разделах админки.
• Названия опросов: в меню можно показывать сокращённое название, но в самом опросе и на медиа-стене сохраняется полное название.
• Графика и проверка: менеджер проекта дополнительно проверяет загруженные изображения (фон, иконка, логотип события) и может дать комментарии по корректировке.

Связанные статьи

• Использование групп пользователей в приложении
• Новости и общение
• Вывод опросов на медиа-стену
• Инфо-страницы в панели администрирования
• Веб-страницы в панели администрирования