Стать быстрым, подвижным и полностью цифровым
Непосредственное управление
Все сенсорные экраны поддерживают непосредственное управление по умолчанию: вы нажимаете на целевую область, и что-то происходит. Тем не менее, некоторые особенности непосредственного управления не так просты, как кажутся. В Windows 8 содержимое следует за Вашим пальцем, как,например,при прокрутке на начальном экране; также нет необходимости перемещать палец точно по прямой линии, когда перетаскиваете, и, если вВы перемещаете объекты на экране, они автоматически привязываются к определенным областям. В конечном итоге ваши пользователи чувствуют себя уверенно при прокрутке.
На сенсорных устройствах, когда объекты без задержек перемещаются по экрану за пальцем пользователя, - это называется непосредственное управление
Интуитивно понятное непосредственное управление при перетаскивании имеет в своей основе три фактора.
- Как только пользователь начинает выполнять действие, он сразу же видит, как это действие влияет на устройство, он чувствует, что управление действительно находится в его руках. В противоположность этому, если сенсорное устройство реагирует на действия пользователя с задержкой, чувство контроля над устройством исчезает и со временем пользователь может разочароваться в устройстве или программном продукте.
- В сенсорных системах, где вам разрешено переставлять объекты на экране, существует термин "невидимый порог". Например: пользователь нажимает на объект и хочет перетащить его на пол-дюйма. В некоторых системах ему будет разрешено это сделать, а в других объект будет оставаться на месте до тех пор, пока пользователь не перетащит его по крайней мере на 2 дюйма. Точка, в которой пользователю разрешают начать перетаскивание, и называется невидимым порогом (invisiblethreshold). Windows 8 был разработан так, чтобы не использовать невидимые пороги, хотя и существуют привязки, позволяющие лучше работать с выравниванием элементов.
- Во время выполнения действий отклик системы выполняется мгновенно. Хороший пример такого поведения системы - начальный экран Windows 8. Как только вы выберете значок и начнете его перетаскивать, окружающие объекты будут менять свое положение в соответствии с ситуацией. Мгновенная обратная связь очень важна, так как пользователь увидит возможный результат своего действия и сможет его изменить (или даже отменить), если это необходимо. Это также стимулирует пользователя исследовать систему.
Существует еще несколько компонентов немедленного взаимодействия, которые необходимо рассмотреть. Сенсорное взаимодействие принципиально не изменяется в зависимости от количества пальцев, которые касаются экрана. Нет разницы, скользит по экрану один палец или три. Более того, оптимизирована встроенная синхронизация жестов. Рассмотрим действие "Нажатие и удержание". Если объект выделяется сразу после того, как пользователь его коснулся, может появиться случайное выделение. Если же объект нужно слишком долго удерживать, чтобы выделить, это пугает пользователя. Время выполнения жестов в Windows 8 стремится к минимуму за счет таких встроенных взаимодействий, как скольжение для выделения и перестановка.
Наглядная обратная связь
Из-за уменьшения использования визуальных эффектов оформления в WinRT-приложениях, а также из-за того, что сенсорные устройства не поддерживают реакцию на зависание над объектом (hover), должна существовать какая-либо форма наглядной обратной связи в случае, когда пользователь прикоснулся к экрану. Диалоговые элементы могут менять цвет, размер или перемещаться. Windows 8 обладает встроенной системой наглядного реагирования на прикосновения, которая используется в случае, если пользователь коснулся экрана, но это не повлекло за собой никакого иного действия. В результате пользователь понимает, что ввод по-прежнему работает.
Размеры объектов
Windows 8 использует всю площадь контакта пальца и экрана, чтобы выбирать объекты. Однако более важно определить - какого размера должны быть целевые объекты? Первый принцип, который необходимо понимать: всегда будет присутствовать некоторый процент ошибок. Тот факт, что возникнут ситуации, когда пользователь случайно выбирает неправильный объект, можно считать просто особенностью сенсорных устройств. Преимущества сенсорных интерфейсов существенно превышают недостатки, а кроме того существует несколько методов снижения вероятности ошибок. Исследованияпоказали, что наименьший размер целевого объекта (например, кнопки) должен быть от 5 до 9 мм в ширину. Когда объект меньше 5 мм, велика вероятность, что он слишком мал, чтобы можно было его аккуратно выделить. Если же объект больше 9 мм, то существенной пользы от этого не будет (другими словами, объект становится больше, но лучше он от этого не становится!) Объект размером 7 мм примерно соответствует 40 пикселям. Если же вы располагаете два таких объекта рядом, лучше всего будет установить интервал между объектами 10 пикселей, чтобы избежать случайного нажатия.
Расстояние между двумя расположенными рядом объектами размером по 40 пикселей каждый должно быть не менее 10 пикселей
Семантическое масштабирование
В предыдущих пунктах вы видели, что одна из основных целей нового дизайна для Windows - создать систему, которая призвана устранить отвлекающие элементы из пользовательского интерфейса. Основной пример такой ситуации - недостаток визуальных элементов оформления на основных страницах. Стоит рассмотреть также аспект работы с большим объемом данных на пространстве одной страницы и, в особенности, способ переходить от одного способа отображения данных к другому. Windows 8 создала собственный путь решения этих проблем - семантическое масштабирование. Функция семантического увеличения (если она включена) срабатывает, когда пользователь сводит пальцы на поверхности экрана.
Со страницы, на которой включена функция семантического масштабирования, будет осуществлен переход на специальный обзорный вид
Поддержка мыши, клавиатуры и пера
Хотя WinRT-приложения оптимизированы для сенсорного интерфейса, остается непреложным фактом, что многие пользователи будут работать с этим интерфейсом на стационарных компьютерах - десктопах. К счастью, в Windows 8 есть всесторонняя поддержка клавиатуры и мыши, реализованная на уровне операционной системы. Операции с мышью и операции с сенсорным экраном соответствуют друг другу следующим образом.
- Если задержать мышь над каким-либо объектом, это будет соответствовать жесту нажатия и удержания.
- Нажатие левой кнопки мыши - это то же самое, что и основное действие - одиночное нажатие на объект.
- Нажатие правой кнопки мыши вызывает меню приложения и соответствует скольжению от нижней части сенсорного экрана.
- Размещение курсора над углами экрана вызывает функции, характерные для манипуляций с краями рабочего пространства. Например, при размещении курсора на правом краю экрана будет вызвана панель чудо-кнопок.
- Использование прокрутки или колеса прокрутки для навигации по содержимому соответствует жесту скольжения по экрану.
Страницы с поддержкой семантического увеличения будут отображать специальный элемент пользовательского интерфейса в нижнем правом углу экрана. Кроме того, для вызова этой функции можно использовать клавиатурное сокращение Ctrl + колесико мыши.
Клавиатура также поддерживается на уровне операционной системы, но существует несколько операций, которые помогут вам убедиться, что пользователю действительно удобно пользоваться приложением.
- Даже если вы работаете над приложением, которое оптимизировано для сенсорного интерфейса, проверьте, как приложение работает на стационарном компьютере, особенно обратив внимание на реакцию наклавиш-стрелок и табуляции. Переходы, выполняемые таким образом с клавиатуры, должны быть логичными.
- Добавьте клавиатурные сокращения к вашим элементам управления, чтобы пользователям было легче их находить.
Основные сочетания клавиш
Ниже приведен список наиболее часто применяемых сочетаний клавиш:
- стрелки для навигации
- клавиша Enter (Ввод) для выполнения основного действия
- Windows + Z, чтобы показать команды приложения
- Windows + C для вызова панели чудо-кнопок
- Windows + tab чтобы перемещаться между приложениями
- пробел на элементе со списком, чтобы его выделить
- PageUp/PageDown для перемещения внутри содержимого
- Ctrl + +/- чтобы вызвать семантическое увеличение
Более полный список представлен в конце этой лекции.
Поддержка пера
Вам не придется дополнительно работать, чтобы кроме мыши, клавиатуры и сенсорного ввода настроить еще и использование пера. Чаще всего на компьютерах, поддерживающих перо, также присутствует и сенсорная система ввода. Если же вы не описали функциональность перьевого ввода, то поумолчанию она будет эквивалентна поведению мыши.
Что значит быть полностью цифровым?
Создатели нового дизайна для Windows обозначили несколько основных принципов, которые применяются в системе повсеместно. Один из наиболее важных - попытка обратить внимание пользователя на контент за счет уменьшения влияния визуальных элементов. Но такая концепция не решает задачу целиком, дизайнеры и разработчики приложений также влияют на решение этой задачи. Если графика и пользовательский интерфейс приложения не соответствуют Windows-стилю, влияние концепции уменьшается. Соответствие стилю Windows не должно быть само собой разумеющимся. Более того, для некоторых дизайнеров будет представлять определенную сложность такое изменение методов работы. Чтобы разобраться в этом вопросе, посмотрим на то, как чаще всего используется интерфейс в других системах - веб-приложениях или программных продуктах.
Рассмотрим группу значков, которые могут показаться вам связанными с определенными приложениями: калькулятором, блокнотом, календарем, электронной почтой. Эти значки напоминают намореально существующих аналогах цифровой среды, они помогают людям понять принципы ее работы.
Такие значки как калькулятор, блокнот, календарь и электронная почта основаны на реально существующих аналогах
Такие аналоги были созданы (и по-прежнему создаются) с помощью пикселей. Дизайнеры графических элементов и значков используют различные техники - градиенты, тени, скосы и т.д., - чтобы имитировать различные материалы, существующие в реальном мире: металл, стекло, дерево. Однако в WinRT-интерфейсе, это выглядит не соответствующим ситуации, так как не сообщает никакой полезной информации. Как и многое другое, пользовательский интерфейс также развивается, и в нем - особенно в стиле Windows- нет места для трехмерных значков приложений электронной почты.
Иконография нового интерфейса Microsoft
В Windows-интерфейсе по-прежнему есть место для иконографии. Но значки остаются верны новому пользовательскому интерфейсу Windows, они простые, информативные и краткие.
Итоги
В этом модуле вы изучили 2 основных компонента WinRT-приложений: анимацию и разработку приложений для сенсорного взаимодействия. Вы узнали об анимациях, доступных разработчику по умолчанию из библиотеки анимаций Windows и о частоиспользуемых сенсорных жестах, поддерживаемых в приложениях для Магазина Windows. Вы так же узнали о том, как уход от традиционных физических метафор при разработке приложений позволяет сделать взаимодействие пользователя с приложением полностью цифровым.
Самостоятельная работа
Семантическое увеличение - инновационная концепция, с которой стоит дополнительно поработать, чтобы обдуманно и обоснованно применять ее в своих приложениях. Потратьте немного времени, чтобы поэкспериментировать по крайней мере с тремя различными способами использования семантического увеличения.
Чтобы подготовить вас к этой задаче и напомнить, как можно использовать семантическое увеличение, приведем пример.
На этом экране представлены полные страницы с содержимым приложения для путешествий.
Когда пользователь выполняет жест сжимания на экране, вызывается функция семантического увеличения и основные разделы на экране уплотняются в более крупные блоки.
Вопросы
- Что такое окклюзия в контексте сенсорной среды? Назовите по крайней мере одну область, в которой рассматривается окклюзия в WinRT-приложениях.
- Что такое AnimationLibrary API и какое значение они имеет в приложениях для Магазина Windows?
- Что такое сенсорный шаблон в WinRT-приложениях? Назовите по крайней мере один и покажите пример его применения в приложениях для Windows.
Дополнительные ресурсы
Следующие ресурсы доступны в сети, чтобы помочь Вампомогут узнать больше об анимации и сенсорной концепциисенсорном управлении.
- Анимация пользовательского интерфейса
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465165.aspx
Описание анимаций и примеры типичных сценариев, реализованных с помощью библиотеки анимации.
- Руководство по стандартным способам взаимодействия с пользователем
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465370.aspx
Инструкции, помогающие сделать взаимодействие между пользователем и приложением интуитивно понятным, независимо от того, какой метод ввода будет использоваться.
Ответы
- Окклюзия - ситуация, когда содержимое экрана будет закрыто от взгляда пользователя. Это происходит, когда руки или пальцы пользователя закрывают важные части сенсорного экрана (такие, как интерактивные элементы). Один из способов справиться с этой проблемой - использование подсказок, которые активируются, когда пользователь нажимает и удерживает палец на элементе. Другой способ - разрабатывать расположение элементов управления приложения так, чтобы избежать тех областей экрана, которые, скорее всего, будут закрыты.
- AnimationLibrary API позволяет вам использовать анимацию в вашем WinRT-приложении и настраивать элементы управления так, как вам нужно. И хотя есть возможность добавлять к элементам управления собственные анимации, достаточно много анимаций поставляются бесплатно в составе приложений для Магазина Windows.
- Сенсорный шаблон - поведение пользователя, связанное с непосредственным взаимодействием с контентом на сенсорном устройстве. Например, понятное управление, видимая обратная связь, размеры целевых объектов и семантическое увеличение.