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

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

• Ознакомьтесь со стратегиями разработки концепции приложения для Windows Phone «Общие принципы проектирования».
• Ознакомьтесь со стандартными системными элементами управления «Руководство по созданию элементов управления для Windows Phone».

Сенсорные элементы интерфейса и текст

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

Требования к размеру

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

Комплексное тестирование, проведенное с участием пользователей, определило идеальный вид элемента интерфейса для всех сенсорных платформ Microsoft – это квадрат со стороной 9 мм.

Квадрат со стороной 9 мм или больше – идеальный элемент сенсорного пользовательского интерфейса

Минимальная высота сенсорного элемента – 7 мм, но лучше увеличить его. Например, элементы списка или пункты меню должны быть шире.

Минимальный размер сенсорного элемента – 7 мм

Информация об установленном требовании к размеру – 9 мм

Рекомендуется использовать в качестве элемента сенсорного интерфейса квадрат со стороной 9 мм и более. Это требование актуально для большинства элементов управления и задач.

Если пространство ограничено, то минимальная высота сенсорного элемента – 7 мм, при условии что его ширина гораздо больше.

Ограничение в 9 мм – это результат нескольких сотен часов тестирования с участием пользователей. Такой размер обеспечил самый низкий уровень ошибок (или процент ложных нажатий) для отдельных и групповых задач. Указанный минимальный размер сенсорного элемента (9 мм) уменьшает количество неправильных нажатий, погрешность составила 1,6 процента.

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

Минимальный визуальный размер

Минимальный визуальный размер сенсорного элемента должен составлять не менее 4,2 мм. Элементы меньшего размера не смогут привлечь внимание, когда пользователь будет изучать сенсорный интерфейс приложения. Этот размер допустим только в условиях жестких ограничений в отношении визуальных объектов. Сенсорные элементы интерфейса могут иметь размер 10–15 мм и более.

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

Оцените последствия неправильного нажатия

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

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

На следующем рисунке показаны компоненты сенсорного элемента интерфейса.

Диаграмма сенсорного элемента интерфейса

На предыдущем рисунке сенсорный элемент – это иконка размером 62 x 62. Зеленая область показывает размер сенсорного элемента. Синяя область – размер визуального элемента. В данном случае вокруг иконки установлены внутренние поля. Для разделения элементов управления используются внутренние поля или визуальные буферы.

Использование сенсорных элементов меньшего размера

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

• Форма.
• Местоположение.
• Частота использования.
• Контекст задачи.
• Визуальный дизайн (внутренние поля, интервалы).
• Последствия ошибок.

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

Интервал между элементами управления небольшого размера

Небольшие элементы управления можно привести в соответствие с сенсорными объектами при помощи интервалов. Размещайте интервалы между близко расположенными элементами управления небольшого размера. И не забывайте о возможности размещения интервалов между подобными элементами.

Давайте возьмем для примера элемент CheckBox размером 4 мм. Необходимо сделать сенсорный объект на 3–5 мм больше, чтобы размер всего элемента приблизился в рекомендуемому – 7–9 мм. Если разработчик хочет минимизировать возможные ошибки, ему нужно увеличить интервал между флажком и смежным сенсорным объектом размером 9 мм (это примерно 90 пикселей для устройства с разрешением 262 точек на дюйм; измеряйте изображения на экране устройства при помощи штангенциркуля, важен размер, а не количество пикселей).

Исключения

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

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

Виртуальная клавиатура

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

Слишком много смежных сенсорных объектов

Минимальный размер текста

Размер и размещение типографических элементов имеют решающее значение для компоновки экрана. Одной из особенностей визуального стиля Windows Phone является отсутствие украшающих элементов. Это означает, что текст и типографические элементы приобретают в этой платформе большее значение, чем на любой другой. Минимальный размер шрифта для Windows Phone – 15 пунктов.

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

Создание пользовательских элементов управления

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

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

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

Кнопки

Для формирования согласованного опыта в процессе работы с платформой Windows Phone следует соблюдать общие принципы размещения кнопок. Это позволит создать цельную и простую структуру, навигация по которой не будет вызывать затруднений.

Важно также понимать, какие возможности бесплатно предоставляет аппаратное и программное обеспечение. Во-первых, каждое устройство с Windows Phone имеет три аппаратные кнопки – «Назад», «Рабочий стол» и «Поиск». Понимание того, как эти кнопки используются в рамках всей системы, помогает избежать возможных проблем в пользовательском интерфейсе и потоке операций приложения.

Кнопки «Домой» и стек переходов назад

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

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

Основная кнопка «Назад»

У всех приложений интерактивные потоки уникальны и различаются сложностью. Тем не менее, сделайте всё возможное, чтобы архитектура приложения имела как можно меньшую «глубину». Используйте списки и сводные элементы, чтобы пользователь мог вернуться к начальному экрану всего за несколько шагов, а оттуда – в запущенные ранее приложения. Если у вас есть сомнения, попытайтесь выполнить имитацию стандартных элементов и структуры навигации, реализованных в платформе, чтобы не запутать пользователя.

Кнопки «Назад» и «Закрыть»

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

Плавающие кнопки

Плавающие кнопки усложняют навигацию в приложениях для Windows Phone и приводят пользователей в замешательство. Если вам нужно разместить на странице приложения расширенный функционал, лучше использовать панель приложения. Для получения дополнительной информации о панели приложения см. «Основная графика: визуальные индикаторы и уведомления для Windows Phone».

Плавающие кнопки

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

Библиотека стандартных элементов управления Windows Phone помогает придерживаться согласованного подхода к применению иконок и кнопок в пользовательском интерфейсе вашего приложения. Шаблоны, представленные в «Ресурсах среды проектирования Windows Phone», помогают согласовать интерфейс приложения с принципами, принятыми в рамках всей платформы.

Использование инструментов поиска

Функции поиска реализованы на уровне аппаратного и программного обеспечения любого устройства Windows Phone. Разработчики не могут изменить или переопределить функции аппаратной кнопки «Поиск», которая запускает поисковую систему Bing и помогает пользователю найти контент в любом месте устройства.

В некоторых системных приложениях, например Outlook, аппаратная кнопка «Поиск» запускает внутреннюю поисковую систему приложения.

Разработчики не могут использовать поисковую систему в своем приложении, но у них есть возможность имитировать нажатие кнопки «Поиск» при помощи класса SearchTask.

Стандартное представление настроек

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

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

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

Изменения, внесенные в настройках приложения, должны быть применены немедленно. Это означает, что нет необходимости выводить на экран подтверждение («Готово», «OK» и т. д.). В некоторых ситуациях, даже если изменение произошло сразу, пользователь может не получить обратную связь до завершения текущего или возникновения следующего события. Для получения дополнительной информации об организации обратной связи см. «Анимация, движение и вывод данных для Windows Phone».

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

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

Кроме того, необходимо помнить следующее:

• Параметры, занимающие более одного экрана, должны использовать перекрывающие половинные экраны, чтобы избежать потери контекста при отображении клавиатуры SIP.
• Если после выполнения задачи нельзя вернуться к исходному состоянию, всегда предоставляйте пользователю возможность отмены этого действия. В качестве примера приведем ввод текста.
• Расположите кнопку «Отмена» для действий, которые перезаписывают или удаляют данные либо являются необратимыми.
• При использовании дополнительных экранов с кнопками «Подтвердить» и «Отменить» нажатие на эти кнопки должно запускать выполнение соответствующего действия, после чего пользователь должен вернуться на главный экран настроек.
• Предоставьте возможность запрета использования данных в приложениях, работающих по сети.

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

Настройки приложения

<Имя CPL / Название приложения>

Размещение рекламы в приложениях

Ниже представлены базовые условия создания качественных рекламных модулей для Windows Phone. Тем не менее, именно дизайнеры отвечают за соответствие своих рекламных объявлений требованиям стиля Metro, представленным в разделе «Общие принципы проектирования».

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

Рекомендуемые размеры рекламных блоков

Рекомендуемый размер для объекта AdControl – 480 x 80 пикселей (устанавливается по умолчанию). Это рекомендуемый размер рекламных блоков для Windows Phone.

Даже если созданные вами в Microsoft pubCenter рекламные блоки имеют размер 300 x 50 пикселей, для AdControl лучше установить размер 480 x 80. Рекламные блоки меньшего размера будут размещены в центре этого пространства и обработаны компонентом AdControl с учетом параметра «Размер рекламного блока», установленного в pubCenter. Например, блок размером 300 х 50 пикселей сохранит этот размер при отображении в центре рекламного блока AdControl. Эта конфигурация показана на следующем рисунке.

Расположенный по центру рекламный блок

Размещение рекламных блоков

Разместите объект AdControl вверху или внизу экрана. Рекомендуемая позиция – в верхней или нижней части конкретного представления.

Полноразмерный объект AdControl

Средство просмотра с инструментом прокрутки

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

Рекламные блоки и элемент управления Panorama

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

Рекламные блоки в элементе управления Panorama

Рекламные блоки и элемент управления Pivot

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

Для того чтобы вывести на различных страницах элемента Pivot разные объявления, создайте на каждой странице новый экземпляр объекта AdControl, как показано на рисунке справа.

Рекламные блоки в элементе управления Pivot

Цвета

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