Дизайн
BytePace
492

Для чего нужен интерактивный прототип

Любой проект начинается с уточнения требований. Если технические требования уточняются в техническом задании, то как зафиксировать визуальную часть проекта? Здесь мы описали, что такое интерактивный прототип и привели свои примеры.

В закладки

Лучше всего поможет решить эту задачу интерактивный прототип. Интерактивный прототип - это визуальное представление мобильного приложения. Он позволяет увидеть заранее все экраны будущего приложения и даже попробовать его в действии, не прибегая к программированию. Прототип разрабатывается в специальных сервисах, например, Figma или Marvel. Эти же сервисы позволяют запустить прототип и изучить возможности будущего приложения.

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

При помощи прототипа можно проверить, весь ли намеченный функционал учтен. Посмотреть как достигаются бизнес задачи заказчика. Например, если в приложении есть продажи, нужно оценить, насколько легко пользователю совершить покупку. Хорошо ли видно кнопку “Купить”.

С прототипом можно точнее оценить сроки и стоимость разработки. Он позволяет понять, насколько сложно будет реализовать интерфейс приложения.

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

Как выглядит интерактивный прототип приложения

Чтобы дизайнеру было проще разработать интерактивный прототип сначала нужно набросать основные экраны приложения карандашом на бумаге. Это позволит быстро наметить общую концепцию интерфейса:

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

Наш пример интерактивного прототипа без дизайна:

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

Пример интерактивного прототипа с дизайном:

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "BytePace", "author_type": "self", "tags": [], "comments": 20, "likes": 2, "favorites": 30, "is_advertisement": false, "subsite_label": "design", "id": 95379, "is_wide": false, "is_ugc": true, "date": "Tue, 03 Dec 2019 08:38:09 +0300", "is_special": false }
0
{ "id": 95379, "author_id": 331975, "diff_limit": 1000, "urls": {"diff":"\/comments\/95379\/get","add":"\/comments\/95379\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/95379"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
20 комментариев
Популярные
По порядку
Написать комментарий...
–1

Почему в статье говорится только о мобильном приложении? Из инструментов для прототипирования Axure  советую, больше интерактива, реальный html, а не картинки с кликабельным областями. 

Ответить
11

Фигму можно использовать и для десктоп прототипов. Axure - говно мамонта, тяжелый, сложный, никому не нужный. Фигма де факто стала стандартом в среде дизайнеров и UI специалистов. А если тебе нужно «больше интерактива» и «настоящий html», то у меня вопрос, ты точно понимаешь, зачем нужны прототипы, кто и в каких ситуациях их делает?

Ответить
3

Axure, хоть и старое говно мамонта, но оно решает ряд задач быстрее чем фигма. Фигма даже близко не стоит с возможностями акшуры. Если вы ее не используете, не значит что ее не используют продуктовые компании.
Фигма не стандарт среди ui. Вы забываете про скетч и xd.
Еще вы забываете, что html тоже инструмент и если человек умеет программировать, то он быстрее накидает прототип в html, нежели будет разбираться с дизайнерскими инструментами.
Еще сюда можно добавить фреймер.

Ответить
3

"Фигма не стандарт среди ui" - а что вообще значит стандарт в UI? Каждый юзает тот инструмент, который ему подходит и решает его задачи. 

А если человек не знает html? Всё, крест на себе ставить? Для этого и создаются удобные инструменты прототипирования, которые позволяют создавать интерактивные макеты без знания кода. Я практически уверен, что дизайнер сделает быстрее интерактивный прототип в той же Фигме, чем разраб все это дело заверстает с нуля. Разумеется, речь идет о спецах с аналогичным набором скиллов в своем направлении)

Я работал в Акшуре до Фигмы. И да, для меня на данный момент это действительно говно мамонта. Тут уже на вкус и цвет. Но как мы все понимаем прекрасно, данные сервисы нельзя сравнивать, назначение как бы немного разное :) Зависит от того, на каком этапе вы показываете прототип. Если это схематические наброски страниц, залинкованные между собой, то в Акшур возможно быстрее получится сделать. Если это презентация готового дизайна - Фигма тут победит, уж извините. 

Ответить
0

Я не совсем понял зачем вы мне это все написали. Ваш комментарий больше подходит для ответа человеку которому я сам ответил.

Ответить
0

Так перечайте сообщение) Что лучше, а что хуже - каждый решает сам для себя. "Фигма даже близко не стоит с возможностями акшуры." - на основании чего Вы сделали такой вывод?

Ответить
0

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

Ответить
0

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

Ответить
0

Figma-стандарт. Окэеейй... блэт!

Ответить
2

Потому что мы разрабатываем мобильные приложения :)

Ответить
1

Могу сделать серию уроков по Axure, если кому-то будет полезно.

Ответить
1

Конечно полезно. Я вот на бумаге накидал и интерактива совсем не хватает...

Ответить
2

Включите воображение! ;)

Ответить
2

У Axure один минус - стоит дороговато, по этому не так популярен инструмент.

Ответить
1

Какие трудозатраты на создание и поддержание интерактивного прототипа?))

Ответить
1

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

Ответить
1

То, что нарисовано в примере, можно сделать за час

Ответить
0

Пример ведь не настоящего проекта. А так, при наличии опыта, интерактивный прототип можно сделать в течение одного- двух рабочих дней. Ну и смотря какой объем проекта

Ответить
1

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

В марвеле так же осталось куча вопросов, касающихся элементарных вещей: например, зачем мне 3 раза создавать чат? В прототипе ясно указано, что нажать на кнопку "создать чат" нужно 3 раза. При первом нажатии все понятно, но зачем дублировать эту же надпись во второй и третий раз, если чат я уже создал, только из-за названия чата?
Или что произойдет, когда я нажму на кнопку "Бесплатный чат" при его создании?
Или насколько раскрывается детальная информация в профиле людей (сколько символов можно ввести, сколько строчек это занимает, не перекроет ли эта информация первый экран)?
Как добавляется комментарий в профиле?
И это только первая часть вопросов.

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

Ответить
0

Секта свидетелей фигмы уже начинает подбешивать, уж простите.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }