Язык: HTML | XAML

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

Applies to Windows and Windows Phone

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

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

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

Страница программы (или полотно)

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

  • Applies to Windows

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

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

Во весь экран

Во весь экран

Приложение занимает весь экран.

Размер изменен, узкое приложение

Размер изменен, широкое приложение

Размер изменен

Размер окна приложения изменен и занимает часть экрана.

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

 

Подробнее об этом: Руководство по изменению размера.

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

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

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

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

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

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

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

Панель приложения внизу экрана

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

  • Applies to Windows

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

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

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

Приложение с чудо-кнопками

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плитки

Плитки на начальном экране

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

 

Ошибки

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

Чтобы показать:Используйте эту поверхность:

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

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

Пример: пользователь вводит в текстовом поле недопустимую строку, а затем вводит строку повторно.

Встроенный текст на полотнах

  • Только текст
  • Закрыто приложением
  • Отображается встроенной рядом с источником ошибки

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

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

Пример: не удается синхронизировать почту.

Текст наверху страницы

  • Только текст
  • Закрыто приложением
  • Появляется наверху страницы

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

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

Строка ошибок и предупреждений

  • Текст, две кнопки
  • Закрыто пользователем
  • Появляется рядом с верхней частью страницы

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

Взаимодействие с пользователем: пользователь не может продолжить взаимодействие с приложением без отклонения этой ошибки. Однако пользователь может взаимодействовать с системными компонентами и использовать другие приложения.

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

  • Текст, от 1 до 3 кнопок, заголовок (не обязателен)
  • Закрыто пользователем
  • Появляется в центре окна приложения

 

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

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

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

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

 

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

Встроенное сообщение об ошибке, связанное с конкретным текстовым полем

 

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

 

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

Действие, вместо которого лучше использовать строку ошибок и предупреждений

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

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

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

 

Строка ошибок

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

 

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

Неправильное применение строки ошибок и предупреждений

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

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

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

 

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

Правильное применение диалогового окна сообщения об ошибке

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

 

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

Неправильное применение диалогового окна сообщения об ошибке

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

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

 

 

Показ:
© 2014 Microsoft