0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>7 ноя 2023</li>
2
<ul><li>7 ноя 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Как создать прототипы, имитирующие внешний вид и логику работы конечного продукта ещё до начала разработки.</p>
4
</ul><p>Как создать прототипы, имитирующие внешний вид и логику работы конечного продукта ещё до начала разработки.</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
6
<p>Дизайнер интерфейсов и аналитик, любительница погулять с собаками друзей и пообсуждать жизнь с книжным клубом.</p>
6
<p>Дизайнер интерфейсов и аналитик, любительница погулять с собаками друзей и пообсуждать жизнь с книжным клубом.</p>
7
<p>Прототипирование - один из основных этапов создания любого интерфейса, будь то приложение, сайт или касса самообслуживания в супермаркете.</p>
7
<p>Прототипирование - один из основных этапов создания любого интерфейса, будь то приложение, сайт или касса самообслуживания в супермаркете.</p>
8
<p>Инструменты прототипирования - это сервисы, которые позволяют пользователям создавать интерактивные прототипы, имитирующие внешний вид и логику работы конечного продукта.</p>
8
<p>Инструменты прототипирования - это сервисы, которые позволяют пользователям создавать интерактивные прототипы, имитирующие внешний вид и логику работы конечного продукта.</p>
9
<em>Изображение:<a>ProtoPie</a></em><p>Прототип - это черновой вариант IT-продукта, на создание которого требуется меньше времени и профессиональных знаний, но по самому продукту можно перемещаться как по уже запущенному сайту или приложению.</p>
9
<em>Изображение:<a>ProtoPie</a></em><p>Прототип - это черновой вариант IT-продукта, на создание которого требуется меньше времени и профессиональных знаний, но по самому продукту можно перемещаться как по уже запущенному сайту или приложению.</p>
10
<p>Технически прототип выглядит как система страниц или экранов, соединённых общей логикой и дизайном.</p>
10
<p>Технически прототип выглядит как система страниц или экранов, соединённых общей логикой и дизайном.</p>
11
<p>Чтобы создать прототип, сначала нужно сделать вайрфреймы (схематичное чёрно-белое отображение структуры блоков конкретной страницы) или отрисованные в дизайн-концепции экраны.</p>
11
<p>Чтобы создать прототип, сначала нужно сделать вайрфреймы (схематичное чёрно-белое отображение структуры блоков конкретной страницы) или отрисованные в дизайн-концепции экраны.</p>
12
<p>Первый тип страниц можно собрать в low-fi-прототип (англ. low fidelity - низкая точность), второй - в hi-fi-прототип (англ. high fidelity - высокая точность).</p>
12
<p>Первый тип страниц можно собрать в low-fi-прототип (англ. low fidelity - низкая точность), второй - в hi-fi-прототип (англ. high fidelity - высокая точность).</p>
13
<p>Прототипы низкой точности показывают основную функциональность страниц и экранов, их структуру и связь. Но презентовать их клиентам или проводить пользовательское тестирование проблематично - не все пользователи смогут понять, что перед ними только прототип, а не конечный продукт.</p>
13
<p>Прототипы низкой точности показывают основную функциональность страниц и экранов, их структуру и связь. Но презентовать их клиентам или проводить пользовательское тестирование проблематично - не все пользователи смогут понять, что перед ними только прототип, а не конечный продукт.</p>
14
<p>В высокоточных прототипах можно проверить отдельные компоненты и элементы дизайна. Уровень проработки выбирается в зависимости от наличия времени, этапа разработки. Также важна теоретическая подготовленность клиента - нужно увидеть не настоящий дизайн, а логику его работы.</p>
14
<p>В высокоточных прототипах можно проверить отдельные компоненты и элементы дизайна. Уровень проработки выбирается в зависимости от наличия времени, этапа разработки. Также важна теоретическая подготовленность клиента - нужно увидеть не настоящий дизайн, а логику его работы.</p>
15
<em>Изображение:<a>ProtoPie</a></em><p>"Семь раз отмерь, один раз отрежь" - эта пословица предельно точно объясняет, зачем нужен интерактивный прототип.</p>
15
<em>Изображение:<a>ProtoPie</a></em><p>"Семь раз отмерь, один раз отрежь" - эта пословица предельно точно объясняет, зачем нужен интерактивный прототип.</p>
16
<p>Если планируется запуск лендинга или простого сайта, то можно спроектировать вайрфрейм для обсуждения и затем приступать к разработке финального дизайна на основе фирменного стиля или готовой айдентики.</p>
16
<p>Если планируется запуск лендинга или простого сайта, то можно спроектировать вайрфрейм для обсуждения и затем приступать к разработке финального дизайна на основе фирменного стиля или готовой айдентики.</p>
17
<p>Если же продукт сложный, состоит из множества разных экранов и подразумевает необычное взаимодействие, то стоит создать интерактивный прототип низкого или высокого уровня. С его помощью можно прояснить требования к контенту, UX/UI‑дизайну, сценариям, разработке и прочему.</p>
17
<p>Если же продукт сложный, состоит из множества разных экранов и подразумевает необычное взаимодействие, то стоит создать интерактивный прототип низкого или высокого уровня. С его помощью можно прояснить требования к контенту, UX/UI‑дизайну, сценариям, разработке и прочему.</p>
18
<em>Изображение:<a>ProtoPie</a></em><em>Изображение:<a>ProtoPie</a></em><p>Почему важно создать интерактивный прототип:</p>
18
<em>Изображение:<a>ProtoPie</a></em><em>Изображение:<a>ProtoPie</a></em><p>Почему важно создать интерактивный прототип:</p>
19
<p><strong>Валидация идей.</strong>Если дизайн-концепция продукта ещё не утверждена, а для обсуждения структуры страниц, навигации и логики нужен визуал, то создаётся низкоточный прототип в программах типа Axure RP, Balsamiq, Figma и других.</p>
19
<p><strong>Валидация идей.</strong>Если дизайн-концепция продукта ещё не утверждена, а для обсуждения структуры страниц, навигации и логики нужен визуал, то создаётся низкоточный прототип в программах типа Axure RP, Balsamiq, Figma и других.</p>
20
<p>Если за этот этап ответственен продакт-менеджер или маркетолог, который не владеет этими инструментами, то проще будет воспользоваться программами с предустановленными блоками и экранами типа Balsamiq или Framer.</p>
20
<p>Если за этот этап ответственен продакт-менеджер или маркетолог, который не владеет этими инструментами, то проще будет воспользоваться программами с предустановленными блоками и экранами типа Balsamiq или Framer.</p>
21
<p><strong>Презентация заказчикам или инвесторам.</strong>Для презентации идей до начала разработки можно создать высокоточный прототип, на основе примерной дизайн-концепции или уже готовых экранов от дизайнера. Такой продукт будет максимально похож на итоговый дизайн конечного продукта, но он не потребует больших финансовых вложений. Особенно ценен такой подход для стартапов и новых продуктов внутри больших компаний.</p>
21
<p><strong>Презентация заказчикам или инвесторам.</strong>Для презентации идей до начала разработки можно создать высокоточный прототип, на основе примерной дизайн-концепции или уже готовых экранов от дизайнера. Такой продукт будет максимально похож на итоговый дизайн конечного продукта, но он не потребует больших финансовых вложений. Особенно ценен такой подход для стартапов и новых продуктов внутри больших компаний.</p>
22
<em>Изображение:<a>ProtoPie</a></em><p><strong>Пользовательские тестирования.</strong>Поскольку прототип отображает, где находятся определённые элементы интерфейса и как с ними можно взаимодействовать, его часто используют для проведения пользовательских тестирований.</p>
22
<em>Изображение:<a>ProtoPie</a></em><p><strong>Пользовательские тестирования.</strong>Поскольку прототип отображает, где находятся определённые элементы интерфейса и как с ними можно взаимодействовать, его часто используют для проведения пользовательских тестирований.</p>
23
<p>Пользователи в процессе оценят недостатки и достоинства дизайна и дадут обратную связь. Такое тестирование выигрывает время для исправления ошибок до релиза продукта.</p>
23
<p>Пользователи в процессе оценят недостатки и достоинства дизайна и дадут обратную связь. Такое тестирование выигрывает время для исправления ошибок до релиза продукта.</p>
24
<p><strong>Передача функционала.</strong>Если продукт уже практически готов или планируется релиз какой-то необычной фичи или логики взаимодействия, то с помощью прототипа можно показать разработчикам или заказчикам, как работают конкретные компоненты интерфейса или их микроанимации.</p>
24
<p><strong>Передача функционала.</strong>Если продукт уже практически готов или планируется релиз какой-то необычной фичи или логики взаимодействия, то с помощью прототипа можно показать разработчикам или заказчикам, как работают конкретные компоненты интерфейса или их микроанимации.</p>
25
<p>Такой интерактивный прототип обычно создаётся на основе готовых дизайн-макетов или собирается в инструментах, где фронтенд может посмотреть на реализацию кода конкретного элемента (Webflow, Framer и другие).</p>
25
<p>Такой интерактивный прототип обычно создаётся на основе готовых дизайн-макетов или собирается в инструментах, где фронтенд может посмотреть на реализацию кода конкретного элемента (Webflow, Framer и другие).</p>
26
<p>Независимо от конкретной ситуации, этап создания прототипов помогает избежать серьёзных ошибок, исправить которые после релиза будет очень дорого, а иногда и невозможно.</p>
26
<p>Независимо от конкретной ситуации, этап создания прототипов помогает избежать серьёзных ошибок, исправить которые после релиза будет очень дорого, а иногда и невозможно.</p>
27
<em>Изображение:<a>ProtoPie</a></em><p>Прототипирование можно сделать во многих дизайнерских сервисах, его предлагают в качестве дополнительной функции. Но есть отдельные инструменты, которые полностью направлены на прототипирование на более точном уровне. Некоторые инструменты прототипирования можно использовать даже в качестве создания реальных сайтов.</p>
27
<em>Изображение:<a>ProtoPie</a></em><p>Прототипирование можно сделать во многих дизайнерских сервисах, его предлагают в качестве дополнительной функции. Но есть отдельные инструменты, которые полностью направлены на прототипирование на более точном уровне. Некоторые инструменты прототипирования можно использовать даже в качестве создания реальных сайтов.</p>
28
<p>Например, в сервисах Webflow, Tilda или Framer можно создать близкий к реальному сайт, протестировать его, а затем запустить на встроенном в сервис домене.</p>
28
<p>Например, в сервисах Webflow, Tilda или Framer можно создать близкий к реальному сайт, протестировать его, а затем запустить на встроенном в сервис домене.</p>
29
<p>Основной список сервисов интерактивного UX/UI-прототипирования выглядит примерно так:</p>
29
<p>Основной список сервисов интерактивного UX/UI-прототипирования выглядит примерно так:</p>
30
<ul><li>ProtoPie,</li>
30
<ul><li>ProtoPie,</li>
31
<li>Figma,</li>
31
<li>Figma,</li>
32
<li>Axure,</li>
32
<li>Axure,</li>
33
<li>InVision,</li>
33
<li>InVision,</li>
34
<li>UXPin,</li>
34
<li>UXPin,</li>
35
<li>Framer,</li>
35
<li>Framer,</li>
36
<li>Webflow,</li>
36
<li>Webflow,</li>
37
<li>Pixso,</li>
37
<li>Pixso,</li>
38
<li>Principle,</li>
38
<li>Principle,</li>
39
<li>Proto.io,</li>
39
<li>Proto.io,</li>
40
<li>Balsamiq,</li>
40
<li>Balsamiq,</li>
41
<li>Flinto,</li>
41
<li>Flinto,</li>
42
<li>Marvel,</li>
42
<li>Marvel,</li>
43
<li>MockFlow,</li>
43
<li>MockFlow,</li>
44
<li>Origami Studio,</li>
44
<li>Origami Studio,</li>
45
<li>Fluid UI.</li>
45
<li>Fluid UI.</li>
46
</ul><p>Для подробного разбора мы выбрали несколько сервисов, которые были в топе списка лучших инструментов UX/UI-прототипирования по версии<a>UX Design Tools Survey</a>.</p>
46
</ul><p>Для подробного разбора мы выбрали несколько сервисов, которые были в топе списка лучших инструментов UX/UI-прототипирования по версии<a>UX Design Tools Survey</a>.</p>
47
<p>Они ранжированы в произвольном порядке, поскольку у каждого из инструментов есть свои сильные стороны, и какой из них "лучший", будет зависеть от того, для чего он вам нужен.</p>
47
<p>Они ранжированы в произвольном порядке, поскольку у каждого из инструментов есть свои сильные стороны, и какой из них "лучший", будет зависеть от того, для чего он вам нужен.</p>
48
График 2022 года<p>Изображение:<a>UX Tools</a> </p>
48
График 2022 года<p>Изображение:<a>UX Tools</a> </p>
49
<p><a>ProtoPie</a> - профессиональный инструмент, который позволяет создавать интерактивные прототипы для всех видов цифровых носителей, в том числе смартфоны, настольные компьютеры, планшеты, умные часы и даже автомобили, используя API, Arduino, Logitech G29 и другие.</p>
49
<p><a>ProtoPie</a> - профессиональный инструмент, который позволяет создавать интерактивные прототипы для всех видов цифровых носителей, в том числе смартфоны, настольные компьютеры, планшеты, умные часы и даже автомобили, используя API, Arduino, Logitech G29 и другие.</p>
50
<p>В 2022 году ProtoPie был признан инструментом номер один для продвинутого прототипирования в опросе<a>UX Design Tools Survey</a>. Среди наиболее известных клиентов компании - Xbox, Ubisoft, Spotify, BMW Group, HBO Max, Samsung, Electronic Arts, Amazon и прочие design-driven-компании.</p>
50
<p>В 2022 году ProtoPie был признан инструментом номер один для продвинутого прототипирования в опросе<a>UX Design Tools Survey</a>. Среди наиболее известных клиентов компании - Xbox, Ubisoft, Spotify, BMW Group, HBO Max, Samsung, Electronic Arts, Amazon и прочие design-driven-компании.</p>
51
<p>ProtoPie работает через браузер, поэтому не требует предустановки и отдельной настройки. В бесплатной версии нельзя работать совместно: проект доступен только одному пользователю (максимально два прототипа и две записи интеракций) и сохранить его можно только в облако, а не к себе на компьютер.<a>Платная версия</a>начинается от 67 долларов в месяц.</p>
51
<p>ProtoPie работает через браузер, поэтому не требует предустановки и отдельной настройки. В бесплатной версии нельзя работать совместно: проект доступен только одному пользователю (максимально два прототипа и две записи интеракций) и сохранить его можно только в облако, а не к себе на компьютер.<a>Платная версия</a>начинается от 67 долларов в месяц.</p>
52
<em>Изображение:<a>ProtoPie</a></em><p>Основные функции, которые можно найти в настройках прототипов ProtoPie:</p>
52
<em>Изображение:<a>ProtoPie</a></em><p>Основные функции, которые можно найти в настройках прототипов ProtoPie:</p>
53
<ul><li>резиновый лейаут (сетки, направляющие, привязки);</li>
53
<ul><li>резиновый лейаут (сетки, направляющие, привязки);</li>
54
<li>скролл, свайп, парралакс, переходы между экранами, горизонтальный скролл;</li>
54
<li>скролл, свайп, парралакс, переходы между экранами, горизонтальный скролл;</li>
55
<li>любые ховеры любых объектов;</li>
55
<li>любые ховеры любых объектов;</li>
56
<li>расширенные настройки тултипов, поп-апов и модальных окон;</li>
56
<li>расширенные настройки тултипов, поп-апов и модальных окон;</li>
57
<li>продвинутые настройки<a>анимации взаимодействий</a>;</li>
57
<li>продвинутые настройки<a>анимации взаимодействий</a>;</li>
58
<li><a>формулы</a>, переменные и variables (для создания паролей, шаффлов, операций и прочего);</li>
58
<li><a>формулы</a>, переменные и variables (для создания паролей, шаффлов, операций и прочего);</li>
59
<li>постоянно обновляющаяся библиотека носителей (модели iPhone, AppleWatch, Samsung, Google Pixel, ТВ и прочие);</li>
59
<li>постоянно обновляющаяся библиотека носителей (модели iPhone, AppleWatch, Samsung, Google Pixel, ТВ и прочие);</li>
60
<li>библиотека компонентов и блоков, возможность создать мастер-компонент для его переиспользования;</li>
60
<li>библиотека компонентов и блоков, возможность создать мастер-компонент для его переиспользования;</li>
61
<li>настройки доступности по WCAG;</li>
61
<li>настройки доступности по WCAG;</li>
62
<li>"живой" онбординг;</li>
62
<li>"живой" онбординг;</li>
63
<li>загрузка и анимация фото-, аудио- и видеофайлов, плейлистов и других списков;</li>
63
<li>загрузка и анимация фото-, аудио- и видеофайлов, плейлистов и других списков;</li>
64
<li>загрузка анимационных файлов из Lottie;</li>
64
<li>загрузка анимационных файлов из Lottie;</li>
65
<li><a>Handoff</a> - функция записи интеракций с прототипом, включая комментарии голосом и добавление аудиодорожек;</li>
65
<li><a>Handoff</a> - функция записи интеракций с прототипом, включая комментарии голосом и добавление аудиодорожек;</li>
66
<li><a>ProtoPie Connect</a> - возможность тестировать прототип на различных носителях;</li>
66
<li><a>ProtoPie Connect</a> - возможность тестировать прототип на различных носителях;</li>
67
<li>встроенная функция пользовательских тестирований.</li>
67
<li>встроенная функция пользовательских тестирований.</li>
68
</ul><em>Изображение:<a>ProtoPie</a></em><p>В среде ProtoPie можно создавать формулы для полей ввода, слоёв, функций и переменных по своему усмотрению.</p>
68
</ul><em>Изображение:<a>ProtoPie</a></em><p>В среде ProtoPie можно создавать формулы для полей ввода, слоёв, функций и переменных по своему усмотрению.</p>
69
<p>Как и с недавнего времени в Figma, в ProtoPie можно использовать формулы, чтобы проверить функционал ввода адреса электронной почты или имени, задать минимальную длину пароля, подсчитать количество товаров в корзине или определить общий баланс счёта.</p>
69
<p>Как и с недавнего времени в Figma, в ProtoPie можно использовать формулы, чтобы проверить функционал ввода адреса электронной почты или имени, задать минимальную длину пароля, подсчитать количество товаров в корзине или определить общий баланс счёта.</p>
70
<em>Изображение:<a>ProtoPie</a></em><p>Важное преимущество ProtoPie: можно тестировать работу вашего интерфейса с фотокамерой, жестами, картами, GPS,<a>голосовым вводом</a>(и выводом) на 52 языках и другими звуками.</p>
70
<em>Изображение:<a>ProtoPie</a></em><p>Важное преимущество ProtoPie: можно тестировать работу вашего интерфейса с фотокамерой, жестами, картами, GPS,<a>голосовым вводом</a>(и выводом) на 52 языках и другими звуками.</p>
71
<p>Например, можно сделать прототип приложения, которое будет реагировать на хлопок ладоней и вибрировать при определённых действиях.</p>
71
<p>Например, можно сделать прототип приложения, которое будет реагировать на хлопок ладоней и вибрировать при определённых действиях.</p>
72
<p>Также в ProtoPie есть опции распознавания речи, STT (англ. speech-to-text, из речи в текст) и TTS (англ. text-to-speech, из текста в речь). С такими возможностями - речевыми, жестовыми и визуальными данными - можно реализовывать самые необычные идеи.</p>
72
<p>Также в ProtoPie есть опции распознавания речи, STT (англ. speech-to-text, из речи в текст) и TTS (англ. text-to-speech, из текста в речь). С такими возможностями - речевыми, жестовыми и визуальными данными - можно реализовывать самые необычные идеи.</p>
73
<p>Любые специфичные взаимодействия настраиваются в ProtoPie максимально прицельно. В записи можно визуализировать все отображения анимаций и производимых действий. При этом каждая анимация будет зафиксирована в своих параметрах.</p>
73
<p>Любые специфичные взаимодействия настраиваются в ProtoPie максимально прицельно. В записи можно визуализировать все отображения анимаций и производимых действий. При этом каждая анимация будет зафиксирована в своих параметрах.</p>
74
<em>Изображение:<a>ProtoPie</a></em><p>Юзабилити-тестирование - одна из целей для создания прототипа. В ProtoPie сделали встроенную функцию модерируемого и немодерируемого<a>тестирования пользователей</a>. После создания прототипа можно добавить его в общий сценарий или отдать на отдельное тестирование.</p>
74
<em>Изображение:<a>ProtoPie</a></em><p>Юзабилити-тестирование - одна из целей для создания прототипа. В ProtoPie сделали встроенную функцию модерируемого и немодерируемого<a>тестирования пользователей</a>. После создания прототипа можно добавить его в общий сценарий или отдать на отдельное тестирование.</p>
75
<p>Прототип расшеривается через ссылку или QR-код и защищён паролем. За тестированием могут наблюдать несколько членов команды, могут сразу же оставлять комментарии и фиксировать результаты.</p>
75
<p>Прототип расшеривается через ссылку или QR-код и защищён паролем. За тестированием могут наблюдать несколько членов команды, могут сразу же оставлять комментарии и фиксировать результаты.</p>
76
<em>Изображение:<a>ProtoPie</a></em><em>Изображение:<a>ProtoPie</a></em><p>Минусы сервиса невелики: в ProtoPie нельзя создать дизайн пользовательского интерфейса с нуля. Однако у программы есть плагины, через которые можно быстро импортировать готовые файлы из Figma, Sketch или Adobe XD.</p>
76
<em>Изображение:<a>ProtoPie</a></em><em>Изображение:<a>ProtoPie</a></em><p>Минусы сервиса невелики: в ProtoPie нельзя создать дизайн пользовательского интерфейса с нуля. Однако у программы есть плагины, через которые можно быстро импортировать готовые файлы из Figma, Sketch или Adobe XD.</p>
77
<em>Изображение:<a>ProtoPie</a></em><p><a>Figma</a> - один из лучших инструментов для создания интерактивных интерфейсов, которые можно показать пользователям, разработчикам или клиентам.</p>
77
<em>Изображение:<a>ProtoPie</a></em><p><a>Figma</a> - один из лучших инструментов для создания интерактивных интерфейсов, которые можно показать пользователям, разработчикам или клиентам.</p>
78
<p>За счёт высокой популярности самой программы раздел прототипирования постоянно улучшается.</p>
78
<p>За счёт высокой популярности самой программы раздел прототипирования постоянно улучшается.</p>
79
<p>К тому же Figma сделана для совместной работы в режиме реального времени, а это большой плюс, если над проектом работает большая команда из менеджеров, маркетологов, дизайнеров и разработчиков. Можно подключить большое количество плагинов от других программ прототипирования, например ProtoPie.</p>
79
<p>К тому же Figma сделана для совместной работы в режиме реального времени, а это большой плюс, если над проектом работает большая команда из менеджеров, маркетологов, дизайнеров и разработчиков. Можно подключить большое количество плагинов от других программ прототипирования, например ProtoPie.</p>
80
<ul><li>Данные могут быть введены только курсором, клавиатурой и тапом.</li>
80
<ul><li>Данные могут быть введены только курсором, клавиатурой и тапом.</li>
81
<li>Подключить прототип можно только на стандартные девайсы (ПК, смартфон, планшет).</li>
81
<li>Подключить прототип можно только на стандартные девайсы (ПК, смартфон, планшет).</li>
82
<li>Невозможно выстроить сложную логику и сценарии взаимодействий.</li>
82
<li>Невозможно выстроить сложную логику и сценарии взаимодействий.</li>
83
<li>Невозможно сделать прототипы с фреймами, в которых находится несколько состояний.</li>
83
<li>Невозможно сделать прототипы с фреймами, в которых находится несколько состояний.</li>
84
<li>Нельзя подключить реальные динамические данные (выпадающие списки, карточки и прочее).</li>
84
<li>Нельзя подключить реальные динамические данные (выпадающие списки, карточки и прочее).</li>
85
<li>Нет превью юзерфлоу.</li>
85
<li>Нет превью юзерфлоу.</li>
86
</ul><em>Изображение:<a>Figma</a></em><p><a>Axure</a> - это один из самых старых и известных инструментов для создания вайрфреймов и интерактивных прототипов, доступный как на Mac, так и на Windows. Программу нужно скачать, браузерной версии нет, но можно сохранять свои файлы в облаке. Бесплатный период длится 30 дней, после этого базовая подписка будет стоить 25 долларов.</p>
86
</ul><em>Изображение:<a>Figma</a></em><p><a>Axure</a> - это один из самых старых и известных инструментов для создания вайрфреймов и интерактивных прототипов, доступный как на Mac, так и на Windows. Программу нужно скачать, браузерной версии нет, но можно сохранять свои файлы в облаке. Бесплатный период длится 30 дней, после этого базовая подписка будет стоить 25 долларов.</p>
87
<p>Основной функционал Axure:</p>
87
<p>Основной функционал Axure:</p>
88
<ul><li>интерактивные элементы от наведения или нажатия курсора, прикосновения, работы с клавиатурой;</li>
88
<ul><li>интерактивные элементы от наведения или нажатия курсора, прикосновения, работы с клавиатурой;</li>
89
<li>кондициональная логика ("если, то");</li>
89
<li>кондициональная логика ("если, то");</li>
90
<li>динамический контент внутри блоков и элементов (смена картинок, фонов, текста, цветов, отдельных карточек);</li>
90
<li>динамический контент внутри блоков и элементов (смена картинок, фонов, текста, цветов, отдельных карточек);</li>
91
<li>интерактивные поля форм и отображение ошибок;</li>
91
<li>интерактивные поля форм и отображение ошибок;</li>
92
<li>сетки, направляющие, привязка (constraints);</li>
92
<li>сетки, направляющие, привязка (constraints);</li>
93
<li>динамические панели (модальные окна, вкладки, свайпы, слайдеры и прочее);</li>
93
<li>динамические панели (модальные окна, вкладки, свайпы, слайдеры и прочее);</li>
94
<li>адаптивное отображение прототипа на нескольких типах устройств;</li>
94
<li>адаптивное отображение прототипа на нескольких типах устройств;</li>
95
<li>комментарии, описания спецификаций;</li>
95
<li>комментарии, описания спецификаций;</li>
96
<li>инспектор кода.</li>
96
<li>инспектор кода.</li>
97
</ul><em>Изображение:<a>Axure</a></em><p>Создать страницу в Axure можно, просто перетягивая на рабочую область виджеты из общей библиотеки. Из перетянутых элементов можно создать свои мастер-компоненты, которые далее могут быть растиражированы на разных экранах по аналогии с компонентами в Figma (а точнее, в Figma по аналогии c Axure).</p>
97
</ul><em>Изображение:<a>Axure</a></em><p>Создать страницу в Axure можно, просто перетягивая на рабочую область виджеты из общей библиотеки. Из перетянутых элементов можно создать свои мастер-компоненты, которые далее могут быть растиражированы на разных экранах по аналогии с компонентами в Figma (а точнее, в Figma по аналогии c Axure).</p>
98
<p>Стоит учитывать, что в Axure удобно проектировать веб-проекты. Мобильные приложения или проекты, требующие нестандартных типов взаимодействия (введение информации другими способами, кроме как курсором, прикосновением и клавиатурой), сделать здесь невозможно.</p>
98
<p>Стоит учитывать, что в Axure удобно проектировать веб-проекты. Мобильные приложения или проекты, требующие нестандартных типов взаимодействия (введение информации другими способами, кроме как курсором, прикосновением и клавиатурой), сделать здесь невозможно.</p>
99
<p>В отличие от других сервисов, Axure RP делает акцент на простоте и функциональности в разработке преимущественно веб-проектов. Однотонные макеты, созданные в Axure, напоминают экраны, нарисованные дизайнером на бумаге от руки. Такой минималистичный подход позволяет не обращать внимания на дизайн и анимации, а сосредоточиться на структуре и пользовательских сценариях. Если прототип хочется сделать более уникальным и высокоточным, то в настройках можно добавить кастомные стили.</p>
99
<p>В отличие от других сервисов, Axure RP делает акцент на простоте и функциональности в разработке преимущественно веб-проектов. Однотонные макеты, созданные в Axure, напоминают экраны, нарисованные дизайнером на бумаге от руки. Такой минималистичный подход позволяет не обращать внимания на дизайн и анимации, а сосредоточиться на структуре и пользовательских сценариях. Если прототип хочется сделать более уникальным и высокоточным, то в настройках можно добавить кастомные стили.</p>
100
<p>Основной минус инструмента - довольно высокий порог входа для освоения рабочего интерфейса. Однако через недолгое время он становится привычным и не требует прежнего уровня включённости.</p>
100
<p>Основной минус инструмента - довольно высокий порог входа для освоения рабочего интерфейса. Однако через недолгое время он становится привычным и не требует прежнего уровня включённости.</p>
101
<em>Изображение:<a>Axure</a></em><p><a>InVision</a> - также один из старейших инструментов интерактивного прототипирования. Его позицию можно сравнить с текущим положением Sketch: он был практически единственным в своём роде, но после прихода других сервисов стал просто "одним из". Его основные конкуренты начали предлагать работать онлайн без необходимости.</p>
101
<em>Изображение:<a>Axure</a></em><p><a>InVision</a> - также один из старейших инструментов интерактивного прототипирования. Его позицию можно сравнить с текущим положением Sketch: он был практически единственным в своём роде, но после прихода других сервисов стал просто "одним из". Его основные конкуренты начали предлагать работать онлайн без необходимости.</p>
102
<p>Несколько лет назад InVision разделился на два продукта: собственно Prototype и FreeHand, аналог FigJam и Miro.</p>
102
<p>Несколько лет назад InVision разделился на два продукта: собственно Prototype и FreeHand, аналог FigJam и Miro.</p>
103
<p>Основные характеристики InVision:</p>
103
<p>Основные характеристики InVision:</p>
104
<ul><li>контроль версий;</li>
104
<ul><li>контроль версий;</li>
105
<li>возможность оставлять комментарии;</li>
105
<li>возможность оставлять комментарии;</li>
106
<li>импорт файлов из Figma, Sketch, Adobe XD и Photoshop;</li>
106
<li>импорт файлов из Figma, Sketch, Adobe XD и Photoshop;</li>
107
<li>интеграция с Asana, Microsoft Teams, Slack, Dropbox и другими;</li>
107
<li>интеграция с Asana, Microsoft Teams, Slack, Dropbox и другими;</li>
108
<li>библиотека компонентов;</li>
108
<li>библиотека компонентов;</li>
109
<li>функция Motion;</li>
109
<li>функция Motion;</li>
110
<li>интеграция Storybook с <a>DSM</a>(Design System Management), которая предоставляет разработчикам CSS и исходный код компонентов;</li>
110
<li>интеграция Storybook с <a>DSM</a>(Design System Management), которая предоставляет разработчикам CSS и исходный код компонентов;</li>
111
<li>нет браузерной версии, только десктопное приложение;</li>
111
<li>нет браузерной версии, только десктопное приложение;</li>
112
<li>бесплатная версия для десяти пользователей в трёх файлах.</li>
112
<li>бесплатная версия для десяти пользователей в трёх файлах.</li>
113
</ul><em>Скриншот: сайт<a>InVision</a>/ Skillbox Media</em><p><a>UXPin</a> - это инструмент прототипирования на основе кода. В отличие от многих дизайнерских решений, UXPin не нуждается в плагинах - всё, что вам нужно для прототипирования и тестирования, уже встроено в сервис. UXPin можно загрузить на свой рабочий стол (Mac и Windows), чтобы использовать его офлайн, или открыть сервис в браузере.</p>
113
</ul><em>Скриншот: сайт<a>InVision</a>/ Skillbox Media</em><p><a>UXPin</a> - это инструмент прототипирования на основе кода. В отличие от многих дизайнерских решений, UXPin не нуждается в плагинах - всё, что вам нужно для прототипирования и тестирования, уже встроено в сервис. UXPin можно загрузить на свой рабочий стол (Mac и Windows), чтобы использовать его офлайн, или открыть сервис в браузере.</p>
114
<p>Примеры прототипов, сделанных с помощью UXPin, можно найти в <a>библиотеке</a>.</p>
114
<p>Примеры прототипов, сделанных с помощью UXPin, можно найти в <a>библиотеке</a>.</p>
115
<em>Скриншот: сайт<a>UXPin</a>/ Skillbox Media</em><p>В UXPin можно создавать сложные компоненты, такие как раскрывающиеся меню, аккордеоны и карусели, которые функционируют так же, как и в конечном продукте. Им можно назначать состояния. Например, кнопка может иметь четыре состояния: по умолчанию, при наведении, активное и отключённое. Каждое из них будет иметь отдельные свойства и триггеры.</p>
115
<em>Скриншот: сайт<a>UXPin</a>/ Skillbox Media</em><p>В UXPin можно создавать сложные компоненты, такие как раскрывающиеся меню, аккордеоны и карусели, которые функционируют так же, как и в конечном продукте. Им можно назначать состояния. Например, кнопка может иметь четыре состояния: по умолчанию, при наведении, активное и отключённое. Каждое из них будет иметь отдельные свойства и триггеры.</p>
116
<p>Сервис поддерживает технологии переменных и выражений. С их помощью можно программировать функции как на JavaScript, но без знания кода. Прототипы могут выполнять проверку формы, обновлять корзину покупок (и общую сумму заказа) или проверять соответствие пароля определённым критериям безопасности.</p>
116
<p>Сервис поддерживает технологии переменных и выражений. С их помощью можно программировать функции как на JavaScript, но без знания кода. Прототипы могут выполнять проверку формы, обновлять корзину покупок (и общую сумму заказа) или проверять соответствие пароля определённым критериям безопасности.</p>
117
<p>Функция Merge, доступная на платных аккаунтах, позволяет синхронизировать закодированные компоненты дизайн-системы с редактором UXPin. Компоненты React синхронизируются через репозиторий Git, npm или интеграцию Storybook, включая Vue, Angular, Ember и другие. Таким образом, тестировать можно нативные компоненты дизайн-системы.</p>
117
<p>Функция Merge, доступная на платных аккаунтах, позволяет синхронизировать закодированные компоненты дизайн-системы с редактором UXPin. Компоненты React синхронизируются через репозиторий Git, npm или интеграцию Storybook, включая Vue, Angular, Ember и другие. Таким образом, тестировать можно нативные компоненты дизайн-системы.</p>
118
<em>Скриншот: сайт<a>UXPin</a>/ Skillbox Media</em><p>С помощью приложения Mirror можно тестировать прототипы на мобильных устройствах (включая iOS и Android). Вносить изменения в дизайн можно прямо во время тестирований.</p>
118
<em>Скриншот: сайт<a>UXPin</a>/ Skillbox Media</em><p>С помощью приложения Mirror можно тестировать прототипы на мобильных устройствах (включая iOS и Android). Вносить изменения в дизайн можно прямо во время тестирований.</p>
119
<p>Бесплатная ограниченная версия включает редактор дизайна, прототипирование, интеграции внешних сервисов (Jira, Slack, Storybook и прочие) и совместную работу.</p>
119
<p>Бесплатная ограниченная версия включает редактор дизайна, прототипирование, интеграции внешних сервисов (Jira, Slack, Storybook и прочие) и совместную работу.</p>
120
<p>Приложения для интерактивного прототипирования произвели революцию в дизайне. Они предоставили дизайнерам возможность создавать прототипы, которые имитируют взаимодействие с пользователем в разных ситуациях и на разных носителях. Используя эти функции, можно значительно оптимизировать дизайн-процесс, повысить эффективность команды разработки и, в конечном счёте, сделать счастливыми заказчиков и пользователей.</p>
120
<p>Приложения для интерактивного прототипирования произвели революцию в дизайне. Они предоставили дизайнерам возможность создавать прототипы, которые имитируют взаимодействие с пользователем в разных ситуациях и на разных носителях. Используя эти функции, можно значительно оптимизировать дизайн-процесс, повысить эффективность команды разработки и, в конечном счёте, сделать счастливыми заказчиков и пользователей.</p>
121
<a>Практический курс: "Профессия UX/UI-дизайнер + ИИ" Узнать о курсе</a>
121
<a>Практический курс: "Профессия UX/UI-дизайнер + ИИ" Узнать о курсе</a>