Главное Свежее Вакансии Образование
Выбор редакции:
6 893 10 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как мы разрабатываем прототипы

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

Что такое прототип?

Прототип — это быстрое визуальное представление будущего продукта. Прототип позволяет увидеть проектируемую систему на самом раннем этапе.b_5835a5fe930bc.jpg

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

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

Прототип плюс ТЗ

Проектирование должно вестись гибко, не должно быть жестких, неизменных технических заданий. Во время прототипирования появляется понимание, как все должно работать. Написание ТЗ и прототипирование — процесс взаимодополняющий.

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

Исследование

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

b_5835a5fec8ad7.jpg

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

b_5835a5ff0033a.jpg

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

Описываются бизнес-процессы:

b_5835a5ff31da2.jpg

Первый прототип

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

Сначала отрисовывается один ключевой экран. Из него можно понять основные принципы работы системы:

b_5835a5ff7153d.jpg

Прототип внутренней системы работы с тарифами мобильного оператора

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

Прорабатываются другие функционалы:

b_5835a5ffbd66c.jpg

Для сложных функционалов отдельно продумывается логика работы:

b_5835a6001d584.jpg

Схема функционала добавления сервисной информации интерфейса промышленного кондиционера

Интерактивность

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

Интерактивный прототип позволяет понять работу продукта в динамике

Для своих проектов мы используем сервис прототипирования UXPin.com. Это мощный инструмент онлайн-прототипирования.

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

Готовый прототип

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

b_5835a60065d88.jpg

Скриншоты прототипа рекламной системы

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

Stay Tuned! Андрей Иванов

+8
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Зачитался... плюсую.
Ответить
Denis Dolzhikov
А в чем лучше делать прототип?
Ответить
Vershi
Делаем интерфейсы
Andrey Ivanov
Мы прототипируем в UxPin.com. Удобный сервис, при этом постоянно совершенствуется
Ответить
Станислав 30065
ninjamock.com решает! Прототипы без финтифлюшек
Ответить
Яковенко Роман
Мне нравиться wireframe.cc
Ответить
Vershi
Делаем интерфейсы
Andrey Ivanov
Посмотрел, интерфейс приятный, но кажется функционала маловато. UxPin скрин с одного из проектов — в аттаче, там много удобных штук для больших проектов и созданий всевозможных анимаций и интерактива.
Ответить
Александр Величко
Отличный материал! Расскажите подробнее, кто входит в "стандартную" проектную команду и какая роль отводится именно проектировщику?
Кто проводит первичное исследование?
Ответить
Vershi
Делаем интерфейсы
Andrey Ivanov
Спасибо! В проектной команде работает менеджер по продукту + дизайнер. Продукт менеджер должен понимать всю суть продукта. Он общается с клиентом, проводит другие исследования, прописывает процессы и выдвигает гипотезы. Дизайнер с самого начала в курсе проекта и участвует в обсуждении концепций, синхронно визуализируя прототип. Не уверен что команду из двух человек сильно можно увеличить, на стадии зарождения прототипа чем больше людей, тем больше шанс что у семерых нянек дитя останется без глаза. Кто-то один должен все собрать воедино и понять как должно быть.
Ответить
Эдуард Лиринг
Если есть деньги, то AxureRP самая мощная система прототипирования.
Ответить
Артем Конаков
Даже не знаю.. по-моему статья об очень очевидном и профит с неё может получить только человек, который вообще не знаком с процессами разработки проекта.
Из полезного тут есть две ссылки на сервисы: https://www.uxpin.com/ и https://marvelapp.com/, но опять-же для тех, кто с ними не знаком.

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

Согласен с комментом про AxureRP)
Ответить
Выбрать файл
Не пропустите публикацию!
Vershi
Делаем интерфейсы
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.