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

Посмотреть видео

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

Использование стиля оформления Майкрософт

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

Представление содержимого

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

Четкая и открытая структура

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

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

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

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

• Придерживайтесь силуэта Windows, чтобы создать ощущение узнаваемости и уверенности.
• Начните с шаблонов проектов Visual Studio "Сетка" или "Разделенное приложение", чтобы получить структуру.
  

Взаимодействие с содержимым

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

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

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

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

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

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

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

Скорость и динамичность

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

Целенаправленная анимация  

Движение — ключевая часть языка дизайна Майкрософт. Хорошо спроектированная анимация оживляет приложение и дарит ощущение искусного и совершенного взаимодействия.

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

Проектирование для сенсорных панелей  

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

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

Встроенные элементы управления  

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

• Выбор с помощью жеста прокрутки (скольжение пальцем) встроен в элемент управления ListView. Эту функцию можно расширить контекстным масштабированием, чтобы дать людям возможность быстро и динамично перемещаться по длинному списку. См. руководство по элементу управления ListView.
• Элемент управления FlipView позволяет пользователям использовать скольжение для перемещения между элементами и снабжен встроенной анимацией перехода.
• Такие элементы управления, как кнопка, выключатель, флажок, переключатель, бегунок и ползунок обеспечивают визуальную реакцию на прикосновение, фиксируют действие только после отпускания и позволяют пользователю обратить и отменить действие посредством скольжения. См. руководство по элементам управления: кнопкам, выключателям, флажкам, переключателям, средствам выбора даты и времени, бегункам и ползункам.

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

Эффективное сжатие и масштабирование

Создайте эффективное взаимодействие для каждого форм-фактора и представления, доступного вашим пользователям.

Масштабирование для нескольких форм-факторов   Ваше приложение может использоваться на сотнях миллионов компьютеров, работающих на базе Windows 8. У этих компьютеров будут экраны с различными размерами и разрешением от < планшетов с диагональю 10" до > мониторов с диагональю 27".

• Используйте экранное пространство наилучшим образом с помощью поддержки динамичной структуры, встроенной в элементы управления платформы. Например, ListView автоматически адаптирует содержимое к имеющемуся пространству.
• Платформа обеспечивает автоматическое масштабирование в зависимости от размера и разрешения экрана устройства. Предоставьте три размера ресурсов или используйте масштабируемую векторную графику (SVG), чтобы ваше приложение всегда выглядело четким и совершенным.
  
• Помните, что включение параметра Увеличить все элементы на экране в специальных возможностях снижает разрешение экрана, так что вам необходимо убедиться в том, что пользовательский интерфейс остается видимым и пригодным для использования.
  
• Воспользуйтесь имитатором в Microsoft Visual Studio, чтобы увидеть, как будет выглядеть ваше приложение при различных форм-факторах.

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

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

Использование правильных контрактов

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

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

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

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

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

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

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

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

Превосходное качество плитки

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

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

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

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

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

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

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

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

Перемещение в облако

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

• Используйте учетные записи Майкрософт и хранилище пользователя в облаке, чтобы хранить и перемещать параметры, состояние и некоторое количество содержимого пользователя.
• Примеры параметров приложений, которые стоит перемещать:
  • выбранные города и единицы измерения температуры (Цельсий/Фаренгейт) в приложениях прогноза погоды;
  • RSS-каналы, на которые подписан пользователь, в новостных приложениях;
  • любимые команды в спортивном приложении
• Примеры состояний приложений, которые стоит перемещать:
  • последняя прочтенная страница в приложении для чтения;
  • последняя контрольная точка или ход, сделанный в игре;
  • последняя воспроизведенная дорожка в музыкальном приложении

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

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

Использование принципов стиля оформления Майкрософт

Эти принципы помогут вам в ходе проектирования.

Мастерство

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

Лаконичность

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

Скорость и динамичность

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

Цифровая среда

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

Единство

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