Руководство по проектированию взаимодействия с мини-приложением

В этой статье приведены подробные рекомендации по проектированию взаимодействия с мини-приложениями Windows.

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

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

Размер виджета Максимальное число точек касания
маленький 1
Средний 3
большой 4

Следующие элементы навигации не поддерживаются в мини-приложениях Windows:

  • Сводные таблицы не будут поддерживаться в мини-приложениях
  • Страницы L2 не поддерживаются в мини-приложениях
  • Вертикальная или горизонтальная прокрутка не поддерживаются в виджетах

Контейнеры

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

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

На следующих изображениях показан пример использования элементов ссылки изображения в шаблоне мини-приложения.

Два изображения мини-приложений, которые иллюстрируют ссылки на изображения. Изображения расположены в столбцах и строках, которые делают сетку.

Разбиение на страницы

На следующих изображениях показаны примеры разбиения на страницы в шаблоне мини-приложения. Элементы управления разбивкой на страницы можно выровнять по горизонтали или по вертикали. Стрелки навигации отображаются в ответ на указатель мыши.

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

Этот набор двух изображений показывает вертикальное разбиение на страницы. На первом изображении по нижней части выровнена строка точек. Одна точка больше, чтобы указать текущую активную страницу. На втором изображении курсор наведите указатель мыши на стрелку вправо в правой части мини-приложения, которая позволяет пользователю перейти на следующую страницу. В левой части мини-приложения имеется соответствующая стрелка влево, чтобы перейти на предыдущую страницу.

Эти два изображения демонстрируют, как элементы управления разбивкой на страницы выглядят, когда мини-приложение имеет фон изображения.

На следующих изображениях показан пример гиперссылок в шаблоне мини-приложения.

Два изображения виджетов, иллюстрирующих гиперссылки. На первом изображении показана строка текста с гиперссылкой. Текст без форматирования. На втором изображении курсор мыши наведен на гиперссылку, из-за чего текст подчеркивается.

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

Два изображения мини-приложений, которые иллюстрируют раскрывающиеся меню. На левом изображении раскрывающееся меню свернуто. На правом изображении раскрывающийся список расширяется и расширяется по границе мини-приложения.

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

  • Last updated on