{"id":13591,"url":"\/distributions\/13591\/click?bit=1&hash=df3f51932e322e3fb35802787499cfa73234707acb315167066f304d6d8cee2b","title":"\u041a\u0443\u043f\u0430\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0447\u0430\u044f \u0438 \u044d\u043a\u0441\u043a\u0443\u0440\u0441\u0438\u0438 \u0432 \u0442\u0430\u0431\u0443\u043d: \u043a\u0443\u0434\u0430 \u0435\u0445\u0430\u0442\u044c \u043d\u0430 \u0442\u0438\u043c\u0431\u0438\u043b\u0434\u0438\u043d\u0433","buttonText":"\u0427\u0438\u0442\u0430\u0442\u044c","imageUuid":"d85f2cfe-e0d7-5ad7-8507-983bc3b55643","isPaidAndBannersEnabled":false}
Дизайн
kotelov.com

Для чего компании нужен UI KIT? (Front + Design)

Привет! Я — Влад Савин, и это KOTELOV! В этой статье я расскажу, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги.

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

kotelov.com

Что такое UI KIT?

Это единый набор элементов пользовательского интерфейса. Выглядят они примерно так:

kotelov.com

Для чего он нужен?

1. Единый стиль всех проектов

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

Начало проекта всегда подразумевает создание первых базовых элементов ui-kita на основе утвержденного концепта.

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

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

Андрей Залетов

2. Экономия на разработке

Если нет кита, компании, нанимая подрядчика заполняют бриф, далее подрядчик разрабатывает с нуля дизайн, далее создает компоненты на фреймворках JavaScript (Angular, React, Vue). То есть заказчик каждый раз платит за дизайн и программирование одних и тех же элементов на фронтенде разным подрядчикам, причем элементы получаются у всех разные по дизайну и коду, что не позволяет масштабироваться. В случае с китом вы платите 1 раз.

3. Мгновенный доступ к UI KIT у всей команды

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

4. Скорость разработки

При готовом UI KIT вы имеете все элементы, такие как кнопки, поля ввода, таблицы, графики уже задизайнены и переведены в компоненты (на JS). Вы можете собирать системы, не тратя время на дизайн и разработку. Также упрощается прототипирование, если раньше вы составляли прототипы из простых форм, то сейчас можете собирать их из настоящего дизайна.

Почему важно делать UI KIT, если кнопку или поле можно отрисовать и запрограммировать достаточно быстро?

Большинству пользователей кнопка представляется, как всего лишь прямоугольник с текстом посередине:

kotelov.com

Вот так выглядит код кнопки на React:

// Core import * as React from "react"; // Styles import styles from "./BadButton.module.scss"; interface BadButtonProps { children: React.ReactNode; background?: string; color?: string; } const BadButton: React.FC<BadButtonProps> = (props) => ( <button className={styles.button} style={{ background: props.background || "#5199FF", color: props.color || "white" }} {...props} > {props.children} </button> ); // Exports export default BadButton;

А вот так выглядит удобная кнопка, которая делает взаимодействие с системой удобной:

kotelov.com

Так выглядит код кнопки здорового человека:

// Core import * as React from "react"; import classNames from "classnames"; // Utils import { capitalize } from "./utils/string"; // Styles import styles from "./GoodButton.module.scss"; const ButtonVariantTypes = ["filled", "outlined", "link"] as const; const ButtonColorTypes = ["primary", "secondary"] as const; const ButtonSizeTypes = ["small", "medium", "large"] as const; const ButtonHTMLTypes = ["submit", "button", "reset"] as const; export type ButtonVariantType = typeof ButtonVariantTypes[number]; export type ButtonColorType = typeof ButtonColorTypes[number]; export type ButtonSizeType = typeof ButtonSizeTypes[number]; export type ButtonHTMLType = typeof ButtonHTMLTypes[number]; export interface BaseButtonProps { /** * Передать дочерний элемент для кнопки */ children: React.ReactNode; /** * Определить класс для кнопки */ className?: string; /** * Выбрать вариацию отображения кнопки */ variant?: ButtonVariantType; /** * Выбрать цвет кнопки */ color?: ButtonColorType; /** * Выбрать размер кнопки */ size?: ButtonSizeType; /** * Определить размер кнопки во всю ширину от родительского контейнера */ fullWidth?: boolean; /** * Отключить кнопку */ disabled?: boolean; /** * Обработчик события на клик по мыши для кнопки */ onClick?: () => void; } export type AnchorButtonProps = { /** * Передать url и определить кнопку как ссылку */ href: string; } & BaseButtonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "onClick">; export type NativeButtonProps = { /** * Выбрать тип кнопки */ type?: ButtonHTMLType; } & BaseButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">; export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>; const GoodButton: React.FC<ButtonProps> = ({ children, className, variant = "filled", color = "primary", size = "small", type = "button", fullWidth, disabled, onClick, href, ...rest }) => { const Component = href ? "a" : "button"; let buttonProps; if (Component === "a") { buttonProps = { "aria-disabled": disabled }; } else { buttonProps = { type, disabled }; } return ( <Component {...rest} {...buttonProps} className={classNames( styles.root, styles[variant], styles[size], { [styles[`${variant}Color${capitalize(color)}`]]: color, [styles[`${variant}Size${capitalize(size)}`]]: size, [styles.disabled]: disabled, [styles.fullWidth]: fullWidth }, className )} onClick={onClick} > {children} </Component> ); }; // Exports export default GoodButton;

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

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

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

Игорь Лысенко

Можно ли использовать готовый UI KIT?

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

Основные причины для постройки, а не покупки UI KIT

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

2. Компаниям необходимо соблюдать фирменный стиль;

3. При покупке UI KIT вам необходимо отталкиваться от технологий заложенных в купленном ките;

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

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

Требования к разработчику UI KIT:

UI KIT разрабатывается только дизайнером и разработчиком уровня Senior, которые имеют опыт в подобных проектах. Дизайнер и фронтенд-разработчик должен обладать опытом и знаниями для построения сложных систем, так как ui kit будет использоваться около 5 лет всеми командами разработки вашей компании и привлекаемыми подрядчиками для большинства ваших систем.

Ну или обратитесь в KOTELOV )

Сохрани пост в закладках и подписывайся на нас на VC и в instagram, чтобы не пропустить статьи)

0
Комментарии
Читать все 0 комментариев
null