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



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

Ольга Быстрова

дизайнер

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

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

  Посмотреть, как экран выглядит на мобильном устройстве. Для этого уже есть много всего, например, Sketch позволяет в процессе работы транслировать макет на экран. Я использую для работы Photoshop, а для вывода на экран — Xscope.

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

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

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

Виктор Козырев

дизайнер Badoo

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

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

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

Дмитрий Самаренков

арт-директор
Look At Media

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

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

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

фотографии via Alex Kirhenstein, Ilya Tsuprun


commnetКомментарии

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


Похожие новости
Новый клип XXXTENTACION - Look At Me! (18+) 16 сент. 2017 г.

Новый клип XXXTENTACION - Look At Me! (18+)

Рэпер XXXTENTACION выпустил новый клип на песню Look At Me! Мрачное видео режиссера JMP имеет политический подтекст.Видео начинается со сцены погрома, который темнокожие подростки устраивают в школе. Они избивают белого учителя и разносят класс. Потом...

дальше...

Look At Media запустил англоязычное издание 18 февр. 2015 г.

Look At Media запустил англоязычное издание

Издательский дом Look At Media запустил городское англоязычное издание Hopes&Fears. Редакция сайта работает в Нью-Йорке. Аудитория Hopes&Fears — жители больших городов.В сферу интересов издания входят культура и субкультуры, город, отношения...

дальше...

Look At Media запустил проект по анализу трендов De:coding 27 нояб. 2014 г.

Look At Media запустил проект по анализу трендов De:coding

Издательский дом Look At Media запустил аналитический проект для бизнеса De:Coding, который будет выпускать отчёты о современных потребительских трендах. В команде проекта — социологи, специалисты по семиотике, психологи, социальные исследователи...

дальше...

Нарисуй персонажа для стикеров и получи работу в офисе Viber в Тель-Авиве 20 марта 2015 г.

Нарисуй персонажа для стикеров и получи работу в офисе Viber в Тель-Авиве

 Мессенджер Viber совместно с сайтом Talenthouse, который сводит дизайнеров-фрилансеров с крупными брендами, начинает всемирный конкурс Sticky Fingers на разработку нового персонажа стикеров. У участников из России тоже есть...

дальше...

Как животные помогают понять характер человека 02 февр. 2015 г.

Как животные помогают понять характер человека

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

дальше...

5 вкладок: уроки для дизайнеров, Нед Фландерс и другое 06 марта 2015 г.

5 вкладок: уроки для дизайнеров, Нед Фландерс и другое

Каждый день Look At Me просит интересного человека поделиться пятью ссылками, на которые стоит кликнуть. Нынешний выпуск — редакционный, и составил его арт-директор сайта Никита Трепцов. Фотографы из лондонской Studio 3 Сайт лондонской Studio...

дальше...

#факты | Кто придумал иконку контекстного меню для графических интерфейсов? 02 апр. 2014 г.

#факты | Кто придумал иконку контекстного меню для графических интерфейсов?

Иконка вызова контекстного меню (или как ее называют на Западе — «иконка гамбургера») — это классика. Даже если вы не знаете, как эта иконка называется, три черные полоски, как и курсор вашей мыши, появились в вашей жизни начиная с первого дня, как только...

дальше...

Подать иск против дизайнеров предложили акиматовцы и проректор - преподаватель консерватории 01 нояб. 2014 г.

Подать иск против дизайнеров предложили акиматовцы и проректор - преподаватель консерватории

О том, почему она подписала массовый иск против агентства Havas Worldwide Kazakhstan, какие претензии имеет к авторам рекламного плаката с целующимися Курмангазы и Пушкиным и что станет с 34 миллионами тенге, отсуженными консерваторией у рекламщиков...

дальше...

Последние новости

Новости на сегодня 18 июля 2018 г.