Вчера опубликовал заметку насчет быстрого прототипирования RESTful API, а сегодня я хочу коснуться быстрой реализации интерфейса.
Очень часто необходимо быстро сделать интерфейс для проверки какой-либо гипотезы или реализовать срочную фичу. В разработке интерфейсов одна из самых времязатратных частей — это верстка и исправление багов в ней. Если нужно реализовывать еще и адаптивный вариант, то сложность еще увеличивается.
Для того чтобы минимизировать риски, можно использовать готовые дизайн системы. Одна из самых популярных — Material от Google. Дизайн система — это набор правил, которым руководствуются специалисты при реализации дизайна. Шрифты, палитра, отступы, анимация и другие показатели стандартиризованы. Любой специалист, который захочет что-либо улучшить в интерфейсе, знает, какими правилами руководствовался предыдущий его коллега, и без труда включается в работу.
С развитием фронтенд фреймворков и библиотек, таких как Angular, Reactjs, Vue.js и др. встал вопрос о том, как помочь еще и разработчикам, как сэкономить их время, которое они вынуждены тратить на верстку. Тут навстречу пришли другие их коллеги, создав ui фреймворки и библиотеки, такие как Bootstrap, Angular Material, Material UI, NGPrime и др. К слову, Bootstrap разрабатывался в помощь созданию адаптивных дизайнов еще до развития фронтенд фреймворков и библиотек, но был отлично доработан для использования вместе с ними. UI фреймворк содержит в себе уже готовые элементы интерфейса, готовые к переиспользованию. Например, он может содержать кнопки, палитру, всплывающие окна, визуальный редактор, элементы формы, селекторы, карточки и т.д. По сути, это набор кубиков, из которых можно собрать интерфейс.
Как же может нам помочь всё это многообразие инструментов в быстром прототипировании интерфейсов и что за что отвечает?
По сути, создание современного прототипа интерфейса строится из нескольких этапов:
- UX дизайнер создает макеты в графическом редакторе используя те элементы интерфейса, которые есть в выбранной ui библиотеке в рамках дизайн-системы.
- UX дизайнер визуализирует макеты на основе тех данных, которые ему предоставил владелец продукта. По сути он создает прототип бизнес процесса.
- Разработчик инициализирует приложение с использованием какой-либо библиотеки или фреймворка (Angular, Reactjs, Vue.js etc.) и устанавливает все необходимые зависимости.
- Разработчик создает некоторые службы, которые будут отвечать за получение данных. Например это может быть что-то приходящее с сервера.
- Разработчик использует уже готовые элементы из ui фреймворка для сборки визуальной части прототипа. Благодаря уже готовому набору элементов он может сконцентрироваться на бизнес задаче и сэкономить огромное количество времени на верстке.
Если всё продумать хорошо, то уже после осуществления этих 5 пунктов + создания прототипа сервера, можно получить готовый Minimal Valuable Product или сокращенно MVP. После этого можно смело запускать первых пользователей и собирать обратную связь.
Благодаря такому подходу — быстрому протопированию с использованием готовых библиотек и фреймворков можно гораздо быстрее провести тестирование идеи. Более того, из-за того, что у нас есть документированные готовые элементы интерфейса, мы можем их быстро заменять, менять местами и проводить полноценное A/B тестирование.
После проверки прототипа его, как правило, выбрасывают. Иногда переиспользуют какие-то удачные его части, но не всегда. Но о том, что происходит после проверки прототипа — уже совсем другая история.
