Автор оригинала: FreeCodeCamp Community Member.
Линтон Е.
Интервью с Джеком Халлаханом, дизайнером, который использует реагирование
В современном море дизайнерских прототиповых инструментов реагирование может быть неразрушающим выбором.
Процесс создания прототипа должен быть быстрым и визуальным. В конце концов, цель создания прототипов заключается в том, чтобы потратить как можно меньшее время, насколько это возможно, тестирование различных вариантов дизайна, прежде чем принимать решение. Условно, кодирование (и, следовательно, реагировать) считается медленным и сложно в качестве инструмента прототипирования.
Джек Халлахан – дизайнер продуктов на базе в Лондоне, Великобритании. Он один из дизайнеров, которые знают, как использовать силу кода для оптимизации своих проектных процессов.
Интригированы вдохновляющим Джеком пост Я отправил ему по электронной почте и хотел узнать больше. Джек был достаточно хорош, чтобы поговорить со мной, который я не могу дождаться, чтобы поделиться с вами!
Вот что мы говорили о:
- Как Джек научился реагировать как дизайнер? Каковы были его самая большая борьба?
- Когда хорошее время для использования реагирования для проектирования прототипирования?
- Почему реагирует правильный инструмент? Как это сравнивается с инструментами визуального прототипирования?
- Какие инструменты связаны с реагированием, используют в своем проектировании?
- Предложения Джека для дизайнеров о том, как научиться реагировать
Заинтересованы в заслушивании истории коллега-дизайнера? Продолжай читать ?! Мои вопросы илеталивы. Ответы Джека следует регулярному типу.
На использовании реагирования в качестве инструмента дизайна прототипирования
Нахождение правильного инструмента прототипирования
Линтон: Как вы используете реагировать в вашем рабочем процессе? Какая история позади реакции в качестве инструмента прототипирования?
Джек: То, что мы боролись на некоторое время в нашей компании находятся правильный инструмент прототипирования для своего рода работы, которую мы делаем.
Многие пользовательские впечатления более или менее линейные пользовательские путешествия. Примером является бортовой поток, оформление заказа или регистрации учетной записи. Возможно, там могут быть небольшие решения, но они могут быть обработаны прототипом для «счастливого пути», а затем рассмотрение краев. Мы можем использовать такие инструменты, как у Marvel, чтобы сделать его довольно высокой верностью и проверить, что с пользователями.
Однако то, что мне нужно для прототипа, не было линейным путешествием пользователя.
Прототипирование нелинейного путешествия пользователя
Наш продукт представляет собой бизнес-инструмент, который позволяет клиентам получать данные из своего бизнеса, например, их данные о производительности команды продаж. Затем он создает визуальную приборную панель, чтобы поставить на телевизор в офисе, чтобы все могли видеть данные все время.
Люди используют его для создания визуализации данных и дизайна приборных панелей. Есть много вариантов, которые пользователь может придеться пройти, чтобы получить необходимые им данные и настроить ее правильным способом для просмотра. Это также должно обрабатывать данные. Данные входят в разные формы и размеры. Если мы разработаем новую визуализацию данных, она должна быть достаточно прочна для обработки различных типов данных, разных схем, разных чисел из одной цифры до шести цифр.
Настройка визуализации данных является примером нелинейного пути. Есть много вариантов, все из которых можно выбрать в разных комбинациях. Каждая комбинация приведет к другой визуализации. Увидев предварительный просмотр изменений графика – это визуальное подтверждение, что решения пользователя имеют предполагаемый эффект. Поскольку результат очень визуальный, более низкая верность не смогла бы тщательно подтвердить.
Не было никакого инструмента, который позволил нам прототипу полное путешествие пользователя Отказ Я также попробовал прототипирование этого с помощью Axure RP в прошлом, что позволяет какую-то условную логику, однако она вскоре вышла из-за рук.
Я отложил в сторону другие инструменты и вложил время настроить что-то в реакции, и он действительно окупился.
Для меня преимущество реагирования состоит в том, что он заполняет пробел, который мы имели в нашем инструментарии прототипирования. Этот разрыв был интерфейсами, которые позволяют вам настроить что-то в нелинейном способе, а интерфейсы, которые обрабатывают данные Отказ
Пример прототипов
Можете ли вы дать нам несколько примеров нелинейных пользователей?
Первый прототип использовался для проверки дизайна взаимодействия с пользователями, а также проверкой параметров, доступных для пользователей: не могли бы они создать тему, которая подходит для их бренда?
Настройка темы не было линейным путешествием. Это нужно было довольно визуально. Это высокая верность, потому что она ввела некоторые новые шаблоны взаимодействия, которые нам нужно было уверены в себе. Поскольку результат очень визуальный, более низкая верность не смогла бы тщательно подтвердить.
Другим примером является этот прототип виджета таблицы. Это высокая верность только в визуализации таблицы. Форма слева является более или менее в стиле. На самом деле таблица очень похожа на разметку и стиль, используемое для создания того же в нашем производственном коде. Прототип создал, чтобы выяснить эти вещи в деталях – выравнивание, прокладки, штаты на курсе, шрифты, размыты шрифта, усечение и т. Д.
Почему реагирует правильный инструмент?
Управление несколькими путями и обработкой данных являются естественная мощность кода.
Поскольку javaScript javaScript, если вы хотите внести изменения в то, как отображается данные, например, выполнение некоторого закругления или если вы хотите сортировать его, вы можете сделать это. Вы не можете сделать это в простых визуальных инструментах.
[С помощью Visual Tools] Если вы хотите создать прототип, чтобы проверить опыт выполнения чего-то, такого как сортировка таблицы, вам необходимо создать пару экранов, которые выглядят как пользователь, и надеется, что пользователь собирается нажать справа кнопка. Если они этого не сделают, вам придется сказать, упс, извините, мы не разработали этот бит, давайте просто вернемся к правильному пути.
В сравнении, Rect позволяет мне создавать более прочные прототипы для обработки данных с полным путешествием пользователя. Пользователь может изучить различные варианты, а не просто опыт онлайн-рейса, где пользователь должен нажать на правую кнопку каждый раз.
Одним из тех вещей является идея компонента, имеющего государство. Приложение знает текущее состояние, которое он входит, и вы можете сделать что-то в интерфейсе для обновления состояния. И тогда это состояние может быть передано детям. Вы можете обновить компонент здесь, нажав что-то там очень легко. И тогда вы можете вернуться и отменить его, и это не влияет на то, что вниз по линии.
Прототипы высокой точности по умолчанию
FIDELITY – это то, что вы получаете по умолчанию при прототипировании с кодом. Конечно, ваша кнопка не может быть создана, пока вы не добавите CSS, но даже элемент кнопки «Стилон» выглядит и работает как кнопка в браузере. Это выглядит реально и работает, как ожидалось, потому что это реально. Вы получаете такие вещи, как курсор: Указатель, наведите курсор и активные состояния, возможность выделять и копировать текст, реальные элементы формы, такие как поля, которые вы можете ввести и радиопередачи, которые вы можете переключить, все без необходимости рисовать их или стиль их никакого способа.
В конце концов, у нас было то, что было близко к готовому опыту. У нас была вся логика, чтобы справиться с кем-то изменять цвет или загружать логотип. И интерфейс смог быть в любом состоянии в любое время и не быть нарушенным. Таким образом, я мог бы проверить его с пользователями, не беспокоясь о том, чтобы пойти в какое-то разбитое состояние и пытаться восстановить из этого.
Сравнение с инструментами визуального прототипирования
Используете ли вы другие инструменты прототипирования? Когда вы их используете?
Да, я создаю статические эскизы более низкой точности, прежде чем двигаться, чтобы реагировать. Как правило, я бы набросил на бумаге, а также сделать несколько быстрых изображений в эскизе, возможно, даже используя инструмент, похожий на MEAL, чтобы набрать их вместе. Я могу исследовать больше идей и внести изменения быстрее в этих инструментах – они лучше для «расходящегося» дизайна, и реагировать лучше для «сходящегося» дизайна – больше не исследует, а скорее решить, проверку и итерацию.
Можете ли вы прокомментировать скорость создания прототипов в реакции по сравнению с инструментами визуального прототипирования?
React имеет довольно крутущую кривую обучения, но это может быть удивительно быстро, как только вы получите это. Однако это просто излишки для многих прототипов, и я бы не рекомендовал этому, чтобы другие инструменты могли преуспеть. Я нахожу приятным, чтобы провести дневное кодирование и учитывая точность и «надежность» прототипов, таких как выше. Я думаю, что это довольно быстро!
Рабочий процесс
Как одобрено обслуживание разработчиков после создания прототипов, которые вы создаете?
У нас здесь нет концепции передачи обслуживания. Наш рабочий процесс проворный с дизайном и разработан. Наши инженеры используются для устранения концепций дизайна во многих различных форматах, иногда статических макетах, подробных прототипах или просто эскизах. Это действительно зависит от работы. Мы разбиваем дизайн в планировке, чтобы раскрыть все, что нуждается в дальнейшем исследовании, и мы часто «соединяем» вместе, чтобы реализовать дизайн.
С помощью Devs напрямую использую ваши компоненты или напишите код с нуля или где-то между ними?
Нет, ни один из моего кода используется в нашем производственном приложении. При наращивании прототипа мне не нужно беспокоиться о ремонтопригодности, воспроизводимости или масштабируемости. Код плохого, в основном, но это делает работу, которую мне нужно сделать. Наше приложение Frontend является сложным с redux, тестами, компонентными API и т. Д. Не стоит пытаться использовать мой код для этой работы.
Инструменты, связанные с реагированием
Какие инструменты связанные с реагированием вы используете в вашем проектированном процессе?
Create-React-App
Инструмент номер один, который помог мне сойти с земли с реагированием, было React-Action Facebook. Приложение Beartup Boeterplate, которое просто готово к работе, предварительно настроен, и имеет много отличных функций.
До этого было трудно найти хороший шаблон проекта на Github, чтобы начать с. Я не знал, что было хорошо, что мне нужно, а что мне не нужно. Такие вещи, как WebPack, были полной загадкой для меня, и все равно есть. Таким образом, приложение Create-React – было так легко. У него было много великих вещей, встроенных, и она просто лучше в то время.
Другое, что приходит вместе с приложением Create-React – это быстрый способ поделиться на страницах GitHub. Поскольку все это размещено бесплатно, я могу очень легко получить URL, отправьте его своим коллегам, и они могут получить доступ к нему или отправлять его пользователям, которые могут быть на другой стороне мира.
Помимо этого, я установил такие вещи, как Lint и красивее в моем кодовом редакторе, который просто помогает держать вещи аккуратно и легко искать ошибки, а также инструмент расширения RACH CHROME.
Тахионы для стайлинга
Тахионы – это другой подход к CSS, чем то, к чему привыкли большинство людей. Это называется функциональными CSS или атомными CSS. В основном это библиотека классов, которые имеют очень специфическую цель, такую как применение одного одного стиля.
Это создает этот дизайн-как-ваше ума. Вы более или менее пишущие встроенные стили – говоря: «Я хочу, чтобы шрифт был большим, и углы были округлыми. Я хочу, чтобы это было тень, и фон, чтобы быть зеленым». Вам не нужно идти и дать ему семантическое имя, а затем пойти и писать кучу стилей, которые соответствуют этому элементу. Если вы уверены в том, как работает CSS, он просто сокращает сумму жонглирования, который вы должны сделать, чтобы получить что-то в стиле.
React Storybook
Мы используем Read DesealBook в качестве библиотеки компонентов. Это общий ресурс между дизайном и развитием. Мы продолжаем его улучшать, но я уже могу видеть, как SaleBook может быть отличным мостом для дизайнеров и фронталей, работающих над приложением React.
На данный момент, когда мы разработали компонент, который мы хотим повторно использовать, он будет добавлен в сборнику инженером. Затем мы можем обратиться к источнику книги при разработке новых интерфейсов. Мы можем проверить, какие компоненты у нас есть готовые к использованию, какие из них могут понадобиться изменения, и обнаружить, если нам нужно будет разработать и построить что-то новое.
В будущем было бы здорово иметь сборник источника истины как дизайнеров, так и для команды в области внешней стороны. Мы могли бы использовать React-SketchApp, чтобы иметь версию каждого компонента, который можно использовать дизайнерами в эскизе. У меня не было возможности правильно попробовать React-Sketchapp. Команда дизайна Airbnb выполняет удивительную работу, но мы еще не в масштабе, где это становится решающим.
На изучение реагировать как дизайнер
Как вы научились реагировать? У вас есть какой-либо предварительный опыт программирования?
Я работаю в цифровом дизайне некоторое время. Я, очевидно, стал довольно знакомым с HTML и CSS. Я уже давно строил веб-сайты и основные вещи. JavaScript – это то, с чем я часто заигрывал, но я никогда не вскочил в глубоком конце. Я использовал немного jQuery, но по большей части это была тайна.
У нас есть инновационный день каждые две недели. Любой в группе по продукту и инженерной команде может использовать это время для работы в личном проекте, который не является обычным проектом. Итак, это отличная возможность повысить и расширить мой набор навыков.
Я начал делать пару учебных пособий JavaScript через кодекадемию, чтобы привести голову вокруг некоторых оснований. И причина, по которой я смотрел на реакцию, было больше любопытства, чем что-либо. Инженеры использовали его. Я изучал некоторые из основных концепций, таких как компоненты и состояние. Я пошел в поисках нескольких учебных пособий, и я прохожу через пару небольших проектов, следуя сообщениям в блоге для инструкций. В конце концов я начал выяснить, как это работает.
Как только у меня были эти очень основные понятия, я пытался использовать их для создания реальных проектов. Это привело меня, чтобы узнать больше и стать немного более уверенным в себе.
Каковы самые большие борется, когда вы изучали, и как вы их преодолели?
Экосистема Ract Reacts является общеизвестно сложным. Для новичков может быть трудно создать безопасное место для эксперимента, без постоянного сражения инструментов сборки. Я потратил веков, пытаясь найти правильный стартовый проект, но я не знал, что я искал. Коллега указывал мне на приложение Create-React-App, когда он набирал некоторую тягу, и с этого момента я полагался на него для всех моих реагированных проектов.
Я думаю, что большинство людей время от времени наткнутся на JSX, я все еще делаю, если я переключаюсь между React и HTML для разных проектов. Я не нашел никаких трюков здесь – вам просто нужно запомнить различия, но, к счастью, не слишком много.
Мне потребовалось некоторое время, чтобы построить правильную умственную модель о том, как реагировать и подходит вместе. И тот факт, что я был почти полным новичком с JavaScript не помог. Как будто маленькие биты становятся ясными, но все еще было слишком много пробелов, чтобы увидеть большую картину. Я помню, как долго бороться, чтобы сделать дочерний компонент обновить его государство родителей.
Даже сейчас я все равно считаю себя новичком – мне придется гугл даже основные вещи. Но мне лучше знать, что Google найти ответы, и как новое знание будет соответствовать вещам, с которыми я более знаком.
При изучении новой технологии важна важная веха, зная, что для Google и какие вопросы задавать. С этого момента обучение имеет тенденцию стать самоукреплениями. Все, что вы учитесь в процессе, создаст свой новый фундамент, чтобы узнать следующую концепцию. Но чтобы добраться до этого момента, вам нужно будет узнать достаточно оснований, чтобы обойти.
Мне очень нравится изучать новый (человеческий) язык, вам нужно знать алфавиты и построить достаточно словарный запас. Затем вы можете начать смотреть слова в словаре, читать и разговаривать с людьми, из которых вы узнаете новые слова и новые выражения.
Первоначальные усилия могут показаться утомительным, но это обязательно. Хорошая новость в том, что вы узнаете это, когда вы туда доберетесь, как Джек сделал. Помощь вам преодолеть начальные препятствия, также моя главная цель при создании курса React для дизайнеров в learnreact.design .
Любые предложения для создания дизайнеров по изучению реагирования или изучения кода в целом?
Вы можете прочитать как можно больше учебников. Вы можете сделать класс или посмотреть видео, но если вы на самом деле не пытаетесь что-то построить самостоятельно, вы не будете на самом деле получить кусочки вместе в своем уме. Так что он начал нажать для меня, когда я начал строить вещи, которые были за пределами учебников.
Возьмите то, что вы сделали в уроке или классе, добавьте что-нибудь к нему. Или думать о чем-то, что может иметь некоторые сходства к тому, что вы только что изучали. Если бы пример был профилем продукта на веб-сайте электронной коммерции, вы можете попытаться создать профиль пользователя в социальной сети. Вы можете сделать это в реагировании и подумать о таких вещах, которые нужно было бы пойти в этот интерфейс. Просто начните с нуля и построить его сами. И вот где вы понимаете, что вы знаете, и что вы не знаете.
Как вы становитесь лучше, как вы узнаете больше, вы также узнаете, как решить проблемы, которые вы собираетесь встретиться легче.
Поэтому, когда вы сначала начните, вы увидите ошибки консоли, и вы понятия не имеете, что они имеют в виду или как их исправить, это очень страшно, и вам нужен кто-то, чтобы держать вашу руку. Но в какой-то момент вы перестаете напугать ошибку, и вы думаете, «Хорошо, я не знаю, что сейчас, но я знаю, что Google выяснить, как это исправить». Или, «Я примерно знаю, где в приложении это происходит, поэтому я пойду и постараюсь отладить его».
Вы узнаете, как исправить свои ошибки, и если вы хотите сделать что-то новое, вы узнаете путь, который вы можете добраться туда. Я боролся, начать с. Но настроив реальные вещи, я добрался до этого момента, где я был более способен решать свои собственные проблемы и изучить следующую вещь.
Окончательная записка (от меня, а не Джек)
Я действительно впечатлен и вдохновлен стремлением Джека, чтобы исследовать и использовать любые инструменты, которые он должен решить проблемы с дизайном под рукой. С этим мышлением он не боялся войти в новые территории и забрать новые инструменты по пути.
Лично я думаю, что каждый дизайнер должен иметь такое отношение к новым технологиям. Независимо от того, если он реагирует, блокирует или голосовые интерфейсы. Мы должны быть открыты для эксперимента с ними и будьте готовы охватить их в нашем проектированном процессе.
Как вы думаете? Дай мне знать в комментариях!
Я хотел бы поблагодарить Джека за свое время в чате со мной, и предоставляя высококачественные ответы на мои бесконечные последующие вопросы (чтобы я мог просто скопировать и вставить?)!
Не забудьте проверить мой курс реагирования, адаптированные для дизайнеров: dearraeact.design Отказ ?