Разработка надстроек для Outlook на мобильных устройствах

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

Компоненты и шаблоны надстроек

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

• Область фирменной символики
• Панель навигации
• Название раздела
• Ячейки или поля ввода
• Действия

На следующих изображениях показано, как каждый компонент отображается в Outlook для Android и iOS.

Схема Android

Схема iOS

В последующих разделах описываются шаблоны проектирования пользовательского интерфейса для Outlook на мобильных устройствах. Дополнительные сведения о шаблонах проектирования для надстроек Office см. в статье Шаблоны разработки пользовательского интерфейса для надстроек Office.

Страница загрузки

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

Пример загрузки страниц в Android

Пример загрузки страниц в iOS

Страница входа или регистрации

Сделайте потоки входа и регистрации простыми и простыми в использовании.

Пример страницы входа в Android

Пример страниц входа и регистрации в iOS

Панель с фирменной символикой

Добавьте элемент фирменной символики на первый экран надстройки. Панель фирменной символики обеспечивает распознавание и помогает задать контекст для пользователя.

Выполните:

• Используйте белую версию логотипа и задайте для фонового баннера основной цвет торговой марки.
• Оставайтесь в пределах предписанной маржи и 60% покрытия.

Не давайте.

• Выйдите за пределы полей.
• Повторите фирменную панель на последующих страницах. Панель навигации уже содержит название вашей компании или торговой марки.

Пример фирменной символики в Android

Пример фирменной символики в iOS

Поля

Рекомендуемые поля для мобильных устройств зависят от клиента Outlook.

• Android: 16 пикселей для каждой стороны
• iOS: 15 пикселей (8 % экрана) для каждой стороны

Ниже приведен пример полей, заданных в Outlook для iOS.

Шрифтовое оформление

Используйте простую типографику, чтобы упростить сканирование содержимого. В следующей таблице приведены рекомендации по оформлению для Outlook для Android и iOS.

Типография в

Примеры типографии в iOS

Цветовая палитра

Используйте цвет в Outlook на мобильных устройствах. Ограничьте использование цвета действиями и состояниями ошибок и используйте уникальный цвет только для фирменной панели.

В следующей таблице приведена рекомендуемая цветовая палитра для компонентов надстройки в Outlook Mobile. Коды цветов отображаются в шестнадцатеричном формате.

Ячейки

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

Название раздела

Выполните:

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

Не давайте.

• Примените выравнивание по центру к заголовку раздела.
• (только Android) Добавьте заголовок раздела над вкладками.
• (только для iOS) Используйте небольшую версию заголовка раздела, если заголовок отображается между двумя выбираемыми элементами. Это повышает вероятность выбора неправильного элемента.
• (только для iOS) Используйте небольшую версию заголовка раздела, если он отображается над вкладками.

Примеры заголовков разделов в

Примеры заголовков небольших и высоких разделов в iOS

Поля ввода

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

Выполните:

• Учитывайте количество элементов при сложении нескольких полей ввода. Группируйте элементы вместе по мере необходимости и используйте заголовок раздела, чтобы определить группу при необходимости.
• (только для iOS) Выравнивание линий разделителя по левому краю текста при сложении нескольких элементов. Не выравнивайте их со значком элемента слева.

Примеры полей ввода в

Пример полей ввода в iOS

Действия

Даже если надстройка обрабатывает много действий, сосредоточьтесь на наиболее важных.

Выполните:

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

Примеры действий в

Примеры действий в

Кнопки

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

Выполните:

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

Примеры кнопок в Android

Примеры кнопок в iOS

Вкладки

Используйте вкладки для упорядочения содержимого надстройки.

Примеры вкладок в Android

Примеры вкладок в iOS

Значки

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

Примеры значков в Android

Примеры значков в iOS

Примеры надстроек

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

GIPHY

Пример комплексной разработки GIPHY в Android

Пример комплексной разработки GIPHY в iOS

Nimble

Пример комплексного дизайна Nimble в Android

Пример комплексного проектирования Nimble в iOS

Dynamics CRM

Пример комплексного проектирования Dynamics CRM в Android

Пример комплексной разработки Dynamics CRM в iOS

См. также

• Разработка пользовательского интерфейса надстроек Office
• Конструктивные шаблоны для надстроек Office