Как создаются прототипы сайтов — Дизайн на vc.ru

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

13 712
просмотров

• обсуждение целей и задач проекта;
• разработка интерактивного прототипа;
• разработка технического задания;
• разработка дизайна;
• верстка и программирование;
• внедрение и тестирование.

В этой статье мы – команда DIGIMATIX поговорим об одном из самых важных этапов – прототипировании: о том что это и зачем нужно.

Что такое прототип и зачем он нужен?

О значении

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

Резюмируя, прототип нужен для:

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

Типы прототипов

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

По глубине проработки деталей выделяют прототипы:

• с низкой детализацией;
• с высокой детализацией.

По возможности взаимодействия с прототипом выделяют:

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

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

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

Шаги, которые необходимо предпринять для разработки прототипа

Первый шаг — постановка целей

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

Второй шаг — формирование гипотез

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

Третий шаг — исследование

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

Четвертый шаг — формирование прототипа

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

Пятый шаг — проработка глубины прототипа

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

5 лучших инструментов для разработки прототипа

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

1. Figma

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

2. Axure

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

3. Sketch

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

4. Adobe XD

Еще один продукт американской компании Adobe Inc. Направлен на разработку интерфейсов.

5. Adobe Photoshop + marvel или Invision

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

А как же на практике выглядит разработка прототипа?

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

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

• многоуровневый каталог и удобная карточка товара;
• фильтрация и сортировка товаров по характеристикам;
• система поиска товаров на сайте;
• оформление заказа;
• модули доставки и оплаты;
• быстрая покупка в несколько кликов;
• управление заказами в личном кабинете.

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

Как только проделаны все подготовительные работы, мы совместно с клиентом определяемся с типом прототипа, который создаем. Для интернет-магазина мы обычно делаем интерактивный прототип с высокой детализацией.

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

На первом шаге разработки прототипа мы создаем главную страницу сайта, на основе которой будут построены все остальные. Также на данном этапе мы работаем над хедером, футером, навигационными элементами и выстраиваем все блоки в рамках страницы. Мы не забываем прорабатывать все используемые интерактивные элементы, с которыми будет взаимодействовать пользователь. К таким элементам могут относиться кликабельные ссылки, ховеры, всплывающие формы, слайдеры. В программе Figma такие элементы достаточно просто создавать с помощью функции Variants. Она находится в стадии бета-тестирования, но пользователи уже могут оценить все ее возможности. Основное преимущество интерактивных элементов заключается в их кликабельности и возможности проверить и улучшить понимание того, как будет выглядеть будущий сайт без привлечения программиста и верстальщика.

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

Таким образом

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

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

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

Как сделать прототип сайта: пошаговая инструкция, инструменты и лайфхаки

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

Время чтения: 14 минут

1. Что такое прототип сайта
2. Плюсы и минусы прототипирования сайтов
3. Как сделать прототип сайта
   • Шаг 1. Продумайте путь клиента до того, как создать прототип сайта
   • Шаг 2. Сделайте набросок
   • Шаг 3. Оживите прототип
4. Программы для создания прототипов офлайн
   • NinjaMock
   • Moqups
   • Figma
5. Выводы

Что такое прототип сайта

Что такое прототип? Это первоначальный образец чего-либо.

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

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

Плюсы и минусы прототипирования сайтов

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

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

Чтобы макетирование облегчало, но не затягивало работу, определитесь со степенью детализации, которая требуется от прототипа. Тут формула проста — чем больше людей вовлечены в разработку, тем точнее должен быть макет. Если вы делаете сайт в одиночку или с одним фрилансером, достаточно схематически набросать блоки, хоть от руки в блокноте. Если же прототип будет утверждать менеджмент нескольких уровней и работать над ним будет команда из 5-10 человек, придется сделать прототип максимально похожий на готовый сайт.

Как сделать прототип сайта

Шаг 1. Продумайте путь клиента до того, как создать прототип сайта

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

Узнайте больше о пути клиента в нашей статье «Короче: что такое customer journey за 4 минуты».

Шаг 2. Сделайте набросок

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

• форме обратной связи;
• форме подписки;
• кнопкам «купить» и т. д. 

Шаг 3. Оживите прототип

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

Программы для создания прототипов офлайн

NinjaMock

Платформа: Онлайн-сервис

Цена: от 7,7$/месяц 

Бесплатный тариф: бессрочный, с ограничениями

Прототипы, сделанные в этом NinjaMock, отличаются от прочих характерной «небрежностью». Все элементы выглядят так, словно их рисовали от руки. Это в какой-то мере помогает преодолеть страх чистого листа — можно просто визуализировать идею, не двигая элементы по пикселю. 

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

У сервиса есть бесплатный тариф, в котором можно создать только один проект с не более чем 200 элементами. Созданные на бесплатном тарифе проекты доступны для просмотра всем посетителям сервиса, так что этот вариант вряд ли подойдет для коммерческого использования. Экспортировать прототип тоже получится лишь после оплаты. На PRO-планах доступны форматы PDF, PNG и HTML.

Здесь можно создавать проекты под разные платформы:

• смартфоны;
• планшеты;
• умные часы;
• браузер.

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

Moqups

Платформа: Онлайн-сервис

Цена: от 13$/месяц для фрилансеров, от 20$/месяц для команд

Бесплатный тариф: бессрочный, с ограничениями

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

При редактуре Moqups подсказывает похожие элементы, подсвечивает поля

Зарегистрироваться можно с помощью email или через аккаунт Google. Никаких дополнительных данных, в том числе платежных, Moqups не спрашивает. Кроме полноценных сайтов, в сервисе можно сделать прототип лендинга, дашборда, карты сайта и другие макеты.

Подробнее о способах создания лендингов читайте в статье «Как создать лендинг с высокой конверсией и потратить минимум денег».

Бесплатная версия сервиса ограничена одним проектом с не более чем 200 элементами. Этого лимита хватит на 2-3 страницы или небольшой лендинг. Совместная работа над прототипом доступна только по подписке, но можно открывать право просмотра другим пользователям сервиса, так что коллеги смогут смотреть онлайн-прототип.

У Moqups также есть расширение для браузера Chrome. Пока оно умеет делать скриншоты страниц и отправлять их в сервис. 

Figma

Платформа: кроссплатформенный сервис, Windows, macOS, браузерная версия

Цена: от 12$/месяц

Бесплатный тариф: бессрочный, с ограничениями.

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

В сервисе есть шаблоны для сайтов, диаграмм, путей клиента и пользователя, постов для соцсетей и даже коллекция шрифтов. Доступна разработка под разные модели смартфонов и smart-часов. Есть векторный редактор и масса smart-функций. Figma пригодится на крупных проектах, когда прототип должен быть идеальным, прежде чем пойдет в работу. К слову, экспортировать файлы можно в форматах PNG, JPG, PDF и SVG.

Пользуясь бесплатной версией, можно создать до трех проектов, история изменений которых хранится 30 дней. Также можно добавлять в проект одного соавтора. Студентам сервис предлагает бесплатный доступ к PRO-версии. Но попытка перейти на страницу подтверждение статуса студента привела нас на страницу 404. Возможно этот функционал доработают.

Выводы

1. Создание прототипа — важный этап в разработке сайта. Он дает видение конечной точки, к которой уже прокладывается roadmap.
2. Чтобы прототипирование было целесообразным и облегчило работу, а не съело время впустую, нужно сразу определиться с необходимым уровнем детализации. Чем больше людей вовлечено в разработку и чем больше времени на нее отведено, тем больше прототип должен быть похож на готовый сайт. При этом небольшой команде для создания одной страницы может хватить и схематического наброска.
3. Создание прототипа следует начать с расчета пути пользователя к целевому действию. Уже после разработки сценариев взаимодействия с сайтом можно начинать рисовать блоки и выбирать формы кнопок. Первый набросок можно сделать хоть от руки в блокноте — лишь бы получить общее видение.
4. Сервисы для создания прототипов имеют схожие функционал и интерфейсы. Поэтому при выборе стоит обратить внимание на возможность совместной работы и доступные для экспорта форматы.

Особенности — Proto.io

Сборка

Перетаскивания

Строительные блоки

Библиотеки компонентов пользовательского интерфейса

Сотни полностью интерактивных и настраиваемых собственных элементов пользовательского интерфейса из таких ОС, как iOS, Material Design, Windows, watchOS и других. Просто перетащите что-нибудь из кнопок, меню, элементов ввода, ползунков или других элементов, чтобы начать работу.

Шаблоны

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

Шаблоны

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

Библиотека иконок

Огромная библиотека с тысячами иконок, размер и цвет которых можно изменять.

Библиотека анимированных иконок

Выберите из большой коллекции анимированных иконок, готовых к использованию непосредственно в редакторе Proto.io.

Библиотека звуковых эффектов

Сделайте свой прототип популярным! Найдите идеальный звуковой эффект в нашей библиотеке звуковых эффектов и добавьте звуки к своим взаимодействиям и анимации.

Аудиокомпонент

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

Видеокомпонент

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

Анимация Lottie (After Effects)

Используйте подключаемый модуль Bodymovin для экспорта анимации After Effects и переноса ее в proto.io в виде файла Lottie. Автовоспроизведение или зацикливание анимации или использование взаимодействий для ее воспроизведения и остановки.

Прокручиваемые контейнеры

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

Многоразовые контейнеры

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

Пользовательские компоненты

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

Компонент Webview

Вставьте пользовательскую внешнюю HTML-страницу в свой прототип.

Компонент кода HTML

Добавьте код HTML в свой прототип с помощью компонента кода HTML.

Дизайн

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

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

Вставить для загрузки изображения

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

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

Загружайте свои изображения из любого места и легко маскируйте, обрезайте, кадрируйте или создавайте удивительные анимации, даже не выходя из редактора Proto.io.

Плагины для Sketch, Figma, XD и Photoshop

Мгновенно перенесите файлы Sketch, Figma, Adobe XD или Adobe Photoshop в Proto.io. Используйте обширные возможности прототипирования и интерактивности Proto.io, чтобы вдохнуть жизнь в свои проекты.

Стандартные размеры устройств

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

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

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

Менеджер активов

Загружайте собственные активы (изображения, аудио, видео) или связывайте актив с онлайн-ресурса. Храните их в папках. Загружайте ресурсы для всей учетной записи, доступные во всех проектах.

Диспетчер шрифтов

Используйте шрифты Adobe, Google Fonts или загружайте свои собственные веб-шрифты (в том числе созданные вами) для сохранения единообразия бренда.

Сохраненная цветовая палитра

Выберите цветовую палитру своего проекта и сохраните ее в нашей простой в использовании палитре цветов для быстрого проектирования.

Инструмент «Пипетка»

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

Цвета градиента

Создавайте и анимируйте яркие градиенты в Proto. io.

Фильтры и настройка цвета

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

Интеграции

Sketch

Экспортируйте файлы Sketch в Proto.io, сохраняя все слои и ссылки на прототипы. Создавайте высококачественные прототипы за считанные минуты, легко добавляя взаимодействия и анимацию к слоям.

Figma

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

Adobe XD

Используйте подключаемый модуль Proto. io для Adobe XD, чтобы перенести файлы XD в Proto.io. Используйте обширные возможности прототипирования, анимации и интерактивности, чтобы еще больше улучшить свои проекты и прототипы.

Adobe Photoshop

Используйте подключаемый модуль Proto.io для Photoshop, чтобы перенести файлы Photoshop в Proto.io. Добавляйте взаимодействия и анимацию, чтобы добавить жизни своим проектам.

Google Fonts

Вся библиотека Google Fonts у вас под рукой. Импортируйте нужные шрифты, и они будут доступны для использования на любом текстовом слое в любом месте вашего проекта.

Adobe Fonts

Войдите в свою учетную запись Adobe CC через диспетчер шрифтов Proto.io, чтобы сделать любой из ваших шрифтов Adobe доступным для использования в вашем проекте.

редактор

100% веб-редактор

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

Перетаскивание

Интуитивно понятный интерфейс перетаскивания всех стандартных блоков для быстрого прототипирования

Сочетания клавиш

Все сочетания клавиш, к которым вы привыкли в инструменте дизайна, доступны в Proto.io. Переключайтесь между инструментами и продолжайте работать без проблем.

Система сеток и линейки

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

Интеллектуальные и дистанционные направляющие

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

Пользовательские направляющие

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

Ориентация устройства

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

Светлая и темная тема

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

Копирование между проектами

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

Контроль версий

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

Попробуйте Proto.

io бесплатно в течение 15 дней.

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

Прототип

Взаимодействия

Действия

Мы гордимся широким спектром действий, которые вы можете активировать: изменение экрана, прокрутка, анимация, использование логики, управление аудио, видео, Gif, электронная почта, открытие URL-адреса, выполнение вызова и многое другое.

Сенсорные события и жесты

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

События мыши

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

События клавиатуры

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

Экранные события

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

Перетаскивание и поворот

Добавьте функцию перетаскивания или поворота к каждому элементу пользовательского интерфейса на экране. Определите границы и ось перетаскивания для каждого перетаскиваемого элемента, а также привязку (или свободное перетаскивание) и инициируйте взаимодействие при перетаскивании или повороте.

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

Любое отдельное событие может инициировать несколько взаимодействий, происходящих либо последовательно, либо одновременно. Инициировать любое взаимодействие после задержки.

Мастер взаимодействий

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

Событие элемента Fire

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

Интерактивные элементы пользовательского интерфейса

Все элементы пользовательского интерфейса, от кнопок до переключателей, списков и панелей вкладок, полностью интерактивны. Специальные компоненты, такие как поля ввода, предоставляют настраиваемые взаимодействия, такие как «Нажатие клавиши», и возвращают значение ввода.

Области взаимодействия

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

Элементы управления видео и аудио

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

Переменные

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

Изменение свойств элемента

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

Анимации

Экранные переходы

Добавляйте красивые естественно выглядящие переходы при навигации между экранами, такие как Slide, Fade, Pop, Turn, Flow и Flip.

Анимация

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

Анимация состояний и временной шкалы

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

Easings Manager

Применение функции плавности при анимации выбора элементов из линейного, плавного входа, плавного входа-выхода, плавного выхода, кубического Безье и Spring RK4. Отредактируйте его настройки и визуализируйте свою анимацию.

Предустановки смягчения

Создавайте собственные многоразовые предустановки смягчения и управляйте ими. Установите замедление по умолчанию для всех новых анимаций.

Предварительный просмотр

Предварительный просмотр в Интернете

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

Предварительный просмотр для мобильных устройств (приложение Proto.io Player)

Предварительный просмотр вашего мобильного проекта в приложении Proto.io Player для iOS или Android для собственного использования. Легко масштабируйте, подгоняйте к экрану или панорамируйте при предварительном просмотре проекта с размерами, отличными от размеров устройства.

Предварительный просмотр в автономном режиме

Загрузите свой прототип на свое устройство с помощью приложения Proto.io iOS или Android Player и получите к нему доступ в любом месте и в любое время.

Настраиваемые цвета предварительного просмотра

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

Горячие точки

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

Эффект клика

Показывать эффект клика при каждом нажатии. Особенно полезно сосредоточить внимание на щелчках мыши, если вы создаете фильм или запись GIF.

Сотрудничество

Делиться &

получить отзыв

Поделиться

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

Общий доступ или защита паролем

Поделитесь своим прототипом с кем угодно (получите общую ссылку) или добавьте защиту паролем для дополнительной безопасности.

Поделитесь с рецензентами

Поделитесь своим прототипом с рецензентами, чтобы предоставить доступ только избранным пользователям (требуется вход). Все платные аккаунты имеют неограниченное количество слотов для рецензентов.

Снимок или живая версия

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

Аналитика ссылок Share

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

Управление ссылкой общего доступа

Получите полный контроль над состоянием ссылки общего доступа. Приостановите ссылку общего доступа, удалите ее на неопределенный срок или измените ссылку на новый URL-адрес общего доступа для дополнительной безопасности.

Комментарии

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

Пользовательское тестирование

Получите специальную ссылку Share и используйте ее на одной из популярных платформ пользовательского тестирования (UserTesting, UserZoom, Userlytics, Lookback, UXArmy), чтобы настроить и провести пользовательские тесты для проверки вашего прототипа. Требуется учетная запись на этих платформах.

Прототип для встраивания

Легко встройте свой проект на свой веб-сайт или в блог, скопировав/вставив несколько строк кода для встраивания, сгенерированного Proto. io.

Экспорт

Экспорт в PDF

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

Экспорт в PNG

Легко экспортируйте все свои экраны в виде изображений PNG. Взаимодействуйте со своим прототипом и делайте снимки по желанию для загрузки в формате PNG.

Экспорт активов пользовательского интерфейса

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

Экспорт в HTML

Экспорт всего проекта в HTML для автономного предварительного просмотра и хранения. Все ресурсы проекта и необходимые файлы Javascript, CSS и HTML доступны для скачивания.

Интеграция рабочего процесса

Подключаемый модуль Jira

Используйте подключаемый модуль Proto.io для Jira, чтобы встраивать интерактивные прототипы в задачи Jira и обеспечивать синхронизацию всей команды.

Confluence Macro

Встраивайте свои интерактивные прототипы Proto.io в свои страницы Confluence, обеспечивая синхронизацию всей вашей команды. Поддерживайте актуальность своих прототипов с помощью простой системы обновления ссылок Proto.io.

Trello Power-Up

Встраивайте свои прототипы Proto.io в свои карты Trello с помощью Proto.io Power-up для Trello и убедитесь, что вся ваша команда остается синхронизированной. Взаимодействуйте с прототипами, даже не выходя из Trello!

Попробуйте Proto.io бесплатно в течение 15 дней.

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

Управление учетными записями

Управление доступом

Управление проектами

Управляйте настройками ваших проектов, а также тем, кто имеет к ним доступ. Организуйте свои проекты в группы (доступно в некоторых планах подписки)

Управление пользователями

Управляйте пользователями вашей учетной записи и их ролями (владелец, администратор, дизайнер и рецензент).

Индивидуальный брендинг

Загрузите свой логотип, чтобы придать интерфейсу Proto.io оттенок собственного бренда для ваших сотрудников и клиентов.

Детальная безопасность на основе ролей

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

Подписка

Полнофункциональные планы

Воспользуйтесь преимуществами всех функций proto.io во всех наших платных планах.

4 различных тарифных плана

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

Архивные проекты

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

Аккаунт парковки

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

Корпоративный план

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

Образовательные планы

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

Скидка для студентов и некоммерческих организаций

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

Бесплатный план

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

Предприятие

Безопасность корпоративного класса

Контролируйте и управляйте доступом пользователей из одного централизованного места.

Отчеты об активности

Будьте в курсе действий пользователей и управляйте своей учетной записью и доступом к проекту более эффективно.

Ограничения доступа по IP

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

Единый вход (SSO/SAML)

Плавная интеграция Proto.io с SSO для легкого доступа и безопасного управления командой/пользователями.

Ограничения доступа к домену

Ограничьте общий доступ только для членов внутренней команды вашей компании или установите настраиваемые ограничения на основе домена электронной почты.

Шифрование корпоративного класса

256-битное SSL-шифрование всех коммуникаций.

Отключить общий доступ

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

Приоритетная поддержка

Встаньте в очередь и пообщайтесь с нашей первоклассной службой поддержки.

Поддержка и документация

Документация

Большая библиотека документации о том, как максимально эффективно использовать Proto.io.

Видеоуроки

Proto.io предлагает большое количество видеоуроков, которые помогут вам начать или стать экспертом в Proto.io.

Служба поддержки

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

Proto.io Spaces

Витрина прототипов Proto.io, созданных сообществом Proto.io. Импортируйте проекты в свой аккаунт, чтобы узнать, как они были созданы.

Безопасность

256-битное шифрование

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

GDPR

Мы ценим вашу конфиденциальность и стремимся сделать наши политики понятными и прозрачными для наших пользователей. Мы всегда стремимся к тому, чтобы все наши политики соответствовали высоким стандартам Общего регламента по защите данных (GDPR).

ISO/IEC 27001

Proto.io внедрила Систему управления информационной безопасностью (ISMS) в соответствии с Международным стандартом информационной безопасности ISO/IEC 27001.

Выберите план, который лучше всего подходит для вас

3 месяца бесплатно

3 месяца бесплатно

Solo

EUR
в месяц

Счета в год

Unlimited Projects & Objects

PNG, PDF Export

908 908333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333 гости

В одиночку

Отменить в любое время

Самые популярные

Команда

евро в месяц

3

9 Плата за год

80528

Collaboration в реальном времени

Роли и разрешения

Jira & Confluence Integrations

Go Team

Отмена в любое время

Unlimed

EUR
.

908 908333333333333333333333333333333 гг. :

Без платы за пользователя

Неограниченное количество команд

Единый вход (SSO)

Расширенный контроль доступа

Go Unlimited

Отмена в любое время

Хотите попробовать перед покупкой? Наш бесплатный план предлагает 2 проекта (не более 400 объектов) и 25 МБ дискового пространства — просто для начала!

All our plans include these amazing features

2,000,000 people are already using Moqups to design their apps and websites

logos_clienti_1Client Logos Pricing Plan

Top Questions

How can we pay, and how are we выставлен счет?

Мы принимаем карты VISA, MasterCard и American Express. Мы также принимаем платежи через PayPal и банковским переводом. Выставление счетов происходит в день подписки — каждый месяц или каждый год — в зависимости от того, выбираете ли вы ежемесячную или годовую подписку.

Что произойдет, если мы захотим изменить планы?

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

Можем ли мы использовать Moqups для совместной работы?

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

Наши данные в безопасности?

Мы понимаем деликатный и частный характер проектов, которые создают наши клиенты.