Фронтенд фреймворк
Фронтенд фреймворк

Сперва, следует рассмотреть некоторые аспекты:

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

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

Правильный гид по стилю должен быть принятым всеми членами команды: разработчиками, продакт оунерами, менеджерами проекта и даже клиентами, что позволит лучше коммуницировать и улучшить совместную работу. Под таким гидом по стилю, мы подразумеваем фронтенд фреймворк (FEF).

Прежде, чем приступить к созданию FEF, важно учитывать следующие аспекты:

Он должен использоваться и его должно быть просто внедрить в различные рабочие процессы.

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

Он должен быть визуальным и понятным в спецификациях.

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

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

Давайте начнем внедрение FEF

Шаг 1, определение информационной архитектуры:

Первый шаг — определение контента (на основании нашего продукта мы разделили его на следующие элементы):

  1. Стиль: цветовая схема, шрифт, типографика, иконки.
  2. Лейауты и шаблоны страниц: различные сочетания, сетки и основная навигация.
  3. Элементы навигации: ссылки, вкладки и пагинация.
  4. Модальные окна: вспомогательные экраны, тултипы, выпадающие окна, сообщения.
  5. Ввод текста: формы.
  6. Компоненты

Шаг 2, создание контента FEF:

Стиль — Первоочередная задача — это создать первичную, вторичную цветовую схему и вспомогательные цвета, определение их в #HEX и возможность их использования.

Цветовая схема
Цветовая схема
Затем создайте стили в Sketch для возможности оптимизации рабочего процесса при создании дизайна.
Создайте новый стиль, которым можно поделиться
Создайте новый стиль, которым можно поделиться
Чем лучше вы создадите номенклатуру компонентов в FEF, тем более организованной будет ваша таблица в Sketch.
Созданные стили
Созданные стили
Таким образом, если мы хотим быстро изменить цвет компонента, мы сможем это сделать в окне стилей и при этом не добавим лишний цвет.
Выбор предустановленного цвета фона
Выбор предустановленного цвета фона
Повторяем процесс для стилей типографики:
Типографика
Типографика

  1. Детализируем шрифты, которые будут использоваться в дизайне, основные и второстепенные.
  2. Создаем стили в Sketch как и в случае с цветами

Созданные стили
Созданные стили
После создания стилей для типографики и цветов, добавьте семейство иконок, которое будет использоваться и конвертируйте каждую в символ. Таким образом, если кто-то ее модифицирует, изменения будут применены везде, где данная иконка используется.
Семейство иконок
Семейство иконок
Совет: Создавайте одну иконку в различных состояниях и присваивайте ей имя по такому принципу ComponentName / state / sub-state, таким образом, вы сможете получить доступ ко всем состояниям в главном меню и не будете править оригинальную иконку.

1-plvt7vp2xwmqdnddwtpaeg

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

1-x7sspms1hyykscegdlf0ew

  1. checkbox/normal (нормальный)
  2. checkbox/hover (ховер)
  3. checkbox/focus/minus (фокус/минус)
  4. checkbox/focus/check (фокус/проверка)
  5. checkbox/pressed (нажатие)
  6. checkbox/disabled/check (отмена нажатия)
  7. checkbox/disabled (отключен)

Соответственно, вот, что будет показано в выпадающем списке на верхней панеле:

1-kbtwumlgfvj9etjd4b3srg

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

Изменение стилей
Изменение стилей

Шаг 3, создание компонентов:

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

Вот некоторые компоненты, которые я хотел бы показать в качестве примера:

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

1-rmoiltbljal_iv_jreefqw

Формы — Совет: Создав текстовое поле в виде символа, вы получите возможность редактировать контент без доступа к самому символу.

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

Пример вспомогательного окна
Пример вспомогательного окна
1-2czyxgfujqtlzlvcnyshvq

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

Просмотр в Zeplin
Просмотр в Zeplin

Шаг 4, поведения:

Есть компоненты, которые могут пострадать от изменения размеров (ширины и высоты), в зависимости от используемой сетки, типа списка данных или сетки с данными. Для таких компонентов, в Sketch предусмотрена группа опций, которая позволяет предопределить позицию каждого элемента и работать с ними как с адаптивной таблицей.

Пример адаптивной сетки
Пример адаптивной сетки

Пример адаптивных колонок
Пример адаптивных колонок
Как добиться такого поведения? В 39 версии Sketch добавлены 4 опции, которые помогают достичь это.

Эти опции:

1-2fdvgw7bjpqqjux63bv9bq

Stretch — ресайз слоя при сохранении его исходного положения (эту опцию следует применять для разделительных линий и прямоугольников).

Pin to corner  - автоматически закрепляет слой в ближайшем углу и не изменяет своего размера. (эта опция должны применяться для иконок и чекбоксов.)

Resize object — изменяет размер слоя в момент ресайза родительской группы. (Опция для текстовых полей).

Float in place — слой не изменяет своего размера, но он меняет свою позицию в процентном соотношении. (Эту опцию следует применять для иконок, которые должны находиться по центру колонки.)

Для большей информации о том, как создавать эти таблицы, рекомендую следующую статью:

Создание адаптивных интерфейсов в Sketch с помощью символов

Шаг 5, рекомендации

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

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

Компоненты
Компоненты

Общее будущее

Работая бок-о-бок с другими членами команды над общим проектом на основе гида по стилю, может значительно увеличить качество работы. Совместная работа над проектом в этом случае больше не будет содержать вопросы типа: «А что будет, с компонентом «X» в меньшем разрешении?

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

Скачайте мой Sketch файл: https://www.dropbox.com/s/kknipcg3u0e69ds/FEF.sketch?dl=0

Дизайн система Predix от компании GE на основе Atomic Design