UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как создать фронтенд фреймворк при помощи Sketch
Редакція
Редакція

Опубліковано • Оновлено

Как создать фронтенд фреймворк при помощи Sketch

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

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

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

...

Один из способов “нормализации” в интерфейсе - это определение гида по стилю, который поможет команде дизайнеров избежать будущих изменений, бесполезных часов работы и позволит увеличить продуктивность. Также, это позволит сконцентрироваться на на поведении компонентов и правок в приложении. Правильный гид по стилю должен быть принятым всеми членами команды: разработчиками, продакт оунерами, менеджерами проекта и даже клиентами, что позволит лучше коммуницировать и улучшить совместную работу. Под таким гидом по стилю, мы подразумеваем фронтенд фреймворк (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 - слой не изменяет своего размера, но он меняет свою позицию в процентном соотношении. (Эту опцию следует применять для иконок, которые должны находиться по центру колонки.) Для большей информации о том, как создавать эти таблицы, рекомендую следующую статью: http://ux.pub/sozdanie-adaptivnyx-interfejsov-v-sketch-s-pomoshhyu-simvolov/

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

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

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

Работая бок-о-бок с другими членами команды над общим проектом на основе гида по стилю, может значительно увеличить качество работы. Совместная работа над проектом в этом случае больше не будет содержать вопросы типа: “А что будет, с компонентом “X” в меньшем разрешении? Зачастую мы очень сосредоточены и ждем первого запуска продукта как можно скорее. Именно поэтому, проблемы часто возникают когда продукт уже выкачен на живой. В таких случаях, FEF, способен избавить вас от головной боли. Скачайте мой Sketch файл: https://www.dropbox.com/s/kknipcg3u0e69ds/FEF.sketch?dl=0 http://ux.pub/dizajn-sistema-predix-ot-kompanii-ge-na-osnove-atomic-design/


Перевод статьи Seba Mantel

Топ коментарі (0)