ідеальні прототипи та розвідні конструкції з Marvel

Sep 13, 2025

Як

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

Завдяки більш короткій кривій навчання, ніж додаткова програма Invision та новими інструментами передачі проектів для компаній-команд, немає кращого часу для вивчення того, як Marvel може бути швидким та легким рішенням для прототипів веб-та мобільних додатків у командах.

Marvel допомагає командам брати їхні конструкції (зроблені як у самому ескізі, так і в Marvel) від намальованої ідеї до початкової до перевірки концепції. Його спільні інструменти заохочують зацікавлених сторін не тільки мати свої кажуть, але бути частиною дизайнерського робочого процесу.

01. Створіть свій перший проект Marvel

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

Зареєструйтеся на Marvel, щоб почати, де потрібні лише ваше ім'я та адресу електронної пошти. Виберіть конструктивний проект, або проект прототипу. Проект прототипу - це коли ви завантажуєте екрани, які ви вже розроблені (зазвичай на ескізі). Дизайнерський проект - коли ви починаєте з нуля, і ви хочете використовувати власні інструменти для розробки Marvel, щоб створити макет з низьким рівнем вірності (це дивовижний варіант для швидкого ітерації та мозкового штурму).

Виберіть проект Design, потім дайте йому ім'я, а потім виберіть 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's Поп Мобільне додаток зменшує бар'єр входу ще далі, привівши ці спрощені інструменти для дизайну до мобільних пристроїв, оскільки, доведеться до нас, ідеї можуть прийти до нас у найдивніших разів. Ідеї, намальовані на папері, можуть бути перетворені на інтерактивний екран Marvel за допомогою камери пристрою. Дизайн повинен бути демократизованим, де хтось може мати сказати, не обмежуючись використанням складних дизайнерських додатків.

04. Інтеграція Marvel з ескізом

Після продуктивного мозкового штурму з низькою вірності ідеї з вашою командою ви хочете отримати першу ітерацію у вашому дизайнерському додатку. Поки ви можете повністю завантажувати експортні екрани PNG з будь-якого дизайнерського додатка, ескіз - це рекомендоване додаток, оскільки є виділений плагін ескізу, який автоматизує процес (і навіть готує дизайн, щоб він міг бути перевірено розробниками). Підтримка Photoshop для Design Offoff відбудеться пізніше, однак Adobe не нахиляє Photoshop для дизайну користувальницького інтерфейсу, оскільки він створив Adobe XD.

З інформаційної панелі натисніть Налаштування & gt; Інтеграції & gt; Плагін ескізу, а потім завантажте плагін. Після того, як ви його встановили, відкриваєте файл дизайну, натисніть кнопку Sync, вибрану або синхронізуючі кнопки в панелі Marvel (це з'являється над списком Layer), щоб почати вибрати проект 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, де ви побачите екрани, які ми синхронізовані, натисніть кнопку Переглянути будь-який з екранів, щоб ввести режим екрана.

Звідси ми можемо переміщатися по екрана за допомогою лівих та правих стрілок з обох сторін вікна, натисніть таймер, щоб мати дивний цикл через екрани після певної кількості секунд (корисно для презентацій!), Або натисніть не коментарі, щоб додати Ваш перший коментар або анотація на екрані.

Напевно, перше, що ви помітите, це фіксований заголовок та фіксовані колонтитули, які з'являються поблизу верхнього лівого та нижнього лівого кутів екрана відповідно. Ці кнопки тягнеться, і вони також можуть бути переміщені, щоб позначити регіон відрізання заголовка, який повинен залишатися закріпленим у верхній частині прокручуваного перегляду. Ви також можете використовувати текстові поля у верхньому правому та нижньому правому куті, щоб вказати це значення вручну.

Але як ми насправді пов'язуємо один екран до іншого? Простий: за допомогою миші, перетягніть регіон на екрані, який повинен посилатися на інший екран (це називається "гарячою точкою"). Після того, як ви зробите це, інтерфейс з'явиться у нижній частині вікна, який дозволяє налаштовувати, де користувач переходить, будь-який перехід, який відбувається під час взаємодії, і який жест повинен активувати цю взаємодію (торкніться, проведіть пальцем тощо. ).

І, звичайно, ми можемо використовувати ці інструменти прототипів навіть за макетами з низькою вірності. Фактично, рекомендується, щоб ви зробили, всі під час використання функцій коментарів для обговорення та повторного життя.

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. — Регулювання дизайну полегшує дизайн та розробник працювати один з одним

Коли ваша команда зберігає повну довіру до фінального дизайну, підтверджено за допомогою інструментів для коментаря та користувацького тестування, настав час передавати її розробникам, які потім можуть перевірити та код. Важливо пам'ятати, що дизайнер не "зроблений" після того, як конструкція передається, і що дизайнери та розробники повинні завжди спілкуватися в гармонії нагляду за розвитком до його завершення. Розробник також може мати деякі питання, тому ці функції коментарів все ще повинні бути дуже активними.

Натисніть кнопку PLAY, а потім натисніть Недоступний у нижньому лівому куті, щоб відкрити інтерфейс передачі проектування. Звідси розробники зможуть натиснути на елементи дизайну та перевіряти окремі стилі, які роблять їх, що вони використовують бічну панель з правої сторони (як інтерфейс інспектора в ескізі, фігМА або Adobe XD). Єдина різниця тут полягає в тому, що розробники можуть натиснути кнопку копіювання, щоб скопіювати стилі як код у буфер обміну.

Ця стаття була опублікована у випуску 301 чистих, найпопулярніших журналів у світі для веб-дизайнерів та розробників. Купувати випуск 301 або Підписатися на мережу .

Отримати більше розуміння ітераційного прототипування

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

Коли більшість компаній повинні створити новий веб-дизайн, процес, як правило, починається з ідей качки, рухається до дизайну, а потім розвивається, а потім йде жити. Але що, якщо він не працює? Це дуже багато часу, зусиль, а гроші витрачати, щоб дізнатись, що ідея виконується погано.

На щастя, в її розмови Створіть Нью-Йорк з 25-27 квітня 2018 року , Маріса Морбі, керівник дослідження на Clearhead покаже вам кращий спосіб створення та перевірки нових конструкцій, які є швидшими, простішими та менш дорогими, ніж традиційний процес дизайну з використанням ітераційного прототипування та тестування.

Створити Нью-Йорк відбувається з 25-27 квітня 2018 року. Отримайте квиток зараз .

Пов'язані статті:

10 найпопулярніших інструментів прототипів
18 кращих інструментів Wireframe
Як уникнути прототипів підводних каменів

ідеальні прототипи та розвідні конструкції з Marvel

01. Створіть свій перший проект Marvel

02. Протектопи з низьким рівнем вірності

03. Отримувати зворотній зв'язок

04. Інтеграція Marvel з ескізом

05. Прототип взаємодії

06. Розробка дизайну розробникам

Отримати більше розуміння ітераційного прототипування

Як - Найпопулярніші статті

Початок роботи з активами в дизайнері Affinity

Як використовувати смарт-шари в Photoshop

Як ілюструвати очі тварин

Фарба брикету води в маслах

Майстер інструмент моста

Як малювати чудові мініатюри

Вступ до тестування інтерфейсу

Зробити композит у Photoshop

Категорії