Навигация, ориентация и жесты (приложения Магазина Windows Phone)

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

Страницы и фреймы

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

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

Например, при порядке перехода "страница 1 (p1) — страница 2 (p2) — p1 — p2 — страница 3 (p3) — p1" создается стек переходов назад с порядком страниц p1, p2, p1, p2, p3, p1. Если пользователь изменил содержимое второго экземпляра страницы p2 из стека переходов назад, но возвращается с помощью кнопки "Назад" к первому экземпляру страницы p2 из стека, то ранее сделанные изменения не будут отображаться, пока страница не обновит данные, то есть это представление является снимком страницы, которую пользователь видел в заданный момент навигации.

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

Ниже приведены определения в контексте модели страницы приложения для Windows Phone.

  • Страница: узнаваемая пользователем коллекция элементов в устойчивом состоянии. Может выглядеть, как страница с информацией, запоминающимся содержимым или со ссылками на другие страницы.
  • Экран: обычный экран пользовательского интерфейса, например всплывающее окно, диалоговое окно или экран-заставка, не имеющий памятного содержимого. Пользователь не воспринимает экран как коллекцию элементов с устойчивым состоянием.

На рисунке ниже показана структура гипотетического приложения с различными страницами и экранами.

Пример структуры приложения

Пример структуры приложения

Обзор страниц

Приложение может содержать следующие страницы:

  • домашняя страница;
  • страница мини-приложений;
  • страница данных о мини-приложениях (со сводками);
  • страница данных о гаджетах;
  • страница поиска;
  • страница параметров.

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

Экран входа также не содержит данных состояния, он только запрашивает ввод учетных данных (за исключением ситуации, когда приложение запоминает последнее введенное имя пользователя).

Важное примечание.: Не каждому представлению в Windows Phone нужна страница.

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

  • Выразит ли пользователь явное желание посетить эту страницу?
  • Запомнит ли пользователь свой визит на эту страницу и захочет ли вернуться к ней?

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

Полноэкранный режим

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

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

Навигация по страницам

В Windows Phone навигацию можно определить как переход между страницами.

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

В следующем разделе изложены рекомендации по использованию эффективной модели страницы.

Экраны и переходы без навигации

Переходный пользовательский интерфейс, например экран входа, можно реализовать с помощью всплывающего элемента управления, частично закрывая экран отображаемым содержимым, и не конструировать отдельные экраны, для которых могла бы потребоваться полноценная навигация. Вы можете добавить в код событие BackKeyPress и присваивать e.Cancel значение true, когда появляется всплывающее окно, чтобы пользователи могли закрывать диалоговое окно с помощью кнопки "Назад".

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

На страницах с несколькими разделами содержимого переход между разными частями содержимого можно осуществлять без навигации, просто перепривязывая расположенные на странице элементы управления к новому DataContext. Для повторной привязки также можно загрузить несколько экземпляров UserControl на страницу или использовать другой механизм для отображения нового содержимого. Вы можете выбирать способ перехода пользователя вперед и назад между элементами. Например, можно использовать кнопки панели приложения Назад и Далее. Но мы рекомендуем не увлекаться применением кнопки "Назад" для локальных переходов.

Сохранение состояния и полное удаление

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

Далее в таблице дана информация о типичных частях приложения, которые считаются страницами.

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

 

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

Тип пользовательского интерфейса Реализация Поведение кнопки "Назад" Поведение при полном удалении
Страница Page Кнопка "Назад" обеспечивает автоматический возврат назад или выход из приложения. Эту кнопку не следует переопределять, за исключением возможной потери данных. Автоматически помещается в стек переходов назад.
Промежуточный пользовательский интерфейс в виде экрана Всплывающее или дочернее окно Приложение должно переопределять этот элемент, чтобы отменить всплывающее окно. Экранная клавиатура и окна сообщений отменяются автоматически при нажатии кнопки "Назад". Приложение должно закрывать или отменять всплывающее окно во время навигации.
Перечисление элементов UserControl Неприменимо. Размещается на родительской странице. Приложение должно сохранять активный элемент, если это уместно.

 

Соображения по ориентациям и осям

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

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

При разработке приложения, способного выполняться в альбомной ориентации:

  • Определите, будет ли приложение поддерживать книжную ориентацию или будет использовать только одну неизменную ориентацию.
  • Альбомная ориентация удобна, если пользователи хотят максимально увеличить горизонтальное пространство экрана. Вы можете переупорядочивать элементы управления и разметку при повороте телефона, чтобы визуально приспособить экран к отображению содержимого по горизонтали.
  • Альбомная ориентация часто используется для представления мультимедийного содержимого, так как имеет типичные пропорции. Если основная цель альбомной ориентации приложения связана с использованием содержимого, убирайте элементы управления и навигацию, чтобы пользователю было удобнее просматривать содержимое.

Сенсорные жесты

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

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

Windows Phone поддерживает следующие жесты традиционного и мультисенсорного ввода.

Традиционный сенсорный ввод

  • Касание
  • Двойное касание
  • Сдвиг
  • Проведение
  • Касание и удерживание

Мультисенсорный ввод

  • Сжатие и растяжение

Касание

Касание — палец быстро и однократно касается экрана в ограниченной области и убирается от экрана.

Касание

Касание

С жестом касания связаны два режима поведения.

  • Касаясь экрана, палец дает указание о сенсорном вводе
  • Когда палец убирается с экрана, выполняется действие

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

Двойное касание

Двойное касание — два быстрых касания пальцем в ограниченной области.

Двойное касание

Двойное касание

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

Сдвиг

Сдвиг — пользователь проводит одним пальцем по экрану в любом направлении. Жест сдвига заканчивается, когда палец убирается с экрана.

Сдвиг

Сдвиг

С жестом сдвига связаны два режима поведения.

  • Содержимое можно перемещать с помощью простой операции. Содержимое "прилипает" к пальцу и следует за его перемещением. Элементы управления или приложение могут определять, какое направление сдвига поддерживать. Это движение может выполняться по горизонтали, по вертикали или в любом заданном направлении. Если содержимое перемещено в неопределенное состояние, оно должно прикрепляться к ближайшему состоянию в направлении назад.
  • Сдвиг может перемещать определенный элемент или изменять порядок его следования. Элемент следует за пальцем и помещается в новое расположение, когда палец убирается с экрана.

Проведение

Проведение — пользователь быстро проводит одним пальцем в любом направлении, не отрывая его от экрана. В конце жеста палец отрывается от экрана, не прерывая движения. Проведение может сопровождать жест сдвига.

Проведение

Проведение

Жест проведения сдвигает прокручиваемую область или перемещает объект с использованием инерции. Элементы управления или приложение можно настроить на поддержку определенного поведения, связанного с направлением проведения. Проведение может выполняться по горизонтали, по вертикали или в другом заданном направлении. Если задана горизонтальная или вертикальная траектория, движение в других направлениях преобразуется в движение по вертикали или по горизонтали.

Проведение обычно перемещает все полотно, но вместо этого можно задать перемещение отдельных объектов.

Сжатие и растяжение

Сжатие и растяжение — два пальца касаются экрана в разных ограниченных областях, затем пользователь сводит пальцы вместе (сжатие) или разводит их в стороны (растяжение).

Сжатие и растяжение

Сжатие и растяжение

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

Касание и удерживание

Касание и удерживание — один палец касается ограниченной области в течение определенного времени. Жест касания и удерживания следует использовать для отображения контекстного меню или страницы параметров для элемента.

Касание и удерживание

Касание и удерживание

Точки мультисенсорного ввода

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

Экранные точки сенсорного ввода с диаметром 7 мм и более рассматриваются как отдельные источники сенсорного ввода, если края этих точек разделяет расстояние 3,5 мм и более и если все жесты поддерживаются.

Каждая точка сенсорного ввода увеличивает загрузку процессора, поэтому при реализации более двух одновременных точек сенсорного ввода рассмотрите вопрос возможного влияния на производительность. Windows Phone поддерживает до 10 точек сенсорного ввода, но не все аппаратные экраны будут поддерживать больше четырех таких точек.

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

Навигация в приложении для Windows Phone

Как выполнять навигацию по страницам в Windows Phone

Краткое руководство: сенсорный ввод для Windows Phone

Поддержка жестов для Windows Phone