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

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

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

01. Студия оригами

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

Origami – инструмент только для Mac, разработанный на Facebook (Изображение предоставлено: Facebook)

Разработанная на Facebook как инструмент для создания и проектирования продуктов, Origami доступна для пользователей Mac бесплатно. Вы должны быть зарегистрированным разработчиком Apple, чтобы начать работу с установленными Xcode и Quartz Composer, но как только вы перепрыгнете через необходимые циклы, вы обнаружите, что начать создавать с Origami легко, благодаря обширной онлайн-документации, учебные пособия и готовые прототипы.

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

02. Интернет-поток

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

Webflow предоставляет вам два бесплатных проекта, чтобы получить представление о его возможностях. (Изображение предоставлено: Webflow)

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

С помощью визуальной CMS вы можете создавать динамические, отзывчивые прототипы без необходимости написания кода, а также поставляется с библиотекой шаблонов и компонентов, которые упрощают создание ваших проектов. Прототипы могут быть подключены к более чем 400 службам, включая Slack, Google Drive и MailChimp, и, если вы застряли, есть множество онлайн-документации, которая поможет вам.

03. Vectr

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

Вот инструмент векторного дизайна, который отлично подходит для прототипирования и сбора отзывов (Изображение предоставлено Vectr)

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

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

04. Джастинминд

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

Бесплатный инструмент для создания каркасов Justinmind дает вам множество возможностей для игры (Изображение предоставлено Justinmind)

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

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

05. Фигма

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

Бесплатный вариант от Figma великолепен для совместного создания (Изображение предоставлено: Figm)

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

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

06. InVision

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

InVision упрощает превращение плоских конструкций в интерактивные прототипы (Изображение предоставлено: Webflow)

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

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

Используйте Adobe XD для создания микро-взаимодействий
Используйте Adobe XD для создания микро-взаимодействий

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

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

Теперь с растущим количеством взаимодействий в проектах – таких как анимация, жесты и голосовое управление – трудно найти инструмент, который может реализовать все эти возможности создания прототипов и при этом сохранять простоту. Кодирование является одним из способов создания этих взаимодействий, но это отнимает много времени. К счастью, Adobe XD пришла на помощь, выпустив обновление своего инструмента для создания прототипов, включающего удобную функцию под названием «Auto Animate». На сегодняшний день это самое большое дополнение к мощному набору инструментов.

Идея здесь проста: Auto Animate позволяет дизайнерам создавать интерактивные прототипы с иммерсивной анимацией, просто дублируя артборд или изменяя свойства объекта. Этими свойствами может быть что угодно, например, размеры, положение X и Y, непрозрачность, вращение. Ранее Adobe XD предлагал базовые взаимодействия, такие как скольжение, толчок и растворение.

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

В этой статье я расскажу, как создавать простые микро анимации с помощью этой новой функции Auto Animate в Adobe XD. Прежде чем мы начнем, необходимо рассмотреть несколько вещей о том, как объекты должны обрабатываться для автоматической анимации:

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

Внести изменения в состояние с помощью Auto Animate

- Используйте Adobe XD для создания микро-взаимодействий

Это может показаться простым, но вам нужно начать с двух форм (Изображение предоставлено: Вамси Батчу)

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

На начальном артборде нарисуйте фигуру – в нашем примере это зеленый прямоугольник размером 500 на 200 пикселей. Дублируйте этот артборд и выберите прямоугольник на втором артборде. Нам нужно изменить свойства прямоугольника, увеличив ширину до 1000 и высоту до 500. Вы также можете выполнить дальнейшие изменения, например, изменить непрозрачность до 50% или сделать цвет розовым.

Теперь нажмите на вкладку Prototype в верхнем левом углу. Выберите первый артборд и свяжите его, используя стрелку, со вторым артбордом. Когда вы сделаете это, справа от приложения появится вкладка «Взаимодействие», с помощью которой можно установить такие параметры, как Триггер, Действие, Назначение и Облегчение. Каждый параметр может быть настроен в соответствии с вашими потребностями. Существует пять типов триггеров – включая Tap, Drag и Timed – которые запускают анимацию.

Установите для вкладки «Действие» значение по умолчанию «Автоматическая анимация», и поскольку в нашем примере имеется только две монтажные области, установите вкладку «Назначение» на монтажную панель 2. Кроме того, можно выбрать несколько временных плавных переходов, которые можно выбрать по времени. Нажмите на значок воспроизведения в правом верхнем углу, чтобы увидеть, как Auto Animate выполняет свою магию и анимирует прямоугольник. Если необходимо изменить более двух элементов одновременно, убедитесь, что имена этих элементов совпадают в обеих монтажных областях. Это сообщит приложению, что эти два элемента должны быть анимированы.

Развернуть карты

- Используйте Adobe XD для создания микро-взаимодействий

Расширение карт – еще одно простое взаимодействие для создания (Изображение предоставлено: Вамси Батчу)

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

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

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

Чтобы создать анимацию, перейдите к первому артборду и нажмите на вкладку «Прототип» в верхнем левом углу. Теперь нажмите на ссылку View History на первом артборде и перетащите ссылку на прототип на второй артборд. Это делает ссылку Просмотр истории триггером. Измените свойства на вкладке «Взаимодействие» справа, установив для триггера «Касание» и «Действие» на «Автоматическая анимация». Проверьте это, чтобы увидеть плавную анимацию ящика. Внесите изменения в параметр «Облегчение» на вкладке «Взаимодействие», если анимация выглядит недостаточно плавной.

Сделать анимацию перетаскивания

- Используйте Adobe XD для создания микро-взаимодействий

Простой пример анимации перетаскивания, где сфера создается для просмотра, хотя она сжимает блок текста (Изображение предоставлено: Вамси Батчу)

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

Не так много осталось сделать для второго артборда. Просто уменьшите зазор между каждым из дублированных прямоугольников, чтобы он чувствовал себя сжатым. Как и в первом артборде, поместите круг поверх первого прямоугольника. Последний шаг – создать прототип, нажав на вкладку «Прототип» в верхнем левом углу. Теперь нажмите на круг от первого артборда и сделайте его триггером. Как и в предыдущих примерах, измените свойства на вкладке «Взаимодействие» справа, установив для триггера значение «Перетаскивание» и «Действие» на «Автоматическая анимация». Когда вы нажмете кнопку воспроизведения, чтобы просмотреть анимацию, вы сможете увидеть плавное действие, как будто блок сжимается сферой.

Создание бесконечной анимации загрузчика

- Используйте Adobe XD для создания микро-взаимодействий

Auto Animate можно настроить для работы с несколькими артбордами, что идеально подходит для создания бесконечной анимации загрузчика. (Изображение предоставлено: Вамси Батчу)

Одна из лучших функций Adobe XD заключается в том, что Auto Animate можно применять между несколькими монтажными областями. Чтобы сделать такую ​​анимацию, вам просто нужно внести простые изменения в одно из свойств.

Давайте создадим анимацию загрузки, в которой батарея наполняется. Ключ к получению этого совершенства – правильно изготовить первый артборд. Первый артборд имеет заполнитель батареи, как показано на рисунке. Он может быть создан с использованием прямоугольных форм. Для фактической батареи внутри заполнителя первый артборд должен быть пустым (что соответствует 0%). Дублируйте этот артборд и создайте зеленый прямоугольник высотой 50 пикселей, который идеально вписывается в заполнитель. Создайте аналогичные дубликаты, чтобы увеличить высоту батареи в третьем артборде на 50 пикселей и так далее. Продолжайте, пока артборд не будет полностью заполнен.

Теперь нам нужно создать бесконечный цикл между этими монтажными областями, чтобы он создавал анимацию синхронной загрузки. Для этого перейдите в режим Prototype, нажмите на первый артборд и перетащите стрелку прототипа на второй артборд. Измените свойства на панели «Взаимодействие», установив для «Триггера» значение «Время», а затем установите для «Задержки» значение 0 секунд, которое будет анимировано для второй монтажной области при предварительном просмотре. Выполните те же изменения для всех артбордов, связав второе с третьим и т. Д., Прежде чем окончательно связать последний артборд с первым. Мы успешно соединили все артборды, чтобы сформировать бесконечный цикл. Измените параметры Easing и Duration согласно вашему требованию, чтобы сделать загрузку более плавной.

Хотя существует множество вариантов, которые можно попробовать с помощью Adobe XD, текущие возможности инструмента ограничены и все еще регулярно обновляются группой разработчиков. Таким образом, по сравнению с такими инструментами, как Principle, вы можете почувствовать, что XD имеет ограниченный набор инструментов. Тем не менее, Adobe проделала отличную работу, сделав инструмент простым в освоении и использовании. Создание сложных взаимодействий может занять некоторое время и усилия, но они полностью достижимы с помощью функции автоматической анимации XD. Ключ должен понять основы перемещения объектов, изменения их размера, добавления слоев и использования триггеров.

Do NOT follow this link or you will be banned from the site!
WeCreativez WhatsApp Support
Наша служба поддержки клиентов готова ответить на ваши вопросы.
Привет, чем я могу помочь?