Чем отличается мокап от прототипа
Каркас — это визуальное представление интерфейса низкого качества.
Он должен ясно показать:
— основные группы содержания (что?);
— структура информации (где?);
— описание и основная визуализация пользователя — соединяют интерфейсом с взаимодействием (как?).
Каркасы — не просто бессмысленные наборы серых полей, хотя они могут точно походить на это. Рассмотрите их как магистраль Вашего проекта и помните, что Каркасы должны содержать визуальное представление каждой важной части конечного продукта интерфейса.
«Представление» — решающий термин здесь, который поможет Вам найти правильную точность – баланс скорости при построении интерфейса. Вы не можете вдаваться в слишком много подробностей на странице интерфейса. Но с другой стороны Вы должны создать основательное Представление заключительного дизайна, которое не пропустит важной части.
Вы устанавливаете путь для целого проекта и для людей, которые работают с Вами (разработчики, визуальные проектировщики, писатели, менеджеры проектов — им всем нужны хорошо созданные Каркасы). На самом деле Вы создаете карту города. Каждая улица представлена на карте, но она значительно упрощена. Вы можете ощутить архитектуру города, если Вы читаете карту, но Вы не можете чувствовать ее красоту.
Каркасы должны быть созданы быстро, и почти все время должно быть проведено в коммуникации с членами команды и обдумывании. Разработка Каркаса должна быть действительно быстрой.
Визуализация должна быть эстетичной, но значительно упрощеннной. Цвета «Черный, серый, белый» являются типичными цветами, которые Вы будете использовать в работе (Вы можете добавить синий, чтобы определить связи).
Если что-то из элементов занимает слишком много времени, чтобы его подготовить (например, выбор символов, загрузка изображения), Вы должны представить его упрощенным способом (например, заменители — пересеченные прямоугольники для изображений, плюс соответствующее описание). Мы склонны называть результаты низкого качества каркасов (лоу-фай).
Помните — хорошо созданный каркас сообщает дизайн совершенно прозрачным способом и устанавливает путь для целой команды разработки и ключевого пользователя.
2. Когда лучше использовать Каркасы (WIREFRAMES)?
Каркасы обычно используются в качестве документации проекта. Так как они статичны и фиксируют взаимодействие с интерфейсом в отдельном моменте своевременно, они должны сопровождаться написанными словами (от коротких примечаний, объясняющих взаимодействие, при необходимости, до сложной технической документации).
Однако, они могли бы также использоваться менее формальным способом. Так как они быстры и просты в форме, они служат отличным инструментом в качестве четких эскизов для внутренней передачи информации в команде. Если разработчики спрашивают, как что-то должно быть сделано — ответ может быть предоставлен, как быстро создаваемый Каркас.
UXPin помогает запустить действительно быструю разработку циклов (выпуски каждые несколько дней). Мы используем Каркасы, чтобы быстро визуализировать задачи (даже маленькие!). Это устраняет недоразумения и действительно дешево.
Каркасы едва используются в качестве материала тестирования, несмотря на то, что они могут помочь собирать обратную связь на начальном этапе, партизанском стиле, исследовании, где Вы не заботитесь о методологической чистоте, а скорее пытаетесь получить некоторые быстрые идеи.
Каркасы, помещенные в контекст целых историй проектов, могут быть удивительно эффективными и, хотя в последние годы они получили некоторые негативные отзывы в прессе, все еще необходимы, как начальная стадия сложных проектов.
ПРОТОТИП (Prototype)
1. Что такое прототип?
Прототип, часто путаемый с каркасом, является близким представлением к высококачественному представлению конечного продукта, моделирует взаимодействие пользовательского интерфейса.
Это должно позволить пользователю:
– испытать содержание интерфейса и взаимодействия с ним;
– протестировать основные взаимодействия, в некотором роде подобные конечному продукту.
Прототип — это моделирование заключительного взаимодействия между пользователем и интерфейсом. Оно не может точно походить на конечный продукт, но должно быть весьма подобно (это — определенно не сероватая, поверхностная вещь). Взаимодействия должны быть смоделированы с осторожностью и иметь значительное подобие заключительному опыту. Взаимозависимость между интерфейсом и механизмами бэкэнда часто опускается, чтобы уменьшить затраты и ускорить циклы разработки.
2. Когда использовать Прототип (Prototype)
Прототипы используются в полном потенциале в пользовательском тестировании. Такое моделирование финальных взаимодействий формирует мощную обратную связь, чтобы проверить удобство использования интерфейса, прежде чем разработка на самом деле начнется.
Прототипы обычно не лучшая документация, которую Вы можете вообразить, так как они вынуждают «читателя» приложить некоторые усилия, чтобы понять интерфейс. С другой стороны, прототип — самая привлекательная форма проектной документации, поскольку интерфейс материальный и понятный.
Остерегайтесь, такое прототипирование — скорее дорогая и длительная по времени форма дизайн-разработки проекта. Я предложил бы использовать скорее более простые варианты прототипов, которые могут быть снова использованы в разработке (да, это означает, что Вы должны кодировать некоторый HTML, CSS и вероятно самостоятельно). Это особенно эффективно при относительно простых проектах.
Сделанный правильно Прототип и объединенный с пользователем, тестированием, прототипированием, может дорого стоить в разработке.
МОКАП (mock-up)
1. Что такое Мокап?
Мокап — середина к высокому качеству, статичное, дизайн представление. Очень часто Мокап является визуальным дизайн-эскизом, или даже актуальным визуальным дизайном.
Хорошо созданный Мокап:
– представляет структуру информации, визуализирует содержание и демонстрирует основную функциональность статическим способом.
– поощряет людей актуально рассматривать визуальную сторону проекта.
Мокап часто путаются с Каркасами, из-за имен некоторых компаний-разработчиков программного обеспечения.
2. Когда использовать Mockup.
Мокапы особенно полезны, если Вы хотите получить раннее заключение сделки от заинтересованной стороны.
Благодаря их визуальному характеру, Мокапы не имеют сопротивления низкой точной представленности компонентов и намного более быстры в разработке, чем Прототипы.
Они — хорошие собиратели отзывов и, если размещать в контексте целой истории дизайна, могут сформировать отличную главу документации.
Итог (Mock-up, Prototype, Wireframes)
Прежде чем Вы выберете средство коммуникации в процессе проектирования, Вы должны:
– определите проблему, которую Вы пытаетесь решить,
– узнайте свою целевую группу,
– взгляните на то, что конкуренты сделали в этой области,
– определите полные потребности и требования продукта.
Это — минимум. Теперь подумайте, какой способ будет самым подходящим для Вас. Рассмотрите свой продукт и команду. Что будет работать лучше всего на всех Вас? Формализованная документация, или неофициальные быстрые эскизы и обсуждения лицом к лицу? У Вас есть время и деньги для твердого пользовательского исследования, или Вы просто собираетесь посетить локальное кафе и вручить несколько эскизов Вашим предполагаемым исследователям?
Вы можете, конечно, создать все из них и … во многих случаях, Вы будете правы! Не бойтесь этого шага. Они все целесообразны и сделанные правильно, могут приблизить Вас к большому проекту.
Чем отличается мокап от прототипа
- Wireframe vs Mockup vs Prototype & Selection of Prototyping Tools
- Мокап, вайрфрейм, прототип и скетч: ху из ху — Сибирикс
- Вайрфреймы, прототипы и мокапы – в чем разница? — Оди
- Вайрфреймы, прототипы и мокапы — Проекторат
- Руководство по вайрфреймам для начинающих
Чем отличается мокап от прототипа
Мокап, вайрфрейм, прототип и скетч: ху из ху
Стыдный вопрос, на который нет однозначного ответа
В чем разница между скетчем, прототипом, вайрфреймом и мокапом? Прошаренные дизайнеры знают, что это разные сущности, предназначенные для решения разных задач. Уже неплохо. Но если копнуть глубже и спросить, в чем особенность каждого инструмента, получится столько же определений, сколько и отвечающих дизайнеров. Кто-то допускает существование цветных прототипов, кто-то признает только черно-белые. У кого-то мокапы могут быть интерактивными, у кого-то — нет. Одни рисуют скетчи исключительно от руки, а другие могут и в редакторе их набросать.
В общем, в определениях — разброд и шатание. Поэтому мы изучили источники, выделили основные версии и рассказали, как понимают скетч, мокап, вайрфрейм и прототип большинство интернетов и мы.
Скетч (Sketch)
Что такое. Набросок от руки. Карандашом или пером, на доске или салфетке — не так важно. Дешево, быстро, сердито. Нужен для того, чтобы зафиксировать и не потерять идею. Часто используется на брейнштормах.
В скетче можно наметить какие-то детали интерфейса или нарисовать креативную фишку сайта. Но не нужно увлекаться и начинать прорисовывать детали — иначе вы рискуете нарваться на эффект утенка.
Показывать скетч можно не всякому заказчику. Некоторые просто не поймут, что вы пытаетесь до них донести. Вы их только смутите и спровоцируете возражения по поводу и без. В таком случае лучше сразу перейти к вайрфрейму или прототипу.
Зачем нужен. Для быстрой передачи идеи из головы дизайнеры в головы окружающих. Когда дело касается визуальных фишек, намного проще сделать набросок карандашом, чем объяснять идею на пальцах.
Скетч сайта «Молочной культуры»
Вайрфрейм (Wireframe)
Что такое. Черно-белый подробный план страницы сайта. Здесь намечается расположение элементов: кнопок, изображений, текстов.
Вайрфрейм можно сравнить с планом здания — на него будут ориентироваться при постройке (в нашем случае — при разработке сайта или приложения), но жить в нем невозможно. Никаких реальных функций сайта он не выполняет. Результаты взаимодействий, фишки, анимации нужно описывать дополнительно в комментариях.
Зачем нужен. Чтобы определить, где какой контент будет находится. Вайрфрейм и комментарии к нему можно использовать для составления ТЗ.
Пример с сайта mockupbuilder.com
Мокап (Mockup или mock-up)
Что такое. Красивый вариант вайрфрейма. Тут уже появляются цвета, подбираются изображения, продумывается типографика. Получается красивая картинка приложения или сайта.
Есть версия, что более привычный синоним мокапа — макет. Но это не точно — помним, что у каждого свой вариант определения 🙂
Зачем нужен. Чтобы создать стиль и настроение проекта. Продумать визуальные мелочи и согласовать их с заказчиком.
Что выдает dribbble.com по запросу «mockup»
Прототип (Prototype)
Что такое. Интерактивный вариант вайрфрейма. Тоже черно-белый. Но умеет намного больше. Повторяя аналогию с домом, прототип — это модель из картона и палок. Убогая, но действующая: если куда-то кликнуть, что-то откроется, как на настоящем сайте.
На прототипе уже не нужны пометки, что и как работает. Чтобы понять это, нужно просто кликнуть по месту, к которому у вас вопрос.
Зачем нужен. Чтобы согласовывать с заказчиком расположение блоков и кнопок и проводить юзабилити-тестирования. А еще по прототипу удобнее, чем по вайрфрейму, писать ТЗ.
Прототип сайта НАФИ
Нет такого закона, что для успеха проекта нужно использовать все перечисленные инструменты сразу. Наоборот, для экономии ресурсов стоит выбрать 1-2 и пользоваться ими. Например, мы не тратим время на вайрфрейм — сразу переходим к разработке более понятного заказчику прототипа. И иногда, если уверены, что заказчик поймет, рисуем скетчи.
И напоследок — экспресс-тест для закрепления «Это что за инструмент?»
- Кейсы
- Highload и стартапы
- Корпоративный сегмент
- Тренды
- Разработка сайтов
- Креатив и анимация
- Фишки для ecommerce
- Интеграция с ERP
- Продукты
- Планировщик SingularityApp
- Курс «Управление Digital-проектами»
- Scrumban
- CRM для Scrumban
- Planning Poker
- Хуижин
- HelpDesk
- Журнал
- Управление digital-проектами
- Разработка и технологии
- Внутренняя кухня
- Кейсы: процесс
- Ланч-тайм
- Видео
- Хэндбук заказчика
Чем отличаются Прототип Мокап и Вайрфрейм?
Строго говоря, мокап — это изображение носителя (смартфон, ноутбук, рекламный стенд, книга, футболка, что угодно) для вставки в него изображения.
Вайрфрейм — это эскиз/набросок/черновик интерфейса. Схематичное изображение, короче.
Прототип — это функциональный эскиз, то есть, кликабельный. Например, юзабилити-тесты можно делать именно на прототипах.
Какого чёрта мокапами и прототипами стали называть эскизы я хз, началось это лет 8 назад. Если тебе понадобится найти красивенький айфон, в который на место экрана ты вставишь интерфейс своего приложения, то ты будешь искать по запросу «iphone mockup».
Если обратишься к википедии по запросу «прототип», то увидишь определение:
Прототип (инженерия) — работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании.
Дальше можешь зайти на вики на страницу Быстрое прототипирование и увидеть определение:
технология быстрого «макетирования», быстрого создания опытных образцов или работающей модели системы для демонстрации заказчику или проверки возможности реализации. Прототип позже уточняется для получения конечного продукта.
И только пресловутый вайрфрейм является тем самым эскизом интерфейса, который многие ошибочно называют прототипом или мокапом.