Инструменты прототипирования в 2021 году — Дизайн на vc.ru

9950
просмотров

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

Оригинал данной статьи на английском: Courage Egbude: Prototyping tools in 2021

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

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

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

Adobe XD

Adobe XD — один из самых популярных инструментов среди UI/UX-дизайнеров. Данная программа функционирует в качестве универсальной платформы для создания вайрфреймов, дизайна сайтов, мобильных приложений, голосовых интерфейсов и т.д. Adobe XD позволяет командам коллективно работать между платформами в режиме реального времени, получая ценные комментарии и отзывы напрямую от клиентов.

Figma

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

Большинство дизайнеров уже знакомы с данным UI-инструментом. Несмотря на то, что Figma считается программой по проектированию UX, она также имеет программное обеспечение для быстрого прототипирования. Дополнительные функции включают такие плагины, как Figmotion и Autoflow, а также Arc Tool и Vector Networks.

Webflow

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

Sketch

Sketch — одна из наиболее широко используемых программ для создания пользовательского интерфейса и прототипирования среди миллионов программистов по всему миру. Это одно из лучших современных приложений для разработки всех форм пользовательского интерфейса. Платформа напоминает усложненную и широко поддерживаемую версию Figma. Однако программа доступна только для iOS.

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

InVision

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

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

Axure RP

Axure RP сочетает эффективные инструменты проектирования, SVG-импорт, интеграцию Sketch и Adobe XD с прототипированием мирового уровня. Вы можете легко обмениваться прототипами Axure RP и монтажными областями Adobe XD, быстро рисовать и собирать входные данные поверх экранов, проверять макет, получать CSS-фрагменты и загружать ресурсы, а также конвертировать статические изображения в динамические прототипы Axure Cloud.

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

Framer

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

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

Origami Studio

Origami Studio — приложение для macOS, созданное и используемое Facebook. Существует также аналог мобильного приложения, который позволяет просматривать прототипы на реальном устройстве.

Facebook применяет данный инструмент прототипирования на ежедневной основе. В 2013 году Origami Studio стал доступен всему миру. Изначально он работал с Quartz Composer, но ни для кого не секрет, что эта часть Xcode-среды — не лучший способ прототипирования. Поэтому в прошлом году Facebook предоставил Origami Studio — предыдущий прототип инструмента, который работает с их собственной средой. Его производительность значительно повысилась благодаря этому шагу, но, к сожалению, он по-прежнему доступен только для пользователей Mac.

Marvel

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

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

JustInMind

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

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

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

1. UXPin объединяет дизайн, прототипирование и совместную работу в одном месте на Windows, Mac или в любом браузере.

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

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

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

5. Mockflow — простое программное обеспечение для разработки вайрфреймов и совместной работы над UI-дизайном путем быстрого создания эскизов макетов интерфейсов.

6. Slickplan — система веб-прототипов, которая позволяет легко определять папки, страницы и структуры ссылок с помощью интерфейса перетаскивания.

7. Proto позволяет создавать полностью интерактивные высокоточные прототипы.

8. Moqups — оптимизированное веб-приложение, которое помогает создавать вайрфреймы, макеты, диаграммы и прототипы в режиме реального времени.

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

10. Gliffy — программное обеспечение для построения диаграмм и рисования, которое позволяет перетаскивать фигуры или использовать шаблоны и темы для прототипирования.

11. HotGloo — UI-программа для создания вайрфреймов и прототипирования. Используется для разработки интерфейсов для цифровых, мобильных и переносимых устройств.

12. Mockingbird — UI-инструменты для создания макетов с помощью элементов перетаскивания на страницу с возможностью менять размеры.

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

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

Заказать создание прототипа

Апрель 13, 201835 «Нравится»

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

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

Как создать прототип?

Мы расскажем о главных способах прототипирования. Некоторые из них являются частями одного и того же производственного процесса. Например, на ранних этапах прототип изготавливают 3D-печатью, поскольку для нее не нужна оснастка, вроде форм для литья. Затем, когда устройство приближается финальной версии по мере разработки, его (корпус в частности) отливают малыми партиями, для чего уже применяют литье в силиконовые формы.

3D-печать

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

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

Используя 3D-печать для прототипирования, вы проверите собираемость устройств, которые состоят из множества деталей и модулей. Этот способ также подходит для тестирования эргономики, поскольку точно воспроизводит форму объекта. Материалы для 3D-печати разнятся от полимеров до металла.

3D-фрезерование

Тоже способ быстрого прототипирования. Можно сказать, что это 3D-печать наоборот — объект не создается послойно, а вытачивается из цельной массы. Выбор между 3D-печатью и 3D-фрезеровкой зависит от особенностей разрабатываемого устройства. Для более цельных структур с минимальным количеством внутренних полостей подходит 3D-фрезеровка, в обратном случае применяется 3D-печать.

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

Литье пластмасс в силиконовую форму

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

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

Формовка пластика

Подходит для создания небольших партий прототипов. По сути, этот метод по принципу обратный литью в формы. Сначала создается матрица по проекту изделия, которая затем вытягивает нагретый лист пластика в форме изделия. формовка пластика работает с такими его видами: акрил, полистирол, АБС, ПВХ, ПЭТ. Этим способом целесообразнее произвести крупногабаритную деталь простой формы, чем, например, создавать ее из фрагментов, напечатанных на 3D-принтере.

Изготовление прототипов методом обработки металла

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

Литье металла в мягкие формы

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

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

Заказать изготовление прототипа в Qvarta?

Студия работает с большинством способов прототипирования. Например с гибкой металла — при создании UV lamp, а с 3Д печатью — в рации Seavoice. Рация Seavoice имела мастер-модель в чехле из полупрозрачного пластика и это — тоже прототип. А еще есть прототипы, которые пока нельзя показывать в связи с контрактами студии. Qvarta постоянно делает прототипы, мы знаем, зачем они нужны и какими способами их изготовить. Поэтому пишите, звоните и приходите к нам, чтобы заказать создание прототипа в Qvarta!

4 типа прототипирования

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

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

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

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

1. Быстрое (одноразовое) прототипирование
2. Эволюционное прототипирование
3. Инкрементное прототипирование
4. Экстремальное прототипирование

1. Быстрое (одноразовое) прототипирование

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

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

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

2. Эволюционное прототипирование

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

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

3. Инкрементное прототипирование

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

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

4. Экстремальное прототипирование

Экстремальное прототипирование более распространено при разработке веб-приложений. Веб-приложения состоят из:

• уровня представления
  • Отображается в браузере пользователя
• Уровень служб
  • Услуги связи
  • Бизнес-логика
  • Аутентификация и авторизация
  • Прочие серверные услуги

Экстремальное прототипирование проводится в три этапа:

1. Создание каркасов HTML для имитации слоя представления. Эти веб-страницы имеют ограниченную интерактивность. Они достаточно полны, чтобы показать пользователям различные пути пользователя через приложение.
2. Преобразуйте каркасы в полнофункциональные HTML-страницы, привязав их к моделируемому уровню служб.
3. Код и реализовать уровень сервисов.

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

Прототипирование по методу AndPlus

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

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

8 Наиболее распространенные методы и лучшие практики

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

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

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

Содержание:

• Что такое прототипирование?
• Зачем нужны прототипы?
• Типы прототипирования
• 8 методов прототипирования и примеры
• Как правильно выбрать методы прототипирования?
• Инструменты для прототипирования приложений, которые нельзя пропустить
• Передовой опыт прототипирования приложений

Что такое прототипирование?

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

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

Давайте сначала рассмотрим прототип приложения:

Зачем нужны прототипы?

Как новичок в дизайне приложений, вы можете спросить: «Почему прототипирование так важно?» Вот 5 причин, по которым вам следует создавать прототипы, прежде чем приступать к разработке своих концепций:

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

Процесс создания прототипа приложения стал важным этапом проектирования и разработки продукта.

Типы прототипирования

Когда дело доходит до прототипирования программного обеспечения, обычно существует два типа прототипирования:

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

Ознакомьтесь с преимуществами и недостатками:

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

8 методов прототипирования и примеры

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

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

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

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

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

2.Раскадровки — оценивайте путь пользователя для улучшения UX

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

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

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

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

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

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

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

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

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

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

4.Ролевая игра — исследуйте сценарии различных ролей

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

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

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

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

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

5. Вайрфреймы — создавайте низкоточные цифровые прототипы

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

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

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

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

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

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

Как видите, макеты приложений получают больше цветов и элементов, что делает их похожими на конечный продукт.

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

7. Прототипы высокой точности — протестируйте все возможные детали и взаимодействия

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

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

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

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

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

8.Wizard of OZ — разработка модели приложения для дальнейшего тестирования функций

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

Как правильно выбрать методы прототипирования?

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

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

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

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

• Sketch — один из самых популярных инструментов для создания прототипов для пользователей Mac. Благодаря множеству интеллектуальных инструментов редактирования, цветовых инструментов и многих других инструментов дизайна Sketch помогает вам с легкостью создавать реалистичные прототипы приложений. Одним из недостатков является отсутствие функций, которые помогут вам создавать реалистичные взаимодействия.

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

• Mockplus — инструмент для создания прототипов «все в одном», который помогает создавать каркасы, мокапы и прототипы за считанные минуты с широким набором готовых компонентов пользовательского интерфейса, значков, шаблонов и взаимодействий. Все члены вашей команды, такие как дизайнеры, разработчики и менеджеры по продуктам, могут работать на одной странице и лучше сотрудничать в Интернете.

Лучшие практики создания прототипов приложений

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

содержание и взаимодействие. Чем больше реального контента вы добавили, тем выше эффективность оценки ваших идей.

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

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

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

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

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

Подведение итогов

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

This entry was posted in Популярное