Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Что нужно знать об интерфейсе Metro

0

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

Контент прежде всего

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

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

Среди стандартных элементов можно выделить панель приложения (Application Bar), которая появляется при нажатии правой кнопки мыши или при выполнении жеста,  направленного  от  нижней  границы   планшета  к  центру.  Примером реализации  такой  панели  может  служить  приложение  Internet  Explorer  10 в стиле Metro. Тут присутствуют сразу две панели приложения, обеспечивающие взаимодействие   пользователя   с   окнами   и   предоставляющие    механизм навигации, но только тогда, когда это необходимо  пользователю. В остальное время пользователь работает только с контентом страницы.

Рис. 2.3.

В случае, когда панель приложения не позволяет обеспечить все возможности, используют   стандартную   панель   настроек   системы,    в   которую   можно интегрировать  и   настройки   активного   приложения.  Ниже   показано,   как настройки Internet Explorer 10  (версия в стиле Metro) интегрируются в панель настроек системы.

Рис. 2.4.

Однако ни панель приложения, ни интеграция с настройками не помогут Вам сделать  удачный  интерфейс,  если  не  мыслить   по-новому,  отталкиваясь  от контента и его представления.

Быстрый и отзывчивый

Следующий  принцип,  на  котором  основывается  интерфейс  Metro,   —  это отзывчивость при взаимодействии пользователя с интерфейсом. Это достигается путем вставки анимации, которая запускается при взаимодействии пользователя с тем или иным элементом интерфейса (контентом). Важно то, что пользователь может взаимодействовать с приложением при помощи как мыши, так и пальца. Если   взаимодействие  осуществляется  с   помощью  мыши,   то   статичность интерфейса еще  допустима (по  крайней  мере,  курсор  мыши  движется). Но в случае взаимодействия с интерфейсом с помощью пальцев может возникать ощущение «подвисшего»  приложения для статического интерфейса. Ведь не любое взаимодействие с контентом приводит к каким-то конкретным действиям (переход на другую страницу, прокрутка и т. д.). Поэтому необходимо стараться сделать интерфейс динамичным и  отзывчивым  по  отношению к  действиям пользователя. С другой  стороны, не следует излишне перегружать анимацией свой интерфейс, необходимо стараться сохранять баланс.

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

Масштабируемый

Разрабатывая  наше  первое  приложение,  мы  потратили  много   усилий  на реализацию блока кода, реагирующего на изменение ориентации приложения и режима его работы:

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="OrientationStates">

<VisualState x:Name="FullScreenLandscape" />

<VisualState x:Name="Filled" />

<VisualState x:Name="FullScreenPortrait" />

<VisualState x:Name="Snapped">

. . . . .

</ VisualState x:Name="Snapped">

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

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

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

Ориентация на прикосновения и жесты

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

В целом, создавая приложение в стиле Metro, нужно помнить о  следующих вещах:

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

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

Сдвиг вниз

С   помощью   данного   жеста   пользователь может   «перетащить»   окно   приложения   в прикрепленный   режим  или   режим   Filled. При этом, если  приложение имеет верхнюю панель (Application Bar), сначала отобразится она, а только затем окно начнет уменьшаться и двигаться вслед за пальцами пользователя

Сдвиг влево

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

Сдвиг вправо

С     помощью     жеста     «Сдвиг      вправо» пользователь  может   переключаться  между приложениями,    запущенными    в    данный момент

Сдвиг вверх

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

·                   Определяя реакцию на жесты, ориентируйтесь на сложившийся язык жестов:

Касание

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

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

Перемещение

Если интерфейс предусматривает возможность прокрутки или   перемещения  объектов  внутри   приложения,  это осуществляется  с  помощью  жеста,  при  котором  палец перемещается по экрану в заданном направлении

Увеличение

(уменьшение)

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

Поворот

Круговое  движение  двух  пальцев  вызывает   вращение выбранного объекта

Учитывайте функции перечисленных выше жестов, и Ваши  приложения будут хорошо работать как на обычных настольных ПК, так и на планшетах.

Контракты

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

Естественно, чтобы одно приложение могло предоставлять данные, а второе — использовать, необходимо, чтобы они работали по заранее  сформированным правилам или контрактам. И такие контракты есть, Windows 8 предоставляет их в большом количестве. Вот некоторые из типов контрактов:

·                   Search  —  благодаря этому  контракту  Ваше  приложение  может  стать источником поиска данных. Поиск внутри вашего приложения появляется на панели инструментов операционной системы, но данным контрактом могут воспользоваться и другие приложения;

·                   Sharing — с помощью этого контракта Вы можете открыть доступ к данным других приложений. Выше был описан пример интеграции приложения с социальными сетями;

·                   Play To — этот контракт предназначен для передачи  медиаданных из приложения на внешние устройства;

·                   Settings — данный контракт предоставляет доступ к настройкам Вашего приложения, благодаря чему система может интегрировать все настройки в свою панель инструментов;

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

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

Рис. 2.5.

В главе 6 будет рассказано, как работать с большинством контрактов в Windows 8.

Плитки (Tiles)

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

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

Всегда готов к работе

Сегодня  многие  устройства оснащены не  только  передатчиками  WiFi,  но  и 3G-модемами и большую часть времени находятся в  сети.  Несмотря на это, при  проектировании  собственного   приложения  необходимо  учитывать  и возможность работы после разъединения. Иными словами, приложение должно работать даже при отключении от сети.

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

Независим от устройства

В современном мире пользователь может иметь более чем одно  устройство. Задача разработчика при проектировании приложений в  стиле Metro состоит в  том,  чтобы  сделать  использование  приложения  «родным»  на  любом  из устройств. Для этого Windows  8  предлагает множество механизмов, которые позволяют сохранить настройки в облаке и использовать их на любой другой машине пользователя.

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

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии