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

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

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


Прототипирование нужно для нескольких вещей:

 

  1. ПОСМОТРЕТЬ, КАК ЭКРАН ВЫГЛЯДИТ НА МОБИЛЬНОМ УСТРОЙСТВЕ. Для этого уже есть много всего, например, Sketch позволяет в процессе работы транслировать макет на экран. Я использую для работы Photoshop, а для вывода на экран — Xscope.
  2. ПРОВЕРИТЬ ОБЩУЮ ЛОГИКУ ПРИЛОЖЕНИЯ, УБЕДИТЬСЯ, ЧТО ВСЕ ЗАПЛАНИРОВАННЫЕ ПЕРЕХОДЫ ПОНЯТНЫ. Экраны можно нарисовать в чём угодно, например, в Photoshop или Sketch, а быстро настраивать переходы мне удобнее всего в Flinto. Он не очень много всего умеет, но для своих задач сделан очень хорошо. В нём есть экраны, в экранах можно указывать неподвижную шапку и низ, обозначать нажимаемые области и назначать переходы между экранами.
  3. ПОПРОБОВАТЬ СДЕЛАТЬ НЕОБЫЧНУЮ АНИМАЦИЮ И ПРОВЕРИТЬ, НАСКОЛЬКО ОНА ПОЛУЧАЕТСЯ ПОНЯТНОЙ И УДОБНОЙ. Недавно для этих целей появился довольно удобный Pixate, но в нём всё построено на слоях, при этом нет таких понятий, как экраны и переход между ними, — это не всегда удобно.


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

 

 

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

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

Самый большой недостаток для меня — это отсутствие в Pixate визуального отображения таймлайна, то есть всех анимаций во времени. При работе над объёмной задачей приходится держать в голове, а иногда даже выписывать все значения в секундах (keyframes), так как они задаются в текстовом виде. Но это не критично, и для большинства реальных задач этот инструмент подходит».

 

«Я использую Pixate. Об этом инструменте я узнал совсем недавно, приятель скинул ссылку в «Фейсбуке» с рекомендацией его попробовать. Буквально после 30 минут работы с ним мне удалось собрать прототип переходов между тремя экранами, скролом и несколькими взаимодействиями по тапу, и всё это с красивой анимацией, именно такой, какую я себе представлял. Весь прототип был на моём телефоне, и в любой момент я мог его «пощупать» и показать коллегам.

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

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

 

Источник: http://www.lookatme.ru/mag/how-to/tops/212013-prot...

Теги:

Статья была полезной?
+1

Подписка
на материалы
Мы присылаем интересные материалы и ничего больше

По общим вопросам, предложениям по проекту пишите нам на почту:

или звоните по будням
мы работаем с 10:00 до 19:00

Мы рады делиться с вами новостями на разных социальных площадках: