Če želite izbrati barve za trgovino Shopify, začnite s tremi vlogami: nevtralna osnova, ki olajša branje, glavna barva, ki izraža blagovno znamko in barvo poudarka, rezervirana za pomembna dejanja Učinkovita paleta vsebuje malo barv, ostaja dosledna na vseh straneh in ohranja zadosten kontrast tako na namizju kot na mobilnem telefonu.
Vsaki barvi dajte posebno vlogo
Barva mora opravljati stabilno funkcijo v vmesniku Če ista modra služi kot ozadje, povezava, sekundarni gumb in sporočilo o napaki, obiskovalec ne ve več, kaj naj pogleda.
Nevtralne barve
Umazano bela, zelo svetlo siva, skoraj črno modra ali globoko siva struktura ozadja in besedila Zasedajo večino strani in dajejo prostor izdelanim vizualnim elementom.
Glavna barva
Povezuje logotip, določene naslove, grafične elemente in močna področja.Ostati mora prepoznaven, ne da bi vdrl v celotno trgovino.
Barva naglasa
Rezervirajte ga za pomembne gumbe, uporabne značke ali prednostne informacije. Njegova redkost mu daje večji učinek kot njegova nasičenost.
Funkcionalne barve
Uspeh, napaka, opozorilo, prelom ali preverjanje veljavnosti morajo ostati razumljivi Vedno dodajte besedilo ali ikono: samo barva ni dovolj.
Preprosta metoda v šestih korakih
Ne odločajte se samo iz logotipa.Stilska barva na vizitki lahko postane utrujajoča, ko pokriva celoten zaslon.Preizkusite paleto s pravimi naslovi, fotografijami, cenami, različicami in gumbi.
Trije primeri uravnoteženih palet
Ti primeri služijo kot izhodišče Prava kombinacija je odvisna od izdelkov, fotografije, pozicioniranja in barv, ki so že povezane z blagovno znamko.
Premium trezen
Polnočno modro, zelo svetlo ozadje in mat zlati naglas Primerno za vrhunsko predstavitev, če zlato ostane dekorativno ali prejme dovolj temno besedilo.
Topla naravna
Globoko zelena, slonovina in terakota Ta paleta dobro deluje z naravnimi materiali, pod pogojem, da ohranite berljivost majhnih besedil.
Dinamično moderno
Mornarsko modra, svetlo modra in oranžna.Modra organizira vmesnik; oranžna opozarja na izbrano dejanje, ne da bi se pojavila na vsaki komponenti.
Sladko uredništvo
Vijolična antracitna, rožnato bela in pridušena malina.Mehka paleta ostane profesionalna, če besedila in gumbi ohranjajo jasno razliko v svetilnosti.
Kontrast: pravilo, ki je pred estetiko
Za vsakdanje besedilo si prizadevajte za vsaj kontrastno razmerje 4,5:1. Za resnično veliko besedilo je minimalni prag 3:1. Potrebne ikone, obrobe in vizualne informacije morajo prav tako ostati razločljive.Ti pragovi izhajajo iz priporočil WCAG iz W3C.
| Element | Priporočena kontrola | Pogosta napaka |
|---|---|---|
| Skupno besedilo | Kontrast najmanj 4,5:1 z dnom | Siva presvetla na belem ozadju |
| Glavni gumb | Berljivo besedilo, oris ali prepoznavna oblika | Belo besedilo na svetli barvi presvetlo |
| Povezava v odstavku | Kontrastna barva in podčrtavanje ali drug namig | Razlika zaznavna samo po barvi |
| Sporočilo napake | Barva, ikona in eksplicitno besedilo | Polje označeno samo z rdečo obrobo |
| Stanje tipkovnice | Vidna kontura fokusa na vseh ozadjih | Fokus odstranjen iz estetskih razlogov |
Kako uporabiti paleto v Shopify?
V urejevalniku tem Shopify barvne sheme vključujejo ozadja, besedilo, povezave, obrobe in gumbe.Uporabite nekaj doslednih diagramov v združljive odseke, namesto da ustvarite novo kombinacijo za vsak blok.
Glavni jasen diagram
Belo ali zelo svetlo ozadje, temno besedilo, vidne povezave.Uporabite ga za večino zbirk, listov izdelkov in vsebine.
Temni vzorec
Rezervirajte ga ob vznožju, uredniškem vložku ali močnem delu. Prisilite jasna besedila in celice, da ohranijo svojo barvo.
Shema naglasa
Uporabite ga občasno za obvestilo ali poziv k dejanju.Preverite vsa stanja: normalno, obiskano, premaknjeno z miško, onemogočeno in osredotočeno.
Dosledno blagajno
Vzemite nazaj blagovno znamko brez previsokega plačila.Kontrast, razumevanje polj in kontinuiteta s trgovino ostajajo prioritete.
Za razširitev tega dela se posvetujte tudi vodnik po gumbih za dejanja in vodnik po mobilni izkušnji.
Napake, zaradi katerih je trgovina nedosledna
Pomnoži naglase
Tri svetle barve, ki se uporabljajo z enako intenzivnostjo, tekmujejo med seboj.Obiskovalec ne more več razlikovati gumba, značke in sekundarnih informacij.
Barva vseh ozadij
Proizvedene fotografije izgubijo natančnost in stran postane utrujajoča.Nevtralna osnova na splošno zagotavlja stabilnejši okvir.
Spremeni glede na strani
Modri gumb na domači strani, zelena na kartici in oranžna v košarici oslabijo vizualno učenje tečaja.
Pozabite na tehnična stanja
Obiskane povezave, onemogočene gumbe, napake, fokuse in izbrane variante je treba testirati, še posebej po dodajanju aplikacije.
Katero storitev izbrati glede na potrebe?
Kontrolni seznam pred preverjanjem barv
- Paleta vključuje osnovo, glavno barvo in naglas.
- Vsaka barva ohrani enako vlogo na vseh straneh.
- Sedanje besedilo dosega zadosten kontrast s svojim ozadjem.
- Gumbi ostanejo berljivi v vseh svojih stanjih.
- Povezave niso prepoznane samo po barvi.
- Sporočila o napakah uporabljajo tudi besedilo ali ikono.
- Izdelane fotografije ostajajo zveste in dobro ločene od ozadja.
- Temna shema ne nalaga belega besedila na svetlobnih zemljevidih.
- Paleta je krmiljena pri širini 375 px.
- Dobrodošlica, zbirke, kartice, košarica in blagajna so testirani.
Shopify Store Barve Pogosta vprašanja
Koliko barv morate uporabiti v trgovini Shopify?
Pogosto so dovolj tri glavne vloge: nevtralna osnova, barva blagovne znamke in naglas.Dodatne odtenke lahko uporabimo za meje, sekundarna ozadja in funkcionalna stanja, ne da bi postali nove prevladujoče barve.
Katera barva se največ prodaja?
Nobena barva ne zagotavlja večje prodaje Jasnost ponudbe, vidnost gumbov, kontrast in doslednost potovanja so pomembnejši od tako imenovane univerzalne barve pretvorbe.
Ali mora biti gumb Dodaj v košarico zelen?
Ne. Predvsem se mora razlikovati od okolja, ostati skladen z blagovno znamko in predstaviti berljivo besedilo.Ista barva dejanja naj ohrani enako vlogo na glavnih straneh.
Ali lahko uporabimo črno ozadje na celotni trgovini?
Da, če izdelki, besedila, polja in interaktivna stanja ostanejo popolnoma berljivi.Temno vesolje zahteva več kontrolnikov in je morda manj primerno za določene fotografije ali kategorije.
Kakšna nasprotja je treba spoštovati pri besedilih?
Cilj vsaj 4,5:1 za vsakdanje besedilo in 3:1 za resnično veliko besedilo Funkcionalne informacije in pomembni vizualni kazalniki morajo prav tako ostati razločljivi.
Kako spremeniti barve v Shopify?
Odprite urejevalnik tem, nato nastavitve teme in razdelek Barve Odvisno od teme lahko upravljate barvne sheme in jih uporabite za združljive odseke.
Ali naj natančno uporabimo barve logotipa?
Ne Logotip zagotavlja osnovo, vendar vmesnik potrebuje nevtralne, kontrastne in funkcionalna stanja. Nekatere barve logotipa je mogoče ohraniti kot poudarke in ne kot glavna ozadja.
Kako preizkusiti novo paleto, ne da bi motili trgovino?
Delajte na kopiji teme, uporabite paleto za nekaj reprezentativnih predlog, nato pa preverite računalnik, mobilni telefon, različice, nakupovalni voziček, obrazce in blagajno, preden začnete delovati.
Zgradite jasno paleto pred dekoriranjem trgovine
SiteQuiVend lahko analizira barvno konsistenco, kontrast besedila in gumbov ter uporabo na glavnih modelih Shopify. Cilj je izbrati intervencijo, ki je resnično potrebna, od ciljno usmerjenega popravka do bolj globalne prenove.
