Тестирование продукта перед его запуском на рынок крайне важно в любой сфере. Говоря о мобильных приложениях, нельзя не согласиться, что тестирование является одним из основных этапов разработки приложения, так как при его работе крайне важны условия и мобильное устройство, на котором оно работает.
Интерактивное прототипирование — это проверенный временем способ быстро протестировать ваш продукт на мобильном устройстве. Итак, давайте рассмотрим поподробнее прототипирование, а также то, как вы сможете использовать этот мощный инструмент в своей работе.
Итак, что такое прототип?
Прежде всего, давайте определим, чем является и чем не является прототип. Прототип – это искусственно созданный объект, ориентированный на тестирование. Его основной целью является развитие и обеспечение функционального взаимодействия. Это не значит, что он должен взаимодействовать с реальными данными, хотя иногда это возможно. Лучший вариант тестируемого прототипа обладает только теми функциям и возможностями, которые вам необходимы. Главное быстро его создать, протестировать, и сделать выводы. Это дешевый вариант, который экономит ваше время в процессе работы над основным проектом.
В этой статье я покажу вам, как я использовал Axure RP 6,5 для создания прототипа приложения для iPhone для чикагского офиса компании Interaction Design Association (IxDA). В своей работе я подошел к вопросу так, как будто я создаю реальную модель.
Если вы еще не знакомы с Axure RP, то это специальный инструмент для быстрого создания прототипа, который работает на Mac и Windows. Его можно использовать для создания интерактивных прототипов как для сайтов, разработанных под стационарные компьютеры, так и для их мобильных аналогов. Основной особенностью использования Axure RP является то, что написание кода не требуется. Axure стоить $ 589 за пользовательскую лицензию для двух компьютеров. Я использую Axure на MacBook Pro на работе и на iMac дома. Существует и несколько альтернатив Axure RP:
- iRise Studio
- Balsamiq (Может быть использован для создания интерактивных каркасов)
- Microsoft SketchFlow (Если вы находитесь в среде NET)
Если вы новичок в Axure, начните с изучения тех вещей, которые вы не должны делать с помощью этого инструмента. Например, создание ненужных текстовых виджетов или безымянных прототипов. Советую вам прочитать следующее в How to Avoid the Top 5 Mistakes When Starting to Use Axure RP “.
Как начать
Первое, что вам нужно сделать, это создать новый файл Axure.
Настройка проекта
Для мобильного сайта или приложения, просто создайте страницу прототипа с длиной и шириной аналогичными размеру экрана смартфона. Если вы ориентируетесь на iPhone, вам нужно создать страницу с параметрами 320 × 480 пикселей (или 1024 × 768, если вы занимаетесь проектированием приложения для IPad). Поскольку большинство страниц для мобильных устройств превышают высоту экрана гаджета, обратите особое внимание на ширину. Такая ширина будет работать как на Retina, так и на других дисплеях IOS. Так как Axure является инструментом WYSIWYG дизайна, вы не можете рассчитать размер страницы в процентах в зависимости от ширины экрана. Как результат ваш прототип не всегда будет расширяться, чтобы заполнить ширину экрана, когда вы переключаете устройство с книжного на альбомный формат. Помните об этом.
Для телефонов Android стандартной шириной является 480 пикселей. Хотя я часто просто создавал одну 320-пиксельную версию для тестирования мобильных сайтов на обеих платформах. Этот размер корректно отображается на большинстве современных телефонов Android, в чем я убедился, пока тестировал свои продукты (а также на некоторых моделях BlackBerry и других мобильных устройств). Поскольку ширина пикселей проекта Axure зафиксирована, тестирование на устройствах Android контролируется легче всего из-за максимально доступного разрешения экрана. Но помните, что это тестирование прототипа, так что не думайте о его несовершенствах. Если вам необходимо провести тестирование на устройстве пользователя (возможно, потому, что вы должны иметь доступ к родному приложению, например как родная адресная книга), то в процессе разработки своего продукта, проводите тестирование прототипа на нескольких различных версиях платформы, например Android. Используйте специальное программное обеспечение для вашего сайта, чтобы выяснить, какие версии Android и какие модели мобильных телефонов являются самыми популярными среди ваших пользователей.
Создание прототипа родного приложения для Android или iPhone, вы можете начать, добавив существующие библиотеки виджетов для Axure. Перечень платных и бесплатных библиотек виджетов есть на сайте Axure (см. «Ресурсы» ниже). Если у вас есть доступ к ресурсам по визуальному конструированию и вам нужен более высокий уровень точности, вы можете использовать другие виджеты. Если вы создаете прототип с низким уровнем точности, то формы и объекты, построенные в Axure, это все что вам нужно.
Я обычно использую прототипы с высоким уровнем точности потому, что мне важно видеть взаимодействие пользователей с различными функциями моего прототипа, иконками, кнопками и другими средствами управления. Тестирование прототипов с низким уровнем точности поможет вам узнать, понимают ли пользователи идею вашего приложения. Однако используя прототип такого рода, вы не узнаете, как пользователи реагируют на ту или иную иконку вашего продукта.
Начав свой проект, мне нужно было создать основную базу для прототипа
Я начал свой проект с одной страницы в панели «Sitemap». Я поместил прямоугольник, размером 320 × 460 пикселей на странице, чтобы создать холст для работы.
Создание многократно используемых компонентов.
Первое, что я сделал, это было создание заголовка страницы с помощью «мастера», который представляет собой многократно используемый компонент. Этот компонент может быть добавлен к любой странице в Axure. Использование «мастера» заметно экономит ваше время, так как любые изменения, внесенные в один компонент, сразу же появляются в каждом его экземпляре в прототипе. Я создал «мастер» размером 300 × 50, который создает заголовки страниц приложения, кроме главной страницы
Теперь у проекта есть одна страница и один «мастер».
Использование динамических панелей для нескольких экранов и их состояний
Следующим шагом нужно поставить динамические панели, которые называются «ContentPanel» на холст в верхний левый угол, (X = 0, Y = 0). Динамическая панель представляет собой виджет, который может содержать несколько «состояний», как их называет Axure. Эти «состояния» представляют собой разные взгляды на одну позицию на экране. Взгляды основаны на действиях пользователя и значения переменной. Размер ContentPanel составляет 320 × 415 пикселей и содержит в себе контент прототипа, которые находится выше панели вкладок IOS. Динамические панели прокручиваются, так что ваш контент может быть выше 415 пикселей, и будет появляться из-под панели вкладок, когда пользователь будет прокручивать страницу. Чтобы полоса прокрутки не появлялась, я выбираю опцию «Never Show Scroll», в разделе «Edit Dynamical Panel» контекстного меню.
Теперь проект имеет одну динамическую панель, которая была создана с одним «состоянием» по умолчанию. Можно добавить и другие, также их можно переименовать. Полосы прокрутки были установлены таким образом, чтобы пользователь их никогда не увидел. Позже мы используем функцию «Pin to Browser» чтобы установить панели вкладок в нижней части экрана iPhone.
Затем я создал вторую динамическая панель под названием «TabBarPanel», ее размер составил 320 × 45 пикселей. Ее я установил под ContentPanel. Эта панель была использована для хранения изображений панели вкладок. Она увеличила общую высоту страницы до 460 пикселей. Остается еще 20 пикселей для меню iPhone, которое отображается в верхней части экрана мобильного устройства.
Панель вкладок изображений PNG помещена в «состояние» Tab Bar в TabBarPanel. Это «состояние» всегда отображается.
Мне пришлось создать специальный контейнер для изображений панели вкладок - динамическую панель, так чтобы я мог бы привязать ее к окну браузера. При расположении TabBarPanel на главном экране, выберите из контекстного меню Order → Bring to Front. Это поможет вам убедиться, что TabBarPanel не охвачена другими контентом.
Панель вкладок будет прикреплена к нижней части экрана iPhone, контент будет появляться из-под этой панели при прокрутке страницы.
Диалог «Pin to Browser» позволяет вам указать позиции.
Всегда используйте имена объектов
Пояснение о наименовании объектов: Axure позволяет называть все объекты, которые вы включаете в прототип, и я всегда стараюсь это делать. Чем сложнее становится ваш прототип, и чем больше людей вносят в него свой вклад, тем сложнее найти необходимые объекты. Я называю свои объекты, используя свой вариант Венгерской Нотации. Так что название кнопки будет иметь форму «btnButtonPurpose», а название ввода текста «txtTextInputPurpose». Вы можете создать свои собственные варианты после «BTN» и «TXT».
Добавление интерактивности в динамические панели
Теперь нам нужно создать несколько состояний для ContentPanel и приступить к работе над фактическим экраном приложения. Ваша панель уже имеет одно «состояние», потому что оно создается автоматически и называется «State1». Вы можете переименовать его, дважды щелкнув по его имени. Я предпочитаю переименовывать «состояния» для того, чтобы сделать прототип более управляемым. Чтобы создать дополнительные «состояния», просто выберите «Добавить состояние» из контекста существующего меню «состояний».
Вы можете добавить неограниченное количество «состояний» в динамическую панель.
При первом открытии нового «с …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров