Макет

Каждый html-контейнер, внедренный в Office, будет иметь макет. Эти макеты являются main экранами надстройки. В них вы создадите интерфейсы, позволяющие клиентам инициировать действия, изменять параметры, просматривать, прокручивать или перемещаться по содержимому. Проектируйте надстройку с согласованными макетами на разных экранах, чтобы обеспечить непрерывность взаимодействия. Если у вас есть веб-сайт, с которым ваши клиенты знакомы, рассмотрите возможность повторного использования макетов с существующих веб-страниц. Адаптируйте их так, чтобы они гармонично вписывались в контейнеры Office HTML.

Рекомендации по макету см. в разделе Область задач, Содержимое. Дополнительные сведения о сборке компонентов пользовательского интерфейса Fluent React или Office UI Fabric JS в общих макетах и потоках взаимодействия с пользователем см. в статье Шаблоны макетов пользовательского интерфейса.

Примените следующие общие рекомендации по макетам.

• Избегайте узких или широких полей в контейнерах HTML. Рекомендуемое значение по умолчанию: 20 пикселей.
• Применяйте принудительное выравнивание элементов. Дополнительные отступы и новые точки выравнивания должны усилить визуальную иерархию.
• Интерфейсы Office располагаются на сетке с шагом в 4 пикселя. Для заполнения между элементами следует придерживаться коэффициента, кратного 4.
• Чрезмерное нагромождение элементов на интерфейсе может привести к путанице и проблемам с сенсорными элементами управления.
• Поддерживайте согласованность макетов на экранах. Непредвиденные изменения макета выглядят, как визуальные ошибки, которые подрывают уверенность в вашем решении.
• Используйте общие шаблоны макетов. Это облегчает понимание пользовательского интерфейса и упрощает работу с ним.
• Избегайте переизбытка элементов, таких как фирменная символика или команды.
• Объединяйте элементы управления и представления, чтобы не слишком часто использовать мышь.
• Создавайте гибкие интерфейсы, которые подстраиваются под ширину и высоту контейнера HTML.