Проектирование приложений для Modern UI

Стать быстрым, подвижным и полностью цифровым

Показывать лекцию целиком

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

Цель лекции

В этом модуле вы ознакомитесь с двумя ключевыми компонентами приложений для Магазина Windows анимацией и сенсорным пользовательским интерфейсом. Использование этих компонентов входит в более широкое понятие – ""полностью цифровой интерфейс" ("authentically digital"). Вы увидите, как отказ от традиционных физических аналогов позволит вам взаимодействовать с пользователем на новом уровне.

Перед тем как начать…

Вам понадобится установить VisualStudio 2012RC (или более позднюю версию на момент чтения данной лекции), а также скачать "HTMLAnimationLibrarysample" ("Пример использования библиотеки анимации HTML"), который в настоящий момент находится по следующему адресу: http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720/sourcecode?fileId=50840pathId=1927408783

Язык дизайна современного пользовательского интерфейса Windows включает в себя анимацию

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

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

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

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

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

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

    Использование библиотек анимации HTML

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

    У каждой анимации есть технические особенности: например, enterPage или swipeReveal, но в данный момент это для нас не важно. Всписке ниже мы выделены категории библиотечных анимаций.

    Навигация в приложении
    Переход страницы (Enter Page / Exit Page)
    Анимация содержимого
    Переход содержимого (Enter Content / Exit Content)
    Развернуть/Свернуть (Expand / Collapse)
    Изменение позиции (Reposition)
    Плавный переход (Crossfade)
    Появление / Исчезновение (Fade In / Fade Out)
    Считывание (Peek)
    Обновление индикатора события (UpdateBadge)
    Показать / Скрыть (Reveal / Hide)
    Выделение
    Анимация курсора
    Выбор и отмена прокруткой (Swipe Select / Swipe Deselect)
    Подсказка прокрутки (Swipe Reveal)
    Показать или скрыть вспомогательный интерфейс
    Показать/элементы пользовательского интерфейса по краям (Show Edge UI / Hide Edge UI)
    Показать панели/ Скрыть панели (ShowPanel / HidePanel)
    Показать всплывающее окно / Скрыть всплывающее окно (ShowPopUp / HidePopUp)

    Обзор наиболее популярных анимаций

    Чтобы выполнить это упражнение, вам понадобится последняя версия примера использования библиотеки HTML-анимации, опубликованная Microsoft. Пример нужно запустить в VisualStudio. Если вы еще не установили VisualStudio 2012, необходимо сделать это сейчас. Также, если вы еще не скачали библиотеку HTML-анимации, стоит сделать это сейчас. Библиотека находится по адресу: http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720/sourcecode?fileId=50840pathId=1927408783

    После закачки файл необходимо распаковать и поместить в какую-нибудь легкодоступную папку, например, Рабочий стол или Мои документы.

  • Запустите VisualStudio 2012 и выберите в меню Файл > Открыть > Проект/Решение (File > Open > Project/Solution).
  • Перейдите в директорию, в которой вы поместили скачанный файл примера, откройте папку и запустите MicrosoftVisualStudioSolution (.sln) файл.
  • Нажмите F6 или выберите Построение > Построить решение (Build > Build Solution), чтобы выполнить компиляцию проекта.
  • Нажмите F5 или выберите в меню Отладка > Начать отладку (Debug > Start Debugging), и начальная страница примера будет показана в браузере.
  • Рассуждения об эргономике и сенсорном интерфейсе

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

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

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

    Преимущества сенсорного интерфейса

    Перед тем как освоить новый интерфейс, вспомните, как работает устройство, с которым вы давно знакомы, - мышь. У мыши есть свои особенности, и вы постепенно учились перемещаться по экрану, прокручивать содержимое документов, выделять объекты. Сенсорный интерфейс в WinRT-приложениях используется для таких же задач: общение с программой, помощь пользователю в выполнении необходимых ему действий. Темнеменее, самаструктуражестовсущественно отличается от работы с мышью. Многие действия в WinRT-интерфейсе выполняются интуитивно, даже если вы никогда ранее не пользовались устройствами с сенсорными экранами, но есть и некоторые особенности, которые стоит изучить. Ниже представлен рисунок с наиболее часто используемыми жестами:

    На рисунке слева направо, сверху вниз:

  • прикоснитесь и удерживайте, чтобы узнать больше;
  • короткое касание для выполнения основного действия;
  • скольжение для перемещения;
  • скольжение для выделения;
  • сжатие для изменения масштаба;
  • скольжение от правого края для перехода к системному меню;
  • вращательное движение для поворота
  • Жест "прикоснитесь и удерживайте, чтобы узнать больше". Этот жест заменяет зависание указателя мыши над объектом. Пример применения такого действия - подсказки на кнопках-инструментах. При использовании мыши подсказка будет вызвана как реакция на событие hover (зависание), а в сенсорном интерфейсе Windows 8 подсказки вызываются при удержании пальца на каком-либо объекте.
    Жест "Короткое касание для выполнения основного действия". Единственное, на что здесь нужно обратить внимание, - в интерфейсе жестов нет отдельного действия, аналогичного двойному нажатию кнопки мыши.
    Скольжение для перемещения. Основной жест, который применяется для перемещения по страницам. Стоит отметить, что в основном это действие выполняется слева направо (или справа налево), в отличие от описанного ниже вертикального скольжения.
    Скольжение для выделения. Возможно, для многих пользователей этот жест первоначально не кажется очевидным. Но как только пользователи узнают о его существовании и пробуют его выполнить, он становится интуитивно понятным и простым. Скольжение вниз (которое технически относится к "ортогональному направлению панорамирования") влечет за собой выделение. Этот жест необходим, чтобы учитывать вторичные действия, которые обычно выполняются с помощью правой кнопки мыши.
    Сжатие для изменения масштаба отображения. Существует два типа изменения масштаба отображения, с которыми вам необходимо познакомиться: оптическое и семантическое. Оптическое изменение масштаба нам уже знакомо и доступно в определенных случаях независимо от того, каким приложением Вы пользуетесь. Семантическое изменение масштаба является особенностью Windows 8, зависит от приложения и должно быть описано дизайнером или разработчиком приложения. Вы узнаете об этом позже в даннм лекции.
    Скольжение от края. Это также жест, специфичный для Windows-интерфейса. Он используется, чтобы показать меню приложения или системы. Жест встроен в Windows 8, но некоторые его параметры зависят от аппаратного обеспечения устройства.
    Вращательное движение для поворота. Этот жест относится к устройствам, в которых есть акселерометр. Он позволяет устройству менять отображение с пейзажного вида на портретный и наоборот.

    Сенсорная эргономика

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

    Прикосновения небрежны

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

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

    Соответствие позе

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

    Роль непросматриваемых областей

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

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

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

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

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

    Сенсорные шаблоны

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

    Непосредственное управление

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

    Интуитивно понятное непосредственное управление при перетаскивании имеет в своей основе три фактора.

  • Как только пользователь начинает выполнять действие, он сразу же видит, как это действие влияет на устройство, он чувствует, что управление действительно находится в его руках. В противоположность этому, если сенсорное устройство реагирует на действия пользователя с задержкой, чувство контроля над устройством исчезает и со временем пользователь может разочароваться в устройстве или программном продукте.
  • В сенсорных системах, где вам разрешено переставлять объекты на экране, существует термин "невидимый порог". Например: пользователь нажимает на объект и хочет перетащить его на пол-дюйма. В некоторых системах ему будет разрешено это сделать, а в других объект будет оставаться на месте до тех пор, пока пользователь не перетащит его по крайней мере на 2 дюйма. Точка, в которой пользователю разрешают начать перетаскивание, и называется невидимым порогом (invisiblethreshold). Windows 8 был разработан так, чтобы не использовать невидимые пороги, хотя и существуют привязки, позволяющие лучше работать с выравниванием элементов.
  • Во время выполнения действий отклик системы выполняется мгновенно. Хороший пример такого поведения системы - начальный экран Windows 8. Как только вы выберете значок и начнете его перетаскивать, окружающие объекты будут менять свое положение в соответствии с ситуацией. Мгновенная обратная связь очень важна, так как пользователь увидит возможный результат своего действия и сможет его изменить (или даже отменить), если это необходимо. Это также стимулирует пользователя исследовать систему.
  • Существует еще несколько компонентов немедленного взаимодействия, которые необходимо рассмотреть. Сенсорное взаимодействие принципиально не изменяется в зависимости от количества пальцев, которые касаются экрана. Нет разницы, скользит по экрану один палец или три. Более того, оптимизирована встроенная синхронизация жестов. Рассмотрим действие "Нажатие и удержание". Если объект выделяется сразу после того, как пользователь его коснулся, может появиться случайное выделение. Если же объект нужно слишком долго удерживать, чтобы выделить, это пугает пользователя. Время выполнения жестов в Windows 8 стремится к минимуму за счет таких встроенных взаимодействий, как скольжение для выделения и перестановка.

    Наглядная обратная связь

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

    Размеры объектов

    Windows 8 использует всю площадь контакта пальца и экрана, чтобы выбирать объекты. Однако более важно определить - какого размера должны быть целевые объекты? Первый принцип, который необходимо понимать: всегда будет присутствовать некоторый процент ошибок. Тот факт, что возникнут ситуации, когда пользователь случайно выбирает неправильный объект, можно считать просто особенностью сенсорных устройств. Преимущества сенсорных интерфейсов существенно превышают недостатки, а кроме того существует несколько методов снижения вероятности ошибок. Исследованияпоказали, что наименьший размер целевого объекта (например, кнопки) должен быть от 5 до 9 мм в ширину. Когда объект меньше 5 мм, велика вероятность, что он слишком мал, чтобы можно было его аккуратно выделить. Если же объект больше 9 мм, то существенной пользы от этого не будет (другими словами, объект становится больше, но лучше он от этого не становится!) Объект размером 7 мм примерно соответствует 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, они простые, информативные и краткие.

    Коллекция 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.
  • Сенсорный шаблон - поведение пользователя, связанное с непосредственным взаимодействием с контентом на сенсорном устройстве. Например, понятное управление, видимая обратная связь, размеры целевых объектов и семантическое увеличение.
  • Приложение. Отображение ввода и клавиатурные сокращения

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

    Отображение ввода
    Действие Сенсорный ввод Мышь Физическая клавиатура
    Выделение Скольжение по диагонали Нажатие правой кнопки мыши Пробел
    Показать меню приложения Скольжение от верхнего или нижнего края Нажатие правой кнопки мыши Winkey + Z
    Контекстное меню Касание выбранного текста, нажатие и удерживание Нажатие правой кнопки мыши Клавиша контекстного меню
    Запуск или активация Касание Нажатие левой кнопки мыши Enter
    Короткая прокрутка Перетаскивание Кнопки полосы прокрутки:кнопки со стрелками, ползунок; колесо прокрутки, движение мышью на двухмерных поверхностях Клавиши со стрелками
    Длинная прокрутка Перетаскивание с инерцией Нажать на полосу прокрутки, переместить ползунок полосы прокрутки, колесо прокрутки, прокрутка после нажатия колесика мыши (если поддерживается) Клавиши PgUp или PgDn
    Переупорядочение или перетаскивание Порог для расстояния скольжения по диагонали Нажать и перетащить Использовать вырезание и вставку
    Масштабирование Сжатие Колесо прокрутки (двумерное полотно) или ctrl+ колесо прокрутки или команда в пользовательском интерфейсе Клавиша Ctrl и, +/-
    Вращение Вращение Команда пользовательского интерфейса, или Shift + Ctrl + колесо прокрутки Клавиши Ctrl и ,/.
    Установить курсор для ввода или выбрать текст Касание или касание точки вставки Двойное и одинарное нажатие левой кнопки мыши / нажать левую кнопку и перемещать мышь Клавиши со стрелками, клавиша shift + стрелка, клавиша ctrl + стрелка
    Дополнительная информация Нажать и удерживать после временного порога Наведение после временного порога Перемещение фокуса остановка после временного порога
    Обратная связь интерфейса Визуализация прикосновений Перемещения курсора Изменения фокуса
    Перемещение фокуса Не определено Не определено Клавиши со стрелками, клавиша TAB

    Клавиатурные сокращения
    Действие Клавиатурная команда
    Назад Дополнительная кнопка Назад на специальных клавиатурах Backspace, если курсор не в текстовом поле Alt+Left
    Вперед Alt+Right
    Вверх Alt+Up
    Отмена / Выход из режима Esc
    Перемещение по элементам списка Стрелки (налево, направо, вниз, вверх)
    Перепрыгнуть через элементы управления в списке к следующей группе, если фокус не переходит автоматически Ctrl + стрелки
    Семантическое увеличение Ctrl и + / -
    Перейти к именованному элементу коллекции Начать ввод
    Перейти достаточно далеко PgUp / PgDn (должно работать в случае горизонтальной прокрутки)
    Следующая вкладка Ctrl + Tab
    Предыдущая вкладка Ctrl + Shift + Tab
    Вкладка с номером N Ctrl + N (цифра 1-9)
    Открыть панель приложения Win + Z
    Контекстное меню Кнопка контекстного меню
    Открыть более подробную информацию Enter
    Перейти / Активировать Enter
    Выделение Пробел
    Непрерывное выделение Shift + стрелки
    Закрепить элемент Ctrl + Shift + !
    Показать имена команд Не определено
    Очистить корзину Не определено
    Вызов контекстного меню Кнопка команды
    Сохранить Ctrl + S
    Поиск Ctrl + F
    Печать Ctrl + P (Приложение должно вызватьShowPrintUIAsyncAPI)
    Копирование Ctrl + C
    Вырезание Ctrl + X
    Новый элемент Ctrl + N
    Вставка Ctrl + V
    Открыть адрес Ctrl-L илиAlt-D
    Повернуть Ctrl + ,/.

    Сочетания клавиш для работы с мультимедиа
    Действие Команда на клавиатуре
    Запустить / Приостановить воспроизведение Ctrl + P (Только в приложениях, приоритет в которых отдается мультимедиа; если в приложении поддерживается функция печати, команда всегда должна означать печать)
    Следующий объект Ctrl + F (Конфликт с поиском)
    Предыдущий объект Ctrl + B
    Перемотка Ctrl + Shift + B
    Быстрое перемещение вперед Ctrl + Shift + F
    Стоп Не предусмотрено
    Вернуться к учебному плану