Barva je jedním z nejmocnějších nástrojů v toolkitu návrháře. Může upoutat pozornost, nastavit náladu, ovlivnit emoce uživatelů, vnímání a jednání. S přetrvávající přítomností plochého a materiálového designu má barva v dnešním designu UI ještě větší význam. Jasné barvy jsou stejně vhodné i pro hravě kreslené kresby zaměřené na zábavu a pro elegantně minimalistické styly zaměřené na obchodní řešení. Tato všestrannost činí živé barvy jedním z největších designových trendů uživatelského rozhraní v roce 2017.

Výzva vibrujícího barevného trendu spočívá v tom, že může být použita mnoha různými způsoby a styly. V tomto článku se podíváme dále na čtyři trendy barevných schémat a diskutujeme o některých inspirativních příkladech, které je velmi účinně provádějí.

1. Monotónní

Jedním z nejpopulárnějších způsobů, jak používat v barvě zářivé barvy, je technika nazvaná monotónní. Monotónní palety obsahují jednu barvu se směsí odstínů a odstínů. Monotónně lze snadno vytvořit: Přemýšlejte o barvě, která nejlépe spolupracuje s vaší zprávou, a zvážit množství rozptylu mezi tóny.

Zlepšení čitelnosti

Monotone pomáhá vytvářet pevný základ pro obsah popředí a dbát na čitelnost. Spárovaný s dramatickou typografií, monotónní barevné schémata dokáží vytvořit skutečně nezapomenutelný zážitek.

001

Sydneystockhom používá tučnou barvu, aby vytvořila nezapomenutelný vzhled velmi jednoduchým způsobem

2. Duotone

Jak název napovídá, duotone je obraz složený ze dvou barev. Mohou to být dva odstíny stejné barvy nebo dvě kontrastní barvy. Technika, která byla kdysi tiskovou hlavou, našla nový život on-line. Díky společnosti Spotify se duotone téměř každodenně rozšiřuje.

Vytvořte atmosféru

Duotones vám umožňuje vstříknout jakýkoli obraz s emocionálními atributy jakékoliv barvy. Nezapomeňte, že různé barvy vyvolávají různé emoce. Měkká a skromná kombinace barev dokáže vytvořit vážnou atmosféru. Například v Holm Marcher & Co každý detail se snaží přispět k podnikatelské atmosféře a obrázky na pozadí nejsou výjimkou.

002a

Zatímco kombinace jasných barev dokáže vytvořit pocit štěstí. Hlavní vizuální Nový návrh designu je zarážející díky výraznému výběru barev. Vytvářejí přátelskou atmosféru a kladnou náladu.

002b

Zvyšte čitelnost

Duotone je schopen dát tomuto textu spoustu kontrastu. Upravuje barevné variace v obraze tak, aby text mohl být umístěn pomocí jedné barvy téměř kdekoli na obrázku.

002

3. Stoupání

Přechody se vrátily zpět do GUI, tentokrát pomocí komplementárních barev s vysokým kontrastem. Moderní přechody mohou obsahovat více barev, vyzařují ze středu, pocházejí z rohu nebo jsou horizontální.

Vytvořte moderní vzhled

Přechody se vrátily a dýchaly nový život do jasného barevného trendu. Spárovány s plochou barevnou paletou mohou vyvolávat pocity modernismu. Pouze jedna barva, Vzorek používá gradientní efekt na pozadí, aniž by se dostal do matných tónů.

003

Použitím jedné ze světlých, nasycených barev spojených s materiálem můžete vyvolající pocity modernismu.

Snadné rozložení očí

Přechody mohou zlepšit vizuální komunikaci. Přechod z oranžového na růžový Symoddy příklad níže poskytuje hloubku a kontrast k rozhraní a vytváří některé oko-chytání vizuální efekty. Přechod ze světla na tmavý vychází z přirozených vzorů lidského oka, které se pohybují od levého horního rohu stránky až po pravý dolní okraj.

004

Domovská stránka společnosti Symodd obsahuje plné gradientní pozadí od oranžové až růžové. Je to jemný gradient, jelikož dva odstíny se od sebe navzájem příliš neliší a dělají to snadněji na očích.

Použijte jej jako akcent

Zatímco gradient je často používán jako pozadí pro stránky, mohou pracovat i na menších místech. Zvažte použití gradientů jako přízvuk v navigaci, pro sekundární snímky nebo pro určité typy obsahu. Co je hezké v menších oblastech přechodu, je, že máte s touto technikou více volnosti. A pokud se používá v menších prostorách, může být vizuálně zajímavé hrát s několika barevnými páry, stejně jako Bloomberg v příkladu níže.

005

Bloomberg používá gradient pro ticker Poslední zprávy.

4. Překrytí

Překrytí filtrovává obraz pomocí barevného "objektivu". Obrazy s barevnými překryvy jsou již dlouhou dobu populární volbou návrhu, protože je snadné vytvořit tento efekt: prostě pokryjete obraz nebo video s poloprůhledným barevným rámečkem.

Zaměřte pozornost uživatele

Překryvné efekty mohou uživatelům pomoci zaměřit se na určité konstrukční prvky. Při použití jedné barvy jako překryvu však zvažte míru sytosti a průhlednosti barvy. Těžké barevné kombinace (méně průhlednosti a větší sytost) více zaostřují na samotnou barvu:

006

Barevná překryv používaná uživatelem Obrysy zaměřuje více na obrázek

Závěr

Je těžké najít designovou techniku, která je mnohem zábavnější než barva. Barevné efekty mohou být dramatické, působivé a dokonce klidné. Nebojte se jít ven z vaší komfortní zóny, pokud jde o práci s barvami. Ať už jste fanouškem jasných, odvážných odstínů nebo preferujete více minimalistickou černobílou barvu, je třeba si uvědomit, že neexistují žádné špatné barvy. Nejdůležitější je, jak je používáte.