Как создать прототип мобильного приложения за 5 шагов + 3 примера

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

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

Фундаментальная отсылка. Прототип — это быстрая, черновая реализация будущей системы. А еще это работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании. Термин прототип произошел от древнегреческого πρῶτος «первый» + τύπος «отпечаток, оттиск» или первообраз.

«Одна картина стоит тысячи слов. Один прототип стоит 1 000  встреч. »

— Джон Маэда, дизайнер / remix известной цитаты Конфуция

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

Содержание:

• Что такое прототип для чего он нужен
• Инструкция по разработке прототипа мобильного приложения
  • Шаг 1. Определите полезное действие и конек
  • Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте бумажный прототип
  • Шаг 3. Перенесите бумажный прототип на интерактивную бумагу
  • Шаг 4. Придайте прототипу профессиональный облик 
  • Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки
• 8 моментов, которые важно учесть при создании прототипа
• 3 примера хороших прототипов мобильных и веб-приложений
• Что еще почитать на тему подходов к прототипированию
• Вывод и рекомендация

Что такое прототип и для чего он нужен

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

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

Пример прототипа мобильного приложения:

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

Использовать прототип следует по следующим причинам:

	Без прототипа приложения	С прототипом приложения
1. Прототип дает взгляд со стороны и открывает новую точку зрения	В вашем воображении идея выглядит просто и идеально. Существенные недостатки отсутствуют. На самом деле, это портал в бесконечные срывы ожиданий как клиентов, так и всех участников.	Взгляд со стороны помогает найти пробелы в задумке. Их уже можно устранить на этапе прототипирования и усовершенствовать идею.
2. Создает простор для эксперимента и поиска наилучшего решения с учетом ограничений	Доработки идеи, реализованной в коде — это трудоемко, дорого и рискованно.	В прототип мобильного или веб-приложения можно мгновенно вносить правки без какого-либо риска. К тому же эти изменения незначительны в рамках общего бюджета и помогают выбрать для разработки лучшее решение.
3. Прототип — предмет для исследований целевой аудитории	Когда вам нечего показать потенциальным клиентам, вы не можете рассчитывать на честную обратную связь о вашей идее или продукте.	Прототип веб- или мобильного приложения — это потрясающе точный инструмент для сбора данных с потенциальных пользователей. Дайте им поиграть с ним, понаблюдайте за прототипом на деле, и вас тут же накроет десятками идей о том, как доработать идею.
4. Прототип помогает оценить стоимость разработки программистами	На вопрос: «Сколько стоит такое приложение, как Facebook?» — вы не получите ясного ответа, потому что оценивать нужно комплект полезных пользовательских сценариев (User Flow), состоящих из конкретного количества экранов и состояний элементов управления.	Покажите прототип разработчикам и они в течение недели сделают точную и сбалансированную оценку по времени и бюджету на разработку.
5. Вовлекает в разработку и инвестиции	Идея звучит клево, всем нравится, но все ждут от вас каких-то действий, так как рисковать усилиями и деньгами хочется лишь единицам.	Помогает чувственно донести идею о будущем продукте и продемонстрировать ее на деле. Прототип повышает ваши шансы убедить заинтересованных.

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в
Telegram
|
ВКонтакте,
Instagram,

Facebook

Инструкция по разработке прототипа мобильного приложения

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

Шаг 1. Определите полезное действие и конек

Данный этап выполняется по классическому алгоритму дизайн-мышления и оформить результат данного этапа можно в формате POV (Point-of-View).

Хороший POV одновременно создает пространство для развития и фокусирует на поиске решения. . Хороший POV — бесконечный источник идей для развития и совершенствования. 

__Пример POV__ / Сервис по доставке пиццы к вечеру пятницы

«Мы встретили ребят в пятничном офисе, у которых сегодня намечается вечеринка.»

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

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

Близкая аудитории культура: Отдых и развлечения, Карьера и деньги

Более подробно о дизайн-мышлении вы можете найти материал в курсе Дизайн-мышление — Базовый курс. Это курс с оригинальными методиками легендарной Stanford d.school. Теория и практика дизайн-мышления для разных отраслей в экспресс-формате. Заглянуть в курс по дизайн-мышлению →

Шаг 2. Зарисуйте Sketchflow ключевых экранов и протестируйте плавность сценария

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

Как выглядит

Чтобы скетчи экранов получились жизненными, я стараюсь сразу оформлять их в формате User Flow и запускать по ним виртуального пользователя. 

Пример оформления Sketchflow.

Инструменты для скетчинга

Я беру карандаш, ластик и лист A4 или блокнот.

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

В чем фишка бумажного прототипа

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

Шаг 3. Перенесите бумажный прототип на интерактивную бумагу

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

Как выглядит

Фактические перед вами настоящее приложение, просто накиданное от руки в формате скетча. Но главное — оно работает как «живое». Клевая функция POP — создание интерактивных прототипов мобильных приложений. Вы просто связываете несколько экранов приложений: рисуете виртуальные области поверх фото и цепляете к ним переход на другое фото из серии.

Инструменты для дизайна

Вариант 1. POP by Marvel — превращает скетчи в прототипы для  iOS and Android-платформ. Для мобильных веб-прототипов тоже годится.

В чем фишка 

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

Шаг 4. Придайте прототипу профессиональный облик 

На этом этапе можно взять комплекты готовых UI-китов или собрать детальный прототип (Low-Fi), опираясь на библиотеку готовых компонентов. Такой прототип уже будет похож на настоящее приложение и именно из-за такой подачи потенциальные клиенты будут ожидать от него функциональной пользы.

Инструменты для дизайна

Здесь под настроение я беру либо просто Figma или миксую Figma + Principle | ProtoPie — особенно когда хочется сделать эффектный выход.

Как выглядит

На этом этапе мы превращаем скетчи в серию экранов и получается простенький дизайн в стиле минимализм, его фокус — четкая информационная архитектура, навигация и сценарий взаимодействия. К примеру, заголовки — это как раз часть информационной архитектуры. А вот детальки внутри карточек — это уже микродетали.

Пример Wireframe в Figma

В чем фишка

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

Шаг 5. Поделитесь прототипом с заинтересованными в проекте и потенциальными клиентами и сделайте корректировки

Поздравляю. Ваш прототип готов к первым испытаниям. И только сейчас на самом деле начинается самое интересное — первая корректировка рынком вашего решения.

Инструменты для дизайна

С помощью Figma или Principle | ProtoPie вы можете отправить ваш прототип по ссылке потенциальному клиенту и включить режим UX-тестирования.

Как выглядит

Вы можете проводить удаленные тестирования через Skype/Zoom с записью экрана или воспользоваться профессиональным софтом, например, Lookback для проведения модерируемых UX-тестирований.

В чем фишка тестирования прототипов на потенциальных клиентах

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

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

Ричард Фейнман

Прототипы — инструмент обучения и погружения в предметную область. Прототипы помогают быстрее учиться и быстрее совершенствовать ваши идеи.

3 примера хороших прототипов мобильных и веб-приложений

1. Демонстрация мобильного UX по созданию документов в мобильном приложении Craft – Create Amazing Documents

2. Микровзаимодействия в веб-приложении крупным планом

3. Демонстрация работы навигации в приложении

Что важно учесть при создании прототипа мобильного приложения

1. Тестируйте прототипы в конкретных ситуациях и тестируйте чаще

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

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

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

2. Начинайте со скетчей, а не с графического редактора

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

Суть идеи: Со скетчем у вас будет план. А еще скетч не сковывает вас в поиске решений.

3. Используйте живой контент, а не Lorem

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

Суть идеи: С живым текстом можно оценить пользу прототипа.

4. Наращивайте дизайн слоями

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

Суть идеи: С живым текстом можно оценить пользу прототипа, и получить нечто больше, чем WOW.

5. Применяйте дизайн-мышление

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

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

6. Изучайте паттерны и готовые библиотеки компонентов: лучше вспоминать, чем изучать заново

Есть много ресурсов, где собраны ux-паттерны и можно найти, как вашу задачу решали гиганты из Facebook, Spotify, Uber и Salesforce. Эти команды годами развивают свои продукты и ищут оптимальные решения для каждого сценария. Пользователи увереннее подойдут к решению задачи, когда увидят знакомые конструкции и знакомые механизмы.

Суть идеи: Готовые UI-киты сделанные на технологическом уровне значительно ускорят разработку.

7. Развивайте прототип через истории в формате POV (Point of View)

Изучайте обратную связь и формулируйте продуктовые истории с помощью техники POV (Point of View), так вы сможете нащупать концепцию с пространством для развития продукта.

Суть идеи: POV помогает сформулировать гипотезу о пользе продукта и создать контекст для тестирования и почувствовать аудиторию. 

Что еще почитать на тему подходов к прототипированию

Фундаментальный труд в формате интерактивного курса: 60 приемов и техник дизайн-мышления, которые работают на старте каждого проекта по продуктовому дизайну, веб-дизайну и бренд-айдентике.

Девять дизайнеров-исследователей и преподавателей в сфере дизайна Университета Сиднея в течение 15 лет исследовали приемы и техники дизайн-мышления. А потом собрали их в руководство. В книге методы сгруппированы в алфавитном порядке и промаркированы четырьмя символами «Придумай. Сделай. Сломай. Повтори». Помогает расширить пространство концепций, выйти за пределы обыденных решений и привнести свежий взгляд. 😊👇🏻

Придумай. Сделай. Сломай. Повтори | Настольная книга приемов и инструментов дизайн-мышления. Подробнее →

Вывод и рекомендация

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

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

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

создание и тестирование — Личный опыт на vc.ru

Разработка продукта — многоступенчатый процесс. И то, что получится в итоге, зависит от грамотно созданного прототипа. По сути, прототип приложения или сайта — это скелет, который затем обрастает мышцами в виде UI.

2896
просмотров

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

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

Мы, студия NoCode/LowCode-разработки Zero To One, постарались подробно рассказать о том, что же такое прототип, как его создавать и как это делают у нас 🙂

А еще мы запустили телеграм-канал о новостях из мира бизнеса и стартапов. Каждое утро говорим о главных событиях: кто сколько привлек, кто кого купил и какие стартапы сейчас поднимают самые большие раунды. Подписывайтесь!

Прототип: что это такое и зачем он нужен

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

Помимо этого прототип помогает:

• Визуализировать будущий продукт. Прототипирование помогает понять, что вы получите в результате разработки: какие функции и элементы будет иметь интерфейс, по каким сценариям пользователь будет взаимодействовать с продуктом и т. д.
• Выработать единую концепцию, правила дизайн-системы и иерархию блоков. Например, в соответствии с негласной дизайнерской матчастью, расстояния между блоками (к примеру, заголовками) и подблоками (абзацами) везде должны быть одинаковыми. Аналогичные правила работают и в случае с визуальным контентом (фото, видео и пр.) и графическими элементами (кнопки, иконки).
• Закрепить договорённости с заказчиком. Он страхует от ситуаций, когда команда разработчиков уже сделала весь интерфейс, выкатила итоговый продукт и передала заказчику для оценки, а всё работает, оказывается, совсем не так, как нужно: тут текст не влезает в границы кнопки, там блок не так расположен, где-то элементов не хватает, а какие-то из них вообще лишние. Прототип даёт возможность «свести» пожелания и видение заказчика с возможностями и видением разработчиков.
• Сформировать ТЗ для верстальщиков. Прототип показывает, какие расстояния должны быть между элементами, какие использовать отступы от края блока до его содержимого, в случае с high-fidelity прототипом (о нём расскажем дальше) можно договориться даже о цветах и анимациях переходов между окнами.
• Понять ЦА и собрать фидбек. Как мы уже рассказывали в одной из публикаций, MVP можно создавать в виде прототипа. Но для MVP подходят только high-fidelity прототипы: они могут выглядеть как реальный, законченный продукт и с ними можно полноценно взаимодействовать.

Виды прототипов

В зависимости от инструментов, используемых при создании прототипа, можно выделить следующие его виды:

• Бумажный прототип. Да, на бумаге и от руки. Обычно такой прототип создаётся в самом начале работы для иллюстрации концепта продукта, когда нужно быстро сделать набросок и скорректировать основные детали. Однако бумажное прототипирование совершенно не подходит для полноценной работы и тестирования.

• Low-fidelity прототип. Он выглядит как «голая» версия конечного продукта и, как правило, делается в ч\б. Такой прототип состоит из:

• Макетов экранов
• Контуров элементов
• Изображённой в виде стрелок логики взаимодействия элементов или базовой кликабельности элементов

Ключевые характеристики lo-fi прототипа — наглядность и интерактивность. Он может быть выполнен с помощью карандаша в Paint или фреймов и фигур в Figma — неважно. Главное — он должен показывать алгоритм решения проблемы пользователя.

Один из прототипов нашей студии

• High-fidelity прототип. Такой прототип гораздо больше похож на итоговый продукт, чем lo-fi. В нём уже есть актуальные изображения, текстовые заглушки с Lorem ipsum заменены на реальный UX-текст со смысловым наполнением. По сути, hi-fi прототип — это максимально подробный дизайн-макет, практически финальная версия проекта, но без фронт- и бэкенда.

При создании high-fidelity прототипа от точки А до точки Я прорабатывается логика взаимодействия элементов в каждом отдельно взятом сценарии, на каждую кнопку макета назначаются действия и кнопки демонстрируются во всех возможных состояниях, между собой связываются экраны приложения и т. д. Такой прототип должен давать полное представление о структуре сайта/приложения, навигации внутри них и решении всех возможных проблем пользователей.

Чаще всего все эти виды прототипов используются поочерёдно на различных стадиях разработки: всё начинается с бумажного наброска и приходит к high-fidelty прототипу.

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

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

• Первое, что нужно сделать при создании любого пользовательского продукта, будь то сайт, приложение, текст или рекламный креатив — это изучить целевую аудиторию. Перед созданием прототипа вам необходимо узнать о потребностях потенциальных пользователей, их болевых точках. Как говорится, знание — сила. И в данном случае знание и понимание аудитории вашего продукта поможет уже на этапе прототипирования создать удобный UX, который потом только останется доработать.
• Формирование ТЗ. На этом этапе создания прототипа необходимо провести брифинг и совместное обсуждение требований к будущему макету, чтобы наметить план работы. Здесь обсуждается вся информация, полученная при изучении ЦА, структура сайта или приложения: подробно описываются экраны, текстовое и визуальное наполнение, функции отдельных элементов и навигация. На основании выводов обсуждения составляется техзадание для дизайнеров.
• Создание low-fidelity прототипа. Имея на руках данные исследования ЦА, техзадание от клиента и набросок интерфейса, можно приступать непосредственно к прототипированию.

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

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

Создание low-fi обычно занимает около 7-14 дней. После того, как черновик создан, нужно вновь обсудить всё с заказчиком и скорректировать имеющийся макет.

• Создание high-fidelity прототипа. По мере перехода к финальному дизайну продукта ваш прототип должен становиться более функциональным. Например, на стадии hi-fi прототипа можно добавить в макет строку поиска, которая будет подгружать данные, хранящиеся в прототипе (например, образцы товаров), на основе того, что пользователь или тестировщик вводят в поле, и представлять результаты в виде меню-аккордеона, выпадающего списка и других подобных элементов.

Еще один аспект, отличающий прототипы класса hi-fi от прототипов более низкого класса, заключается в том, что они часто хранят как числовые, так и текстовые данные, а также определенные настройки, вводимые пользователем. Эти настройки могут сохраняться и влиять на другие элементы прототипа, как на одном экране, так и на разных.

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

Плюсы тестирования — в следующем:

• Оно позволяет выявить ошибки на ранней стадии разработки;
• Оно экономит (иногда сильно) средства на разработку итогового продукта;
• Оно позволяет начать знакомство пользователей с финальным продуктом «на хорошей ноте»: правильно и ответственно проведённое тестирование гарантирует, что сразу после запуска приложения или сайта пользователи не столкнутся с критическими ошибками и не останутся недовольны.

Перед началом тестирования ставятся и распределяются по приоритетности цели, которые нужно достичь в процессе проверки прототипа. Например:

• «Оставить ли меню-бургер или вынести категории в шапку?»
• «Понятно ли из текста в окне, что именно нужно от пользователя?»
• «Достаточно ли крупный размер шрифта меню, чтобы пользователям было комфортно взаимодействовать с сайтом?»
• «В качестве обложки сайта лучше оставить изображение или заменить его на видео?»

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

Инструменты прототипирования

Есть более и менее удобные для прототипирования инструменты, специально созданные для него и универсальные. Здесь мы не откроем Америку, если скажем, что лучше всего для работы с прототипами подходят Figma, Sketch и InVision. Figma мы регулярно используем сами, а Sketch и InVision доверяют тысячи других команд.

Figma

Плюсы:

• Можно использовать бесплатно;
• Работает и на Windows, и на MacOS;
• Есть веб-версия;
• Удобна для командной работы;
• С помощью плагинов вроде Autoflow и Figmotion можно создавать интерактивные сценарии взаимодействия пользователей с интерфейсом и анимации окон.

Минусы:

• Ну тут даже мы бессильны в поиске минусов — Figma идеальный инструмент

Sketch

Плюсы:

• Легко создавать связи между экранами: это делается через перетаскивание векторов от одного экрана к другому;
• Понятный интерфейс;
• Можно массово редактировать типовые элементы (кнопки, векторы и т. д.) сразу на всех экранах прототипа: менять цвета, размер и прочие атрибуты;
• Есть бесплатная пробная версия.

Минусы:

• Работает только на MacOS;
• Стоимость полной версии — $99 в год и $9 в месяц.

Invision

Плюсы:

• Полностью работает в браузере;
• Удобно взаимодействовать в команде: функция Freehand позволяет рисовать, делать заметки и обсуждать проект;
• Можно быстро создавать интерактивные прототипы и воспроизводить их с помощью LiveShare.

Минусы:

• В бесплатной версии доступно создание лишь одного проекта. Тарифы начинаются от $15 в месяц.

Пара советов

• При разработке low-fidelity прототипа сфокусируйтесь на проработке userflow, сделайте взаимодействие пользователя с интерфейсом настолько понятным и комфортным, насколько это возможно. Lo-fi прототип не обязан быть красивым — он должен в первую очередь работать.
• Опять же: коммуницируйте. Обсуждайте всё, в чём сомневаетесь, даже то, что вам кажется незначительным. От вовлечённости разработчиков и самого заказчика зависят и скорость работы, и её качество.
• Если позволяют сроки, лучше сделать прототип максимально подробным и проработанным. Так на этапе тестирования вы сможете проверить больше гипотез.
• Делайте кликабельный прототип. Этот совет перекликается с предыдущим, но всё же немного о другом: можно сделать визуально подробный интерфейс, но не наделить его интерактивностью. Однако если прототип будет кликабельным, значит, он будет более приближен к реальному продукту. Следовательно, при разработке чистового проекта вы с меньшей вероятностью встретитесь с какими-либо подводными камнями: навигация будет проработана и протестирована.

Как создаются прототипы в нашей студии

• В начале было слово, и слово было бриф. Первое, что мы делаем — высылаем заказчику бриф (или он просто оставляет на сайте почту и ему приходит готовый шаблон), где просим как можно более подробно рассказать об идее, описать ЦА, конкурентов и задачи проекта, дать пожелания по дизайну и сервисами разработки.

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

• Приступаем непосредственно к прототипированию. Сначала создаём low-fidelity прототип интерфейса со всеми основными элементами и сценариями навигации, подробно описываем его наполнение и функции, существующие в системе роли и их возможности. Дальше результат работы согласовываем с заказчиком, вносим необходимые изменения.
• Создаём high-fidelity прототип: добавляем в lo-fi набросок цвета, иконки, окна подсказок и прочие графические элементы.
• Передаём разработчику high-fidelity прототип и ТЗ с полным списком требований к продукту. В техзадании мы описываем взаимосвязь элементов, логику их работы, те результаты, которые нужно получить при взаимодействии с каждым из них. Благодаря этому у разработчика не возникает дополнительных вопросов, он точно знает, что и где нужно делать, как именно это должно работать. Таким образом, процесс разработки не затягивается и вы можете получить готовый продукт в те сроки, которые поставили изначально.

Что в итоге

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

Чтобы узнать о сроках, ценах и возможностях разработки больше — на сайте нашей студии ZeroToOne можно записаться на бесплатную консультацию. За полчаса обсудим ваш проект, поможем рассчитать сроки, стоимость и подобрать подходящие инструменты 🙂

БЕСПЛАТНЫЙ прототипирующий инструмент: Построить интерактивные проекты прототипа

Figma

. Платформа дизайна All-One

DesignPrototygingDesign Systemdownloads

Figjam

Столога для команды

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

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

События и прямые трансляцииЛучшие практикиОбразовательная программаГруппы пользователейСоздатели сообществ

ВойтиНачать работу

Начать работу

Начать работу

Воплотите свои идеи в жизнь с помощью анимированных прототипов. Тестируйте концепции раньше и чаще. Создайте лучший план развития.

Начало работы

Создавайте прототипы, похожие на реальный опыт

Превратите файлы статического дизайна в интерактивный опыт — кодирование не требуется.

• Интуитивная сборка: Просто подключите элементы пользовательского интерфейса и выберите взаимодействия и анимацию.
• Взаимодействия: Определение малозаметных взаимодействий, таких как щелчок, наведение курсора, нажатие кнопки и т. д.
• Мобильный просмотр: Испытайте свои проекты в реальной жизни с помощью нашего мобильного приложения Figma, доступного для iOS и Android.

Показывайте, а не рассказывайте свое видение взаимодействия

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

• Расширенные переходы с помощью Smart Animate: Автоматически анимируйте похожие объекты и создавайте детальные переходы.
• Динамические наложения: Создание нескольких слоев интерактивных наложений содержимого.
• Анимированные GIF-файлы: Используйте GIF-файлы для представления моушн-дизайна, видеоэлементов и тонких анимаций.

У нас очень быстрый процесс проектирования. Мы постоянно строим, тестируем и итерируем. Возможность так быстро и легко собрать прототип в Figma очень важна для нас.

Бет Хорн, старший научный сотрудник Bulb

Сделайте все с помощью одного инструмента

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

• Платформа «все в одном»: Переключение между файлом проекта и живым прототипом. Изменения дизайна мгновенно отображаются в вашем прототипе.
• Прототип, которым можно поделиться: Поделитесь ссылкой на свой прототип. Просматривайте его в любом месте, где есть Интернет.
• Встроенные комментарии: Комментарий в прототипе. Они переносятся в файл дизайна, поэтому ничего не потеряется.

Другие способы использования прототипов Figma

• Наблюдение за испытуемым на исследовательских сессиях
• Взаимодействие с живыми прототипами в Notion или Dropbox инструменты

Узнайте, как Figma может помочь вам спроектировать от начала до конца

Design

Learn more

Design Systems

Learn more

Design process

Learn more

• Twitter
• YouTube
• Instagram
• Facebook

Use Cases

• UI design
• UX design
• Каркас
• Диаграммы
• Мозговой штурм
• Гибкие рабочие процессы
• Стратегическое планирование
• Шаблоны
• Удаленное проектирование
• Agencies
• Figma for education

Explore

• Design features
• Prototyping features
• Design systems features
• Collaboration features
• Design process
• FigJam
• Pricing
• Enterprise
• Organization
• Professional
• Клиенты
• Безопасность
• Интеграции
• Контакты

Сравнить

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Design on Windows
• Miro

English

Sketch · Инструменты прототипирования для всех

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

Начните бесплатно

Нет необходимости в таких инструментах, как

Посмотреть прототип

Посмотреть прототип

Посмотреть прототип

• Создавайте маршруты пользователей за считанные секунды

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

• Создавайте элементы один раз (и навсегда)

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

• Движение без трения

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

• A/B-тестирование так же просто, как ABC

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

• Проверьте свои идеи в реальных условиях

  Контекст важен для четкого общения. Протестируйте свои прототипы в приложении для Mac, в веб-браузере или в нашем приложении для iPhone. См. их на месте мгновенно.

• Аутентичное взаимодействие с Hotspots

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

• Создать наложения

  Новый

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

  Прототип

  • Оверлеи бывают всех форм и размеров — от общих таблиц в стиле iOS до модальных окон, блокирующих взаимодействие и требующих внимания.

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

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

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

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

  • Хотите размещать наложения друг над другом — например, предупреждающие сообщения поверх контекстных меню? Нет проблем — все работает именно так, как вы ожидаете. Кроме того, вы можете выбрать, будет ли закрытие одного наложения закрывать их все или только активное.

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

• Применяйте уникальные взаимодействия

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

• Специальный интерфейс для прототипирования

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

• Без дополнительных затрат

  Никаких дополнительных приложений, никаких дополнительных платежей — можете попрощаться с подпиской InVision.

• Делитесь напрямую, тестируйте где угодно

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

• Обмен отзывами, быстро

  Неограниченное количество гостей, которых вы можете пригласить для тестирования своих прототипов — бесплатно! Если кто-то новый нуждается в взгляде на ваш проект, его понимание будет только приглашением.

Приложение для iPhone

Если оно сделано для мобильных устройств, протестируйте его там

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

Скачать в App Store

Наше приложение для iPhone работает исключительно с документами Workspace.

Демо

Попробуйте их вживую

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