Miten määrität myymälän globaalin tyylin?

Hei ja tervetuloa GoodBarberin takahuoneeseen. Tänään käsittelemme tehokasta työkalua sovelluksesi suunnitteluun: globaalia tyylivalikkoa. Globaalin tyylin avulla voit hallita sovelluksesi yleistä suunnittelua yhdestä valikosta. Tässä valikossa valitut värit, fontit ja tehosteet sovelletaan sovelluksesi jokaiseen osioon. Mutta ole varovainen, sillä jokainen tässä valikossa tehty muutos kohdistuu sovelluksesi kaikkiin osioihin. Napsauta valikossa Sisältö ja muotoilu > Muotoilu > Yleinen muotoilu, napsauta Global Style.

Ensin on valittava väriteema. Väriteema on yhdistelmä värejä, jotka sopivat täydellisesti yhteen. Globaali tyyli tarjoaa kirjaston väriteemoja. Voit selata kirjastoa napsauttamalla Muokkaa. Kuten näet, minulla on paljon vaihtoehtoja. Jos haluan muuttaa varsinaista teemaani, napsauta muokkausta, selaa sivun alareunaan ja napsauta Luo väriteema ja valitse sitten värit.

Siirrymme nyt puhelimiin.  Sovelluksessa on hierarkia tekstin näyttämistä varten. Otsikoiden, tekstitysten, kappaleiden ja tekstin näyttämiseen käytetään 8 tasoa. Määritän fonttikoon, fontin jokaiselle tasolle. Valitusta fontista riippuen voin myös valita vaihtoehdon. Nyt painikkeet. Sovelluksen osioissa, jotka kutsuvat käyttäjiä suorittamaan toiminnon, valitsen haluamani painikkeen muodon.

Voin esikatsella lopputulosta klikkaamalla tästä. Sovelluksesi painikkeisiin liittyy useita hierarkiatasoja. Painikkeen muotoilu riippuu sovelluksesi väriteemasta. Harmoniaa kunnioittaen jokaiselle teemalle on saatavilla useita variaatioita. Seuraavassa on kolme erilaista muotoilutyyppiä kutakin hierarkiatasoa varten:
Taso 1 => painikkeen värillinen tausta ei ääriviivoja
Taso 2 => läpinäkyvä tausta painikkeen ääriviivat ja teksti värillisenä
Taso 3 => painikkeen läpinäkyvä tausta ilman ääriviivoja

Nyt kuvien hover-efektit. Tämä on käytettävissä vain PWA:ssa. Lopuksi lisäelementit, kuten takaisin-kuvake, joka näkyy otsikossa, kun navigoit kaupassasi. Tallennan muutoksen. Älä unohda, että kaikki nämä muutokset ohittavat kauppasi varsinaisen suunnittelun, mukaan lukien kaikki koukuttamattomat osiot.

Katsotaanpa, kyllä minä todella pidän kauppani ulkoasusta.

Näemme taas uudessa tutoriaalissa!