Рекомендации по оптимизации макета
Применяется к следующей рекомендации контрольного списка по оптимизации взаимодействия Well-Architected Framework в Power Platform:
| XO:06 | Используйте удобные и визуально привлекательные макеты для всех размеров и разрешений экрана. Используйте адаптивные методы для динамического отображения контента различными способами. |
|---|
В этом руководстве описаны рекомендации по разработке макетов экрана, которые имеют удобную навигацию и легко адаптируются к различным устройствам. Такой подход гарантирует стабильность и оптимальное качество просмотра для пользователей независимо от того, какое устройство они используют.
Определения
| Термин | Определение |
|---|---|
| Окно просмотра | Видимая часть цифрового интерфейса, например веб-браузер или мобильное приложение, в которой отображается контент. Диапазоны окна просмотра часто связаны с классами устройств (мобильные, планшетные и компьютеры) на основе размеров и разрешений экрана. |
| Точки останова | Конкретные значения пикселей, определяющие диапазоны окна просмотра, используемые для определения поведения адаптивного макета. |
Ключевые стратегии проектирования
Гибкие макеты обеспечивают гибкий и эффективные взаимодействия в окнах разных размеров. Они адаптируются путем масштабирования контента, перестановки элементов и выборочного отображения текста и изображений. Гибкие макеты отвечают потребностям пользователей независимо от размера их экрана.
Определение стабильного фрейма приложения
Фрейм приложения состоит из набора элементов управления, постоянно доступных на каждом экране. Он состоит из трех основных подкомпонентов: заголовка, меню навигации и области контента. Простые приложения могут гибко использовать компонент заголовка, в то время как более сложные приложения часто используют боковую навигацию для включения нескольких страниц. Подкомпоненты можно настраивать. Например, вы можете включить глобальный поиск в заголовок или сгруппировать элементы в боковой области боковой навигации в соответствии с требованиями вашего приложения.
Три основных подкомпонента фрейма приложения следующие:
Заголовок — это основной компонент, предназначенный для использования в каждом внутреннем приложении. Он состоит из подкомпонентов, которые предоставляют пользователям доступ к общесистемным функциям, помогают им ориентироваться в пользовательском интерфейсе и обеспечивают согласованность взаимодействий. Он отображается в верхней части фрейма приложения и должен сохраняться на всех страницах приложения. При необходимости он может содержать глобальные команды, такие как поиск, параметры, уведомления, отзывы, профиль или помощь. Имя приложения всегда должно отображаться и в идеале оно должно также быть интерактивной ссылкой на домашнюю или целевую страницу. Заголовок должен быть гибким, чтобы команды могли перемещаться в элемент управления переполнения в окнах просмотра размером 600 пикселей и ниже. Ширина поля ввода для поиска также является гибким параметром и составляет 1023 пикселя и ниже.
Навигация — это система элементов управления, которые помогают пользователям находить информацию и выполнять задачи. Она помогает пользователям переходить из одного раздела приложения в другой. Иерархически она не привязана ни к какой странице или разделу, а находится над всем остальным содержимым. Она всегда присутствует и может быть уменьшена до свернутого состояния, чтобы освободить дополнительное пространство для содержимого страницы. При меньших размерах окна его можно свернуть во всплывающее меню. Наиболее распространенными формами навигации являются верхняя и боковая навигация. Не используйте оба варианта одновременно.
Область содержимого находится в фокусе экрана. Размер окна браузера влияет на фрейм содержимого и пространство, доступное в основной области содержимого. Этот фрейм адаптируется на основе точки останова и соответствующего гибкого поведения каждого компонента. Подробнее см. в разделе Создание матрицы точек останова.
Область содержимого может дополнительно содержать несколько подобластей, доступных для согласованного размещения элементов, например заголовок страницы, встроенные боковые панели или панели, накладывающиеся на содержимое.
Соблюдение единого стиля разработки с цветовыми схемами, типографикой и структурой макета помогает пользователям быстро идентифицировать различные элементы и взаимодействовать с ними без путаницы. Чем более последовательно используется шаблон фрейма приложения во всех внутренних бизнес-приложениях, тем сильнее он укореняется в памяти, формируя прочную ментальную модель пользователя. Приведение в соответствие с отраслевыми стандартами или общими шаблонами платформ еще больше усиливает этот эффект.
После определения фрейма приложения макет каждого экрана размещается в области содержимого фрейма приложения.
Рациональное использование области содержимого
Пользователи желают, чтобы взаимодействия были беспрепятственными, информация легко доступна, а текст легко читался. При этом эстетика дизайна повышает, а не препятствует удобству использования. Установите приоритет для начальной видимости ключевой информации, обеспечьте читаемость всех столбцов и гармонизируйте элементы дизайна, чтобы обеспечить его эстетическую привлекательность.
Убедитесь, что важная информация сразу видна при открытии экрана без необходимости прокрутки. Установите приоритет для отображения важной информации. Параметры навигации, важное содержимое и элементы, требующие действий, должны располагаться в верхней части экрана. Важно найти баланс между отображением достаточного количества элементов и предоставлением подробной информации по каждому элементу. Это часто бывает сложной задачей. И наоборот, хотя может показаться заманчивым предоставить всю возможную информацию в первоначальном представлении, слишком большой объем информации может оказаться лишним для пользователей и размыть значимость ключевых элементов. Рекомендуем использовать краткие сводки или предварительные просмотры, которые дают некоторое представление о содержимом и побуждают пользователей "копать глубже". Панели мониторинга оптимизированы для визуализации больших объемов данных.
Включите несколько столбцов, разделов или групп, чтобы логически организовать содержимое и максимально увеличить пространство. Обратите особое внимание на ширину столбцов, чтобы текст оставался разборчивым, не вызывая чрезмерного напряжения глаз. Избегайте слишком узких столбцов, которые заставляют пользователей постоянно прокручивать по горизонтали, нарушая плавность взаимодействия. И наоборот, слишком широкие столбцы могут ухудшить читаемость, заставляя пользователей отслеживать строки в рамках больших областей. Стремитесь к балансу, который обеспечивает комфортное чтение и эффективное использование доступного пространства.
Правильно выбирайте размер и расположение визуальных элементов, чтобы создать визуально привлекательный и сбалансированный интерфейс. Располагайте подписи рядом с соответствующими изображениями или заголовками, сохраняйте одинаковое расстояние между элементами и придерживайтесь иерархии, учитывающей потребности пользователей. Обрезайте ненужные украшения и разумно распределяйте пиксели между наиболее важными элементами. Расставьте приоритеты и выделяйте нужные элементы содержимого и навигации, особенно в приложениях или на домашних страницах с насыщенной навигацией, и избегайте лишних украшений, которые ухудшают удобство использования.
Базовая сетка может быть полезна для согласованного расположения элементов. Выбранное поведение сетки должно быть единым для каждой области содержимого экрана в приложении, а также может применяться на уровне компонентов, например для карточек или боковых панелей. Наиболее распространенным типом макета сетки, используемым в веб-приложениях, является сетка столбцов. Для реализации адаптивных экранов рекомендуется использовать пластичную (или растягивающуюся) сетку.
Использование общепризнанных макетов и шаблонов группировки
Используйте общепризнанные структуры и алгоритмы организации содержимого и элементов пользовательского интерфейса. Эти макеты и шаблоны совершенствовались в течение длительного времени и доказали свою эффективность. Они стали знакомыми и интуитивно понятными для пользователей, что упрощает внедрение адаптивных шаблонов. После того как основные сценарии и элементы определены, сопоставьте каждый из них с общепринятым макетом, который обеспечивает наилучшее взаимодействие. Отдавайте приоритет содержимому и функциям, которые важны для выполнения задач. Решите, какие элементы всегда должны быть видимыми и доступными на экране, а какие можно скрыть или получить к ним доступ через другие меню или действия.
Следующий список, хотя и не является исчерпывающим, описывает общепризнанные макеты, обычно используемые для бизнес-приложений или приложений для повышения производительности. Все перечисленные позиции могут располагаться в пределах основной области.
Главный экран/целевая страница
Целевой или домашний экран служит точкой входа в приложение, предоставляя пользователям обзор предложений или функций приложения. Он обычно предназначен для привлечения внимания посетителей и побуждает к совершению определенного действия, например, к выполнению первого задания или изучению дальнейшего содержимого. Он часто содержит главные изображения и удобные параметры навигации.
Он идеально подходит для приветствия пользователей, предлагает быстрый доступ к ключевым функциям, параметрам навигации или призывам к действию, а также задает общий тон и впечатления по работе приложения. Отдавайте предпочтение ясности, простоте и интуитивно понятной навигации, чтобы эффективно направлять пользователей.
Информационная панель
Панель мониторинга — это централизованный центр внутри приложения, который предоставляет пользователям полный обзор релевантных данных или информации. Он часто состоит из настраиваемых мини-приложений или модулей, позволяющих пользователям отслеживать определенные показатели или выполнять действия.
Панели мониторинга подходят для приложений со сложными наборами данных или многоаспектными функциями, позволяя пользователям отслеживать ход выполнения, анализировать тенденции и мгновенно принимать обоснованные решения. Они особенно полезны в аналитических платформах, инструментах управления проектами и приложениях для управления финансами.
Форма
Форма — это структурированный макет, облегчающий ввод данных пользователями, обычно состоящий из полей для ввода различных типов информации: текста, чисел, дат и вариантов выбора. Формы необходимы для сбора введенных пользователем данных, обработки транзакций и облегчения взаимодействия внутри приложений.
Они обычно используются в процессах регистрации, оформления заказа, задачах ввода данных и в любых сценариях, требующих ввода или обратной связи пользователя.
Представление сущности/профиля
Представление сущности или профиля представляет подробную информацию о конкретной сущности, например профиле пользователя, списке продуктов или элементе содержимого. Обычно он включает в себя описательный текст, мультимедийные элементы и соответствующие действия или взаимодействия.
Он хорошо подходит для демонстрации подробной информации об элементах приложения. Он предоставляет пользователям глубокую аналитику, облегчает принятие решений и поддерживает взаимодействие с конкретными сущностями, такими как профили пользователей в приложениях социальных сетей или списки продуктов на платформах электронной коммерции.
Страница списка
Список или таблица отображает коллекцию элементов или сущностей в структурированном формате, часто представленном в линейном виде или в виде сетки. Обычно он включает краткие сводки или предварительные эскизы каждого элемента, а также элементы управления навигацией для просмотра или фильтрации.
Страницы списков эффективны для представления больших наборов содержимого или данных в удобочитаемом формате, позволяя пользователям эффективно сканировать и искать информацию, а также совершать навигацию. Если включены действия по определенным строкам, процесс должен быть понятен. Страницы списков обычно используются в системах управления содержимым, списках каталогов, результатах поиска и лентах новостей.
Мини-обзор (разделённый экран)
Экран мини-обзора или разделенный экран разделяет интерфейс на два отдельных раздела: список отображается слева, а представление элементов — справа. Список обычно содержит коллекцию элементов, а представление элемента содержит подробную информацию о выбранном элементе в списке.
Этот макет особенно эффективен в сценариях, где пользователям необходимо быстро просмотреть список элементов и просмотреть подробную информацию о каждом элементе одновременно, например, при выполнении массовых операций. Каталоги продуктов, системы управления документами, клиенты электронной почты или обмена сообщениями, а также инструменты управления задачами (например, средство просмотра запросов Azure Dev Ops) — это сценарии, которые обычно соответствуют этому шаблону.
Мастер
Мастер помогает пользователям, предоставляя им пошаговые инструкции, обычно линейно, для завершения сложного процесса или достижения конкретной цели. Он часто включает индикаторы хода выполнения, подсказки и проверки. Мастер полезен для упрощения сложных процессов, снижения когнитивной перегрузки и оказании помощи пользователям при выполнении ими незнакомых задач или рабочих процессов. Они обычно используются в процессах адаптации, настройки, многошаговых формах и взаимодействиях на основе задач, таких как настройка сложных параметров или транзакций.
Настройте и доработайте стандартный макет, чтобы он соответствовал конкретным требованиями. Этот процесс может включать добавление или удаление элементов, настройку размера и расположения элементов, а также применение стиля в соответствии с фирменным стилем или рекомендациями по визуальному дизайну. Экспериментируйте с различными конфигурациями и вариантами стандартного макета, чтобы найти наиболее эффективную схему для содержимого и взаимодействий пользователя.
Разработка макетов для всех устройств
Макеты — это кульминация определенных правил и намеренной организации содержимого. Ключевым моментом является организация вашего содержимого в продуманную структуру, но для того, чтобы все это было согласовано с четкой иерархией между платформами и размерами экранов, требуется логика масштабирования. Адаптивный и гибкий дизайн, по отдельности может решить эту задачу. В некоторых случаях сочетание адаптивного и гибкого дизайна является правильным выбором.
Гибкий дизайн использует только один макет, в котором содержимое является гибким и может адаптироваться к изменяющемуся размеру формата. Этот вид дизайна использует медиа-запросы для проверки характеристик данного устройства и соответствующим образом отображает содержимое. Гибкий дизайн позволяет вам создать функцию один раз, и она будет эффективно работать на экранах всех размеров.
Адаптивный макет полностью меняется в зависимости от формата, в котором он представлен. Адаптивный дизайн имеет несколько фиксированных размеров макета и заставляет браузер загружать определенный макет в зависимости от доступного пространства. Веб-сайты, созданные с адаптивным дизайном, используют медиа-запросы для обнаружения точек останова, аналогично гибкому дизайну. Также они используют дополнительную разметку, на основе возможностей устройства. Этот процесс известен как "постепенное улучшение".
Изменение положения
Изменение положения элементов страницы.
Сохраняйте свой контент структурированным, читабельным и сбалансированным благодаря оптимизации композиции по мере увеличения размера окна. Например, вертикально расположенные элементы в окне просмотра для мобильных устройств можно изменить на горизонтальные в окнах просмотра большего размера. Это изменение соответствует естественному порядку чтения слева направо, создает баланс в дизайне и сохраняет визуальный фокус на ключевых элементах на странице.
Изменить размер
Настройте размер и поля элементов страницы.
Измените размер элементов страницы, чтобы оптимизировать качество взаимодействие с пользователями, отображая больше содержимого в верхней части окна и уменьшая необходимость в вертикальной прокрутке. Отрегулируйте поля страницы, чтобы добавить в макет пустое пространство и сбалансировать его, предоставляя больше свободного пространства содержимому и повышая визуальную привлекательность дизайна. Например, главный компонент может растянуться на всю ширину окна, чтобы была видна большая часть фонового изображения. Содержимое под изображением может быть расширено, а использование разных полей позволяет добавить вариативность в макет и помогает определить визуальную иерархию.
Перегруппировка
Оптимизируйте поток элементов страницы.
Корректируйте элементы страницы, чтобы они отображались полностью, с учетом размера и ориентации окна. Это достигается путем изменения порядка содержимого. Например, один столбец содержимого в меньшем окне можно перекомпоновать в окне большего размера, чтобы отобразить два столбца текста. Этот метод позволяет отображать больше содержимого на видимой верхней части экрана.
Использование функции "Показать/скрыть"
Оптимизируйте содержимое под размер окна и его ориентацию.
Покажите или скройте элементы страницы, чтобы оптимизировать содержимое в соответствии с размером окна и его ориентацией. Благодаря этому гибкому методу объем отображаемой информации адаптируется в соответствии с контекстом просмотра. Например, категории, отображаемые на маленьком экране, могут отображать ограниченное количество метаданных, таких как изображение, заголовок и ссылка, чтобы другая информация была видимой и пользователь мог сосредоточить свое внимание на важном. На большом экране в категориях могут отображаться дополнительные метаданные, такие как имя пользователя, дата и краткое описание — и все это помещается в окне просмотра.
Перепроектирование архитектуры
Используйте разветвление или сворачивание для элементов и содержимого страницы, чтобы пользователь мог сосредоточить внимание на важной информации и действиях.
Этот подход аналогичен практике "поэтапного представления информации" в вашем проекте, но для разных размеров и ориентаций окон. Например, раскрытие окна позволяет отображать список элементов рядом с подробными сведениями. Эта визуальная связь между содержимым позволяет пользователям легко выбрать другой элемент. На экране меньшого размера основное внимание уделяется отображению ключевой информации.
Создание матрицы точек останова
Матрица точек останова служит графическим изображением гибкого или адаптивного поведения дизайна приложения на экранах разных размеров и ориентаций. Обычно она представляет собой структурированную сетку или макет, подробно описывающий реакцию дизайна в различных точках останова. Каждый сегмент соответствует определенной ширине экрана, что дает представление о структуре, макете и функциональности дизайна. Матрица точек останова учитывает ширину экрана, ориентацию окна просмотра, элементы дизайна, структуру макета, презентацию содержимого, навигацию, мультимедийные и интерактивные компоненты, чтобы проиллюстрировать, как дизайн веб-сайта или приложения реагирует на различные размеры и ориентации экрана. Такой подход не только помогает завершить проектирование каждого экрана, но также упрощает реализацию благодаря четкому отслеживанию изменений свойств ключевых компонентов и информированию.
Возможности в Power Platform
Макеты форм приложений на основе модели настраиваются с помощью Power Apps Studio. Конструктор форм позволяет разработчикам добавлять элементы в структуру сетки, что позволяет страницам форм быть адаптивными по своей сути. Встроенные пользовательские компоненты, такие как пользовательские страницы, встроенные компоненты холста и компоненты кода Power Apps Component Framework должны включать адаптивное поведение в свои реализации. Например, для правильной работы пользовательских страниц они должны реализовывать адаптивное поведение так же, как и чистое приложение на основе холста.
Приложения на основе холста должны быть настроены для каждого компонента, чтобы реализовать адаптивное поведение, которое позволяет обеспечит контроль за работой приложений. Размеры экрана определяются в определении приложения, к которому можно обращаться для определения положения, поведения, видимости и других соответствующих свойств.