Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android
Code

Создание проекта, вайрфрейма и прототипа для Android приложения: часть 2

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Ola Matona (you can also view the original English article)

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

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

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

К концу этой статьи у вас будет цифровой прототип, который вы сможете установить и протестировать на вашем Android смартфоне или планшете.

Поехали, начнем с создания вайрфреймов!

Что такое вайрфреймы?

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

Чтобы узнать больше о вайрфреймах, посмотрите следующие статьи:

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

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

Итак, достаточно уже хвалебной оды вайрфреймам! Как же его создать?

Есть несколько вариантов:

  • Набросок карандашом на бумаге.
An example of a paper wireframe
Вайрфрейм экрана Забронировать Отель на бумаге.
  • Цифровой вайрфрейм с использованием профессиональных программ редактирования изображений, к примеру, Adobe Photoshop, или специальных программ для создания вайрфремов, к примеру, Pidoco, Axure, InDesign, Sketch, Omnigraffle, или Balsamiq Mockups

An example of a digital wireframe
Вайрфрейм Домашнего экрана в Balsamiq.

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

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

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

Создание первого вайрфрейма

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

Чтобы освежить вашу память, приведу описание этого экрана снова:

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

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

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

  • Выбор города
  • Бронирование транспорта
  • Бронирование отеля

Эти экраны включают в себя 2 разных типа навигации: вперед и назад.

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

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

Эти навигационные элементы будут в виде TextView (прим. переводчика: компонент TextView — один из элементов класса View в Android Studio, предназначен для отображения текста без возможности редактирования его пользователем), которые я организую в виде списка (ну да, два пункта это не совсем список, но если бы я продолжила работу над этим проектом, то в списке обязательно появилось бы больше пунктов). По умолчанию, каждый TextView будет напоминать пользователям, что они должны выполнить этот шаг, например "Вам еще надо забронировать отель!" Когда пользователь будет нажимать на TextView он будет переходить на экран Бронирование транспорта или Бронирование отеля, чтобы они могли выполнить соответствующий шаг.

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

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

A first draft paper wireframe of the checklist screen

И наконец, я добавлю TextView для заголовка, который пользователь выбрал для своей поездки.

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

A series of different wireframes for the checklist screen

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

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

Лично мне очень нравится Balsamiq Mockups!

The checklist screen as a digital wireframe created using Baksmiq Mockups

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

И повторите этот процесс для всех остальных экранов.

Прототипирование

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

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

Итак, как же сделать прототип?

Самый простой способ это использовать Android Studio, который является и мощным инструментом прототипирования благодаря встроенному в  IDE (интегрированную среду разработки) графическому редактору. Далее в статье я буду использовать многие из новых возможностей, которые были представлены в Android Studio 2.2, поэтому если вы хотите делать все со мной, то убедитесь, что у вас установлена версия Android Studio 2.2 Preview 1 или выше

Запустите Android Studio и создайте новый проект. Я буду использовать шаблон  ‘Empty Activity’, чтобы упростить процесс. Так как вы будете тестировать ваш прототип на вашем Android устройстве, убедитесь, что minimum SDK (минимальная версия Android, на которой можно запустить приложение) примерно соответствует вашему смартфону или планшету.

 Как только проект создан, откройте файл activity_main.xml и удалите оттуда этот надоедливый ‘Hello World’ TextView, который находится там по умолчанию. Убедитесь, что выбрана вкладка ‘Design’, чтобы вы могли видеть палитру и рабочее пространство  Android Studio

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

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

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

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

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

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

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

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

Select Android Studios Autoconnect button

Теперь перетащите TextView на то место, где он должен быть. Я хочу, чтобы мой заголовок был размещен по центру, поэтому я перетащу TextView в центр рабочей области и оставлю его там. Как только вы "отпустите" TextView, Android Studio автоматически создаст все ограничения, которые нужны, чтобы TextView находился там, где вы его поместили.

Обратите внимание на ограничения, которые растягивают наш компонент в противоположные стороны, такие ограничения выглядят как ломаные линии, что отличает этот тип ограничений от стандартных.

Drag the TextView widget into the correct position and Android Studio will create constraints automatically

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

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

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

Далее откройте файл strings.xml и создайте два сообщения по умолчанию.

  • Вам надо забронировать отель!
  • Вам надо заказать транспорт!

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

Далее перетащите два ImageView из палитры на рабочий стол. Когда вы отпустите ImageView, Anroid Studio предложит вам выбрать соответствующее изображение из раздела drawable. Мы начнем с прототипирования экрана по умолчанию, поэтому выберите красный крестик для обоих ImageView.

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

Вторым способом, с помощью которого Android Studio создает автоматические ограничения, является машина логического вывода (программа, которая выполняет логический вывод из предварительно построенной базы фактов и правил в соответствии с законами формальной логики). Подвиньте все ваши TextView и ImageView в как можно более идеальное положение и нажмите кнопку Infer constraints (см. где находится курсор на скриншоте ниже).

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

Select the Infer Constraints button

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

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

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

Как только все ресурсы готовы, вы можете сделать предварительное тестирование, пробуя разные варианты ресурсов и изображений (drawables) и смотря, что получается в редакторе Android Studio.

Это конечно не тестирование на настоящем Andoid устройстве или AVD (виртуально устройство Android), зато гораздо быстрее, что идеально для определения явных проблем вашего дизайна.

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

Если надо что-то немного подвинуть (я знаю, что мне надо), то кликните на элемент и подвигайте его на рабочем пространстве. Как только вы удовлетворены результатом, нажмите еще раз кнопку Infer constraints, чтобы Android Studio пересоздал ограничения.

Вот мой законченный прототип.

The finished digital prototype

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

Тестирование цифрового прототипа

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

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

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

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

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

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

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

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

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

Как правило, если создание прототипа привело к новым идеям, то самое время их исследовать!  

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

Заключение 

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

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

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.