оздание выделяющихся приложений в стиле Metro

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

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

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

Итак, начнем!

Пример. Ужин с друзьями

Допустим, мы создаем приложение для поиска ресторанов. Рассмотрим процесс проектирования такого приложения.

1. Определение отличительных черт

Начнем с того, что сформулируем суть отличия нашего приложения от приложений конкурентов в категории "Рестораны и питание":

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

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

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

Учитывая все это, назовем наше приложение Ужин с друзьями.

2. Подбор правильных сценариев

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

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

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

• Поиск ресторанов, которые хотел бы посетить я сам:
• Просмотр ресторанов на карте или в списке
• Поиск по названию или ключевому слову
• Фильтр/сортировка по категории, ценовому диапазону и рейтингу
• Добавление ресторанов в список предпочтений и удаление из него

3. Создание целевой страницы приложения

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

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

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

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

С учетом этого начнем с составления макета центра приложения с помощью шаблона проекта Visual Studio Grid (XAML, HTML). На его целевой странице (groupedItemsPage) имеется несколько разделов, каждый из которых представлен избранными пунктами:

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

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

Далее следуют списки предпочтений друзей, затем список предпочтений пользователя — именно в таком порядке, и вот почему:

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

4. Проектирование разделов

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

В этом приложении первый раздел — "Ближайший вечер" — всецело посвящен подбору ресторана с учетом мнения друзей на ближайший вечер. Поскольку это требует взаимодействия пользователя с друзьями, лучшей формой будет обсуждение:

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

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

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

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

5. Создание макетов остальных частей приложения

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

Мы знаем, что не все разделы центра приложения были исчерпывающими, поэтому нам нужны страницы, полностью посвященные отображению всего контента для каждого раздела. Для этого в шаблоне Visual Studio Grid разработан компонент groupDetailPage. Мы адаптируем макет элемента управления ListView на соответствующей странице под тип контента.

Списки предпочтений друзей:

Список моих предпочтений:

Все рестораны:

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

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

6. Навигация по пользовательскому интерфейсу

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

Подводя итоги

Четкое представление об отличительных преимуществах своего приложения в конкретной категории является первым и самым важным шагом в создании не просто эффективного, а выделяющегося на фоне остальных приложения в стиле Metro. Как мы убедились, определение отличительных черт приложения и концентрация внимания на них повлияют на фундаментальные решения, принимаемые вами в отношении структуры контента, макета целевой и других страниц, а также навигации. Мы будем опираться на это в последующих статьях, из которых узнаем, как использовать платформу Windows 8 для создания лучшего в своей категории приложения. Чтобы ознакомиться с некоторыми ресурсами, упомянутыми в этой статье, просмотрите контент на странице http://design.windows.com.

-- Бонни Ло (Bonny Lau), старший руководитель программы, Windows