Идеальные прототипы и дизайн отключения с Marvel

Sep 10, 2025

Инструкции

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

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

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

01. Создайте свой первый проект Marvel

Marvel's new design screen, indicating the locations of the buttons to create new designs. — После того, как вы выбрали свой проект, нажмите одну из двух кнопок, чтобы начать процесс проектирования

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

Выберите проект дизайна, затем дайте ему имя, затем выберите iPhone X и нажмите кнопку «Создать проекту». Отсюда (мы назовем эту панель инструментов проекта отсюда выхода), щелкните кнопку «Дизайн» на левой части или кнопку «Начать проектирование» в середине окна.

02. Дизайн прототипов с низким содержанием точности

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Вы можете использовать и адаптировать готовые компоненты, как этот экран камеры

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

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

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

03. Получить отзыв

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

Независимо от того, какова ваша основная роль в команде, она должна быть очень легко сказать: «Эй, может ли это быть идеей?», А затем продемонстрируйте это визуально. Мэлс Поп Мобильное приложение уменьшает барьер записи еще дальше, приведя эти упрощенные дизайнерские инструменты для мобильных устройств, потому что давайте посмотрим на него, идеи могут прийти к нам в страшные времена. Идеи, набросанные на бумаге, можно преобразовать в интерактивный экран Marvel с помощью камеры устройства. Дизайн должен быть демократизирован, где кто-либо может сказать, не ограничиваясь использованием сложных проектных приложений.

04. Интегрировать чудо с эскизом

После продуктивной мозговой штурма с низким содержанием идей с вашей командой вы хотите поднять первую итерацию в вашем дизайне приложение. Хотя вы можете полностью загружать экспортированные экраны PNG из любого дизайна приложения, эскиз является рекомендуемым приложением, поскольку есть выделенный плагин эскиз, который автоматизирует процесс (и даже читает дизайн, чтобы он мог проверить разработчиками позже). Поддержка Photoshop для Handoff Docight придет позже, однако Adobe не рекламирует Photoshop для дизайна пользовательского интерфейса, поскольку он создал Adobe XD.

С помощью приборной панели нажмите «Настройки» и GT; Интеграции и GT; Эскиз плагин, затем скачать плагин. После того, как вы его установите, и ваш файл дизайна открывается, нажмите Sync Выбранные или синхронизирующие все кнопки в панели Marvel (это отображается над списком слоя), чтобы начать выбирать проект Marvel для синхронизации экранов.

05. Прототип взаимодействия

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Региоты выбора перетаскивания для создания горячих точек для соединения с одного экрана на другой

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

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

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

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

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

06. Сдавая дизайн для разработчиков

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Design Handoff облегчает дизайн и разработчик работать друг с другом

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

Нажмите кнопку PLAY, затем нажмите Отключение в нижнем левом углу, чтобы открыть интерфейс Docket Handoff. Отсюда разработчики смогут нажать на элементы дизайна и осматривать отдельные стили, которые делают их то, что они есть, используя боковую панель на правой стороне (очень похоже на интерфейс инспектора в эскизе, фигем или Adobe XD). Единственная разница здесь заключается в том, что разработчики могут нажать на кнопку «Копировать», чтобы скопировать стили в виде кода в буфер обмена.

Эта статья была первоначально опубликована в номере 301 чистого журнала World Best продажа веб-дизайнеров и разработчиков. Купить Выпуск 301. или же Подписаться на Net. Отказ

Получить больше представления о итеративных прототипировании

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby дает ей разговор, узнайте, как тестирование итеративного прототипа поможет вам создать выигрышный дизайн, каждый раз при создании Нью-Йорка с 25-27 апреля 2018 года

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

К счастью, в ее разговоре в Генерация Нью-Йорка от 25-27 апреля 2018 года , Мариса Морби, начальник исследования в Clelehead, покажет вам лучший способ создавать и подтвердить новые конструкции, которые быстрее, проще, и дешевле, чем традиционный процесс проектирования, используя итеративные прототипирование и тестирование.

Generate New York проходит с 25-27 апреля 2018 года. Получить свой билет сейчас Отказ

Статьи по Теме:

10 лучших инструментов прототипирования
18 лучших инструментов каркаса
Как избежать прототипирования подводных камней

Идеальные прототипы и дизайн отключения с Marvel

01. Создайте свой первый проект Marvel

02. Дизайн прототипов с низким содержанием точности

03. Получить отзыв

04. Интегрировать чудо с эскизом

05. Прототип взаимодействия

06. Сдавая дизайн для разработчиков

Получить больше представления о итеративных прототипировании

Инструкции - Самые популярные статьи

10 способов улучшить вашу 3D анатомию

Руководство по веб-инструментам Google

Скорость лепить существо в Zbrush

Как удалить фон в Photoshop

Создать анимированный трехмерный эффект текста

Как нарисовать традиционную британскую деревенскую сцену

Создавайте идеальные сообщения во всех клиентах электронной почты

Краска эпическая сцена Нью-Йорка

Категории