Содержание
- 01. Создайте свой первый проект Marvel.
- 02. Создавайте прототипы с низкой точностью.
- 03. Получать обратную связь
- 04. Интегрируйте Marvel с Sketch
- 05. Взаимодействия прототипов
- 06. Передача дизайна разработчикам
- Получите больше информации об итеративном прототипировании
Благодаря более короткой кривой обучения, чем приложение InVision, и новым инструментам передачи дизайна для корпоративных команд, сейчас самое время изучить, как Marvel может быть быстрым и легким решением для создания прототипов веб-приложений и мобильных приложений в командах.
Marvel помогает командам превратить свои проекты (созданные в Sketch или в Marvel) от набросков к первоначальной и проверенной концепции. Его инструменты для совместной работы побуждают заинтересованные стороны не только высказывать свое мнение, но и участвовать в рабочем процессе проектирования.
01. Создайте свой первый проект Marvel.
Зарегистрируйтесь в Marvel, чтобы начать, где требуются только ваше имя и адрес электронной почты. Выберите дизайн-проект или прототип проекта. Прототип проекта - это когда вы загружаете уже созданные вами экраны (обычно в Sketch). Дизайн-проект - это когда вы начинаете с нуля и хотите использовать собственные инструменты дизайна Marvel для создания макета с низкой точностью (это отличный вариант для быстрой итерации и мозгового штурма).
Выберите «Дизайн-проект», дайте ему имя, затем выберите iPhone X и нажмите кнопку «Создать проект». Отсюда (далее мы будем называть это приборной панелью проекта) нажмите кнопку «Дизайн» слева или кнопку «Начать разработку» в середине окна.
02. Создавайте прототипы с низкой точностью.
Наша основная цель здесь - быстро визуализировать наши идеи, не тратя слишком много времени на беспокойство о том, как будет выглядеть окончательный результат. Отсюда мы можем создавать формы, изображения, текст, готовые компоненты, такие как панели вкладок, и даже целые полноэкранные компоненты, такие как этот экран камеры (который был выбран на левой боковой панели и изменен с помощью правой боковая панель).
Рисовать фигуры, создавать текстовые слои и вносить простые визуальные изменения довольно легко даже для не дизайнера, хотя опытным дизайнерам понравится, как быстро они смогут сформулировать идею и нажать кнопку «Добавить в проект».
Хотя вы не можете ожидать векторного рисования, маскирования и других сложных инструментов дизайна, этот интерфейс, тем не менее, покажется вам довольно знакомым, если вы пользователь Sketch, Adobe XD или Figma (на самом деле, мы обсудим импорт высокоточных дизайнов из Sketch. в настоящее время). Что вы можете ожидать, так это масштабирование, выравнивание, группировка, основные инструменты визуального дизайна, элементы управления мышью, такие как перетаскивание, изменение размера и поворот, а также несколько удобных сочетаний клавиш.
03. Получать обратную связь
Однако Marvel не только для дизайнеров. Хотя может потребоваться, чтобы дизайнер создал окончательный дизайн в стандартном для отрасли дизайнерском приложении, идеи должны исходить (и поступают) от самых разных заинтересованных сторон (менеджеров, клиентов, разработчиков и т. Д.).
Независимо от того, какова ваша основная роль в команде, должно быть очень легко сказать: «Эй, это может быть идея?», А затем продемонстрировать это визуально. Мобильное приложение Marvel POP еще больше снижает входной барьер, перенося эти упрощенные инструменты дизайна на мобильные устройства, потому что, давайте посмотрим правде в глаза, идеи могут приходить к нам в самые необычные моменты. Нарисованные на бумаге идеи можно преобразовать в интерактивный экран Marvel с помощью камеры устройства. Дизайн должен быть демократичным, чтобы любой мог сказать свое слово, не ограничиваясь использованием сложных приложений для проектирования.
04. Интегрируйте Marvel с Sketch
После продуктивного мозгового штурма с вашей командой идей с низким уровнем достоверности вы захотите смоделировать первую итерацию в выбранном вами дизайнерском приложении. Хотя вы можете полностью загружать экспортированные экраны PNG из любого приложения для дизайна, Sketch является рекомендуемым приложением, потому что есть специальный плагин Sketch, который автоматизирует процесс (и даже подготавливает дизайн, чтобы разработчики могли позже его проверить). Поддержка Photoshop для передачи дизайна появится позже, однако Adobe больше не рекламирует Photoshop для дизайна пользовательского интерфейса, поскольку она создала Adobe XD.
На панели управления нажмите «Настройки»> «Интеграция»> «Плагин Sketch», затем «Загрузить плагин». После его установки и открытия файла дизайна нажмите кнопки «Синхронизировать выбранное» или «Синхронизировать все» на панели Marvel (она отображается над списком слоев), чтобы начать выбор проекта Marvel для синхронизации экранов.
05. Взаимодействия прототипов
Но, конечно, мы не можем тестировать прототипы, если мы не добавили к ним никаких взаимодействий, так что давайте сделаем это сейчас. Вернувшись к панели управления Marvel, где вы увидите экраны, которые мы синхронизировали, нажмите «Просмотр» на любом из экранов, чтобы перейти в режим экрана.
Отсюда мы по-прежнему можем перемещаться по экранам, используя стрелки влево и вправо с обеих сторон окна, нажимать Таймер, чтобы Marvel циклически перемещался по экранам через определенное количество секунд (полезно для презентаций!), Или нажимать Нет комментариев, чтобы добавить ваш первый комментарий или аннотацию на экране.
Вероятно, первое, что вы заметите, - это кнопки «Фиксированный верхний колонтитул» и «Фиксированный нижний колонтитул», которые появляются в верхнем левом и нижнем левом углах экрана соответственно. Эти кнопки можно перетаскивать, и их также можно перемещать, чтобы отметить обрезанную область раздела заголовка, которая должна оставаться прикрепленной к верхней части прокручиваемого окна просмотра. Вы также можете использовать текстовые поля в правом верхнем и правом нижнем углу, чтобы указать это значение вручную.
Но как на самом деле связать один экран с другим? Просто: с помощью мыши перетащите и выберите область на экране, которая должна быть связана с другим экраном (это называется «горячей точкой»). Как только вы это сделаете, в нижней части окна появится интерфейс, который позволит вам настроить, куда будет перенаправлен пользователь, любой переход, который происходит во время взаимодействия, и какой жест требуется для активации этого взаимодействия (касание, смахивание и т. Д. ).
И, конечно же, мы можем использовать эти инструменты для создания прототипов даже на мокапах с низкой точностью. Фактически, вам рекомендуется делать это, все время используя функции комментирования, чтобы обсуждать и повторять.
06. Передача дизайна разработчикам
Когда ваша команда сохранит полную уверенность в окончательном дизайне, подтвержденном с помощью инструментов комментирования и пользовательского тестирования, пора передать его разработчикам, которые затем смогут проверить и запрограммировать. Важно помнить, что дизайнер еще не «готов», когда дизайн передан, и что дизайнеры и разработчики всегда должны общаться в гармонии, чтобы контролировать разработку до ее завершения. У разработчика также могут возникнуть некоторые вопросы, поэтому функции комментирования должны быть очень активными.
Нажмите кнопку Play, затем щелкните Handoff в нижнем левом углу, чтобы открыть интерфейс передачи дизайна. Отсюда разработчики смогут нажимать на элементы дизайна и проверять отдельные стили, которые делают их такими, какие они есть, используя боковую панель с правой стороны (очень похожую на интерфейс инспектора в Sketch, Figma или Adobe XD). Единственная разница в том, что разработчики могут нажать кнопку «Копировать», чтобы скопировать стили в виде кода в буфер обмена.
Эта статья изначально была опубликована в 301-м номере журнала net, самого популярного в мире журнала для веб-дизайнеров и разработчиков. Купить Выпуск 301 или же подписаться на сеть.
Получите больше информации об итеративном прототипировании
Когда большинству компаний требуется создать новый веб-дизайн, процесс обычно начинается с подачи идей, затем переходит к дизайну, затем разработке и затем запускается. Но что, если это не сработает? Это много времени, усилий и денег, которые нужно потратить только на то, чтобы узнать, что идея плохо работает.
К счастью, в ее разговоре на Создать Нью-Йорк с 25 по 27 апреля 2018 г.Мариса Морби, руководитель отдела исследований Clearhead, покажет вам лучший способ создания и проверки новых проектов, который быстрее, проще и дешевле, чем традиционный процесс проектирования с использованием итеративного прототипирования и тестирования.
Generate New York проходит с 25 по 27 апреля 2018 года. Получите свой билет сейчас.
