Спонсор: Microsoft
Опубликован: 27.12.2012 | Доступ: свободный | Студентов: 429 / 35 | Длительность: 09:19:00
Специальности: Программист
Лекция 5:

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

< Лекция 4 || Лекция 5: 12 || Лекция 6 >

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

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

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

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

  • Посмотреть на карте или в виде списка ближайшие заведения (панель приложения)
  • Отбор по местоположению (панель приложения)
  • Отбор по категориям пищи (панель приложения)
  • Показать на карте (панель приложения)
  • Показать в списке (панель приложения)
  • Отбор по оценкам других пользователей (панель приложения)
  • Поместить на начальный экран (панель приложения)
  • Определить местоположение на карте (полотно)
Раздел "Я голоден" с командами на панели приложения и командой в главном окне

Раздел "Я голоден" с командами на панели приложения и командой в главном окне
Пример меню в панели приложения

увеличить изображение
Пример меню в панели приложения

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

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

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

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

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

  • Отбор по оценкам других пользователей (панель приложения)
  • Отбор по дате (панель приложения)
  • Отбор по местоположению (панель приложения)
  • Показать на карте (панель приложения)
  • Показать в списке (панель приложения)
  • Возможность прочитать меню (по нажатию на содержимое)
  • Написать обзор (панель приложения)
  • Поместить на начальный экран (панель приложения)

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

Команды, добавленные в черновой эскиз раздела "Отличные палатки"

Команды, добавленные в черновой эскиз раздела "Отличные палатки"

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

  • Отбор по категориям пищи (панель приложения)
    • Количество палаток в данной категории отображается на рабочем экране приложения
  • Возможность прочитать меню (часть контента, по нажатию на плитку)
  • Отбор по местоположению (панель приложения)
  • Показать на карте (панель приложения)
  • Показать в списке (панель приложения)
  • Написать обзор (панель приложения)
  • Поместить на начальный экран (панель приложения)
Эскиз раздела 4

увеличить изображение
Эскиз раздела 4

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

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

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

Итоги

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

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

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

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

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

  • Продумайте контекст.
  • Расположите наборы команд в единых позициях по всему приложению.
  • Разделите отличные друг от друга наборы, используя границы или разделители.
  • Используйте выпадающие меню, когда функций слишком много, чтобы представить их значками в панели приложения.
  • Соблюдайте согласованность общих наборов функций.
  • Контекстные команды выбора располагаются в левой части панели приложения.
  • Глобальные команды помещаются справа.
  • При использовании кнопок Принять/Отклонить в панели приложения кнопку Принять нужно поместить слева.
  • Значки переключения вида (Показать Список, Показать на Карте) должны располагаться слева.

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

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

Вопросы

  1. Когда расположение команды непосредственно на хосте можно признать эффективным?
  2. Почему важно, создавая кнопки, сохранить тот же самый размер кнопки в панели приложения?
  3. Куда в панели приложения следует помещать контекстные команды?

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

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

Ответы

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

Примечания:

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