В этой статье мы расскажем, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги.
В статье мы подойдем к китам, которые сделаны не только дизайнерами, но также переведены в компоненты фронтенд-разработчиками.
3. Мгновенный доступ к UI KIT у всей команды
Аналитики, дизайнеры, разработчики имеют доступ к киту по ссылке. Могут самостоятельно ознакомиться со всеми элементами, правилами их использования и создавать прототипы, фронтенд и дизайн.
4. Скорость разработки
При готовом UI KIT вы имеете все элементы, такие как кнопки, поля ввода, таблицы, графики уже задизайнены и переведены в компоненты (на JS). Вы можете собирать системы, не тратя время на дизайн и разработку. Также упрощается прототипирование, если раньше вы составляли прототипы из простых форм, то сейчас можете собирать их из настоящего дизайна.
Почему важно делать UI KIT, если кнопку или поле можно отрисовать и запрограммировать достаточно быстро?
Большинству пользователей кнопка представляется, как всего лишь прямоугольник с текстом посередине:
Вот так выглядит код кнопки на 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;
А вот так выглядит удобная кнопка, которая делает взаимодействие с системой удобной:
Так выглядит код кнопки здорового человека:
// 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;
То есть разработка любого на первый взгляд простого элемента это продолжительная и дорогостоящая работа (если делать его удобным и масштабируемым), поэтому проще один раз отрисовать и запрограммировать каждый элемент и потом использовать его во всех проектах.
2. Компаниям необходимо соблюдать фирменный стиль;
3. При покупке UI KIT вам необходимо отталкиваться от технологий заложенных в купленном ките;
4. Купленный кит не может закрыть весь функционал систем, то есть вам необходимо будет дорисовывать его и дорабатывать;
5. Строя ui kit с нуля вы видите полноценно цель разработки. То есть сможете разрабатывать элементы исходя из задачи, делая каждый элемент удобнее.
habr.com
В статье мы подойдем к китам, которые сделаны не только дизайнерами, но также переведены в компоненты фронтенд-разработчиками.
Что такое UI KIT?
Это единый набор элементов пользовательского интерфейса. Выглядят они примерно так:Для чего он нужен?
1. Единый стиль всех проектов
Все ваши информационные системы будут идентичными. Клиенты будут узнавать вашу компанию по одинаковым элементам. Также им будет удобнее работать с каждым вашим новым продуктом, так как им будут знакомы все элементы и их поведение.2. Экономия на разработке
Если нет кита, компании, нанимая подрядчика заполняют бриф, далее подрядчик разрабатывает с нуля дизайн, далее создает компоненты на фреймворках JavaScript (Angular, React, Vue). То есть заказчик каждый раз платит за дизайн и программирование одних и тех же элементов на фронтенде разным подрядчикам, причем элементы получаются у всех разные по дизайну и коду, что не позволяет масштабироваться. В случае с китом вы платите 1 раз.3. Мгновенный доступ к UI KIT у всей команды
Аналитики, дизайнеры, разработчики имеют доступ к киту по ссылке. Могут самостоятельно ознакомиться со всеми элементами, правилами их использования и создавать прототипы, фронтенд и дизайн.
4. Скорость разработки
При готовом UI KIT вы имеете все элементы, такие как кнопки, поля ввода, таблицы, графики уже задизайнены и переведены в компоненты (на JS). Вы можете собирать системы, не тратя время на дизайн и разработку. Также упрощается прототипирование, если раньше вы составляли прототипы из простых форм, то сейчас можете собирать их из настоящего дизайна.
Почему важно делать UI KIT, если кнопку или поле можно отрисовать и запрограммировать достаточно быстро?
Большинству пользователей кнопка представляется, как всего лишь прямоугольник с текстом посередине:
Вот так выглядит код кнопки на 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;
А вот так выглядит удобная кнопка, которая делает взаимодействие с системой удобной:
Так выглядит код кнопки здорового человека:
// 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?
В интернете множество китов за небольшие деньги, что-то около 15$. Вы безусловно можете их использовать. Но они скорее подойдут для небольших проектов, которые не собираются далеко масштабироваться или же в вашей компании предполагается сделать одну систему, а не строить множество продуктов.Основные причины для постройки, а не покупки UI KIT
1. Большие компании приводят все системы к единому виду, чтобы сотрудники и пользователи ориентировались легко в любой системе компании;2. Компаниям необходимо соблюдать фирменный стиль;
3. При покупке UI KIT вам необходимо отталкиваться от технологий заложенных в купленном ките;
4. Купленный кит не может закрыть весь функционал систем, то есть вам необходимо будет дорисовывать его и дорабатывать;
5. Строя ui kit с нуля вы видите полноценно цель разработки. То есть сможете разрабатывать элементы исходя из задачи, делая каждый элемент удобнее.
Требования к разработчику UI KIT:
UI KIT разрабатывается только дизайнером и разработчиком уровня Senior, которые имеют опыт в подобных проектах. Дизайнер и фронтенд-разработчик должен обладать опытом и знаниями для построения сложных систем, так как ui kit будет использоваться около 5 лет всеми командами разработки вашей компании и привлекаемыми подрядчиками для большинства ваших систем.
Для чего компании нужен UI KIT? (Frontend + Design)
В этой статье мы расскажем, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги. В статье мы подойдем к китам, которые сделаны не только дизайнерами, но также переведены в...
habr.com