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

Applies to Windows and Windows Phone

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

Главная страница приложения “Спорт Bing”

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

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

Главная страница приложения ESPN

Новости, информация и видео

Эти приложения предлагают последние спортивные новости в виде статей, видеозаписей и слайд-шоу. Содержимое регулярно обновляется и часто доступно на самой первой странице приложения. Откройте, например, приложение ESPN, и вы сразу окажетесь в гуще самых последних спортивных новостей. Зайдите в Магазин Windows и познакомьтесь со спортивными приложениями, ориентированными на новости: ESPN, Sports Illustrated, NASCAR, Yahoo! Sports и THE Football App.

Главная страница приложения Chicago Blackhawks

Избранное для болельщиков

Эти приложения призваны поддерживать в болельщиках чувство гордости за конкретную спортивную команду. Они предлагают содержимое в виде новостей, фотографий и видеозаписей, посвященных команде. Прекрасный пример — приложение Chicago Blackhawks. Вот целевая страница приложения, которая напоминает нам о звездном часе в истории Blackhawks, когда команда завоевала Кубок Стенли. Seattle Sounders FC и AC Milan — еще два примера приложений Магазина Windows этого типа.

Сравнительная таблица результатов команд в приложении NFL Final Fantasy

Средства и служебные программы

Этот вид приложений выполняет определенные функции, такие как сравнение статистических данных о командах, обучение пользователей определенным спортивным навыкам или предоставление пользователям возможности стать членом лиги мечты. Такие приложения часто используют более линейный шаблон навигации, который помогает пользователю выполнить определенную задачу. Обратите внимание на приложения 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

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

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

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

Спортивное приложение: плитки всех возможных размеров на начальном экране

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

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

Маленькая, средняя и широкая плитка для приложения SofaScore

Приложения Магазина 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

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

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

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

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

Представление по умолчанию содержимого приложения Sports Illustrated

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

Приложение Sports Illustrated после того, как пользователь применил изменение масштаба с помощью контекстного масштабирования

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

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

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

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

Снимок экрана: большое изображение, которое видят пользователи при запуске приложения Chicago Blackhawks

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

Главная страница приложения “Спорт Bing”

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

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

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

Целевая страница приложения с крупным изображением футболиста перед ударом по мячу

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

Целевая страница спортивного приложения с наложенными линиями сетки

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

Снимок экрана с широкоэкранного монитора: содержимое приложения Sounder FC

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

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

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

Верхняя панель приложения THE Football App

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

Верхняя панель приложения ESPN с результатами текущей игры и элементами управления навигации

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

Снимок экрана: нижняя панель приложения в приложении Sports Illustrated

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

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

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

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

Ввод для поиска на целевой странице приложения “Спорт Bing”

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

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

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

Снимок экрана с профилем пользователя из приложения “Спорт Bing”

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

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

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

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

Чудо-кнопки в приложении NFL Fantasy Football.

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

Снимок экрана: всплывающий элемент отправки содержимого в приложении NFL Fantasy Football

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

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

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

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

Временная шкала приложения FX, показывающая записи в Twitter о телевизионном шоу Archer

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

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

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

Интерактивное представление данных в приложении NFL Fantasy Football 2013

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

Обзоры и руководства
Знакомство с приложениями Магазина Windows
Рекомендации по взаимодействию с пользователем для приложений Магазина Windows
Чудо-кнопки и контракты
Контракты и расширения приложений
Руководство по элементу управления Hub
Живые плитки
Руководство по живым плиткам
Обзор вспомогательных плиток
Secondary tile guidelines
Общие сведения о всплывающих уведомлениях
Руководство по всплывающим уведомлениям
Руководство по выбору размера окна
Руководство по сдвигу
Контекстное масштабирование
Руководство по контекстному масштабированию
Руководство по панелям приложения
Руководство по общему доступу
Руководство по поиску
Примеры
Пример живой плитки
Пример панорамирования (HTML)
Пример панорамирования (XAML)
Пример панели приложения (HTML)
Пример панели приложения (XAML)
Пример источника данных
Пример получателя данных
Пример поиска
Пример контекстного масштабирования (C#/VB/C++)
Пример контекстного масштабирования (JavaScript)
Пример всплывающего уведомления

 

 

Показ:
© 2015 Microsoft