Спортивные приложения

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

Виды спортивных приложений

Существует несколько распространенных типов спортивных приложений:

	Новости, информация и видео Эти приложения предлагают последние спортивные новости в виде статей, видеозаписей и слайд-шоу. Содержимое регулярно обновляется и часто доступно на самой первой странице приложения. Откройте, например, приложение ESPN, и вы сразу окажетесь в гуще самых последних спортивных новостей. Зайдите в Магазин Windows и познакомьтесь со спортивными приложениями, ориентированными на новости: ESPN, Sports Illustrated, NASCAR, Yahoo! Sports и THE Football App.
	Избранное для болельщиков Эти приложения призваны поддерживать в болельщиках чувство гордости за конкретную спортивную команду. Они предлагают содержимое в виде новостей, фотографий и видеозаписей, посвященных команде. Прекрасный пример — приложение Chicago Blackhawks. Вот целевая страница приложения, которая напоминает нам о звездном часе в истории Blackhawks, когда команда завоевала Кубок Стенли. Seattle Sounders FC и AC Milan — еще два примера приложений Магазина Windows этого типа.
	Средства и служебные программы Этот вид приложений выполняет определенные функции, такие как сравнение статистических данных о командах, обучение пользователей определенным спортивным навыкам или предоставление пользователям возможности стать членом лиги мечты. Такие приложения часто используют более линейный шаблон навигации, который помогает пользователю выполнить определенную задачу. Обратите внимание на приложения Decision Maker, Winchester Ballistics, One Basketball или NFL Fantasy Football 2013 в Магазине Windows.

 

Заинтересуйте пользователей с помощью плиток и уведомлений

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

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

Живые плитки. Мир спорта быстро меняется: победа в игре, травма, заставившая игрока завершить спортивный сезон, или важный набор новичков в команду могут произойти в мгновение ока. Благодаря живым плиткам ваши спортивные приложения сообщат болельщикам краткое содержание последних новостей об их любимой команде, даже если сами приложения не запущены. Подумайте о размещении на живых плитках экстренных новостей, обновлений счета или напоминаний об играх. Общую информацию о живых плитках см. в разделе Живые плитки, а более подробную — в разделе Guidelines for tiles and badges.

Живая плитка — необходимый элемент взаимодействия с приложением “Спорт Bing”. На следующем снимке экрана показана живая плитка с кратким содержанием новости и фотографией на начальном экране.

Вспомогательные плитки. Спортивные болельщики всегда стараются найти удобный способ следить за любимыми игроками, командами и лигами. Помогите болельщикам мгновенно получать доступ к содержимому, которое их интересует, воспользовавшись для этого вспомогательными плитками. Если ваше спортивное приложение поддерживает вспомогательные плитки, то пользователь может закрепить ярлык для определенного содержимого в приложении прямо на начальном экране. Нужна дополнительная информация? См. Guidelines for secondary tiles или Обзор вспомогательных плиток (более подробно).

Например, в приложении ESPN болельщики команды Toronto Blue Jays могут закрепить на начальном экране страницу статистики команды. Это содержимое специально предназначено для закрепления на начальном экране, поэтому болельщикам достаточно щелкнуть значок кнопки на нижней панели приложения (как показано на следующем снимке экрана).

Щелкнув значок кнопки, пользователь подтверждает свое желание закрепить эту плитку на начальном экране.

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

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

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

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

• 1,0 = 1024 x 768 пикселей
• 1,4 = 1440 x 1080 пикселей
• 1,8 = 1920 x 1440 пикселей

Подробнее: Размеры изображений плиток и всплывающих уведомлений. Что еще нужно знать о масштабируемости? См. Guidelines for scaling to pixel density.

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

Заинтересовались всплывающими уведомлениями? См. Guidelines for toast notifications. Подробнее: Общие сведения о всплывающих уведомлениях.

На этом рисунке показано всплывающее уведомление от приложения SportsCenter. Обратите внимание, что всплывающие уведомления отображаются в правом верхнем углу экрана.

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

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

В приложении Sports Illustrated контекстное масштабирование используется для того, чтобы содержимым можно было управлять. При первом запуске приложения пользователь может сдвинуть экран вправо, чтобы просмотреть все содержимое приложения. Снимок экрана с представлением по умолчанию.

И все же для просмотра всего содержимого требуется много раз использовать сдвиг. Чтобы просмотреть все доступное содержимое, пользователь использует контекстное масштабирование. Когда пользователь изменяет масштаб с помощью жестов касания или путем прокручивания колесика мыши с одновременным удержанием клавиши "CTRL", содержимое распределяется по различным категориям с информативными заголовками и эскизами.

Теперь пользователь может быстро пробежать глазами содержимое и перейти к интересующему его разделу. См. дополнительные примеры в разделе Контекстное масштабирование и более подробное руководство в разделе Guidelines for semantic zoom.

Заинтересуйте болельщиков с помощью элемента управления Hub

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

На этом рисунке: на главном изображении приложения Chicago Blackhawks изображен самый значительный момент из истории команды. Это первое, что видят пользователи, открывая приложение.

В приложении "Спорт Bing" на главном изображении отображается краткое содержание последних новостей. Фотография притягивает внимание пользователей и сопровождается выдержкой из статьи.

Подробнее см. в разделе Руководство по элементу управления "Главный раздел".

Добейтесь максимального воздействия с помощью полноэкранного содержимого

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

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

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

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

Обеспечьте легкую навигацию с помощью панелей приложения

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

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

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

Упростите поиск

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

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

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

По мере ввода текста пользователем приложение "Спорт Bing" уточняет варианты результатов поиска.

Нажав всего восемь клавиш, пользователь получает нужную информацию.

Контракт поиска. Обеспечьте доступность спортивного содержимого в приложении через системный поиск с помощью контракта поиска. Если приложение участвует в контракте поиска, пользователи при использовании чудо-кнопки "Поиск" в любом месте системы увидят релевантные результаты поиска из вашего приложения. Не знаете, что такое контракты? Изучите краткий обзор в разделе Чудо-кнопки и контракты или более подробное описание в разделе Контракты и расширения приложений.

Поделитесь любовью к спорту

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

Если вы решите зарегистрировать приложение в качестве источника данных, пользователи в любой момент смогут поделиться содержимым из вашего приложения при помощи чудо-кнопки "Поделиться" Допустим, девушка просматривает записи эпизодов игры в приложении NFL Fantasy Football. Вчера она как раз обсуждала эту игру с подругой и решила поделиться с ней своими видеоматериалами. Она проводит пальцем от правого края экрана, чтобы отобразить чудо-кнопки, и нажимает чудо-кнопку "Поделиться".

Приложение NFL Fantasy Football предоставляет системе содержимое, которым пользователь хочет поделиться, а Windows отображает список приложений, которые установлены в системе пользователя и умеют обрабатывать такое содержимое страницы. В данном случае нужным типом содержимого можно поделиться с помощью приложений Twitter, "Почта", Evernote Touch, Flipboard и некоторых других приложений. Теперь девушка может выбрать, как именно она хочет поделиться этой информацией. Захочет ли она написать о ней твит, отправить ссылку подруге по почте или предоставить к ней доступ другому доступному приложению — ей не придется выходить из приложения NFL Fantasy Football.

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

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

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

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

Сделайте данные интерактивными

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

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

Связанные разделы

Обзоры и руководства

Знакомство с приложениями Магазина Windows

Рекомендации по взаимодействию с пользователем для приложений Магазина Windows

Чудо-кнопки и контракты

Контракты и расширения приложений

Руководство по элементу управления Hub

Живые плитки

Руководство по живым плиткам

Обзор вспомогательных плиток

Secondary tile guidelines

Общие сведения о всплывающих уведомлениях

Руководство по всплывающим уведомлениям

Руководство по выбору размера окна

Руководство по сдвигу

Контекстное масштабирование

Руководство по контекстному масштабированию

Руководство по панелям приложения

Руководство по общему доступу

Руководство по поиску

Примеры

Пример живой плитки

Пример панорамирования (HTML)

Пример панорамирования (XAML)

Пример панели приложения (HTML)

Пример панели приложения (XAML)

Пример источника данных

Пример получателя данных

Пример поиска

Пример контекстного масштабирования (C#/VB/C++)

Пример контекстного масштабирования (JavaScript)

Пример всплывающего уведомления