Организация соответствий функций сценарию

Презентацию к данной лекции можно скачать здесь.

Windows, Bing, PowerPoint, InternetExplorer, VisualStudio, WebMatrix, DreamSpark и Silverlight являются зарегистрированными товарными знаками или товарными знаками MicrosoftCorporation в США и / или других странах. Другие названия продуктов и компаний, упомянутые здесь, также могут быть торговыми марками их соответствующих владельцев.

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

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

Создан для Microsoft компанией Avlade: http://www.Avlade.com

Copyright 2012 MicrosoftCorporation.

Цель лекции

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

Включение функций в архитектуру вашего приложения

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

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

В этой лекции также использован пример приложения FoodTruck, который проходит различные стадии UX-проектирования. В следующем разделе вы найдете сценарии, созданные в лекции 3, наряду со связанными с ними элементами из лекции 4. Чтобы обеспечить простоту организации этих элементов в команды, каждый из сценариев будет представлен как раздел в главном окне нашего иерархического приложения. Явные команды, полученные из элементов, специфичны для каждого из сценариев и будут контекстно отображаться в главном окне приложения или в отдельном разделе.

Группировка команд

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

Убедитесь в наличии проработанного эскиза центрального узла вашего приложения, эскизов разделов и деталей, созданных вами в лекции 4. Если у вас нет эскизов, можете воспользоваться примером приложения FoodTruck.

Найдите элементы, связанные со всеми сценариями. Эти общие элементы должны быть доступны в качестве команд прямо в главном окне приложения. В примере приложения FoodTruck есть единственная такая команда - Поиск ближайшего заведения (Findclosesttruck). Эта команда добавлена в панель приложения.

Глобальные команды против контекстно-зависимых

Обратите внимание на то, что команда "Поиск ближайшего заведения" размещена в правой стороне панели приложения FoodTruck. Запомните: правая сторона меню обычно резервируется для глобальных команд, тех, что не основаны на выделенном контенте. А кнопки выбора (такие,как Обрезать/Удалить/Прикрепить фото) можно поместить слева. вы увидите больше примеров группировки и разделения команд при дальнейшем изучении лекции.

Contextualcommandsappearwhencontentisselected	- Контекстно-зависимые команды появляются, когда контент выделен
Globalcommands	- Глобальные команды

Команды на полотне

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

Раздел 1: Где мои палатки?

Возможность видеть, где будет фургон через 6 или более часов.

Раздел 2: Я голоден

Возможность видеть больше названий и описаний фургонов.

Раздел 3. Отличные палатки

Возможность видеть больше названий и описаний фургонов.

С расширением раздела 4 все категории будут видны при перемещении по экрану.

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

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

Задание: определите, какие из команд могут быть расположены на полотне

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

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

Набросок команд на примере приложения FoodTruck

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

Перед проектированием команд в панели приложения необходимо понять общие принципы расположения кнопок. Это поможет сохранить единообразие панели приложения со стандартными системными решениями для удобства пользователя Windows 8.

Если у вас есть отдельные наборы команд (такие, как набор для создания нового контента и набор для фильтрации), поместите эти наборы в разных сторонах экрана.

Если в наличии более двух наборов команд, разместите наиболее похожие наборы на одной стороне.

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

Разместите контекстные команды в панели приложения, которая при выборе элементов раскрывается автоматически, без изменения масштаба.

Учитывайте, что панель приложения должна поддерживать прикрепленную и портретную ориентации экрана.

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

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

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

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

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

Поместите команды Вырезать, Копировать, Вставить в контекстное меню.

Раздел 1: Где мои палатки?

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

Определить местоположение (главное окно).

Написать отзыв (панель приложения).

Добавить фото (панель приложения).

Предупредить меня, когда фургон поблизости (панель приложения).

Поместить на начальный экран (панель приложения).

Задание:

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

Группировка схожих команд в одно меню

Если вы не можете свести все команды в панели приложения в виде отдельных кнопок, сгруппируйте их и поместите в меню, которые открываются кнопками на панели. Группируйте команды логически: например, Ответить, Ответить всем и Переслать поместите в меню Ответ.

Не создавайте таких меню, как "Далее", "Дополнительно", для несвязанных команд. Таким приложением будет неудобно пользоваться. Если вы обнаружите много логически не связанных команд, рекомендуется упростить (оптимизировать) приложение. Просмотрите следующий пример раздела "Я голоден" приложения FoodTruck.

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

Посмотреть на карте или в виде списка ближайшие заведения (панель приложения)

Отбор по местоположению (панель приложения)

Отбор по категориям пищи (панель приложения)

Показать на карте (панель приложения)

Показать в списке (панель приложения)

Отбор по оценкам других пользователей (панель приложения)

Поместить на начальный экран (панель приложения)

Определить местоположение на карте (полотно)

Задание: Объединить похожие команды в одно меню

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

Соблюдайте согласованность кнопок меню приложения

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

Раздел 3: Отличные палатки.- Поиск палаток, которые рекомендуют другие пользователи

Отбор по оценкам других пользователей (панель приложения)

Отбор по дате (панель приложения)

Отбор по местоположению (панель приложения)

Показать на карте (панель приложения)

Показать в списке (панель приложения)

Возможность прочитать меню (по нажатию на содержимое)

Написать обзор (панель приложения)

Поместить на начальный экран (панель приложения)

Заметьте, что кнопка сортировки находится там же, что и кнопка закрепления на начальном экране. Эти кнопки останутся в той же позиции.

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

Отбор по категориям пищи (панель приложения)

Количество палаток в данной категории отображается на рабочем экране приложения

Возможность прочитать меню (часть контента, по нажатию на плитку)

Отбор по местоположению (панель приложения)

Показать на карте (панель приложения)

Показать в списке (панель приложения)

Написать обзор (панель приложения)

Поместить на начальный экран (панель приложения)

Рекомендации при создании пиктограмм кнопок панели приложения

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

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

Итоги

Важно продумать, какие элементы будут работать с каждым экраном. В эффективном WinRT-приложении элементы должны быть специфичны и соотноситься с предпочтениями пользователя.

Помещайте наборы элементов на те страницы, где они нужны.

Наборы элементов могут появиться на нескольких страницах, если это необходимо.

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

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

Принципы правильного расположения элементов

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

Продумайте контекст.

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

Разделите отличные друг от друга наборы, используя границы или разделители.

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

Соблюдайте согласованность общих наборов функций.

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

Глобальные команды помещаются справа.

При использовании кнопок Принять/Отклонить в панели приложения кнопку Принять нужно поместить слева.

Значки переключения вида (Показать Список, Показать на Карте) должны располагаться слева.

Самостоятельная работа

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

Вопросы

Когда расположение команды непосредственно на хосте можно признать эффективным?

Почему важно, создавая кнопки, сохранить тот же самый размер кнопки в панели приложения?

Куда в панели приложения следует помещать контекстные команды?

Дополнительные ресурсы

Вы можете узнать о расположении команд на холстеполотне или в панели приложения, изучив эти ресурсы:

Руководство по панелям приложения (http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465302.aspx)

Добавление контекстных меню (http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465300.aspx)

Проектирование командного интерфейса для приложений Магазина Windows (http://msdn.microsoft.com/ru-ru/library/windows/apps/hh761499.aspx)

Проектирование навигации для приложений Магазина Windows (http://msdn.microsoft.com/ru-ru/library/windows/apps/hh761500.aspx)

Ответы

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

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

Контекстные команды следует располагать слева, а глобальные - справа.

Примечания:

Опыт взаимодействия (англ. UserExperience, UX). Буквальный перевод - опыт пользователя.	Это ощущения, возникающие у человека при непосредственном взаимодействии с объектами окружающего мира. В более узком смысле, опыт взаимодействия характеризует личное восприятие человеком функциональных и эмоциональных характеристик продукта или услуги в процессе использования.	Данный термин широко применяется в информационных технологиях (ИТ) для описания субъективного отношения, возникающего у пользователя в процессе использования как информационной системы в целом, так и отдельной ее части (веб-сайта, приложения и пр.). Опыт взаимодействия в ИТ связан с таким понятием, как юзабилити, применяемым при разработке и анализе пользовательских интерфейсов и приложений. Разработчики уделяют значительное внимание изучению и проектированию опыта взаимодействия на всех этапах создания продукта, начиная с самого раннего - этапа планирования.
AppBar	Панель приложения.
ModernUI	Название нового интерфейса, под который разрабатываются приложения для W8.	В данном курсе в качестве примера приложения рассматривается приложение FoodTruck. Термин "FoodTruck" может обозначать передвижной фургон-ресторан, мобильное кафе, передвижную палатку быстрого питания, фургон-кухню. Существует множество разновидностей подобных фургонов, пожалуй, самый известный - IceCreamTruck, который служит для торговли мороженым.
Hub	центральный узел, главное окно приложения.