5 Techniky jemného ladění UX s barvami
Barva je jedním z klíčových prvků každého systému návrhu. Na webových stránkách nebo v aplikacích může být barva použita různými způsoby: někdy může být barva použita k vytvoření ohniska kontrastu nebo omezováním barvy na vybrané místo; barva může také pomoci při vytváření hierarchie, a tím ovlivnit, kde uživatel vypadá.
V tomto článku budeme hovořit o tom, jak strategicky používat barvu.
1. Vytvoření bodu zaostření pomocí poměrů
Dobrým příkladem barevných proporcí je design Viporte . Při procházení dolů na jejich domovskou stránku je každá sekce zdobena velkým písmenem uprostřed. Písmeno je vyplněno krásnou barvou před tím, než animace sekcí začnou. Barva různých obrázků, které animují, souvisí s barvou písmen. Ohnisková vzdálenost je zcela jistě ve středu částí díky částečnému účelovému použití barvy. Proporce se liší - někdy je tam malá barva a někdy je toho hodně. Ať tak či onak, proporce se používají k tomu, aby upoutaly pozornost do ohniska. Pokud by byla barva zřetelnější na všech místech v každé sekci, ohnisko by nebylo tak jasné.
2. Pozornost prostřednictvím kontrastu
Další věc, kterou barva může manipulovat, je kontrast. Když jsou barvy celkového vzhledu klidné nebo měkké, přidáním kontrastní barvy se na obrázky zvýší pozornost.
To je přesně to, co se děje v designu Thinx . Na domovské stránce je celková barevná schéma rozhraní skutečně černobílá. Přesto se design značně spoléhá na četné fotografie. Zejména v horní části domovské stránky mají fotky spodního prádla tmavě červené pozadí. Ve srovnání se všemi ostatními na stránce je to docela odvážné. Není pochyb o tom, že tady je tmavě červená. Červená barva má mnohem vyšší kontrast vůči černé a bílé barvě. Líbí se mi, že používám Thinx jako příklad, protože ukazuje, že jasné a neonové barvy nejsou jediné, které jsou vhodné pro čerpání pozornosti někoho prostřednictvím kontrastu. Je to opravdu jen vyrovnávací akt dvou barev, který nechá jeden z nich opravdu vyčnívat.
3. Použijte barvu k vytvoření vzorků UX
Nejlepší způsob, jak vytvořit vizuální vzory, je konzistence. Vzory, podle pořadí, vytvářejí vztahy, které si uživatel může zvyknout. Je to stejný způsob, jakým jsou uživatelé zvyklí na ikony certiny, které se vztahují k určitým činnostem, tj. Koše mohou znamenat smazání. Barvy jsou mnohem subjektivnější, protože každá webová stránka nebo aplikace mohou mít svůj vlastní význam pro barvy.
Vezměme vztah s modrou barvou Underbelly . Je to jednoduchý příklad a je to dokonalé. Vše, co lze kliknout na webových stránkách Podsvícené, je modré. Po několika sekundách používání webových stránek je zřejmé, že jejich odkazy jsou modré. A tak vytváříte vzory prostřednictvím barvy. Vzory jsou dobré, protože umožňují uživatelům a návštěvníkům snadno rozpoznat něco. Snadnější rozpoznání se stává, čím méně lidí si myslí a teď všichni víme, jak je to šťastné Steve Krug .
4. Vytváření hierarchie přes barvu
Další věc barvy může být dobré pro založení hierarchie. Na Stránka produktu Skore , téměř každá část má pro ni prvky zeleně. Nejenže je zelená opakování - což vytváří rozpoznatelný vzorec - ale také pomáhá rozlišovat důležité části kterékoli části. Často je snadné vysvětlovat hierarchii prostřednictvím takové velikosti písma. Intenzita barvy, stejně jako namontování barvy v použití může být skvělé při nastavení hierarchie také.
V příkladu Skore má zelená dobrý kontrast se šedým textem a bílým pozadím. Vyniká. Kromě toho se jejich barevné schéma nespoléhá na další barevné akcenty, které vytvářejí zelenou primární vrstvu. To vše přispívá k tomu, že každá sekce zobrazuje hierarchii. Proto zelená barva pomáhá vést uživatele očí k důležitým prvkům, které poskytují příjemnou hierarchii v každé sekci. Zelené prvky informují uživatele, kde se mají dívat.
5. Použití podobností barev
Ze všech různých věcí, které děláme s barvami jako návrháři, nejvíce používáme a opakovaně je používáme, abychom udrželi konzistenci v rámci designu. Podívejme se na to InVision je konec roku vstupní stránky. V horní části stránky se používá jako obrázek na pozadí růžový a fialový gradient. Dále je na stránce růžová a fialová použita také pro barvy tlačítek. Navíc se vstupní stránka znovu použije na bílém pozadí růžové a fialové barvy. Rovněž znovu používá černé a šedé barvy textu na bílém pozadí. Pokud by se barvy vždycky lišily, nevypadalo to tak skvěle.
Podívejme se na další příklad, konkrétně Co-motion . Na své domovské stránce používá kreativní studio několik různých barev. Ale oni jsou všichni podobní dost v jejich tónu poskytnout soudržný tok. V tomto příkladu neexistuje nic, co by vyniklo konkrétně, což může být také dobrým cílem. V tomto případě je důraz kladen na barvu na dobrý a soudržný tok stránky, kde se snažíte udržet uživatele zapnutý a posouvat.
Závěr
Barva může být skvělým nástrojem při dosahování různých cílů. Barva může pomoci definovat a vytvořit hierarchii a poskytnout bod zaostření. Barevný důraz přichází v různých formách. Každopádně, práce s barvou může být spousta legrace. Ovlivňování místa, kde návštěvník nebo uživatel jde, může být jednodušší pomocí strategického barevného schématu.