Создание макета пользовательского интерфейса (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

Страница приложения или полотно

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

Вы можете создать столько страниц приложения, сколько требуется для поддержки пользовательских сценариев. Дополнительные сведения о создании структуры страниц приложения для поддержки пользовательских сценариев см. в разделах о планировании приложений Магазина Windows и о проектировании навигации.

Изменение размера пользовательского интерфейса Windows

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

	Во весь экран Приложение занимает весь экран.
	Размер изменен Размер окна приложения изменен и занимает часть экрана. Прочие приложения могут заполнить оставшуюся область экрана.

 

Дополнительные сведения см. в документе Руководство по взаимодействию с пользователями — макеты и масштабирование.

Сенсорная клавиатура и панель рукописного ввода

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

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

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

Подробнее о поддержке этих режимов текстового ввода см. в разделе Руководство по сенсорной клавиатуре и панели рукописного ввода.

Панели приложения

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

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

Чудо-кнопки Windows

Чудо-кнопки — это определенный и согласованный набор кнопок, используемый во всех приложениях: "Поиск", "Поделиться", "Устройства", "Параметры" и "Пуск". Мы считаем, что это основные рабочие сценарии, которые все пользователи хотят выполнять практически в каждом используемом ими приложении.

• Поиск. Пользователи могут выполнять поиск содержимого приложения или веб-содержимого из любого места системы.
• Отправить Пользователи могут делиться содержимым из вашего приложения с контактами или службами.
• Устройства Пользователи могут подключиться к устройствам и отправить содержимое и потоковое мультимедиа, а также напечатать документы.
• Параметры Пользователи могут настраивать ваше приложение в соответствии со своими предпочтениями и получать доступ к справке.
• Пуск Пользователи могут перейти непосредственно к начальному экрану.

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

Контекстные меню

В контекстном меню, которое иногда называют всплывающим, показаны операции, которые пользователь может выполнять с текстом или элементами пользовательского интерфейса в вашем приложении. В каждом контекстном меню можно использовать до пяти команд — например, "вырезать", "копировать" или "открыть с помощью". Благодаря этому ограничению контекстное меню не перегружается лишними командами, оставаясь простым для чтения и относящимся непосредственно к тексту или объекту, с которым взаимодействуют его команды.

Не используйте контекстные меню как главный командный интерфейс приложения. Для этого используется панель приложения. Дополнительные сведения см. в разделе Руководство по контекстным меню.

Диалоговые окна сообщений

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

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

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

Всплывающие элементы

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

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

Всплывающие уведомления (или баннеры)

Всплывающие уведомления (которые в Windows Phone называются баннерами) — это уведомления для пользователя, которые отображаются, когда приложение работает в фоновом режиме. Всплывающие уведомления — прекрасное средство предоставления пользователям информации, которую они хотят получать в реальном времени, но ничего страшного не случится, если они ее пропустят. Чтобы переключиться на приложение и получить дополнительную информацию, пользователь должен коснуться всплывающего уведомления.

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

Плитки

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

 

Ошибки

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

Чтобы показать:	Используйте эту поверхность:
Некритическая ошибка, характерная для некоторого элемента данного приложения. Приложение не может устранить данную проблему, но пользователь может. Взаимодействие с пользователем: пользователь может продолжить взаимодействие с приложением, системными компонентами и другими приложениями без отклонения данной ошибки. Пример: пользователь вводит в текстовом поле недопустимую строку, а затем вводит строку повторно.	Встроенный текст на полотнах Только текст Закрыто приложением Отображается встроенной рядом с источником ошибки
Некритическая ошибка, которая относится ко всему приложению. Приложение не может устранить данную проблему, но пользователь может. Взаимодействие с пользователем: пользователь может продолжить взаимодействие с приложением, системными компонентами и другими приложениями без отклонения данной ошибки. Пример: не удается синхронизировать почту.	Текст наверху страницы Только текст Закрыто приложением Появляется наверху страницы
Существенная, но не критическая ошибка, которая относится ко всему приложению, и приложение может предложить решение. Взаимодействие с пользователем: пользователь может ответить на предложение или продолжить взаимодействие с приложением, системными компонентами и другими приложениями без отклонения данной ошибки.	Строка ошибок и предупреждений Текст, две кнопки Закрыто пользователем Появляется рядом с верхней частью страницы
Критическая ошибка, которая относится ко всему приложению и не позволяет пользователю его использовать. Взаимодействие с пользователем: пользователь не может продолжить взаимодействие с приложением без отклонения этой ошибки. Однако пользователь может взаимодействовать с системными компонентами и использовать другие приложения.	Диалоговое окно сообщения Текст, 1–3 кнопки, заголовок (дополнительно) Закрыто пользователем Появляется посередине окна приложения

 

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

Ошибки: встроенный текст

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

Следует	Выровнять сообщение с элементом управления или другим элементом, к которому данное сообщение относится.
	Расположить сообщение с достаточно широким пространством вокруг, чтобы усилить его восприятие.

 

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

 

Не следует

Включать в сообщение действия или команды.

 

Ниже в примере для Windows лучшим выбором была бы строка ошибок и предупреждений.

Ошибки: строка ошибок и предупреждений

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

Следует	Расположить строку наверху экрана, обращая внимание пользователей и побуждая их к действиям.
	Выбрать для строки цвет из палитры приложения.
	Использовать одинаковые цвет и расположение для всех строк ошибок и предупреждений.

 

Не следует	Отображать строки с разными цветам или глифами (такими как, щит или восклицательный знак) в зависимости от воспринимаемой степени серьезности.
	Использовать глиф "X" для закрытия строки; вместо него следует использовать помеченную кнопку "Закрыть".
	Использовать строку ошибок и предупреждений только для информационных сообщений.

 

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

Ошибки: диалоговые окна сообщений

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

Следует

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

 

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

Не следует

Использовать диалоговое окно, если пользователи могут проигнорировать данное сообщение.

 

В следующем примере нет ошибки, которая бы требовала блокировки действий пользователя до ее устранения. Строка ошибок или сообщений была бы лучшим выбором.

Связанные разделы

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

Рекомендации по параметрам приложений

Руководство по поиску

Рекомендации по общему доступу к содержимому

Руководство по всплывающим элементам

Руководство по диалоговым окнам сообщений

Руководство по контекстным меню

Руководство по экранам-заставкам

Руководство по справке приложения