Поделиться через

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

  • Статья

Примечание.

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

Внимание

Функция, описанная в этом разделе, доступна в предварительной версии сборок Windows, начиная с сборки 25217. Сведения о предварительных сборках Windows см. в статье Windows 10 Insider Preview.

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

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

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

Размер мини-приложения Максимальное число точек касания
small 1
medium 3
большой 4

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

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

Контейнеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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