Создание сложного приложения Universal Windows Platform (UWP)

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

Замечание

Рекомендуется разработчикам, создающим новые проекты, рассмотреть возможность использования Windows App SDK и WinUI вместо UWP. Дополнительные сведения см. в разделе Migrate из UWP на Windows App SDK.

Понятие

Фокус приложения

При планировании приложения Universal Windows Platform (UWP) вы должны определить не только то, что будет делать ваше приложение и для кого оно предназначено, но и то, чем ваше приложение будет выделяться. В основе каждого большого приложения является сильное понятие, которое обеспечивает твердый фундамент.

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

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

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

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

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

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

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

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

Воронка дизайна

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

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

Структура

Организация упрощает все

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

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

Дополнительные сведения см. в разделе "Основы проектирования навигации".

Динамика

Выполнение концепции

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

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

Распространенные методы, помогающие с этим шагом:

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

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

• Создайте поездку с общими сведениями.
• Пригласите друзей присоединиться к поездке.
• Присоединитесь к поездке друга.
• См. маршруты, рекомендуемые другими путешественниками.
• Добавляйте места назначения и активности в поездки.
• Редактируйте и комментируйте места и мероприятия, которые добавили друзья.
• Поделитесь маршрутами с друзьями и семьями для использования.

Визуальный элемент

Говорить без слов

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

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

Прототип

Уточнение шедевра

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

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

Определите, какие функции следует включить

Когда вы знаете, чего хотят ваши пользователи и как вы можете помочь им в достижении этого, вы можете взглянуть на определенные инструменты в вашем наборе инструментов. Изучите Universal Windows Platform (UWP) и свяжите функции с потребностями вашего приложения. Обязательно следуйте рекомендациям по пользовательскому интерфейсу для каждой функции.

Распространенные методы:

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

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

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

Дополнительные сведения см. в разделе "Контракты и расширения приложений".

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

Touch first Windows предоставляет уникальный и отличительный интерфейс сенсорного ввода, который делает больше, чем просто эмулировать функции мыши.

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

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

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

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

Персонализация

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

Возможности устройств Убедитесь, что ваше приложение использует все возможности современных устройств.

• Жесты близкого взаимодействия Позвольте пользователям подключать устройства к другим пользователям, которые находятся в непосредственной близости, физически касаясь устройств (многопользовательские игры). Узнайте больше о приближении и касании.
• Камеры и внешние устройства хранения Подключите пользователей к встроенным или подключаемым камерам для чата и конференц-связи, записи видеоблогов, создания фотографий для профиля, съемки окружающего мира или использования в других задачах, в которых ваше приложение отлично. Дополнительные сведения о доступе к содержимому в съемных хранилищах.
• Акселерометры и другие датчики Устройства оснащены рядом датчиков в настоящее время. Ваше приложение может затемнять или освещать дисплей на основе внешнего освещения, перестраивать пользовательский интерфейс, если пользователь поворачивает дисплей, или реагировать на любое физическое движение. Дополнительные сведения о датчиках.
• Геолокация Используйте данные о геолокации из стандартных веб-ресурсов или геолокационных датчиков, чтобы помочь пользователям ориентироваться, находить своё местоположение на карте или получать уведомления о людях, мероприятиях и местах поблизости. Дополнительные сведения о географическом размещении.

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

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

Решите, как монетизировать приложение

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

Проектирование пользовательского интерфейса для приложения

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

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

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

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

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

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

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

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

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

1. Пользователь открывает приложение и видит список поездок, которые она создала.
2. Пользовательница коснулась поездки, которой она хочет поделиться.
3. Сведения о поездке отображаются на экране.
4. Пользователь обращается к некоторому пользовательскому интерфейсу, чтобы инициировать общий доступ.
5. Пользователь выбирает или вводит адрес электронной почты или имя друга, с которым она хочет поделиться поездкой.
6. Пользователь обращается к некоторому пользовательскому интерфейсу, чтобы завершить общий доступ.
7. Ваше приложение обновляет сведения о поездке со списком людей, с которыми она поделилась своей поездкой.

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

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

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

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

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

• Если вы не можете использовать содержимое. Поместите команды на одну из этих поверхностей пользовательского интерфейса, если вы не можете использовать содержимое:

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

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

Дополнительные сведения о проектировании различных размеров экрана см. в разделе "Размеры экрана" и точки останова для адаптивного дизайна.

Сделать хорошее первое впечатление

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

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

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

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

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

Проверка дизайна

Прежде чем приступить к разработке приложения, необходимо проверить дизайн или прототип в соответствии с рекомендациями, впечатлениями пользователей и требованиями, чтобы избежать необходимости переработать его позже. Каждая функция содержит набор рекомендаций по пользовательскому интерфейсу, которые помогут вам отполировать приложение, и набор требований Магазина, которые необходимо выполнить для публикации приложения в Microsoft Store. Вы можете использовать комплект сертификации Windows App для проверки технического соответствия требованиям Магазина. Вы также можете использовать средства производительности в Microsoft Visual Studio, чтобы убедиться, что вы предоставляете пользователям отличный опыт в каждом сценарии.

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