Проектирование наиболее эффективного приложения

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

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

Ключевые аспекты проектирования прототипа

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

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

Для быстрого создания приближенного к реальности прототипа удобно использовать Blend для Visual Studio. С помощью Blend вы сможете создавать эскизы макетов и интерактивные прототипы приложений. Интерактивные прототипы полезны для тех областей приложения, которым для обеспечения понятного взаимодействия нужен настраиваемый пользовательский интерфейс, анимация или переход. Такая интерактивность, которая часто определяет успешность приложения, позволяет пользователям "прочувствовать" его во время тестирования удобства использования. Кроме того, Blend позволяет создавать реальные, рабочие проекты непосредственно из прототипов. Подробнее о Blend см. на главной странице Microsoft Expression.

Для создания эскизов можно также воспользоваться раскадровкой PowerPoint, которая входит в состав Microsoft Visual Studio 2012. С помощью этого инструмента вы можете создать раскадровку из коллекции предварительно определенных фигур раскадровки и собрать данные о существующих пользовательских интерфейсах. Подробнее см. в разделе о раскадровке истории пользователя или требования с помощью PowerPoint.

Создание эскизов

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

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

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

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

    Начальные экраны

    Начальные экраны

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

    Малое количество состояний

    Малое количество состояний

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

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

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

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

    Общая задача поиска

    Общая задача поиска

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

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

    Главная схема

    Главная схема

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

    После завершения работы над рисунками начинайте создавать прототип с помощью Blend для Visual Studio.

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

Определение ключевых областей для создания прототипа или макета

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

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

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

Определите заранее достаточное число итераций.

Определение уровня детализации прототипа

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

  • Уровень визуальной детализации

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

    Примечание  При создании макетов пользовательских элементов управления в Blend для Visual Studio будет генерироваться XAML-разметка, которая поможет вам при разработке рабочих элементов управления.

    Макеты визуальной детализации должны включать:

    1. Стили и темы
    2. Экран-заставку
    3. Плитку приложения
  • Уровень функциональной детализации

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

  • Уровень детализации содержимого

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

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

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

  • Уровень детализации фирменной символики

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

Единообразие при создании настраиваемых элементов

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

Вы можете настраивать следующие элементы: темы, шаблоны, элементы управления и стили.

При настройке визуальных элементов в Windows Phone придерживайтесь следующих рекомендаций.

  • Практичность важнее, чем правдоподобие.

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

    Приложение радио для FM-диапазона

    Приложение радио для FM-диапазона

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

  • Практичность важнее, чем правдоподобие.

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

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

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

Тестирования удобства использования приложения

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

Проверочные вопросы

  • Позволяет ли дизайн приложения понять, как оно задействует оборудование Windows Phone?
  • Удобны ли для выполнения задачи приложения?
  • Не предоставляет ли приложение слишком много информации и не содержит ли слишком много функций? Возможно, оно предоставляет слишком мало информации?
  • Позволяет ли приложение пользователю выполнять важные для него задачи или операции?
  • Выполняется ли перенос с другой мобильной платформы? Пользователи Windows Phone привыкли к меньшему количеству касаний, четкому виду, большому шрифту и использованию контраста и цветов.
  • Задействуете ли вы обе оси прокрутки (оси X и Y) и оба вида ориентации экрана (книжную и альбомную)? В зависимости от назначения приложения пользователям может потребоваться оба способа.
  • Легко ли работать с элементами управления касанием пальца? Разборчивый ли текст на элементах управления?
  • Предоставляет ли пользовательский интерфейс обратную связь при касании и ходе выполнения?
  • Предполагаете ли вы использование аппаратной кнопки "Назад"?
  • Экономно ли вы используете встроенное веб-содержимое (и элемент управления WebView)?
  • Исчезают ли строка состояния, элементы управления, панель приложения, когда приложение отображает содержимое в полноэкранном режиме?
  • Используете ли вы правильно и эффективно элементы управления Pivot и Главный раздел?

Тестирование настраиваемых элементов пользовательского интерфейса

После создания макетов настраиваемых элементов пользовательского интерфейса обязательно протестируйте их самостоятельно. Если вы работаете в Blend для Visual Studio, вы можете создавать макеты поведения страницы или элемента управления, а также их визуальных элементов (используя расширения функциональности).

Обсуждение с пользователями

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

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

Начинайте взаимодействовать с клиентами как можно раньше

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

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

Создание конечных макетов

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

  1. Определите, соответствует ли прототип тем стандартам и нуждам, которые вы определили во время сбора идей.
  2. В ходе оценки определите, соответствуют ли макеты требуемым уровням детализации. Вспомните, какой уровень детализации вы выбрали для прототипа после прочтения раздела "Ключевые аспекты проектирования прототипа".
  3. Конечные макеты должны включать соответствующие уровни детализации для:
    • Визуальных элементов — шрифт и содержимое представлены четко, разборчиво и кратко? Привлекательно ли ваше приложение?
    • Функциональные элементы — понятны ли задачи, касающиеся цели и работы? Понятно ли, что делает приложение, как им пользоваться?
    • Элементы управления — все ли пользовательские элементы управления функционируют в соответствии с единообразным внутренним языком дизайна? Удобны ли размеры элементов и расстояние между ними для сенсорного управления?
    • Фирменная символика — точно ли вы воспроизвели цвета и логотипы? Все ли рисунки отвечают требованиям авторского права?
  4. Убедитесь, что вы сохранили взаимодействия, спланированные во время создания прототипа. Проследите, чтобы наиболее востребованные или важные задачи и операции выглядели и выполнялись так, как вы задумали.
  5. Когда разработка закончена и можно начать производство, вы можете начать подготовку вашего приложения к проверке на удовлетворение требованиям отправки.

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

Ресурсы для проектирования для Windows Phone

 

 

Показ:
© 2015 Microsoft