Jak vytvořit konstrukční systém

Tipy pro navrhování a budování konzistentního konstrukčního systému.

Nepochybně se mě na designové systémy zeptám víc než na cokoli jiného. Poté, co jsem strávil většinu posledních několika let přemýšlením o tom, jak navrhovat, budovat a prezentovat designové systémy pro produkty, jako jsou Marvel, Bantam a Modulz, jsem usoudil, že sdílím některé z toho, co jsem se naučil.

Co je designový systém?

Není žádným tajemstvím, že návrháři milují dobrou sadu uživatelského rozhraní. Zdá se však, že kromě sestavování nástrojů a průvodců stylem se v poslední době stále více zaměřuje na navrhování systémů určených k propojení celých produktů. Společnosti jako Shopify a Intercom vytvářejí vlastní týmy zaměřené konkrétně na navrhování systémů. Lidé si začínají uvědomovat důležitost systémového designu. To je povzbudivé. Kdo ví, možná jednoho dne budeme mít nástroj pro návrh, který nepředpokládá, že začneme od nuly pokaždé, když otevřeme nový dokument ...?

Designový systém (jak se týká technologických produktů) je více než rámec, sada nástrojů UI nebo knihovna komponent. Je to víc než jen průvodce stylem nebo sada pokynů pro kódy. Je to víc než jen součet těchto částí. Designový systém je vyvíjející se sada pravidel, která řídí složení produktu.

Existuje mnoho aspektů jakéhokoli dobrého designového systému - počínaje firemní kulturou / posláním a tricklingem až po branding, copywriting, knihovny komponent a další designový jazyk. Body vyšší úrovně jsou pravděpodobně nejdůležitějšími aspekty jakéhokoli konstrukčního systému, ale pro účely tohoto článku předpokládám, že jako společnost - víte, kdo jste, jaké je vaše poslání a jak by vaše produkty měly vypadat, pocit a funkce.

Jakmile budete mít tyto kritické faktory na místě, můžete tyto znalosti převést na soudržný designový jazyk.

Navrhování palety stylů

Než začneme navrhovat lesklé komponenty, musíme položit základy pro tyto komponenty. Musíme produkt rozdělit na jeho nejbezpodobnější formu.

I nejjednodušší složka záhlaví je kolekce několika opakovaně použitelných stylů…

Musíme věci rozebrat, dokud nedosáhneme neredukovatelného minima; nejdůležitější styly. Dobrým místem pro začátek je úplný seznam vlastností stylu CSS. Většina těchto vlastností přijímá pouze pevné hodnoty, a proto je lze znovu použít na všech webových stránkách na internetu. Vlastnosti, které akceptují vlastní hodnoty, jsou v konečném důsledku tím, co odlišuje náš produkt od ostatních produktů. Tyto vlastní hodnoty definují naši globální paletu stylů. Naše globální paleta stylů je to, co použijeme při navrhování a budování všech aspektů všech našich produktů.

Až skončíme, v našem produktu by neměl existovat jediný styl, který nebyl v naší globální paletě stylů předdefinován.

Barva

Začněme s nejzřetelnější vlastností stylu - jedinou vlastností stylu, která se zdá být moderním designovým nástrojům pochopena, lze pojmenovat, uložit a znovu použít: barva

Pro naši základní barvu značky si vybíráme modrou barvu. Pokud jde o naši sekundární barvu značky, pojďme s jejím doplňkovým protějškem: oranžová.

Značkové barvy

Využívání barev ke komunikaci o úspěchu a neúspěchu je běžným vzorem designu, takže za tímto účelem přidáme do naší palety barev zelenou a červenou. Barvy, jako je černá a žlutá, by také mohly dobře fungovat.

Barvy úspěchu a neúspěchu

Nakonec potřebujeme nějaké šedé barvy. Většina uživatelských rozhraní bude potřebovat alespoň následující šedé barvy:

  • Velmi světle šedá pro pozadí
  • Tmavě tmavší šedá pro okraje, čáry, tahy nebo děliče.
  • Středně šedá pro podpoložky a kopii podpůrného těla.
  • Tmavě šedá pro hlavní záhlaví, kopii těla a pozadí.

Možná budete potřebovat více šedých. Možná budete potřebovat tři různé odstíny pro kopírování těla. Dáte přednost dvěma různým odstínům tahu. To je na tobě. Jde o to, že předdefinujete všechny styly, které potřebujete předem, aby se později v celém produktu znovu použily.

Na závěr můžeme také chtít pro každou z našich barev přidat variace odstínů nebo odstínů. To může být užitečné, pokud jde o navrhování komponent pro přidání světlého pozadí nebo tmavého tahu.

Naše konečná barevná paleta

Stíny

Stíny jsou další běžně používanou vlastností stylu ve většině uživatelských rozhraní. Z toho, co jsem viděl, spousta designérů přišla s návrhem součástí jen se stíny. Totéž platí pro většinu vlastností stylu. Takovéto izolace často vedou k nekonzistentním uživatelským rozhraním.

Vraťme se o krok zpět a zvažte, čeho se snažíme dosáhnout pomocí našich stínů. Zjevně se snažíme přidat do uživatelského rozhraní určitou perspektivu, ale je pravděpodobné, že stejný efekt může mít mnoho komponent. Pojďme tedy abstraktní styly od jednotlivých komponent a do naší globální palety stylů.

Tyto čtyři stíny by měly stačit ke stylu každé komponenty v našem systému:

  • Jemný stín pro zvýšení interaktivních komponent a zvýšení dostupnosti.
  • Výraznější stín pro efekt přechodu na komponenty.
  • Silný stín poskytující perspektivu rozevíracím seznamům / popovers a dalším podobným komponentám.
  • Vzdálený stín pro modální komponenty.
Náš rozsah stínů od jemných po vzdálené.

Typová stupnice

Abychom na každé obrazovce vytvořili vhodnou vizuální hierarchii, musíme definovat řadu různých velikostí písma.

Stejně jako u not v hudební hudbě by se náš typ měl držet v měřítku. To pomáhá udržovat hladký vertikální rytmus. Zpočátku to může znít trochu skličně, ale naštěstí někteří velmi inteligentní lidé na to už v průběhu let přišli. Tim Brown vytvořil skvělou webovou stránku pro zobrazení různých typů měřítek. Adam Morse otevřeně využil svou implementaci stupnice diatonického typu. Obecně se mi zdá, že stupnice „Major Third“ funguje dobře pro většinu webových produktů.

Dalším krokem je rozhodnout se zhruba o tom, jaké velikosti písma budeme potřebovat, a pak je vykreslit do stupnice typu „Major Third“.

  • Výchozí hodnota (1em) pro standardní text, který se objeví na mnoha místech na našem marketingovém webu, v uživatelském rozhraní atd. Výchozí velikost písma prohlížeče je 16 pixelů, takže s tím začněme.
  • Například o něco větší velikost například pro kopírování velkých těl v blogu.
  • Několik větších velikostí pro nadpisy a podokruhy.
  • Velmi velká velikost pro názvy oddílů.
  • Například směšně velká velikost například pro ceny na stránce s cenami.
  • Také budeme potřebovat menší velikosti pro menší kopii těla, vstupní rady a další sekundární text.
Typová stupnice

Hraniční poloměry

Nyní je to jen otázka použití stejného procesu na každou vlastnost stylu, která přijímá vlastní hodnoty. Pro zaoblené rohy potřebujeme následující hodnoty poloměru rohu:

  • Malý poloměr ohraničení pro malé součásti, jako jsou zaškrtávací políčka, štítky a štítky.
  • Poloměr středního okraje pro tlačítka a vstupy a podobné komponenty.
  • Velký poloměr ohraničení pro karty, modály a další velké komponenty.
Poloměry ohraničení 2px, 4px a 8px

Poznámka: Budeme také potřebovat 50% hraniční poloměr pro stavbu kruhových komponentů, jako jsou avatary atd.

Měřicí stupnice

Nejčastěji používanou vlastností stylu v téměř každém designu je mezera. Ať už od sebe oddělujeme odkazy v záhlaví, od sebe oddělujeme položky v mřížce, přidáváme určitou vzdálenost mezi avatarem a odkazem nebo vyplňujeme rozevírací komponentu - žádný mezerník v našem produktu by neměl být libovolný nebo neúmyslný.

Stejně jako u typu, i při dodržení mezery můžeme zajistit, aby každá z našich součástí a rozvržení byla stejná. Moje nejoblíbenější stupnice rozestupu je mřížka 8dp Material Design. Elliot Dahl napsal velký článek o systému 8pt grid a jeho výhodách.

Při dodržení přírůstků 8 dB můžeme do naší sady produktů vykreslit řadu hodnot mezer, které můžeme použít k návrhu každé jednotlivé komponenty a rozvržení.

Tyto hodnoty mezer můžeme také použít k definování sady šířek, výšek a výšek čar, které můžeme znovu použít pro změnu velikosti tlačítek, vstupů formuláře, avatarů a dalších podobných komponent. Protože tyto komponenty se často vyskytují vedle sebe ve webových produktech, je užitečné, pokud sledují stejnou stupnici velikosti, aby nedošlo k nežádoucím nesrovnalostem.

Mezery mezi písmeny

Jak jsem již zmínil, velikost písma není jediná vlastnost stylu, kterou musíme definovat textové komponenty. Mezery mezi písmeny jsou další užitečnou vlastností, kterou můžeme použít k utažení velkých čísel nebo umožnit dýchání menších čísel.

Trik by měly udělat 3 nebo 4 mezery.

Budování knihovny komponent

Nyní, když jsme definovali naši globální paletu stylů, můžeme tyto stavební bloky vzít a začít vytvářet knihovnu komponent. Navrhování komponent není z větší části tvořivý proces - předdefinované styly jednoduše mapujeme na komponenty.

V této fázi bychom neměli potřebovat jediný styl, který již nebyl v naší paletě stylů definován. K kreativnímu procesu došlo během fáze návrhu palety stylů. Od tohoto okamžiku, ať už se jedná o barvu, velikost písma, okraj / výplň, šířku / výšku nebo jinak, by měl být každý styl, který používáme k návrhu našich komponent a rozvržení, vytržen z naší palety stylů. Téměř nic nového by nemělo být nutné zavádět. Mohlo by to znít extrémně nebo nepřiměřeně, ale naopak, tady si myslím, že spousta lidí je na scestí.

Dave Rupert nedávno provedl tento průzkum na Twitteru s dotazem, kam vložit kód, který přepíše styling na komponentu tlačítka, pokud je toto tlačítko například v modální komponentě.

Harry Roberts (podívejte se na tuto úžasnou práci) a poté vysvětlil své myšlenky na toto ve svém vlastním článku. Poté se Jonathan Snook rozšířil svými vlastními myšlenkami. I když souhlasím se závěry, k nimž dospěl Harry i Jonathan, nakonec si myslím, že celá rozprava je prostě zbytečná.

Je protichůdné navrhovat komponentu s úmyslem globálního opětovného použití a pak tuto komponentu upravit pouze v jedné konkrétní části produktu. Tím se v první řadě překonává účel vytvoření globální knihovny součástí. Kdykoli vidím styly, které potlačují jiné styly, obvykle jde buď o hackování komponenty, aby se vešel do stísněného prostoru, nebo o změnu variace komponenty, protože v dřívějších fázích návrhu nedošlo k dostatečnému plánování.

Pokaždé, když přepíšete globální součást v jedné oblasti produktu, narušíte také konzistenci vašeho konstrukčního systému. Pokud provedete dostatek sporadických úprav součástí roztroušených po celém produktu, již nemáte konzistentní konstrukční systém. Máte jen konstrukční systém s nekonzistentním nepořádkem, který visí na zadku.

Podívejme se na několik běžných součástí a projdeme si, jak je můžeme sestavit pomocí stylů, které jsme definovali v naší paletě výše.

Skromné ​​tlačítko

Začněme s jednoduchou komponentou tlačítka, abychom ukázali, jak je možné sestavit komponenty pomocí pouze stylů, které jsme předdefinovali v naší paletě stylů.

Více komponent

Tyto barvy, velikost písma, stíny a výplňové hodnoty jsou opět vytrženy přímo z palety stylů, kterou jsme předdefinovali výše.

Zkusme něco trochu fantazijnějšího…

Když máme několik komponent navržených a sestavených, můžeme začít kombinovat více komponent a vytvářet tak složitější komponenty, jako je tato rozbalovací komponenta.

Tato rozbalovací komponenta nepoužívá jediný styl mimo paletu základních stylů, kterou jsme definovali dříve. Pomocí této metody můžeme navrhnout celou knihovnu komponent, poté přejít na širší rozvržení a nakonec na celé obrazovky.

Tipy na cestu

  • Některé komponenty budou vyžadovat hodnoty, které nejsou definovány v naší paletě stylů, například šířka postranního panelu. Někdy tyto hodnoty budou jen 1/3 šířky výřezu nebo něco podobného. Jindy budou tyto hodnoty libovolné a nelze je znovu použít, a to je naprosto v pořádku. Jde o to přemýšlet o tom, které styly by měly být znovu použitelné (nejvíce) a které styly by neměly.
  • Nechte komponenty dělat svou věc. Nepokoušejte se přidávat okraje pro tlačítka, vstupy, nadpisy nebo jiné komponenty. Na úrovni komponenty byste měli definovat pouze styly, které se zdají být jednotné v každé jednotlivé instanci dané komponenty. Protože marže se liší případ od případu, je lepší je použít pomocí balíku div. Harry Roberts napsal vynikající článek, který se tohoto bodu dotýkal.

Pracuji na plně rozvinutém souboru nástrojů CSS založeném na rámci Bantam CSS, který bude zahrnovat všechny komponenty uvedené v tomto článku a mnoho dalších. Tento projekt je určen pro produkt Modulz, na kterém pracuji, ale pokud máte zájem sami používat tento nástroj UI, dejte mi vědět na Twitteru. Pokud budu mít dostatek zájmu, budu to open-source.