Создание сложного приложения универсальной платформы Windows (UWP)

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

Концепция

Определите назначение приложения

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

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

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

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

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

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

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

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

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

Воронка проектирования

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

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

Структура

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

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

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

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

Dynamics

Реализуйте свою концепцию

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

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

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

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

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

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

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

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

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

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

Прототип

Детализируйте приложение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возможности устройств. Задействуйте все многообразие возможностей современных устройств.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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