Содержание
Как создать прототип мобильного приложения за 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,
Инструкция по разработке прототипа мобильного приложения
Порой может показаться, что без прототипов можно выиграть время и сделать проект быстрее. Но на самом деле, несколько сэкономленных часов выльются в недели переделок и исправлений ошибок. Поэтому выделите ресурсы создайте прототип. К тому же для его создания не нужно быть профессиональным дизайнером.
Шаг 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
- YouTube
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.
Демо
Попробуйте их вживую
Поиграйте с некоторыми из наших примеров, чтобы увидеть, как это работает, вы даже можете получить вдохновение для своих собственных фантастических прототипов.