Valitse Shopify-kaupan värit alkaen kolmesta roolista: neutraali pohja, joka helpottaa lukemista, pääväri, joka ilmaisee brändiä ja tärkeille toimille varattu korostusväri Tehokas paletti sisältää vähän värejä, pysyy yhtenäisenä kaikilla sivuilla ja säilyttää riittävän kontrastin sekä työpöydällä että mobiilissa.
Anna jokaiselle värille erityinen rooli
Värin on suoritettava vakaa toiminto rajapinnassa.Jos sama sininen toimii taustana, linkkinä, toissijaisena painikkeena ja virheviestinä, vierailija ei enää tiedä, mitä katsoa.
Neutraalit värit
Luonnonvalkoinen, hyvin vaaleanharmaa, lähes mustansininen tai syvänharmaa jäsentävät taustat ja tekstit.Ne vievät suurimman osan sivusta ja antavat tilaa tuotetulle visuaalisuudelle.
Pääväri
Se yhdistää logon, tietyt otsikot, graafiset elementit ja vahvat alueet.Se on säilytettävä tunnistettavissa ilman, että se hyökkää koko myymälään.
Aksenttiväri
Varaa se tärkeille painikkeille, hyödyllisille merkeille tai prioriteettitiedoille Sen harvinaisuus antaa sille enemmän vaikutusta kuin sen kyllästyminen.
Toiminnalliset värit
Onnistumisen, virheen, hälytyksen, katkoksen tai validoinnin on pysyttävä ymmärrettävänä.Lisää aina teksti tai kuvake: pelkkä väri ei riitä.
Yksinkertainen kuusivaiheinen menetelmä
Älä päätä logosta yksin.Tyylikäs väri käyntikortissa voi tulla väsyttäväksi, kun se peittää koko näytön.Testaa paletti oikeilla nimikkeillä, valokuvilla, hinnoilla, variaatioilla ja painikkeilla.
Kolme esimerkkiä tasapainotetuista paletteista
Nämä esimerkit toimivat lähtökohtana Oikea yhdistelmä riippuu tuotteista, valokuvauksesta, asemoinnista ja brändiin jo linkitetyistä väreistä.
Ensiluokkainen raitis
Keskiyön sininen, erittäin vaalea tausta ja mattakultainen korostus Sopii huippuluokan esittelyyn, jos kulta pysyy koristeellisena tai saa riittävän tummaa tekstiä.
Lämmin luonnollinen
Syvänvihreä, norsunluu ja terrakotta Tämä paletti toimii hyvin luonnonmateriaalien kanssa, edellyttäen että säilytät pienten tekstien luettavuuden.
Dynaaminen moderni
Laivastonsininen, kirkkaansininen ja oranssi Sininen järjestää käyttöliittymän; oranssi kiinnittää huomion valittuun toimintaan, ilman että se näkyy jokaisessa komponentissa.
Makea pääkirjoitus
Purppura antrasiitti, vaaleanpunaisen valkoinen ja vaimea vadelma Pehmeä paletti pysyy ammattimaisena, jos tekstit ja napit säilyttävät selkeän eron luminanssissa.
Kontrasti: sääntö, joka tulee estetiikan edelle
Jokapäiväisen tekstin kohdalla pyritään vähintään kontrastisuhteeseen 4,5:1. Todella suuren tekstin osalta vähimmäiskynnys on 3:1. Tarvittavien kuvakkeiden, reunojen ja visuaalisen tiedon on myös pysyttävä erotettavissa Nämä kynnysarvot tulevat W3C: n WCAG-suosituksista.
| Elementti | Valvonta suositellaan | Usein tapahtunut virhe |
|---|---|---|
| Yhteinen teksti | Vähintään 4,5:1 kontrasti pohjalla | Harmaa liian kevyt valkoisella taustalla |
| Pääpainike | Luettava teksti, ääriviiva tai tunnistettava muoto | Valkoinen teksti kirkkaalla värillä liian vaalea |
| Linkki kappaleessa | Vastaväri ja alleviivaus tai muu vihje | Ero havaittavissa vain värin mukaan |
| Virhesanoma | Väri, kuvake ja eksplisiittinen teksti | Pelto, joka on merkitty vain punaisella reunuksella |
| Näppäimistön tila | Näkyvä tarkennusmuoto kaikissa taustoissa | Keskittyminen poistettu esteettisistä syistä |
Miten soveltaa paletti Shopify?
Shopify-teemaeditorissa värimallit sisältävät taustat, tekstin, linkit, reunat ja painikkeet. Käytä muutamia johdonmukaisia kaavioita yhteensopiviin osioihin sen sijaan, että luot uuden yhdistelmän jokaiselle lohkolle.
Pääasiallinen selkeä kaavio
Valkoinen tai erittäin vaalea tausta, tumma teksti, näkyvät linkit Käytä sitä suurimmalle osalle kokoelmista, tuotearkeista ja sisällöstä.
Tumma kuvio
Varaa se alatunnisteeseen, toimitukselliseen inserttiin tai vahvaan osioon Pakota selkeät tekstit ja solut säilyttämään oma värinsä.
Aksenttijärjestelmä
Käytä sitä satunnaisesti ilmoitukseen tai kehota toimimaan Tarkista kaikki tilat: normaali, vierailtu, leijutettu, poistettu käytöstä ja keskity.
Johdonmukainen kassa
Ota brändi takaisin perimättä maksua liikaa.Kontrasti, kenttien ymmärtäminen ja jatkuvuus kaupan kanssa ovat edelleen prioriteetteja.
Tämän työn laajentamiseksi ota myös yhteyttä toimintapainikeopas ja mobiilikokemuksen opas.
Virheitä, jotka tekevät kaupasta epäjohdonmukaisen
Moninkertaiset aksentit
Kolme kirkasta väriä, joita käytetään samalla intensiteetillä, kilpailevat keskenään.Vierailija ei voi enää erottaa painiketta, merkkiä ja toissijaisia tietoja.
Väritä kaikki taustat
Tuotetut valokuvat menettävät tarkkuutta ja sivu väsyttää Neutraali pohja tarjoaa yleensä vakaamman kehyksen.
Vaihda sivuista riippuen
Sininen nappi kotisivulla, vihreä lomakkeessa ja oranssi korissa heikentää kurssin visuaalista oppimista.
Unohda tekniset tilat
Käydyt linkit, käytöstä poistetut painikkeet, virheet, tarkennukset ja valitut versiot tulee testata, erityisesti sovelluksen lisäämisen jälkeen.
Minkä palvelun valita tarpeen mukaan?
Tarkistuslista ennen värien validointia
- Paletti sisältää pohjan, päävärin ja korostuksen.
- Jokainen väri säilyttää saman roolin kaikilla sivuilla.
- Nykyisellä tekstillä saavutetaan riittävä kontrasti taustansa kanssa.
- Napit pysyvät luettavissa kaikissa tiloissaan.
- Linkkejä ei tunnisteta pelkästään niiden värin perusteella.
- Virheviestit käyttävät myös tekstiä tai kuvaketta.
- Tuotetut valokuvat pysyvät uskollisina ja hyvin irti taustasta.
- Tumma skeema ei aseta valkoista tekstiä valokarttoihin.
- Lavaa ohjataan 375 px leveydellä.
- Tervetulotoivotus, kokoelmat, kortit, kori ja kassa testataan.
Shopify Store Colors FAQ
Kuinka monta väriä kannattaa käyttää Shopify-kaupassa?
Kolme pääroolia riittää usein: neutraali pohja, brändiväri ja korostus Lisäsävyjä voi käyttää reunuksiin, toissijaisiin taustoihin ja toiminnallisiin tiloihin, ilman että niistä tulee uusia hallitsevia värejä.
Mikä väri myy eniten?
Mikään väri ei takaa enemmän myyntiä Tarjouksen selkeys, painikkeen näkyvyys, kontrasti ja matkan johdonmukaisuuden määrä enemmän kuin ns. universaali muunnosväri.
Pitääkö Lisää ostoskoriin - painikkeen olla vihreä?
Ei. Ennen kaikkea sen on erotettava itsensä ympäristöstä, pysyttävä johdonmukaisena brändin kanssa ja esitettävä luettavaa tekstiä.Sama toimintavärin tulee säilyttää sama rooli pääsivuilla.
Voimmeko käyttää mustaa taustaa koko kaupassa?
Kyllä, jos tuotteet, tekstit, kentät ja interaktiiviset tilat pysyvät täysin luettavissa Tumma universumi vaatii enemmän ohjaimia ja saattaa sopia vähemmän tiettyihin valokuviin tai luokkiin.
Mitä vastakohtia teksteille tulisi kunnioittaa?
Tavoite vähintään 4.5:1 arkitekstille ja 3:1 todella suurelle tekstille Toiminnallisen tiedon ja tärkeiden visuaalisten indikaattoreiden tulisi myös pysyä erotettavissa.
Miten vaihtaa värejä Shopifyssa?
Avaa teemaeditori, sitten teemaasetukset ja Värit-osio Teeman mukaan voit hallita värimalleja ja soveltaa niitä yhteensopiviin osioihin.
Pitäisikö meidän käyttää logon värejä tarkasti?
Ei. Logo tarjoaa perustan, mutta käyttöliittymä tarvitsee neutraaleja, kontrasteja ja toiminnallisia tiloja. Jotkut logovärit voidaan säilyttää aksentteina päätaustojen sijaan.
Miten testata uusi paletti häiritsemättä kauppaa?
Työskentele teeman kopion parissa, levitä paletti muutamiin edustaviin malleihin ja tarkista sitten tietokone, mobiili, muunnelmat, ostoskori, lomakkeet ja kassa ennen live-asua.
Rakenna selkeä paletti ennen myymälän sisustamista
SiteQuiVend voi analysoida värien johdonmukaisuutta, tekstin ja painikkeen kontrastia sekä sovellusta suurissa Shopify-malleissa. Tavoitteena on valita todella välttämätön interventio kohdistetusta korjauksesta globaalimpaan uudistukseen.
