Спонсор: Microsoft
Опубликован: 27.12.2012 | Доступ: свободный | Студентов: 429 / 35 | Длительность: 09:19:00
Специальности: Программист
Лекция 2:

Основы дизайна с учетом опыта взаимодействия

< Лекция 1 || Лекция 2: 12 || Лекция 3 >

Шаг четвертый: Согласование функций приложения с высказыванием и сценариями

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

Выбор функциональных особенностей приложения

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

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

Шаг пятый: Черновой набросок информационной архитектуры приложения

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

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

В нашем примере первый черновой набросок может выглядеть так:

Исходный черновой набросок информационной архитектуры

увеличить изображение
Исходный черновой набросок информационной архитектуры

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

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

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

Как только вы поймете, что набросок готов, можно потратить немного времени на создание более детальной модели, например, в программе AdobeIllustrator.

Шаг шестой: Создание набросков экранов приложения

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

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

Примеры набросков

увеличить изображение
Примеры набросков

Шаг седьмой: Создание макета дизайна

Создание макета дизайна поможет вам лучше понять взаимодействия пользователя с приложением.

Если вы не являетесь опытным дизайнером, то лучше создавать модели одним из следующих методов.

Бумажные макеты

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

Интерактивные макеты

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

Макет экрана из программы SketchFlow

увеличить изображение
Макет экрана из программы SketchFlow

Также программа предоставляет схему экранов вашего приложения и разнообразные отчеты. Скачать ее можно по ссылке: http://expression.microsoft.com - вместе с приложением ExpressionBlend.

Шаг восьмой: Создание документации к экранам приложения

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

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

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

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

увеличить изображение
Документация одного экрана

Итоги

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

Самостоятельная работа

Изучите по крайней мере 2 приложения для Windows на предмет того, как легко и понятно вы перемещаетесь по ним, поставьте оценки по шкале от 1 до 10. Откройте обозреватель и таким же образом изучите 2 сайта, также поставьте оценки.

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

Вопросы

  1. Почему важно начинать создание приложения с набросков карандашом на бумаге?
  2. Почему важно сформулировать высказывание о ключевых преимуществах приложения?
  3. Что такое информационная архитектура приложения?

Ответы

  1. При создании набросков очень важно все повторять несколько раз, до того момента, когда вы поймете, что пришли к идеалу, иначе ваш интерфейс будет неудобен для пользователя.Удобнее всего выполнять подобную работу, пользуясь традиционными инструментами - бумагой и карандашом.
  2. Зная, в чем ключевые преимущества вашего приложения, вы можете сконцентрироваться на тех функциях, которые сделают его лучшим. Также это выделяет ваше приложение среди других.
  3. Дизайнеры используют информационную архитектуру приложения, чтобы определить сценарии, которым пользователь может следовать, работая с приложением.
< Лекция 1 || Лекция 2: 12 || Лекция 3 >
Максим Домшенко
Максим Домшенко
Россия, Курск, Региональный Финансово-Экономический Институт
Андрей Бобылев
Андрей Бобылев
Россия, Москва