Пример разработки. От веб-сайта к приложению в стиле Metro

Разработка веб-сайтов является обычной задачей уже десятки лет. Благодаря Windows 8 Release Preview дизайнеры и разработчики могут использовать при построении приложений в стиле Metro привычные веб-технологии, в том числе HTML5, каскадные таблицы стилей уровня 3 (CSS3) и JavaScript. Здесь мы рассмотрим, как раскрыть потенциал веб-сайта и создать мощное приложение в стиле Metro, и покажем, как с помощью возможностей платформы Windows 8 обогатить и улучшить программу за счет дополнительных возможностей настройки и работы.

Мы хотим помочь конструкторам и разработчикам превратить свои веб-сайты в приложения в стиле Metro.

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

Веб-сайт и приложение для доставки пищевых продуктов

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

Увеличить

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

Увеличить

1. Макет и навигация
2. Команды и действия
3. Контракты: поиск, совместное использование и параметры
4. Касание
5. Масштабирование и представления
6. Уведомления

Макет и навигация

Внимание к содержимому, а не к элементам интерфейса

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

Веб-сайт

• Веб-сайт имеет обычный шаблон макета в два столбца: основное содержимое слева и остальное содержимое справа.
• Основная область внимания — образцы продуктов — занимает только треть экрана.

Приложение в стиле Metro

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

Пример: выделение содержимого на главной станице веб-сайта и на начальном экране приложения в стиле Metro.

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

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

Подробнее о навигации в приложениях в стиле Metro см. в разделе Проектирование навигации для приложений в стиле Metro.

Следуйте дизайну приложения в стиле Metro и выполняйте выравнивание по сетке

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

Пример: приложение доставки продуктов, спроектированное на основе дизайна и сетки приложения в стиле Metro.

Увеличить

Красные направляющие показывают, как каждый элемент на странице выравнивается по сетке (отметим, что единица размера равна 20 px).

а. Верхнее и нижнее поля являются согласованными по всему приложению. б. Мы используем согласованное поле, чтобы разделить различные категории продуктов, такие как “Популярные продукты”, “Поблизости” и “Азиатские”. в. Мы используем согласованное поле, чтобы разделить изображения в категории продуктов. Это поле делаем меньше, чем поле категории продуктов, чтобы передавать информацию об иерархии макета страницы. г. Заголовок группы для каждой категории продуктов также выравнивается по сетке.

Используйте прямое управление для навигации

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

Пример: переход к определенному фургону на веб-сайте и в приложении в стиле Metro.

Веб-сайт а. Пользователь на веб-сайте переходит на отдельную страницу категорий, чтобы увидеть все категории продуктов. б. Затем пользователь выбирает категорию (например, “Доставка барбекю”) и вводит категорию. в. И наконец, пользователь может выделить продукт в выбранной категории.

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

Команды и действия

Помещайте команды и действия приложения в панель приложения

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

Следуя общему подходу “приоритета контекста над элементами” в приложениях в стиле Metro, мы помещаем все контекстно-зависимые действия в панель приложения, которая является общим элементом управления в системе. Кроме того, часто используемые команды помещаются ближе к краям, чтобы их было удобнее выбирать. При использовании таких принципов проектирования поверхность приложения не перегружается, и вне зависимости от того, где находятся пользователи, они могут развернуть панель приложения сверху или снизу на экране, чтобы увидеть подходящие действия. Все приложения в стиле Metro могут использовать панель приложения для своих команд. У пользователей будет опыт работы с панелями приложения, что повысит полезность панели и сделает работу с системой более согласованной.

Пример: загрузка фотографии фургона с продуктами на веб-сайт или в приложение в стиле Metro.

Веб-сайт Команды для конкретного случая. Действия пользователя соответствуют содержимому.	Приложение в стиле Metro По умолчанию панель приложения скрыта, чтобы обеспечить пользователям иммерсивные условия работы. Пользователь может провести пальцем от нижнего или верхнего края экрана, чтобы получить доступ к контекстно-зависимым действиям. Набор действий меняется в зависимости от места в приложении, в котором находится пользователь, или от выбранного содержимого.

Контракты

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

Используйте контракт “Поиск” для централизованных операций поиска

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

При разработке средств поиска в приложении в стиле Metro мы используем контракт “Поиск”. В результате на экране не присутствует постоянный набор элементов для поиска. Чудо-кнопка “Поиск” обеспечивает доступ к функции поиска, которую пользователь может вызвать из любого места в приложении или из любого места в системе.

Пример: поиск фургона с продуктами с помощью веб-сайта и приложения в стиле Metro.

Увеличить

Веб-сайт

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

Увеличить

Увеличить

Увеличить

Приложение в стиле Metro

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

Example: searching for a food truck outside of the app ( available only in the Metro style app).

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

Увеличить

Увеличить

Используйте контракт “Общий доступ”, чтобы связаться с другими целевыми объектами и близкими вам людьми

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

Сценарии общего доступа реально облегчаются в нашем приложении в стиле Metro благодаря контракту “Общий доступ”. Системная встроенная чудо-кнопка общего доступа исключает необходимость отображения кнопок общего доступа во всем приложении. Пользователи всегда могут найти параметры общего доступа в постоянном расположении не зависимо от того, какое приложение они используют. Такое изменение упрощает проектирование и разработку, так как нет необходимости соединяться с каждой службой, которую пользователь может выбрать для использования. После интеграции нашего приложения со средствами общего доступа, оно соединяется с любым приложением для Windows, в котором реализован контракт “Общий доступ”. Нет необходимости иметь дело с изменениями API для внешних веб-служб.

Example: sharing a food truck photo.

Website: Для каждой службы общего доступа есть своя кнопка. Кнопки общего доступа распространяются по всему веб-сайту.	Metro style app: Постоянное расположение для всех параметров общего доступа в приложении в стиле Metro. Пользователи могут вызывать общий доступ из любого места в приложении. Когда пользователь выбирает службу общего доступа, целевое приложение может изменить панель ПИ и маркировку.

Example: a close look at the Share pane.

Увеличить

Metro style app:

• Любое приложение, которое реализовано как цель общего доступа, отображается в списке приложений в панели общего доступа. Например, Socialite, Tweet@Rama или Mail.
• Пользователи могут совместно использовать различные типы содержимого, которые поддерживаются приложением. Например, пользователи могут совместно использовать ссылки, фотографии или по своему желанию сохранять информацию в приложении, которое поддерживает заметки.
• Часто используемые целевые объекты общего доступа отображаются сверху, чтобы пользователи могли быстро выполнять задачи общего доступа.

Использование панели “Параметры”

На веб-сайте доставки продуктов есть набор вспомогательных функций, таких как “О нас”, “Регистрация”, “Контактная информация” и “Новости”. Такие функции размещаются в конкретных областях экрана согласно обычному шаблону веб-сайтов, чтобы пользователи могли их быстро находить. Но они занимают различные области сайта. Задачи настройки и управления не являются основными в приложении в стиле Metro. При использовании контракта “Параметры” с его постоянной точкой входа пользователям не нужно запоминать, где находятся функции управления приложением, и они могут безошибочно вызывать их при необходимости.

Example: setting options on the website and the Metro style app.

Увеличить

Website:

• Вспомогательные функции, такие как “Регистрация”, “О нас”, "Контакты" и “Новости”, находятся в разных областях сайта.

Увеличить

Увеличить

Увеличить

Увеличить

Metro style app:

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

Используйте средство выбора файлов для доступа к файлам из разных расположений

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

Example: uploading a food truck photo from the local file system.

Увеличить

Metro style app:

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

Касание

Используйте горизонтальный сдвиг для горизонтального макета

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

Example: navigating content on the website versus the Metro style app home screen.

Увеличить

Поперечное движение для выбора объектов

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

Example: selecting multiple food trucks on the home screen to pin to the Start screen.

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

Увеличить

Сжатие и растяжение для семантического масштабирования

Жесты сжатия и растяжения позволяют пользователям быстро продвигаться по длинному списку содержимого. На целевой странице приложения в стиле Metro демонстрируется ряд групп продуктов, включая “Популярные”, “Поблизости”, “Азиатские”, “барбекю” и “Завтрак”. Пользователи могут выполнить поперечный сдвиг, чтобы увидеть другое содержимое, или с помощью семантического масштабирования быстро перейти к указанному разделу. С помощью элемента управления семантического масштабирования сжатие уменьшает изображение так, чтобы одновременно показать все разделы в текущем представлении. Затем пользователи могут с помощью быстрого касания перейти к началу, к концу или к конкретному разделу в списке. Уменьшенное представление можно далее разработать так, чтобы показывать интересное содержимое в каждом разделе или метаданные раздела (такие как количество продуктов в каждой категории). Его можно использовать для навигации вместо постоянных элементов навигации на полотне приложения.

Example: jumping to a particular truck category using semantic zoom.

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

Масштабирование и представления

Проектируйте адаптивный макет для ориентации и размеров экрана

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

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

Example: food truck website and the Metro style app on different devices.

Увеличить

Website:

• Макет веб-сайта продуктов перестраивается для различных размеров экрана и форм-факторов.

Увеличить

Metro style app:

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

Используйте режим закрепления, чтобы занять пользователей

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

Дополнительные сведения о закрепленном представлении см. в статье Правила для представлений закрепления и заполнения.

Example: Metro style app home screen in both filled and snap views.

Увеличить

• Left: Приложение доставки продуктов в представлении заполнения. Пользователь может рядом открыть приложение погоды и приложение продуктов.
• Right: В закрепленном представлении пользователь выполняет сдвиг по вертикали, чтобы получить дополнительное содержимое, так как удобнее выполнять сдвиг вдоль длинной стороны. Это отличается от сдвига по горизонтали в полном представлении, которое также оптимизировано на сдвиг вдоль длинной стороны.

Уведомления

Используйте плитку для постоянных и динамических уведомлений

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

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

Увеличить

Website:

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

Увеличить

Metro style app:

• Главная плитка приложения доставки продуктов показывает, какие фургоны с продуктами находятся рядом с пользователем и как долго фургон будет находиться в этом расположении. Плитки могут обновляться, даже когда приложение доставки продуктов не выполняется. Поэтому пользователи могут получать обновления на начальном экране.
• Пользователь может закрепить свои любимые продукты (например, “Доставка чизбургеров”) в виде плитки на начальном экране, чтобы получать последние новости об этом фургоне. Это дает пользователям широкие возможности настройки соответственно их потребностям. Разработчики приложений для облегчения разработки могут выбирать шаблоны плиток из богатого набора шаблонов.

Используйте всплывающие уведомления для срочных и важных уведомлений

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

Пример: выбранный пользователем фургон с продуктами изменил расположение.

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

Увеличить

Заключение

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