[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Philipp Kontsarenko", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b","\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b_\u0434\u043b\u044f_\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d\u0430"], "comments": 23, "likes": 15, "favorites": 11, "is_advertisement": false, "section_name": "default", "id": "11063" }
Philipp Kontsarenko
6 988

Инструмент: Командная разработка интерфейсов вместе с theprotein.io

Менторы рубрики «Интерфейсы» на vc.ru продолжают публиковать кейсы и инструменты российских компаний, которые будут полезны представителям индустрии.

Сегодня в выпуске — рассказ команды российского сервиса theprotein.io, который позволяет дизайнерам, разработчикам и тестировщикам вести совместную работу над проектированием интерфейсов.

Вместо того, чтобы изобретать очередной велосипед из «новых» инструментов и фреймворков, пилить живые стайлгайды или внедрять компонентный подход, мы нашли путь к дирижированию этим набором — theprotein.io помогает превратить текущий набор инструментов в полезный коктейль для здорового образа работы.

Protein синхронизирует работу над компонентами интерфейса независимо от их представления и исполнения, будь то графический редактор вроде Sketch или Adobe Illustrator или код на любом фреймворке или платформе.

Цель продукта — провернуть революцию сознания в проектировании и разработке интерфейсов.

Сервис разрабатывается командой из России, члены которой успели поработать в крупных компаниях и проектах, таких как «Яндекс», «Альфа-Банк», «Мегафон» и «Мануфактура», и не понаслышке знают все проблемы разработки.

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

Кстати, как раз сегодня мы обновили и сайт продукта. Поэтому советуем обязательно заглянуть на theprotein.io.

Компонентный подход

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

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

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

Представьте себе простую форму входа в почту. Она состоит из полей для ввода логина и пароля, а также кнопки «Войти». Все это компоненты интерфейса. Каждый из них обладает своей логикой и оформлением. Эти компоненты легко переиспользовать, так как в 90% случаев логика от проекта к проект, в отличие от визуальной части, не меняется.

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

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

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

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

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

С этой болью и помогает бороться Protein, который берет на себя работу по синхронизации компонентов независимо от их технологической основы.

Протеиновая диета

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

Вместо вас разбором изменений теперь будет заниматься Protein: он поймет, какие изменения произошли с макетом, превратит их в код на нужной платформе и доставит пуллреквестом в репозиторий. В обратную сторону все изменения в коде будут транслированы в набор инструкций для дизайн-инструмента, которые воссоздадут изменения в документе.

Стоимость

Сейчас Protein находится в активной фазе разработки. Мы планируем запустить предпродажи продукта уже в это Рождество. Годовую подписку на групповую лицензию можно будет приобрести с более чем 50% праздничной скидкой. Цена годовой лицензии составит $99, тогда как после официального релиза вырастет до $199.

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

Интегрированные возможности

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

На сегодняшний день Starter Kit работает на Mac OS для Sketch, React, Angular и БЭМ-шаблонизаторов.

Starter Kit позволяет:

  • редактировать комопоненты в любимом дизайн-инструменте;
  • редактировать визуальное представление и структуру компонентов с live-preview как в дизайн-инструменте так и в любимом IDE;
  • генерировать стайлгайд из живых компонентов с полным набором состояний, видеть его отображение в браузере и дизайн-инструменте;
  • обмениваться компонентами между дизайнерами и разработчиками на разных стеках технологий;
  • иметь четкое версионирование как библиотек компонентов, так и каждого компонента в отдельности;
  • получать дизайн изменения через пуллреквест в виде кода и инструкций;
  • интегрировать компоненты с внешними сервисами.

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

Например, чтобы при создании компонентов c live-preview оперировать живыми данными, команда предусмотрела интеграцию с Parse. А чтобы использовать свои компоненты в прототипировании будет интеграция с Invision, FramerJS, Pixate и другими инструментами вида онлайн-конструкторов.

Воркфлоу

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

Для дизайнера Protein будет выглядеть как 2 горячие клавиши в дизайн-инструменте: ⌘P на отправку изменений и ⌘⇧P на получение. Для разработчика — дополнительный remote в репозиторий Protein Cloud.

Быстрый старт

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

Для этого будет необходимо зарегистроваться в сервисе и создать новый проект с помощью веб-интерфейса или клиента Protein Transporter.

Затем открыть Sketch, создать новый документ и инициализировать работу с Protein горячей клавишей ⌘⇧P . В документе будет создан новый артборд с гайдом из компонентов, которые можно будет использовать в качестве символов во всех макетах.

Теперь вы можете создать простой компонент кнопки, привычным образом. Каждый компонент должен быть оформлен в группу и иметь уникальное название.

Когда работа над компонентом закончена, нажмите ⌘P для отправки изменений в репозиторий. Protein Transporter за вас создаст новую ветку и закоммитит в нее измненения, после чего доставит их в репозиторий.

Получить репозиторий с компонентами можно через Protein Transporter (на примере выше) или через консоль, набрав в терминале команду:

Каждый компонент имеет конфигурационный файл, который описывает его название в виде класса, состояния и способа отрисовки.

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

Вся нужная информация содержится в конфигурационном файле, который записывается на стандарте ES2015. Большинство компонентов будут иметь схожие настройки, которые описаны в корневом конфигурационном файле, который описывает построение гайда в целом.

Это все, что необходимо для работы с Protein.

Изменить компонент можно по своему усмотрению в любом редакторе кода, к которому вы привыкли.

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

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

Интеграция в процесс

А что, если у вас уже есть проект, где используются препроцессоры и шаблонизаторы? Что если вы используете один из популярных CSS-фреймворков или у вас множество библиотек компонентов?

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

Дизайнерам никаких конфигов писать не нужно. Во время установки Protein Transporter будет установлен плагин в дизайн-инструмент, с которым работает дизайнер проекта. Он и будет добавлять горячие клавиши для отправки и получения изменений.

Protein работает:

  • с любым препроцессором, который умеет возвращать CSS, и любым шаблонизатором, который умеет возвращать HTML для веб-компонентов. Под это определение подходят все современные фреймворки и препроцессоры;
  • с любым редактором, который работает с вектором;
  • с любой платформой, где интефейсы могут быть представлены в виде XML.

Единственное требование к компонентам — это уникальность имени. Этого можно достичь методологиями вроде БЭМ, SMACSS и другими.

На скриншотах ниже в качестве примера изображен гайд, собранный из Twitter Bootstrap, и его отображение в браузере и Sketch.

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

Профит

Обычно, если продукт представлен на различных платформах, то его интерфейсы разрабатываются и поддерживаются независимо. Сколько платформ, столько и наборов компонент. Кроме того, список множится на количество версий и членов команды в рамках одной платформы. В самом лучшем случае — один дизайнер, один разработчик и один продукт — продукт на макетах, в вебе и ios составляет 5 наборов компонентов.

Поддержанием всего этого «биоразнообразия» в консистеном виде приходится заниматься на уровне кнута. Большую часть времени этот подход не работает. А с ростом команды, платформ и списка до 20-30 наборов представляет угрозу для развития продукта, поддерживать который становится просто невозможно. Не говоря уже о том, что продукт может быть не один.

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

Планы и рынки

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

Вместе с live-preview это позволит быстро собирать прототипы из живых продакшн-версий компонентов, которые можно будет смело передавать в разработку без зазрения совести.

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

Это заметный шаг вперед по сравнению со всеми современными сервисами прототипирования, такими как FramerJS, Pixate, proto.io или Principle, код которых можно смело отправлять в мусорное ведро.

Мы планируем работать над поддержкой различных платформ, таких как Windows, Android и iOS, чтобы нужные фичи работали и облегчали жизнь разработчикам, дизайнерам и всей команде.

#Интерфейсы #инструменты #инструменты_для_веб_дизайна

Статьи по теме
Инструмент: Совместная работа над проектированием интерфейса при помощи RealtimeBoard
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления