Для чего нужен интерактивный прототип
Любой проект начинается с уточнения требований. Если технические требования уточняются в техническом задании, то как зафиксировать визуальную часть проекта? Здесь мы описали, что такое интерактивный прототип и привели свои примеры.
Лучше всего поможет решить эту задачу интерактивный прототип. Интерактивный прототип - это визуальное представление мобильного приложения. Он позволяет увидеть заранее все экраны будущего приложения и даже попробовать его в действии, не прибегая к программированию. Прототип разрабатывается в специальных сервисах, например, Figma или Marvel. Эти же сервисы позволяют запустить прототип и изучить возможности будущего приложения.
Интерактивный прототип позволяет оценить насколько удобно пользователю взаимодействовать с интерфейсом продукта. Можно проследить основные сценарии использования продукта, на практике понять, что может помешать пользователю достигать своих целей и исправить это.
При помощи прототипа можно проверить, весь ли намеченный функционал учтен. Посмотреть как достигаются бизнес задачи заказчика. Например, если в приложении есть продажи, нужно оценить, насколько легко пользователю совершить покупку. Хорошо ли видно кнопку “Купить”.
С прототипом можно точнее оценить сроки и стоимость разработки. Он позволяет понять, насколько сложно будет реализовать интерфейс приложения.
Также прототип можно показать потенциальным пользователям или инвесторам. От потенциальных пользователей можно получить первые отзывы и скорректировать проект еще до начала разработки. Инвесторы, изучив прототип приложения, могут принять решение о вложениях в ваш проект. То есть прототип можно использовать для целей проекта, не приступая сразу же к разработке.
Как выглядит интерактивный прототип приложения
Чтобы дизайнеру было проще разработать интерактивный прототип сначала нужно набросать основные экраны приложения карандашом на бумаге. Это позволит быстро наметить общую концепцию интерфейса:
Интерактивный прототип может быть разработан как с дизайном так и без. Прототип без дизайна позволяет увидеть алгоритм использования продукта. Прототип с дизайном также позволяет оценить и подобрать визуальные решения для продукта
Наш пример интерактивного прототипа без дизайна:
Важно понимать, что прототип без дизайна не стоит воспринимать как конечный продукт, он может не соответствовать вашим представлениям в плане дизайна. Тут нужно обращать внимание на функциональность и алгоритм действий. Дизайн разрабатывается на следующем этапе, когда прототип без дизайна утвержден.
Пример интерактивного прототипа с дизайном:
Интерактивный прототип с дизайном будет максимально похож на финальный результат разработки. В нем будут неактивны некоторые функции, но экраны будут выглядеть именно так, как в настоящем приложении.
Почему в статье говорится только о мобильном приложении? Из инструментов для прототипирования Axure советую, больше интерактива, реальный html, а не картинки с кликабельным областями.
Фигму можно использовать и для десктоп прототипов. Axure - говно мамонта, тяжелый, сложный, никому не нужный. Фигма де факто стала стандартом в среде дизайнеров и UI специалистов. А если тебе нужно «больше интерактива» и «настоящий html», то у меня вопрос, ты точно понимаешь, зачем нужны прототипы, кто и в каких ситуациях их делает?
Axure, хоть и старое говно мамонта, но оно решает ряд задач быстрее чем фигма. Фигма даже близко не стоит с возможностями акшуры. Если вы ее не используете, не значит что ее не используют продуктовые компании.
Фигма не стандарт среди ui. Вы забываете про скетч и xd.
Еще вы забываете, что html тоже инструмент и если человек умеет программировать, то он быстрее накидает прототип в html, нежели будет разбираться с дизайнерскими инструментами.
Еще сюда можно добавить фреймер.
"Фигма не стандарт среди ui" - а что вообще значит стандарт в UI? Каждый юзает тот инструмент, который ему подходит и решает его задачи.
А если человек не знает html? Всё, крест на себе ставить? Для этого и создаются удобные инструменты прототипирования, которые позволяют создавать интерактивные макеты без знания кода. Я практически уверен, что дизайнер сделает быстрее интерактивный прототип в той же Фигме, чем разраб все это дело заверстает с нуля. Разумеется, речь идет о спецах с аналогичным набором скиллов в своем направлении)
Я работал в Акшуре до Фигмы. И да, для меня на данный момент это действительно говно мамонта. Тут уже на вкус и цвет. Но как мы все понимаем прекрасно, данные сервисы нельзя сравнивать, назначение как бы немного разное :) Зависит от того, на каком этапе вы показываете прототип. Если это схематические наброски страниц, залинкованные между собой, то в Акшур возможно быстрее получится сделать. Если это презентация готового дизайна - Фигма тут победит, уж извините.
Я не совсем понял зачем вы мне это все написали. Ваш комментарий больше подходит для ответа человеку которому я сам ответил.
Так перечайте сообщение) Что лучше, а что хуже - каждый решает сам для себя. "Фигма даже близко не стоит с возможностями акшуры." - на основании чего Вы сделали такой вывод?
Простите, на мой взгляд вы ответили в первом комментарии ради того чтобы просто ответить или из желания «вписаться» в спор. Аргументировать почему это так и разводить дальше воду на пустом месте у меня нет времени, долго и бессмысленно для нас обоих.
Я высказал свое мнение, вы свое.. На том и закончим.
Спасибо за комментарий, постараюсь изложить в статье где конкретно выгоднее применять тот или иной инструмент.
Figma-стандарт. Окэеейй... блэт!
Потому что мы разрабатываем мобильные приложения :)
Вы явно не знаете как выглядит интерактивный прототип.
Интерактив подразумевает взаимодействие с конечным продуктом, у вас же кроме кнопок и переходов на следующую страницу ничего не показано, а это дополнительные трудозатраты на этапе согласования прототипа и разработки. Клиенту не понятно, что будет, если он нажмет на значок "Профиль" или "Чаты" в первом экране вашего прототипа на фигме, разработчик не в курсе как будет выглядеть вкладка "Люди" в том же первом экране. Это все требует дополнительных пояснений, созвонов.
В интерактивном прототипе нужно показывать не только переход по кнопкам, но и ховеры этих кнопок, как работает слайдер и свайп на мобилках, импуты, множественные буллиты, табы, вкладки и многое другое.
Да, второй прототип закрывает часть вопросов, но там уже есть дизайн, а его переделка в случае небольших правок - это еще большие трудозатраты, чем просто правки в прототипе.
Да, прототип не показывает полный конечный продукт, но подразумевает его в схематическом виде без всякого дизайна, чтобы любой человек смог пройти пользовательский путь. Ваш прототип не закрывает этот пункт.
В марвеле так же осталось куча вопросов, касающихся элементарных вещей: например, зачем мне 3 раза создавать чат? В прототипе ясно указано, что нажать на кнопку "создать чат" нужно 3 раза. При первом нажатии все понятно, но зачем дублировать эту же надпись во второй и третий раз, если чат я уже создал, только из-за названия чата?
Или что произойдет, когда я нажму на кнопку "Бесплатный чат" при его создании?
Или насколько раскрывается детальная информация в профиле людей (сколько символов можно ввести, сколько строчек это занимает, не перекроет ли эта информация первый экран)?
Как добавляется комментарий в профиле?
И это только первая часть вопросов.
В общем вам нужно немного расширить видение дизайнеров и проектировщиков для дальнейшей работы, плюс не отказываться от такого "говна мамонта" как Axure, т.к. на нем за пару часов можно сделать прототип интернет-магазина, а приложения тем более.
Могу сделать серию уроков по Axure, если кому-то будет полезно.
Конечно полезно. Я вот на бумаге накидал и интерактива совсем не хватает...
Включите воображение! ;)
У Axure один минус - стоит дороговато, по этому не так популярен инструмент.
Какие трудозатраты на создание и поддержание интерактивного прототипа?))
При наличии опыта и наработок примерно такие же как мокап на бумаге, процентов на 20 дольше, но и на выходе совершенно другой уровень.
То, что нарисовано в примере, можно сделать за час
Пример ведь не настоящего проекта. А так, при наличии опыта, интерактивный прототип можно сделать в течение одного- двух рабочих дней. Ну и смотря какой объем проекта
Секта свидетелей фигмы уже начинает подбешивать, уж простите.