Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS иJavaScript

Пользовательский интерфейс приложений для
Windows 8, созданных с использованием HTML,
CSS и JavaScript

2-е издание, исправленное

Брокшмидт К.

Национальный Открытый Университет “ИНТУИТ”
2016

2

Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и
JavaScript/ К. Брокшмидт - М.: Национальный Открытый Университет “ИНТУИТ”, 2016

Учебный курс посвящен особенностям проектирования и разработки пользовательского интерфейса
приложений для Windows 8 с использованием технологий HTML, CSS и JavaScript.
Курс знакомит читателя с особенностями работы с командными элементами пользовательского
интерфейса, с подходами к обработке ввода данных пользователем. Он подробно исследует
целенаправленный подход к анимации, соответствующей стилю Windows. Кроме того, читатель
узнает о реализации мультимедийных возможностей приложений для Магазина Windows и о работе с
пользовательскими данными и данными приложений для организации единой рабочей среды,
ориентированной на работу пользователя с несколькими устройствами.

(c) ООО “ИНТУИТ.РУ”, 2013-2016
(c) Брокшмидт К., 2013-2016

3

Командный пользовательский интерфейс

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

Файлы к данной лекции Вы можете скачать здесь скачать:
http://old.intuit.ru/department/se/uiwin8htmljs/1/1.zip.

Одной из первых реакций у новых пользователей, не знакомых с Windows 8 и с
приложениями для Магазина Windows, может быть следующая: “Где же меню? А
лента? Как я могу указать приложению, чтобы оно сделало что-то с элементами,
которые я выбрал из списка?”. Это – вполне естественная реакция, которая возникает
до тех пор, пока пользователи не привыкнут к расположению командных элементов
управления, что дает еще одно значение, хотя и мирское, изречению: “Блаженны не
видевшие и уверовавшие”.

Следуя принципу дизайна “прежде всего содержимое, и лишь затем внешнее
оформление”, элементы пользовательского интерфейса, которые существуют
исключительно для вызова некоторых действий, и, таким образом, не содержат
значимого содержимого, попадают в категорию “внешнего оформления”. Как таковые,
они обычно скрыты до тех пор, пока не понадобятся, как команды системного уровня
наподобие панели чудо-кнопок. Пользователь показывает желание воспользоваться
подобными командами посредством соответствующего жеста. Это – скольжение от
верхнего или нижнего краев экрана, щелчок правой кнопки мыши, или комбинация
клавиш Win+Z, которые вызывают командные панели приложения, расположенные
сверху или снизу. Скольжение от левого края экрана, щелчок мышью по верхнему
левому углу экрана, или сочетание клавиш Win+Tab позволяет переключаться между
приложениями. И скольжение от правого края экрана, щелчок мышью по верхнему
правому или нижнему правому углам экрана, или сочетание клавиш Win+C открывает
панель чудо-кнопок. (Сочетания клавиш Win+Q, Win+H, Win+i активируют,
соответственно, чудо кнопки Поиск, Общий доступ и Параметры напрямую).
Приложение реагирует на различные чудо-кнопки посредством реализации отдельных
контрактов, как мы увидим в следующих лекциях.

Команды приложения, в свою очередь, обычно реализуются посредством панели
приложения – элемента управления WinJS.UI.AppBar. Во многом, панель приложения –
это эквивалент меню и ленты в приложениях для Магазина Windows, так как вы
можете создать в них любые виды пользовательского интерфейса и даже отобразить
элементы меню. Меню, которые поддерживает элемент управления WinJS.UI.Menu,
могут, так же, всплывать из заданного места на основном экране приложения, как,
например, меню прикрепленное к заголовку.

Панель приложения и меню – это конкретные экземпляры более общего элемента
управления WinJS.UI.Flyout, который используется напрямую для вывода сообщений,
или для действий, которые пользователь может отменить или проигнорировать.
Подобные всплывающие элементы можно закрыть щелчком мыши или
прикосновением за их пределами. (Это – что-то вроде нажатия на кнопку “Отмена”).

4

Для показа важных сообщений, которые требуют какого-либо действий, то есть – тех,
где пользователь должен выбрать из некоторого набора параметров, приложения могут
использовать WinJS.UI.MessageDialog. Диалоговые окна – это всем известная
концепция из мира настольных приложений, она уже долгое время используется для
сбора самой разной информации и настройки параметров приложения. В дизайне
приложений для Магазина Windows, однако, диалоговые окна используются лишь для
задавания вопросов и получения простых ответов, или для того, чтобы сообщить
пользователю некие важные сведения. Настройка параметров приложений реализуется
посредством чудо-кнопки Параметры, как мы увидим в лекции 2.

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

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

Где размещать командные элементы управления

Размещение команд имеет важное значение в дизайне приложений. В отличие от
руководства, или, скорее, их отсутствия – для командных элементов управления
настольных приложений, что приводило к беспорядку, центр разработчиков Windows
предлагает два довольно обширных материала на эту тему: “Проектирование
командного интерфейса для приложений Магазина Windows” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh761499 http://msdn.microsoft.com/library/windows/apps/hh761499) и “Создание макета
пользовательского интерфейса” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh465304.aspx). Эти материалы
обязательны для прочтения для дизайнеров, работающих над приложением, так как
они описывают различные виды командного интерфейса и рассказывают о том, как
получить одобрение у профессионалов в области дизайна для Windows 8. Это так же
отличные материалы для разработчиков, так как они могут дать вам некоторое
понимание того, чего вы можете ожидать от ваших дизайнеров. Рассмотрим эти
руководства, в качестве вводного тура по различным возможностям:

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

5

Всегда, везде, где это возможно, используйте панель чудо-кнопок (Charms) для
реализации обших команд приложения. Таким образом, вместо поддержки вашего
собственного элемента управления для осуществления поиска, используйте чудокнопку Поиск (за исключением тех случаев, когда приложение имеет гораздо
более богатый интерфейс поиска, использует, помимо строки поискового запроса,
дополнительные параметры). Вместо поддержки отдельных команд для
предоставления общего доступа к содержимому различным целевым
приложениям, таким, как почтовые клиенты, приложения, поддерживающие
списки контактов, приложения социальных сетей, и так далее, используйте чудокнопку Общий доступ. Вместо собственной команды Печать, положитесь на
возможности чудо-кнопки Устройства. И вместо того, чтобы создавать внутри
навигационной иерархии приложения страницы с его настройками, справочной
информацией, заявлениями о конфиденциальности, информацией о программе,
страницы с информацией об учетных записях и страницы с данными о
разрешениях, которые имеет приложение, упростите себе жизнь,
воспользовавшись чудо-кнопкой Параметры! (Взгляните, так же, на врезку:
“Пользовательские данные для входа и лицензионные соглашения”). Примеры
показаны на изображении ниже, где так же показано, что многие команды
приложения могут использовать панель чудо-кнопок, что означает меньший
беспорядок в остальной части их пользовательского интерфейса. Как приложение
может реагировать на события панели чудо-кнопок, мы рассмотрим в следующих
лекциях.

Команды, которые не могут быть размещены на панели чудо-кнопок, и в которых
нет необходимости на полотне приложения, размещаются на панели приложения
(app bar), как показано ниже для приложения Travel. Это – близкая аналогия
традиционным меню:

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

6

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

Контекстные меню (context menu) могут предоставлять специальные команды для
содержимого или выделения. Например, выделенный текст обычно предоставляет
контекстное меню для работы с буфером обмена, как показано ниже для
приложения Mail.

Если в ответ на действие пользователя вам нужно отобразить запрос на
подтверждение или вопрос (включая сбор информации), воспользуйтесь
всплывающим элементом управления (flyout). Посмотрите материал “Руководство
и контрольный список для всплывающих элементов” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh465341). Щелчок мышью или
прикосновение за пределами элемента управления (или нажатие клавиши ESC на
клавиатуре) равносильно закрытию элемента управления. Вот пример из
приложения SkyDrive:

Для событий, блокирующих интерфейс, которые не относятся к командам
пользователя, но воздействуют на все приложение, используйте диалоговые окна
сообщений (message dialogs). Диалоговое окно блокирует остальное приложение
до тех пор, пока пользователь не уделит ему внимание! Хороший пример их
использования – разрыв сетевого соединения, когда пользователю нужно
сообщить, что некоторые возможности будут недоступны до тех пор, пока
соединение не восстановится. Пользователь подтверждает свое согласие на
использование возможностей, таких, как определение местоположения, как
показано ниже для приложения Maps, это – еще одна ситуация, в которой можно
увидеть диалоговые окна. Обратите внимание на то, что диалоговое окно

7

используется лишь тогда, когда приложение находится на переднем плане.
Всплывающие уведомления (toast notifications), как мы увидим в лекции 2 курса
“Программная логика приложений для Windows 8, созданных с использованием
HTML, CSS и JavaScript и их взаимодействие с системой”, применимы лишь для
приложений, находящихся в фоновом режиме.

И, наконец, другие сообщения об ошибках, которые не требуют реакции пользователя,
могут быть отображены либо на полотне приложения, либо посредством всплывающих
элементов. Смотрите материал “Создание макета пользовательского интерфейса:
Ошибки” (ссылка: http://msdn.microsoft.com/library/windows/apps/hh465304.aspx#errors)
для того, чтобы узнать дальнейшие подробности. Позже мы рассмотрим некоторые
примеры.

Если говорить о нижней панели приложения, то важно организовать команды в
наборы, так как это упрощает их реализацию, как мы увидим в следущем разделе. Для
того, чтобы получить полную информацию по этому вопросу, я рекомендую
обратиться к материалам “Руководство по панелям приложения” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh465302.aspx) и “Проектирование
командного интерфейса для приложений Магазина Windows” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh761499.aspx). Они содержат
множество подробностей о размещении, разделении и группировке. Вот выдержки из
этих руководств:

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

8

Что касается порядка размещения команд, поместите постоянно присутствующие
команды на правой стороне панели приложения, а наиболее часто используемые
контекстно-зависимые команды – на левой. После этого размещайте
дополнительные команды, двигаясь к центру панели. Эта рекомендация получена
благодаря анализу эргономичности устройств: пальцы и большие пальцы – даже
на крупных руках баскетболистов – способны достигать лишь определенного
пространства на экране без необходимости перемещения рук. Наиболее часто
используемые команды лучше всего располагать ближе к тем местам, где
находятся большие пальцы человека, который держит устройство, как показано на
рисунке ниже (из материала “Проектирование взаимодействия с сенсорным
экраном” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh465415.aspx#touch_posture)). Эти
места легко достижими (особенно теми из нас, кто не может охватить большой
мяч одной рукой) и, таким образом, учет этого повышает комфортность
использования приложения.

Панель приложения доступна всегда, в любых состояниях просмотра, в том числе – в
прикрепленном. Рекомендована в прикрепленном режиме (и иногда в портретном)
ограничивать число команд до 10, чтобы они уместились в один или два ряда.

Знайте, так же, что панель приложения не ограничена круглыми командными
кнопками. Вы можете создать все, что захотите, обычно именно так реализуются
верхние панели приложений. Работая с любым собственным макетом, убедитесь, что
ваши элементы имеют размер, подходящий для сенсорного взаимодействия. Больше об
этом можно найти в материалах “Руководство по панелям приложения” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh465302.aspx) и “Проектирование
взаимодействия с сенсорным экраном” (ссылка:
http://msdn.microsoft.com/library/windows/apps/hh465415.aspx) в разделе “Целевые
объекты сенсорного ввода Windows 8”. Там можно увидеть и небольшую картинку с
изображением вышеупомянутых пальцев баскетболиста.

Врезка: Пользовательские данные для входа и лицензионные
соглашения

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

9

затем вызывают вспомогательные страницы с необходимыми элементами управления
для каждой функции. Конечно, иногда вход в систему или лицензионные соглашения
требуют специальной обработки. Например, если ваше приложение требует ввода
данных пользователя или принятия лицензионного соглашения при старте, подобные
элементы управления можно отобразить на первой странице приложения или
предоставить их посредством интерфейса средства выбора учетных даных (Credential
Picker UI) (подробнее об этом – в лекции 3 курса “Программная логика приложений
для Windows 8, созданных с использованием HTML, CSS и JavaScript и их
взаимодействие с системой”). Если пользователь вводит учетные данные и/или
принимает лицензионное соглашение, приложение может продолжить работу. В
противном случае приложению следует показать страницу, которая указывает на то,
что учетные данные или принятие соглашения необходимы для того, чтобы
пользователь мог с его помощью сделать что-нибудь более интересное, чем вывод
сообщений об ошибках.

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

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

Панель приложения

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

Совет. Для того чтобы предотвратить появление панели приложения, вы можете
использовать один из двух подходов. Первый заключается в том, чтобы полностью
отключить появление панели приложения в ответ на любой из жестов, для этого нужно
установить свойство winControl.disabled элемента панели в значение true. Второй
применим тогда, когда вы, например, не хотите, чтобы панель приложения появлялась
при щелчке правой кнопкой мыши по конкретному элементу (например, по полотну).
Для этого можно прослушивать событие contextmenu (то есть – щелчок правой кнопки

10