Использование мощности React в создании прототипов

1656650434 ispolzovanie moshhnosti react v sozdanii prototipov

Линтон Есть

Интервью с Джеком Халлаханом, дизайнером, использующим React

08Oq80eS4XQHZdq4MrbXpuqFtpHhsDzjNzFb

В современном море инструментов для создания прототипов дизайна React может быть неинтуитивным выбором.

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

Джек Халлахан – дизайнер продуктов из Лондона, Великобритания. Он один из дизайнеров, знающих, как использовать мощность кода для оптимизации процессов проектирования.

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

Вот о чем мы говорили:

  • Как Джек научился React как дизайнер? Каковы были его самые большие трудности?
  • Когда лучше всего использовать React для прототипирования дизайна?
  • Почему React является правильным инструментом? Как это сравнится с инструментами визуального прототипирования?
  • Какие связанные с инструментами React он использует в своем процессе проектирования?
  • Предложения Джека для дизайнеров, как научиться React

Хотите услышать историю коллеги-дизайнера? Продолжайте читать? Мои вопросы ятализированный. Дальше ответы Джека обычным шрифтом.

Об использовании React в качестве инструмента создания прототипов дизайна

Поиск правильного инструмента для создания прототипов

Линтон: Как вы используете React в своем рабочем процессе? Какова история использования React в качестве инструмента создания прототипов?

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

Многие пользователи являются более или менее линейным путешествием пользователя. Примером является процесс адаптации, оформления заказа или регистрации учетной записи. На этом пути могут быть небольшие решения, но можно решить, создав прототип для «счастливого пути», а затем рассмотрев краевые случаи. Мы можем использовать такие инструменты как Marvel, чтобы сделать это достаточно высокоточным и проверить это с пользователями.

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

Создание прототипа нелинейного путешествия пользователя

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

Люди используют его для разработки визуализаций данных и проектирования информационных панелей. Есть много вариантов, через которые пользователю, возможно, придется пройти, чтобы получить нужные данные и настроить их правильно для просмотра. Он также должен обрабатывать данные. Данные бывают разных форм и размеров. Если мы разрабатываем новую визуализацию данных, она должна быть достаточно надежной, чтобы обрабатывать разные типы данных, разные схемы, разные числа от одной до шести цифр.

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

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

Я отложил другие инструменты и вложил свое время в создание чего-нибудь в React, и это действительно окупилось.

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

Примеры прототипов

Можете ли вы привести несколько примеров нелинейных путей пользователя?

Первый прототип использовался для тестирования дизайна взаимодействия с пользователями, а также для проверки опций, доступных пользователям: смогут ли они создать тему, которая подойдет их бренду?

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

BXVH-kAeHZ60dBkFoPlyklzSBFRZKEQzuw-E

Другим примером является прототип виджета таблицы. Высокая точность заключается только в визуализации таблицы. Форма слева более или менее не стилизована. На самом деле таблица очень похожа на разметку и стиль, которые используются для создания того же в нашем рабочем коде. Прототип был создан, чтобы подробно определить эти вещи – выравнивание, отступления, состояния наведения курсора, размеры шрифтов, усечение и т.д.

Cf0pV3GmhGMaKzCSt2Co2gws1HwWuMETr95g

Почему React является правильным инструментом?

Управление несколькими способами и обработка данных являются естественной силой кода.

Поскольку React — это JavaScript, если вы хотите изменить способ отображения данных, например, скруглить или отсортировать их, вы можете это сделать. Вы не можете это сделать с помощью простых визуальных инструментов.

[With visual tools] Если вы хотите создать прототип, чтобы проверить опыт выполнения чего-либо, например, сортировки таблицы, вам нужно создать несколько экранов, которые будут выглядеть как поток пользователя, и надеяться, что пользователь нажмет нужную кнопку. Если нет, вам придется сказать: «Ой, извините, мы не разрабатывали эту часть, давайте просто вернемся на верный путь».

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

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

Высокоточные прототипы по умолчанию

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

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

Сравнение с инструментами визуального прототипирования

Вы используете другие инструменты для прототипирования? Когда вы их используете?

Да, я создаю статические эскизы с меньшей точностью, прежде чем перейти на React. Обычно я делал эскизы на бумаге, а также делал несколько быстрых изображений в Sketch, возможно даже используя такой инструмент, как Marvel, чтобы соединить их вместе. Я могу исследовать больше идей и быстрее вносить изменения с помощью этих инструментов – они лучше для «расходящего» дизайна, а React лучший для «конвергентного» дизайна – больше не исследование, а скорее принятие решений, проверка и итерация.

Можете ли вы прокомментировать скорость создания прототипов React по сравнению с инструментами визуального прототипирования?

React имеет довольно крутую кривую обучения, но он может быть удивительно быстрым, когда вы его научитесь. Однако это просто чрезмерно для многих прототипов, и я бы не рекомендовал это для вещей, которые другие инструменты могут делать хорошо. Я считаю приятным провести полдня, кодируя и рассматривая точность и надежность прототипов, подобных приведенным выше. Я думаю, что это достаточно быстро!

рабочий процесс

Как происходит передача разработчика после одобрения созданных прототипов?

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

Используют ли разработчики непосредственно ваши компоненты, пишут ли код с нуля или где-нибудь посередине?

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

Какие связанные с инструментами React вы используете в процессе проектирования?

create-react-app

yTsTuWbCFXr8VMloSZj02o-w5HkvWYWxRD5y

Инструментом номер один, который помог мне начать работу с React, было приложение create-react от Facebook. Стандартная программа для запуска, которая уже готова к работе, предварительно сконфигурирована и имеет много замечательных встроенных функций.

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

Еще одна вещь, которая приходит вместе с приложением create-react-app — это быстрый способ поделиться на страницах GitHub. Поскольку все это размещено бесплатно, я могу очень легко получить URL, отправить его своим коллегам, и они смогут получить к нему доступ или отправить его пользователям, которые могут быть на другом конце света.

Кроме того, я установил в своем редакторе кода такие вещи, как Lint и prettier, просто помогающий поддерживать все аккуратно и легко искать ошибки, а также инструмент расширения React для Chrome.

Тахионы для укладки

lnPIMFd-L3UXldLwnSgdo-3qLh3XFOi3Fb0c

Tachyons – это другой подход к CSS, чем тот, к которому привыкли большинство людей. Его называют функциональным CSS или атомарным CSS. По сути, это библиотека классов, имеющих очень конкретную цель, например применение одного стиля.

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

React Storybook

cSJ7nmA6QbfSPL7yqbiNUfexSKi3v-1DuhEH

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

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

В будущем было бы здорово иметь Storybook как источник правды как для дизайнеров, так и для команды интерфейса. Мы могли бы использовать React-Sketchapp для получения версии каждого компонента, которую могут использовать дизайнеры в Sketch. У меня не было возможности попробовать React-Sketchapp. Команда дизайнеров Airbnb делает удивительную работу, но мы еще не в таком масштабе, когда это становится решающим.

Об обучении React как дизайнер

Как вы научились React? Был ли у вас предыдущий опыт программирования?

Я некоторое время занимаюсь цифровым дизайном. Очевидно, я хорошо познакомился с HTML и CSS. Я давно создаю сайты и базовые вещи. JavaScript – это то, с чем я часто заигрывал, но никогда не прыгал в глубину. Я немного использовал jQuery, но в большинстве своем это было загадкой.

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

Я начал делать пару пособий по JavaScript через Codecademy, чтобы понять некоторые основы. И причина, почему я посмотрел на React, было скорее любопытство, чем что-либо другое. Инженеры использовали это. Я изучал некоторые основные понятия, такие, как компоненты и состояние. Я начал искать несколько учебных пособий, и я работаю над парой небольших проектов, следя за публикациями в блоге, чтобы получить инструкции. Впоследствии я стал понимать, как это работает.

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

Каковы самые большие проблемы при изучении React и как вы их преодолевали?

Экосистема React, как известно, сложна. Начинающему может быть трудно создать безопасное место для экспериментов, не сражаясь с инструментами для сбора. Я потратил много лет, пытаясь найти правильный стартовый проект, но действительно не знал, что ищу. Коллега указал мне на create-react-app, когда он набирал популярность, и с того момента я полагался на него для всех своих проектов React.

Я думаю, что большинство людей время от времени натыкаются на JSX, я все еще делаю это, если переключаюсь между React и html для различных проектов. Я не нашел здесь никаких уловок – вам просто нужно запомнить отличия, но, к счастью, их немного.

Мне понадобилось некоторое время, чтобы построить правильную умственную модель того, как React работает и совмещается. И тот факт, что я был почти полным новичком в JavaScriptе, не помог. Казалось, будто маленькие кусочки прояснялись, но оставалось слишком много пробелов, чтобы увидеть общую картину. Я помню, как долго пытался вынудить дочерний компонент обновлять состояние своего отца.

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

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

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

Первоначальные усилия могут показаться изнурительными, но они обязательны. Хорошая новость состоит в том, что ты узнаешь это, когда попадешь туда, как и Джек. Помочь вам преодолеть первоначальные препятствия также является моей главной целью при создании курса React для дизайнеров на learnreact.design.

Какие предложения коллегам-дизайнерам по изучению React или программированию в целом?

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

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

По мере того, как вы станете лучше, по мере того, как вы научитесь больше, вы также научитесь легче решать проблемы, с которыми вы собираетесь столкнуться.

Итак, когда вы впервые начинаете работу, вы увидите ошибки консоли, и вы не знаете, что они означают или как их исправить, это очень страшно, и вам нужен кто-нибудь, чтобы держать вас за руку. Но в какой-то момент вы перестаете бояться ошибки и думаете: «Хорошо, я не знаю, что это сейчас, но я знаю, что искать в Google, чтобы понять, как это исправить». Или: «Я приблизительно знаю, где в приложении это происходит, поэтому я пойду и попробую это наладить».

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

Последняя заметка (от меня, а не от Джека)

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

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

Как ты думаешь? Дайте мне знать в комментариях!

Я хотел бы поблагодарить Джека за то, что он уделил со мной время в чате и дал высококачественные ответы на мои бесконечные вопросы (чтобы я мог просто скопировать и вставить?)!

Не забудьте посмотреть мой курс React, предназначенный для дизайнеров: learnreact.design. ?

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

Ваш адрес email не будет опубликован.