Живые плитки и уведомления

Презентацию к данной лекции можно скачать здесь.

Цель лекции

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

Что такое плитка и зачем она нужна?

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

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

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

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

Не каждое приложение можно разместить на начальном экране, поэтому нужно учитывать следующее:

плитки являются "парадным подъездом" для запуска приложения. Качественная плитка на начальном экране имеет уникальный дизайн, отличный от дизайна других плиток приложения;

при желании пользователи могут разместить плитку понравившегося приложения на начальном экране;

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

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

Плитки: Плитки являются изображением ваших приложений на начальном экране.

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

На примере ниже представлена плитка Музыкального приложения (Music), на которой отображается название проигрываемой в настоящий момент песни, картинка альбома и другая информация.

Плиткам приданы возможности цикличной анимации и быстрого просмотра.

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

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

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

а) Заголовок "выглядывает" из нижней части плитки; б) Заголовок раскрывается с анимацией

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

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

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

Что делает плитку привлекательной?

Актуальные данные и соответствующие возможности являются залогом поддержания интереса пользователя к вашему приложению.

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

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

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

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

Эта частота обновлений зависит от настроек приложения.

Например, приложения СМИ, такие, как новости или погода, могут обновляться каждые 30 минут, приложение Календарь - каждый час или с началом нового дела, приложение Ежедневник обновляется раз в день.

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

Если Ваше приложение обновляется реже раза в неделю, то имейте в виду: устаревшая информация пользователю не интересна.

Что не следует делать с плитками?

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

Многие утилиты относятся к такой категории (например, калькулятор).

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

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

Плитки, подталкивающие пользователя к действиям. Плитки с такими надписями, как "Жми сюда!" или "Запустить", скорее всего вызовут раздражение у пользователя.

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

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

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

Шаблоны плиток

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

Фото-шаблоны для фотографий и СМИ-приложений.

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

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

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

Шаблоны с датой (календарь и другие приложения, использующие дату).

Руководство по брендингу плиток

Так как плитка - это "парадный подъезд" вашего приложения, вам следует использовать изображение, выводимое по умолчанию на плитке, чтобы отразить бренд вашего приложения, обычно - как фон для логотипа приложения. Разработайте квадратный и прямоугольный варианты плитки.

Плитки должны работать и в квадратном, и в прямоугольном формате

Не забудьте оценить внешний вид ваших плиток в квадратном и прямоугольном виде.

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

Если название вашего приложения не умещается на одной линии на плитке, используйте аббревиатуру. Например, "Word" в MicrosoftWord 2010. Если длина названия превышает максимальное количество пикселей, его прерывают многоточием. Максимально допустимая длина названия составляет примерно 18 английских символов, но эта величина зависит от вхождения определенных букв.

Название приложения можно передать с помощью фотографии или логотипа

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

Не включайте название приложения в плитку, если оно уже упомянуто в логотипе.

Здесь изображено неверное использование брендинга в качестве названия приложения, повторяющегося в логотипе

Настройка размеров плитки

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

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

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

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

Правильное использование индикаторов событий

Следует внимательно относиться к использованию индикаторов событий.

Давайте рассмотрим их на примере приложения мгновенного обмена сообщениями.

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

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

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

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

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

Циклические уведомления

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

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

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

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

Хороший пример: новостное приложение может отправлять пять статей в день или одну статью и несколько дополняющих её изображений.

Хороший пример с тегом - биржевое приложение отправляет 3 уведомления за час, каждое с информацией об определенной акции (msft, amzn, nflx).

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

Уведомления для быстрого просмотра

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

Быстрый просмотр может быть использован для предпросмотра содержания голосовой почты

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

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

Неподходящее использование шаблонов быстрого просмотра

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

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

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

Вспомогательные плитки

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

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

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

новые сообщения в электронном ящике;

новые мгновенные сообщения;

новые текстовые сообщения;

напоминания приложения Календарь и другие виды напоминаний;

системные операции, например, копирование/перенос фотографий;

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

Клик по всплывающему уведомлению позволит быстро перейти в соответствующее приложение

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

Неподходящее использование всплывающих уведомлений

Старайтесь не использовать слова "Нажмите, чтобы…" - это подразумевает неясность действий.

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

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

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

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

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

Задание

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

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

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

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

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

Примеры могут быть следующими:

изображение фургона-ресторана и ежедневные предложения;

изображение случайно выбранного грузовика и комментарии к нему;

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

Итоги

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

Самостоятельная работа

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

Вопросы

Что такое индикатор события плитки и где он расположен?

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

Что такое всплывающее уведомление и чем но отличается от уведомлений, отображаемых на плитках?

Дополнительные источники

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

Руководство и контрольный список для плиток и индикаторов событий

http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465403.aspx

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

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

http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465391.aspx

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

Ответы

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

Циклическое обновление в применении к WinRT-приложениям представляет собой анимацию нескольких отдельных уведомлений внутри плитки. Содержание уведомлений цикла может быть связанными и несвязанными друг с другом. (Несвязанное содержание, например, может содержать пять разных новостей.Связанный между собой контент может описывать одно событие или одно изображение.) Быстрый просмотр - это анимированиесвязанного контента в плитке. Главное различие между ними заключается в необходимости тематической группировки информации в быстром просмотре.

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