4 мифы лопнул о высокоточных прототипов


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

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

Миф 1. “Мне нужно быть разработчиком, чтобы прототип”

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

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

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

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

Нажмите и удерживайте > вращать и масштабировать объект
функция экспорта WhileTap(): переопределить {
возвращение {
whileTap: {
поворот: 90,
масштаб: 0.75
}
}
}
Анимировать объект, вращая его на 360° в 2С
экспорт функция Animate(): переопределить {
возвращение {
анимация: { поворот: 360 },
переход: { Продолжительность: 2 }
}
}
Перетаскивание, прокрутка, панорамирование, анимировать… вы называете его. Скачать полный комплект (созданные Вениамин Ден Боер)

Реальность 1: Как дизайнер, вы должны изучить основы и знаю достаточно реагировать и JavaScript для использования инструмента достаточно. Вся тяжелая работа была сделана в багетной Апис.

Реальность 2: Если вы боретесь, используйте это как возможность пообщаться с разработчиками. Я лично прослушивал все “в пределах одного метра-радиус” разработчиков, которые вокруг меня и я знаю, что этот перекрестного опыления мыслей приводит к усилению эмпатии.

МИФ 2. “Прототипирование принимает навсегда”

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

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

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

Скачать файл

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

МИФ 3. “Мне нужно создавать все с нуля”

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

Я создал доказательство концепции ниже (я в комнатных растениях 🌱прямо сейчас), используя Atlaskit , который демонстрирует, как вы можете сделать именно это. Чтобы сделать его более “реальным”, вы также сможете передавать данные и определить логику с экрана на экран.

Передачи данных

Получить данные из 1 компонент и установить его в другой.

Определение логики

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

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

Миф 4. “Привет-Fi прототипирование означает моушн-дизайн”

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

Творческий кодирования

Я большой поклонник всех вещей обработка/Р5. Вот пример системы частиц с помощью флокирования алгоритм. Скачать файл

Голосовой интерфейс

Демо, используя голосовой ввод для управления интерфейсом. Построенный с annyang. Сказав “Привет”, чтобы выявить 😎 и “прощай”, чтобы скрыть. Скачать файл

Датчики движения

Желая использовать движения в качестве входных данных для вашего устройства? Используя блестящие Форекс из багетной магазине, вы можете нажать на устройства акселерометр и гироскоп. Скачать файл (спасибо Эддисон Шульц файла)

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

Приступая к работе

Ну, надеюсь, что поможет пролить свет и сделать свой прототипирования сигналы мозга все загорелся 🔥! Если вы заинтересованы, чтобы запустить прототип с багетной х, вы можете скачать → установить его framer.com. Ниже приведены некоторые материалы, которые я считаю полезными.

Реагировать И JavaScript 101

Узнать Багетной

Документация

Сообщество

Счастливый прототипирования ✌️


4 мифы лопнул о высокоточных прототипов была впервые опубликована в коллективной УБ на средних, где люди продолжают разговор, выделение и реагирование на эту историю.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.