Приложения для чтения новостей

В данном разделе описывается создание качественных новостных приложений для Windows 8.1.

Описание

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

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

Этот документ посвящен новым функциям Windows 8.1, которые важны для новостных приложений, а именно:  

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

Представление содержимого и навигация в новостных приложениях

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

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

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

Иерархическая модель

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

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

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

Центральная страница приложения

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

Категории новостей

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

Последние новости

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

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

Закладки и сохранение на текущем этапе

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

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

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

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

См. дополнительные примеры работы контекстного масштабирования в новостном приложении.

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

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

Представление статьи в приложении

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

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

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

• на планшетном компьютере,
• на полноразмерном ноутбуке,
• на настольном компьютере.

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

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

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

Навигация по статьям

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

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

Система команд

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

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

Закладки

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

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

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

Выделение текста

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

Контракты

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

Контракт отправки данных

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

Общий доступ из новостного приложения

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

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

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

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

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

Общий доступ к новостному приложению

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

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

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

Комментарии и интеграция с другими социальными приложениями

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

Типографское оформление в новостных приложениях

Используйте в новостных приложениях типографскую таблицу размеров и толщины шрифтов для создания визуального ряда, который упрощает поиск и просмотр большого объема информации. Хотя шрифт Segoe UI из таблицы шрифтов подходит для новостей, в некоторых случаях лучше использовать Calibri (рекомендуемый шрифт для документов приложения Магазина Windows) или Cambria (рекомендуемый шрифт для "традиционных документов"). Шрифт Georgia часто используется для новостных веб-узлов, поэтому пользователи тоже давно к нему привыкли.

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

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

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

Актуальность содержимого

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

Время последнего обновления содержимого

Отображение информации о "последнем обновлении" повышает доверие пользователей к новостям. Такая информация должна отображаться непосредственно на полотне, но не быть навязчивой. Применяйте для нее информационный стиль третьего уровня (9 точек) из таблицы шрифтов. См. пример:

Время публикации статьи

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

Обновление содержимого

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

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

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

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

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

Связь и динамичность

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

Плитки и уведомления

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

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

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

Экспорт

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

Изменение размеров окон

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

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

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

Экран-заставка

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

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

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

Проектирование управления для приложений Магазина Windows

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

Проектирование навигации для приложений Магазина Windows

Проектирование взаимодействия с сенсорным экраном

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