Sovelluksen globaalin tyylin määrittäminen

Hei ja tervetuloa GoodBarberin takatoimistoon! 

Tänään puhumme erittäin tehokkaasta työkalusta sovelluksesi suunnitteluun, Global Style -valikosta.

 

Globaalin tyylin avulla voit hallita sovelluksesi yleistä suunnittelua yhdestä valikosta.

Tässä valikossa valittuja värejä, fontteja ja tehosteita sovelletaan sovelluksen jokaiseen osaan.

Ole kuitenkin varovainen! Jokainen tästä valikosta tehty muutos sovelletaan sovelluksen KAIKKIIN osioihin.

 

Katsotaanpa, miltä se näyttää.

Menenen valikkoon Oma sovellus > Suunnittelu > Yleinen suunnittelu

.

Klikkaan Global Style.

Painan Global Style.

 

Ensin valitaan väriteema. 

Väriteema on yhdistelmä värejä, jotka sopivat yhteen harmonisesti. Global Style tarjoaa kirjaston väriteemoja.  

Voidakseni valita kirjastosta, klikkaan "Vaihda väriteemaa".

Kuten näet, minulla on valinnanvaraa.

Jos sen sijaan haluan muuttaa nykyistä teemaani, klikkaan Muokkaa ja sitten sivun alareunassa Luo uusi teema. 

 

Minun täytyy vain valita värit; 

Typografiaosuus nyt.

Tekstin näyttämiseen sovelluksessa on hierarkia. 

8 tasoa käytetään otsikoiden, väliotsikoiden ja kappaleiden tekstin esittämiseen.

määritän fonttikoon.

Kunkin tason fontti.

Määritän fonttikoon.

Valituista fonteista riippuen voin myös valita vaihtoehdon.

 

Siirrymme painikkeisiin.

Sovelluksen osioissa, jotka kehottavat käyttäjiä suorittamaan toimenpiteitä, valitsen haluamani painikkeiden muodon. 

 

Voin esikatsella tulosta klikkaamalla tästä.

 

Sovelluksen painikkeisiin liittyy useita hierarkiatasoja. Painikkeiden muotoilu riippuu sovelluksen väriteemasta, ja harmonian kunnioittamiseksi kullekin teemalle ehdotetaan useita variaatioita.

Tässä ovat eri suunnittelutyypit kutakin hierarkiatasoa varten:

- Taso 1: värillinen painikkeen tausta, ei ääriviivoja.

- Taso 2: läpinäkyvä painikkeen tausta, värillinen ääriviiva ja teksti.

- Taso 3: läpinäkyvä painikkeen tausta, ei ääriviivaa.

 

Sitten kuvien hover-efektit (vain PWA:n työpöydällä)

Ja lopuksi lisäelementit, kuten takaisin-kuvake, joka näkyy otsikossa sovelluksessa navigoinnin aikana. Voit myös asettaa tämän kuvakkeen, kun suunnittelet otsikkoa.

Tässä sovellan muokkauksiani.

 

Älkää unohtako, että nämä muutokset korvaavat koko nykyisen myymälän ulkoasun, mukaan lukien pudotusalueet! 

 

Olen sitä mieltä, että sovellukseni on täydellinen näin! Entä sinä?

Näemme pian uudessa opetusohjelmassa!