Při vývoji barevných schémat produktu s návrhářem jsme viděli nekonzistence v pojmenování proměnných barev. Provedl jsem průzkum, po kterém jsem si uvědomil, že je velmi důležité sémanticky správně pojmenovat proměnné před fází vývoje.
Možná bude hypotéza popsaná v tomto článku dobrou pomůckou pro diskusi a řešení jednoho z problémů, které vzniknou při vývoji designového systému, a to správné nastavení barevného schématu.
Barevné charakteristiky
Barvy jsou rozděleny do dvou kategorií: chromatická a achromatická . Achromatické barvy nejsou spektrální barvy. Černá, bílá, odstíny šedé. Mají pouze jednu vlastnost – lehkost.
Barevné systémy
Klasifikace barevného systému:
- Podle světla (RGB). Směs. Červená, zelená, modrá
- Podle inkoustu (CMYK). Odčítání. Azurová, purpurová, žlutá, černá
Na monitorech se zabýváme světlem, pojďme se tedy blíže podívat, jaký je barevný systém světla.
V roce 1676 provedl Isaac Newton následující experiment: prošel paprskem světla přes trojúhelníkový hranol a získal barevné spektrum – od červené po fialovou, kromě fialové. Poté prošlo spektrum sběrnou čočkou, v důsledku čehož byla získána bílá barva.
Newton svým experimentem dokázal, že bílá není primární a skládá se z barevných složek s různým stupněm lom světla. Tyto komponenty se právě ukázaly jako primární. Poté prošel modrou barvou dalším trojúhelníkovým hranolem, ale modrá barva se nerozložila na nové spektrum, což zase dokázalo, že tato barva je primární.
Barva světla
Před tímto experimentem všichni věřili, že objekty mají barvu. Newton však určil, že předmět, když na něj dopadá paprsek světla, absorbuje část světelných vln a část odráží. A podle toho, v jakém úhlu lom nastává, takto uvažujeme barvu objektu.
„Červená nádoba vypadá červeně, protože absorbuje všechny ostatní barvy světelného paprsku a odráží pouze červená. “
Johann Goethe smíchal fialovou a červenou, čímž získal purpurovou barvu a objevil se nový barevný kruh.
Philip Otto Runge rozšířil škálu primárních přidáním černé a bílé barvy. Runge založil své závěry na experimentech s pigmenty, díky nimž se jeho výuka přiblížila malbě.
Johannes Itten. Jeho 12dílné barevné kolo ukazuje nejběžnější systém barevného uspořádání na světě a jejich vzájemnou interakci.
Itten zvýraznil primární barvy, barvy druhého řádu (zelená, fialová a oranžová), které se získají smícháním dvojice základních barev a barev třetího řádu, které se získají smícháním základní barvy s barvou druhého řádu.
Michel Chevreul jako první vyvinul barevný atlas. Je založen na 6 základních barvách ve dvanácti modifikacích.
Barva barvy (Subtraktivní barva)
Tento systém předpovídá výkonové spektrum světla po průchodu postupně absorbujícími vrstvami různými prostředími . Tvůrcem subtraktivní barevné kombinace je Moses Harris.
Pokud je červený papír (jeho povrch pohlcuje všechny paprsky kromě červené) osvětlen zeleně, bude se nám zdát černý, protože zelená neobsahuje červené paprsky, které by se mohly odrazit naším červeným papírem. Všechny barvy jsou skutečné (savé), takže při jejich míchání musíte použít principy odčítání.
Jaký formát používá většina lidí?
Od CSS 2.1 je zvykem používat barvy HEX nebo RGB. Nevýhody použití této formy barevné reprezentace jsou:
- Systém není intuitivní. Nerozdělujeme barvu na červenou, zelenou a modrou a nepřevádíme barvu na hexadecimální číselný systém a neříkáme například „Kreml # ff0000“.
- Neexistuje žádný Podpěra, podpora. Návrháři možná potřebují 10 typů stejné barvy a v HEX a RGB není žádný odkaz na odstíny.
HSL (odstín, sytost, světlost)
Barva v HSL reprezentaci jsou definovány tři hodnoty:
- tón (odstín);
- hodnota (světlost, jas, hodnota);
- chromý (chromatičnost, sytost, sytost, sytost).
Munsell má trojrozměrný kolorimetrický systém. Definuje barvu ve třech souřadnicích.
Pokud barvy komponent přejmenujeme, získáme následující obrázek:
Vyberte barevné schéma
Téma, bílé označení, redesign – to jsou hlavní body, kterým může vývojový tým čelit. A aby se tyto body nezměnily v problémy, musíte od samého začátku vývoje podniknout řadu kroků.
1. Volba typu barevného schématu
Takže, jaká jsou barevná schémata podle teorie barev:
- Monochromatický (s použitím jedné primární barvy a jejích odstínů)
- Bezplatné schéma – vezmou se barvy, které jsou umístěny na opačných stranách barevného kola. Kombinace těchto barev vypadá velmi živě a energicky. Je lepší nebrat takové schéma pro vytváření textových kompozic. Nejlépe se to používá, když potřebujete něco zvýraznit nebo zdůraznit.
Celkem existuje 5 barevných schémat:
- Monochromatické schéma (jedna primární barva).
- Další schéma (dvě základní barvy).
- Triadické schéma (tři základní barvy).
- Čtyřboké schéma (čtyři základní barvy).
< li> Sousední schéma (dvě nebo tři základní barvy).
Nebudeme ztrácet čas podrobnou analýzou každého schématu, provádí se to tady, pojďme se blíže ke kódu.
2. Pojmenování proměnných
Většina jmen barevných proměnných které jsou nyní: přízvuk, základ, vysoký, kontrastní tlačítko alfa, pozitivní, negativní, slabý, úspěch, varování … spousta z nich. A téměř ke každému označení existují otázky.
- Vezměme si například vysoký – k čemu je vysoký relativně, je nízký, o kolik vyšší je vyšší a o jaký parametr je nízký?
- Tlačítko-kontrast-alfa. Pokud se budete řídit logikou tohoto pojmenování, měla by existovat řada alfa, beta, gama. Otázkou opět zůstává: jak se budou lišit a do jaké míry? Jakou barvu budou mít průměrné hodnoty?
- Nízká úroveň abstrakce: tlačítko, text, odkaz atd.
Jmenováním si myslím, že je třeba dodržovat k řadě pravidel:
- Místo alfa, beta, gama použijte silné, základní, slabé.
- Primární.
Vzhledem k mnoha abstrakcím v pojmenování (nemůžete určit konkrétní parametr prvku značky nebo samotný prvek v názvu proměnné) jsem si myslel, že by bylo hezké držet se pojmenování podle vrstev (jen málo lidí si pamatuje doplněk Tilt ve Firefoxu). Abychom odlišili jeden prvek od druhého, stačí si představit, že je jen o jednu úroveň výše. A aby to vyniklo, musí nastavit právě tuto barvu pozadí, něco jako pozadí a popředí.
A pak jsem narazil na vysvětlení principů pojmenování proměnných pro Material Design.
- Pozadí (nadmořská výška 0dp) překrytí)
- povrch (s překrytím nadmořské výšky 1 dp)
- primární
- sekundární
- Na primární
- Na sekundární
< li> Na pozadí
2.1 Oddělení názvů
Nejlepším řešením pro vývojáře a designéry je definování proměnných a middlewaru, který to všechno spojuje. To znamená, že proměnné pro vývojáře popisují pouze jednotlivé vlastnosti s odkazem na jejich umístění ve „vrstvách“ toku prvků. Ale proměnné pro designéry by naopak měly být spojeny konkrétně s barvou, tónem, jasem.
To je , k popisu vlastností prvků nám bude stačit následující sada proměnných:
/* proměnné prvků */–global-background: var (- bg); –povrch: var (- slabý); –on-color: #fff; –on-background: var (- slabý kontrast); –on-primární: var (- na barvu); –on-secondary: var (- on-color); –on-error: var (- na barvě); –on-surface-prime: var (- slabý kontrast); –on-surface-second: var (- kontrastně silný); –input-background: var (- bg-slabý); –input-outline: vložka 0 0 0 1px var (- sekundární silná); –komponenta-obrys: žádný;
Za zmínku stojí také to, že k popisu hranic prvku je lepší použít místo rámečku rámeček stín, protože je to složitější (můžeme použít alespoň tři hodnoty stínů najednou):
– -komponentní obrys: 15px 17px 26px -4px rgba (34, 60, 80, 0,6), 15px 17px 19px -11px rgba (20, 117, 191, 0,6), -22px -36px 19px -11px rgba (56, 167, 103, 0,6);
Navíc nezmění velikost celého tlačítka nebo například vstupu (pokud vezmeme jako zdrojová data box-sizing: border-box). Zdá se mi, že je to dobré řešení, protože vývojáři popisují sadu proměnných pro každou komponentu a návrhář může později hrát s barvami nebo barevnými schématy, s designovými přístupy (skeuomorphism, neumorphism) nebo dokonce použít barvy LCH, vše podle uvážení návrháře.
Lea Verou ve svém článku poukazuje na možnost převodu barevného schématu pro tmavé téma pomocí parametru L (světlost) ve formátu HSL. Výsledkem je žebřík pro lehké téma:
–l-0: 0%; -l-30: 30%; -l-40: 40%; -l-50: 50%; -l-90: 90%; -l-100: 100%;
a pro temnou – inverzní žebříček proměnných:
: root {–l-0: 100%; -l-30: 70%; -l-40: 60%; -l-90: 10%; -l-100: 0%; }}
A zdá se, že vše je logické, můžete jednoduše definovat aktuální parametr jasu jako vzorec 100% – světlost a bude to průměr pro tmavá i světlá témata. Hsl má však nevýhodu. U lehkého tématu nebude dostatečný kontrast u řady prvků. Řešení, které navrhla Lea Verou pomocí barev LCH, se mi zdá, je stále příliš hrubé, je to stále koncept ve specifikacích w3c.
Závěry:
- v abyste mohli kompetentně používat barevná schémata, ve kterých se barvy nespojují (nebo nebude existovat dostatečný kontrast), musíte oddělit proměnné „pro návrháře“ a proměnné „pro vývojáře“.
- Nastavení barevného schématu spočívá zcela s návrhářem a dává pouze finální konfigurační soubor.
- Stripe vytvořil ve svých produktech nástroj pro interní použití, ale k vývoji takového nástroje jsou potřeba zdroje.
Frontendový vývojář
