От прототипа к дизайну: 5 преображений проектов

От прототипа к дизайну:
5 преображений проектов

Насколько прототип может отличаться от дизайн-макета и какие изменения стоит вносить на этапе прототипирования

Под прототипом будем понимать черно-белый чертеж будущего сайта. Хотя понятий, связанных с прототипированием, намного больше: есть мокапы (цветные), есть вайрфреймы (которые просто серые), есть прототипы (которые серые плюс кликабельные). Главные плюсы прототипов — наглядность и относительная дешевизна. Можно потыкать мышкой свой будущий проект, еще до дизайна, верстки и программирования.

Прототип — черно-белый чертеж будущего сайта

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

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

Прототип — план, который помогает понять:

• что есть на странице,
• зачем оно там,
• там ли вообще находится,
• и как оно работает.

Ждать от него максимальной схожести с готовым проектом — всё равно что примерять бумажную выкройку вместо платья: форма правильная, но вид пока совсем не тот. Да и в бумаге по улице не пощеголяешь особенно 🙂

Бумажная выкройка на манекене. Фото из Интернета

Но при взгляде на черно-белый чертеж проекта визуальные элементы сложно игнорировать. Шрифты, размеры и расположение блоков бросаются в глаза и отвлекают от главного — структуры. Страх из-за неопределённости (каким будет дизайн ведь пока непонятно) нашёптывает клиенту в ушко: шрифт какой-то обычный, верстка обычная… А ты же хотел не по сетке, блоки маленькие, а у нас все фотки с фотосессий крупные. И так далее. Появляются справедливые вопросы — можно ли это поменять?!

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

Опасение 1: стандартная сетка

Вы прошерстили Awwwards и вдохновились проектами с нестандартной вёрсткой: это поможет выделиться на фоне унылых конкурентов. Но на прототипе вы видите чёткую линейную структуру. Волноваться не стоит — расскажите о своих визуальных предпочтениях перед следующим этапом (мудбордом — обсуждением сайтов, которые вам нравятся и подходят проекту по стилистике). А пока лучше сосредоточиться на структуре страницы.

Взгляните на проект Lakk&Roll: на прототипе мы показали ключевые блоки, необходимость которых выявили на аналитике. На мудборде выяснилось, что заказчику нравится мозаичная структура на сайтах и пастельные оттенки — в итоге получился макет, значительно отличающийся от первоначальной вёрстки страницы.

Прототип, часть мудборда и итоговый макет для проекта Lakk&Roll

Вывод: вёрстка на дизайн-макете может серьёзно отличаться от вёрстки на прототипе.

Опасение 2: стандартные цвета и шрифты

Вам нравятся сайты с тёмным фоном или крупной типографикой — они кажутся более выразительными и запоминающимися. Особенно когда в отрасли так не принято. А перед вами прототип в градациях серого со стандартными шрифтами — как так?!

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

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

Прототип, кусочек мудборда и итоговый макет для проекта Senetsy

Вывод: со шрифтами и цветом не играем — прототипы в градациях серого со стандартными шрифтами более продуктивны.

Опасение 3: стандартные блоки

Как правило в прототипах используются прямоугольные формы блоков (за редким исключением — если какие-то формы можно подсмотреть в вашем фирменном стиле).

Слева — проект сети клиник 3Z, где в брендбуке заказчика мы обнаружили очень интересные формы, которые сразу разместили на прототипе. Справа — проект Mr.Diamond, для которого мы создавали концепцию с нуля.

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

Так, в проекте «ИнтерактивЦентр» на этапе мудборда выяснилось, что заказчику нравятся округлые формы. Мы учли предпочтения заказчика и на макете сохранили структуру из прототипа, но добавили ярких цветов и стилеобразующие элементы — круги разных диаметров.

Прототип, фрагмент мудборда и итоговый макет для проекта «ИнтерактивЦентр»

Вывод: форма блоков от прототипа к макету может меняться в зависимости от дизайн-концепции.

Опасение 4: расположение блоков

Какие блоки поставить выше, какие — ниже, а какие спрятать в спойлер? Это зависит от приоритета информации. Дешевле и быстрее всего менять порядок блоков именно на этапе прототипирования. На живом проекте это будет уже несколько сложнее (хотя в нашем портфолио есть проекты, в которых порядок блоков можно задавать из админ-панели сайта, или менять этот порядок по результатам A-B-тестов). Тем не менее, продумать приоритеты на прототипе — правильная стратегия.

В проекте ГрандКапитал клиент попросил поменять приоритетность блоков — опыт и новости индустрии поднялись на уровень вверх, а блок о клиентах опустился ниже.

Вывод: на этапе прототипирования проще и дешевле менять расположение блоков (и добавлять/убирать их).

Опасение 5: контент-импотент

На прототипе тексты приблизительные: где-то «рыбный» текст, где-то описания со старого сайта. Такой контент (заголовки, описания, иногда — иконки) не влияет на структуру самой страницы, и его можно безболезненно поменять даже после запуска сайта.

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

Какой контент есть смысл готовить перед этапом прототипирования

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

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

В проекте Парацельс на этапе дизайна благодаря правкам на этапе прототипирования появляются более корректные формулировки на дизайне:

Вывод: контент на прототипе — как правило, приблизительный, и его можно заменить из админ-панели сайта (если только он радикально не влияет на структуру страниц). Готовьте контент загодя!

А если кратко?

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

На этапе прототипирования визуал — второстепенное. Основное внимание уделяют структуре и функциям проекта.

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

На прототипах с шрифтами и цветом элементов не играем. Типографика и цветовые предпочтения выбираются на следующем этапе.

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

На прототипе можно менять приоритетность блоков. На следующих этапах это сложнее и затратнее.

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

Как создать прототип сайта: пошаговая инструкция

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

Вас еще может заинтересовать отдельная статья про создание прототипов интерфейсов — добавляйте в закладки.

Содержание:

1. Что такое прототип сайта
2. Для чего нужен прототип сайта заказчику
3. Задачи, которые решает прототип сайта для команды разработчиков
4. Виды и примеры прототипов сайта
5. Как создать прототип сайта
6. Рекомендация по созданию прототипов
7. Что еще почитать о системе дизайна сайтов
8. Вывод и рекомендация

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

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в
Telegram
|
ВКонтакте,
Instagram,

Facebook

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

Пример современного прототипа сайта в Principle и ProtoPie:

Principle и ProtoPie — это мощные инструменты для продуктового дизайна (UX/UI) на Windows/macOS. Они идеальны, когда требуется проработать уникальную концепцию приложения или сайта с учетом всех нюансов поведения 👇

Для чего нужен прототип сайта заказчику

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

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

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

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

Чем прототип помогает в проектах:

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

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

Задачи, которые решает прототип сайта для команды разработчиков

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

Виды и примеры прототипов сайта — способ вырастить сайт постепенно

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

1. Эскиз на бумаге (скетч) — хорош для поиска конструкции

Эскиз — это схематичная разметка блоков, из которых состоит сайт. Создать такой прототип можно на бумаге ручкой/карандашом или в онлайн-инструменте (например, в Balsamiq). На данном этапе очень важно поработать руками.

«Работайте руками: сидение перед компьютером днями напролет убивает нас и нашу работу: нам необходимо чувствовать, каково это создавать что-то своими руками.»

«Отойдите от компьютера: компьютер может помочь в редактировании идей, но блокирует генерирование творческого потока — вы начинаете сами себя исправлять, еще толком не сформулировав идею.»

Остин Клеон, 10 уроков творческого самовыражения

Чем хорош: такой уровень детализации хорош для поиска компоновок и согласования крупным планом разделов сайта (карта сайта). Он не сковывает лишними деталями и помогает разместить ценную информацию.

Пример наброска информационной архитектуры (IA)

2. Статичный прототип с низкой детализацией (LoFi Wireframe) — превращаем идею в документ для согласования объема работ

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

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

Пример LoFi Wireframe.

3. Статичный прототип с высокой детализацией (HiFi) — фаза активной работы с содержанием (текст, иллюстрации, фото)

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

Чем хорош: фокусирует на сообщениях и расстановке акцентов на существенных для истории моментах. 

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

Пример HiFi Wireframe.

4. Интерактивный прототип с высокой детализацией (Interactive Hi-Fi)

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

Чем хорош: когда ставки высоки, помогает снять все вопросы перед запуском веб-разработки и упрощает тестирование и приемку сайта.

5. HTML-прототип в Webflow или Tilda

Альтернативный подход к созданию прототипов. HTML-прототипы ценят клиенты, которые нацелены на быстрый запуск, рост и доработку проекта прямо на живом. Такой прототип естестественным образом превращается в полноценный сайт.

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

Как создать прототип сайта — пошаговая инструкция по созданию прототипа

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

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

Шаг 1. Скетч сайта (Sketching Low-Fi Wireframes)

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

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

Скетчинг и разметка информационной архитектуры страницы.

Шаг 2. Цифруем скетч и добавляем деталей (High Fidelity Wireframe)

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

Совет по созданию: применяйте тональную шкалу. Тональная шкалаперебралась в Дизайн сайтов и интерфейсов из классического рисунка.

Классические макеты (wireframes) тоже создают в черно-белом цвете или оттенках светлого и темного. Такой подход помогает настроиться на выращивание дизайна слой за слоем: поиск композиции и проработка визуальных весов, затем заливка контента, добавление минимальных цветов и затем глубокая стилизация.

Дополнительно:

• Как нарисовать тональную шкалу: https://drawingpractice.ru/osnovy-risovaniya/kak-narisovat-tonalnuyu-shkalu/, https://urokiakvareli.ru/risovanie-tona-kak-narisovat-tonalnuu-skalu
• Что такое Wireframe?: https://ux-journal.ru/bazovyj-kurs-ux-chto-takoe-wireframe.html
• Образцы структурных схем страниц (wireframes) от ведущих UX-дизайнеров: https://ux-journal.ru/obraztsy-strukturnyh-shem-stranits-wireframes-ot-vedushhih-ux-dizajnerov.html
• Пять визуальных принципов, которые помогут направить внимание пользователя в нужное русло: https://ux-journal.ru/bazovyj-kurs-ux-vizualnyj-ves-kontrast-glubina-razmer.html
• Искусство формы: https://www. ozon.ru/context/detail/id/3987196/

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

Шаг 3. Прорабатываем стиль и образы с учетом метафоры и ценностей бренда (High Fidelity Wireframe)

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

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

Стилизуем прототип фирменным стилем.

Типовые элементы — Wireframe-Kit для прототипирования

Wireframe kit — это готовый набор упрощенных графических элементов для прототипирования сайта или интерфейса.

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

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

Старт c готовым Wireframe Kit и доработки под свои цели и задачи. Вводим в Google Images/Яндекс.Картинки «Low-fidelity wireframing kit for Figma» и «Figma Wireframe Kit», качаем и пробуем.

Рекомендация по созданию прототипов

Принципы фундаментальные. В них вы найдете концепцию Jobs-to-be-Done, элементы атомарного дизайна, фундамент для дизайн-системы, связь с психологией восприятия.

1. Первый экран: сделайте привлекательный заголовок, полезный текст под заголовком и две кнопки действия (основная — заказать, вспомогательная — изучать). В заголовке заявите о вашей фишке, а в тексте под заголовком раскройте принцип работы.
2. Черно-белый: не отвлекайтесь на цвета. Тональной шкалы достаточно, чтобы нарисовать картину любой сложности.
3. Навигация и сценарий: проверьте плавность сценария и достижимость бизнес-целей. Хороший прототип годится для юзабилити-тестирования на целевой аудитории.
4. Сначала история и только потом сетка: сетка — инструмент организации контента и способ сделать аккуратно. Начните с рассказа о продукте и компании.
5. Тексты и контент: используйте максимально приближенные к реальности тексты и фото. Если на старте не хватает текстов, временно позаимствуйте их у конкурентов.
6. Компоненты и привычки: в прототипах старайтесь не изобретать новые элементы управления, используйте популярные и знакомые образы.
7. Гармония и чутье: редактируйте композиции и историю на уровне прототипа, иначе на поздних фазах дизайна придется возвращаться и переделывать заново.
8. Документ, план и объем работ: прототип — серьезный документ. С ним вы уже можете вместе с программистами оценить объем работ.
9. Заметки на полях: заметки помогают зафиксировать идеи по взаимодействию с пользователем, ценный бизнес-контекст. Старайтесь не держать проектную информацию в памяти — «сохраняйтесь» почаще.

Что еще почитать о системе дизайна сайтов

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

Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия | Гарретт Джесс. Подробнее →

Вывод и рекомендация

Прототип крайне полезен на практике. С ним вы уверены, что создаете то, что действительно полезно клиентам. Если вам требуется больше практики в создании прототипов, вы можете попробовать себя в роли веб-дизайнера (UX/UI) можете на платформе Breezzly. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, Principle, ProtoPie) и на всех видах популярных у клиентов проектов.

Руководство по дизайну прототипов: процесс проектирования UX

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

Как и зачем создавать прототипы часто остается загадкой. Спросите многих дизайнеров, и они склонят головы, как растерянные щенки. «Что ты имеешь в виду? Просто сделай это», — скажут они. И правда: все мы умеем создавать прототипы. Мы просто не знаем , как мы знаем .

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

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

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

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

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

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

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

Тим Браун, генеральный директор и президент IDEO

Прототипы можно рассматривать как механизм демонстрации функциональности.

Практическое объяснение того, как что-то работает, имеет ряд ценных преимуществ, в том числе:

• Воплощение в жизнь – Перед созданием каких-либо прототипов продукт полностью концептуален! Какое-то время это нормально, но в конечном итоге это должно стать чем-то, что заинтересованные стороны и пользователи в конечном итоге поймут и оценят. Прототип — это первый шаг на пути от концепции к реальности.
• Решить проблему — Иногда у нас возникает проектная задача без решения. Как навык, прототипирование UX — отличный способ визуализировать проблему и быстро представить решения. Если это не сработает, выбросьте прототип и попробуйте снова.
• Итерация — Прототипирование происходит поэтапно, но результат один и тот же: развитие ваших идей. Каждая новая итерация, от эскизов до Hi-Fi, предлагает множество вариантов поведения и функций для тестирования. А с большим количеством данных мы можем выполнять итерации быстрее и эффективнее.
• Обнаружение непреднамеренных сценариев — Как только что-то становится видимым, у нас есть ограничения нашего продукта, доступные для изучения, что также обеспечивает лучший контекст того, что должно быть там… и что не должно!
• Обнаружение проблем с юзабилити — Именно здесь живут многие дизайнеры: как только у продукта появляется какой-либо прототип, проблемы с юзабилити внезапно становятся легко обнаруживаемыми и устраняемыми.
• Презентация – Прототипы на любой стадии являются стандартом для презентации. Независимо от того, тестируете ли вы версию страницы или представляете продукт клиенту, прототип в той или иной форме должен присутствовать. А если нет, то можно поспорить, что кто-нибудь спросит, где он и почему его не включили.

Как запустить процесс UX прототипа

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

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

1. Каковы цели проекта?

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

2. Какие конкурентоспособные продукты люди используют в настоящее время?

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

3. Кто является аудиторией? Каковы их цели?

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

4. Что это за продукт и для чего он (устройство) предназначен?

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

5. Есть ли визуальные прецеденты для подражания?

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

6. Каковы результаты?

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

Нарисуйте свои прототипы

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

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

01 | Потоки пользователей — Следуйте идентификации потоков пользователей. Посмотрите, как пользователи достигают своих целей и как они взаимодействуют в системе.

02 | Информационные объекты — Каждый пользовательский поток будет отображать некоторые пользовательские входы и выходы. Определите, что они из себя представляют, как они связаны с поведением и ожиданиями пользователей, в какие взаимодействия они вовлечены и как они работают.

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

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

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

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

Переход к цифровым технологиям (прототипы от низкой до высокой точности)

Когда будет достаточно полных эскизов, чтобы двигаться дальше, пришло время их оцифровать. Будь то Adobe XD, Sketch, Framer, Flinto или что-то еще, создание цифровых версий эскизов — это первый шаг к их формализации. Таким образом, акцент смещается с творческого добавления необходимых элементов на организацию активов и структуры в дизайне.

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

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

С каждым новым проводом и итерацией задавайте два основных вопроса: Учитывает ли эта страница свое предназначение в более широком пользовательском потоке? И имеет ли взаимодействие смысл (имеется в виду, понял ли пользователь, как выполнить действие)? Мы очень часто задаем эти вопросы. Чем больше мы делаем, тем больше вероятность того, что каждая новая итерация будет приближать прототипы к окончательному варианту.

Цифровые прототипы также гораздо проще тестировать, поскольку они не только более разборчивы, но и быстрее воспроизводятся и итерируются в массовом порядке. Именно здесь инструменты прототипирования UX, такие как InVision и Proto.io, очень удобны для создания интерактивных прототипов. Когда это кликабельно, становится легко проверить удобство использования различных аспектов, от отдельных кнопок до целых потоков.

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

С помощью некоторых инженерных ноу-хау или более мощных инструментов, таких как Justinmind или Axure, также можно создавать функциональные прототипы, которые интерактивны, а не просто щелкают мышью. Пользователи могут тестировать такие вещи, как заполнение форм, выполнение простых или сложных задач и фактическое использование приложения так, как оно предназначено для использования, без его фактической сборки. Дизайнеры, прошедшие подготовку в области взаимодействия человека с компьютером (HCI), в том числе многие дизайнеры Toptal, регулярно создают и тестируют функциональные прототипы.

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

Прототип с назначением

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

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

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

Понимание основ

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

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

• Что такое кликабельный прототип?

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

• Что такое рабочий прототип?

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

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

Здание

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

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

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

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

Шаблоны

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

Шаблоны

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

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

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

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

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

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

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

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

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

Компонент видео

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

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

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

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

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

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

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

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

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

Компонент веб-просмотра

Вставьте пользовательскую внешнюю 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-битного шифрования.

This entry was posted in Продвижение