Proč společnost potřebuje UI KIT? (Přední + design)

Dobrý den! Jsem Vlad Savin, a to je KOTELOV! V tomto článku vám řeknu, co je to UI KIT, k čemu je a jak vám ušetří čas a peníze.

V tomto článku přijdeme k velrybám, které jsou vytvořeny nejen designéry, ale také přeloženy do komponent front-end vývojáři.

Co je to UI KIT?

Toto je jediná sada prvků uživatelského rozhraní. Vypadají asi takto:

K čemu to je?

1. Jednotný styl všech projektů

Všechny vaše informační systémy budou identické. Zákazníci vaši společnost rozpoznají podle stejných prvků. Rovněž jim bude pohodlnější pracovat s každým vaším novým produktem, protože budou znát všechny prvky a jejich chování.

Zahájení projektu vždy znamená vytvoření prvních základních prvků ui-kita na základě schváleného konceptu.

Hlavním důvodem je sjednocení prvků rozhraní, které snižuje a zjednodušuje další práci ve složitých projektech, aby se v budoucnu zabránilo chybám. A pomáhá to koordinovat s vývojáři, aby byl návrh konzistentní na různých stránkách stejného projektu.

Naštěstí pro nás dny Photoshopu uběhly a Sketch se objevil na trhu pro boha vyvolených (pěstitelé máku se radují) a teprve později Figma. To značně usnadnilo práci návrháři. Oblíbené komponenty každého uživatele umožnily provádět změny mnohokrát rychleji, doslova jediným kliknutím, což vám umožní nespouštět všechny obrazovky a nekontrolovat, kde se barva změnila a kde ne.

Andrey Zaletov Senior UI/UX návrhář KOTELOV

2. Úspory ve vývoji

Pokud zde není žádná velryba, společnosti, najímající dodavatele, vyplňte krátkou zprávu, pak dodavatel vyvine design od nuly a poté vytvoří komponenty na rámcích JavaScriptu (Angular, React, Vue). To znamená, že zákazník pokaždé platí za návrh a programování stejných prvků na frontendu různým dodavatelům a prvky jsou získávány ze všech odlišných v designu a kódu, což neumožňuje škálování. V případě velryby zaplatíte 1krát.

3. Okamžitý přístup k UI KIT pro celý tým

Analytici, návrháři, vývojáři mají přístup k sadě prostřednictvím odkaz. Mohou se samostatně seznámit se všemi prvky, pravidly jejich používání a vytvářet prototypy, rozhraní a design.

Oznámení ve vc. en Zakázat reklamy Design People Behavior Design Jmenuji se Mike Lisyansky. Designu UX se věnuji od roku 2001 (19 let). Zahájeno ve studiu Lebedev (2000-2003 …

4. Rychlost vývoje

Díky připravené UI KIT máte všechny prvky, jako jsou tlačítka, vstupní pole, tabulky, grafy , již byly navrženy a převedeny na komponenty (do JS). Systémy můžete vytvářet bez ztráty času při navrhování a vývoji. Také zjednodušuje vytváření prototypů, pokud jste dříve vyráběli prototypy z jednoduchých forem, nyní je můžete vytvářet ze skutečného designu.

Proč je důležité vytvořit UI KIT, pokud lze dostatečně rychle nakreslit a naprogramovat tlačítko nebo pole?

Pro většinu uživatelů se tlačítko jeví pouze jako obdélník s textem uprostřed:

Takto vypadá kód tlačítka v React:

//Core import * as Reagovat z & quot; reagovat & quot ;; //Styly importují styly z & quot; ./BadButton.module.scss & quot ;; rozhraní BadButtonProps {podřízené: React.ReactNode; pozadí?: řetězec; color?: string; } const BadButton: React.FC & lt; BadButtonProps & gt; = (rekvizity) => (& lt; button className = {styles.button} style = {{background: props.background || & quot; # 5199FF & quot;, color: props.color || & quot; white & quot;}} {. .. props} & gt; {props.children} & lt;/button & gt;); //Exportuje výchozí export BadButton;

A takto vypadá užitečné tlačítko, díky kterému je interakce se systémem pohodlná:

Takto vypadá kód tlačítka zdravého člověka:

//Core import * as Reagovat z & quot; reagovat & quot ;; importovat názvy tříd z & quot; názvů tříd & quot;; //Import nástrojů {capitalize} z & quot; ./utils/string & quot ;; //Styly importují styly z & quot; ./GoodButton.module.scss & quot ;; const ButtonVariantTypes = [„vyplněno“, „nastíneno“, „odkaz“] jako const; const ButtonColorTypes = [„primární“, „sekundární“] jako const; const ButtonSizeTypes = [„malý“, „střední“, „velký“] jako const; const ButtonHTMLTypes = [& quot; odeslat & quot;, & quot; tlačítko & quot;, & quot; reset & quot;] jako const; typ exportu ButtonVariantType = typ ButtonVariantTypes [číslo]; typ exportu ButtonColorType = typ ButtonColorTypes [číslo]; typ exportu ButtonSizeType = typeof ButtonSizeTypes [číslo]; typ exportu ButtonHTMLType = typ ButtonHTMLTypes [číslo]; exportní rozhraní BaseButtonProps {/** * Předat dítěti tlačítko */children: React.ReactNode;/** * Definujte třídu pro tlačítko */className?: String;/** * Vyberte variantu zobrazení tlačítka */varianta?: ButtonVariantType;/** * Vyberte barvu tlačítka */color?: ButtonColorType;/** * Vyberte velikost tlačítka */velikost?: ButtonSizeType;/** * Změnit velikost tlačítka na celou šířku nadřazeného kontejneru */fullWidth?: Boolean;/** * Tlačítko deaktivace */deaktivováno?: Boolean;/** * Obsluha události pro událost kliknutí myší pro tlačítko */onClick?: () = & Gt; prázdnota; } typ exportu AnchorButtonProps = {/** * Předat adresu URL a definovat tlačítko jako odkaz */href: string; } & amp; BaseButtonProps & amp; Vynechat & lt; React.AnchorHTMLAtributy & lt; HTMLAnchorElement & gt; & quot; typ & quot; | „onClick“ & gt ;; typ exportu NativeButtonProps = {/** * Vyberte typ tlačítka */typ?: ButtonHTMLType; } & amp; BaseButtonProps & amp; Vynechat & lt; React.ButtonHTMLAttributy & lt; HTMLButtonElement & gt;, & quot; typ & quot; | „onClick“ & gt ;; typ exportu ButtonProps = Částečný & lt; AnchorButtonProps & amp; NativeButtonProps & gt ;; const GoodButton: React.FC & lt; ButtonProps & gt; = ({děti, název třídy, varianta = „vyplněno“, barva = „primární“, velikost = „malé“, typ = „tlačítko“, plná šířka, deaktivováno , onClick, href, … rest}) = & gt; {const Component = href? „a“ : & quot; tlačítko & quot; nechat buttonProps; if (Component === & quot; a & quot;) {buttonProps = {& quot; aria-disabled & quot;: disabled}; } else {buttonProps = {type, disabled}; } return (& lt; Component {… rest} {… buttonProps} className = {classNames (styles.root, styly [varianta], styly [velikost], {[styly [`$ {varianta} Barva $ { capitalize (color)} „]]: color, [styles [` $ {variant} Size $ {capitalize (size)} `]]: size, [styles.disabled]: disabled, [styles.fullWidth]: fullWidth}, className)} onClick = {onClick} & gt; {children} & lt;/Component & gt;); }; //Exportuje výchozí export GoodButton;

To znamená, že vývoj jakéhokoli zdánlivě jednoduchého prvku je dlouhá a nákladná práce (pokud to uděláte pohodlně a škálovatelně), takže je snazší nakreslit a naprogramovat každý prvek jednou a poté jej použít ve všech projektech.

Developer UI Kit je sada komponent, které vytvářejí uživatelské rozhraní vaší služby. Jednoduše řečeno, jedná se o vizualizaci každé z komponent pro různé akce uživatele.

Sada uživatelského rozhraní se používá ke zjednodušení, sjednocení a integraci velkých projektů. Umožňuje vám rychle a efektivně vytvářet složitější rozhraní.

Igor Lysenko přední vývojový pracovník týmu KOTELOV

Mohu použít hotovou UI KIT?

Na internetu je mnoho velryb za málo peněz, něco jako 15 dolarů. Určitě je můžete použít. Ale jsou vhodnější pro malé projekty, které se příliš nezmění, nebo má vaše společnost vytvořit jeden systém, spíše než vytvářet mnoho produktů.

Hlavní důvody pro stavbu, nekupování UI KIT

1. Velké společnosti přinášejí všechny systémy do jednoho vzhledu, aby se zaměstnanci a uživatelé mohli snadno orientovat v jakémkoli systému společnosti;

2. Společnosti musí dodržovat firemní identitu;

3. Při nákupu UI KIT musíte stavět na technologiích obsažených v zakoupené sadě;

4. Zakoupená velryba nemůže zavřít všechny funkce systémů, to znamená, že ji budete muset dokončit natřením a upravit;

5. Při vytváření sady ui od nuly vidíte cíl úplného vývoje. To znamená, že budete moci vyvíjet prvky založené na úkolu, čímž bude každý prvek pohodlnější.

Požadavky na vývojáře UI KIT:

UI KIT vyvíjí pouze nadřízený návrhář a vývojář, kteří mají zkušenosti s podobnými projekty … Designér a front-endový vývojář musí mít zkušenosti a znalosti pro vytváření komplexních systémů, protože sadu ui budou po dobu asi 5 let používat všechny vývojové týmy vaší společnosti a dodavatelé zapojeni do většiny vašich systémů.

No, nebo kontaktujte KOTELOV)

Přidejte si tento příspěvek do záložek a sledujte nás na VC a instagramu, aby vám neunikly žádné články)