Slik konfigurerer du den globale stilen til appen din

Hei og velkommen til ditt GoodBarber-backoffice!

I dag skal vi snakke om et svært kraftig verktøy for design av appen din, nemlig Global Style-menyen.

Med Global Style kan du administrere den generelle utformingen av applikasjonen din fra én enkelt meny.

Fargene, skriftene og effektene som velges i denne menyen, brukes på hver del av applikasjonen.

Vær imidlertid forsiktig! Alle endringer som gjøres i denne menyen, vil bli brukt på ALLE delene av appen din.

La oss se hvordan det ser ut.

Jeg går til menyen Min app > Design > Global design

Jeg klikker på Global stil.

Det første du må gjøre, er å velge et fargetema.

Et fargetema er en kombinasjon av farger som passer harmonisk sammen. Global Style tilbyr et bibliotek med fargetemaer.

For å velge fra biblioteket klikker jeg på "Endre fargetema".

Som du ser, har jeg et valg.

Hvis jeg i stedet vil endre det nåværende temaet, klikker jeg på Rediger, og nederst på siden klikker jeg på Opprett et nytt tema.

Jeg trenger bare å velge farger;

Nå kommer typografidelen.

Det er et hierarki for visning av tekst i applikasjonen.

8 nivåer brukes til å vise titler, undertekster og avsnittstekst.

Jeg definerer skriftstørrelsen.

Skriften for hvert nivå.

Avhengig av skrifttypene som er valgt, kan jeg også velge alternativet.

La oss gå videre til knappene.

For de delene av appen din som ber brukerne om å utføre handlinger, velger jeg formen på knappene jeg vil bruke.

Jeg kan forhåndsvise resultatet ved å klikke her.

Knappene i appen din har flere hierarkiske nivåer. Knappenes design avhenger av appens fargetema, og for å respektere harmonien foreslås det flere varianter for hvert tema.

Her er de ulike typene design for hvert hierarkisk nivå:

- Nivå 1: farget knappebakgrunn, ingen kontur.

- Nivå 2: gjennomsiktig knappebakgrunn, farget kontur og tekst.

- Nivå 3: gjennomsiktig knappebakgrunn, ingen kontur.

Deretter sveveeffekter på bildene (bare til stede på PWA-skrivebordet)

Og til slutt tilleggselementer som tilbake-ikonet som vises i toppteksten under navigering i appen. Du kan også angi dette ikonet når du designer overskriften.

Her bruker jeg endringene mine.

Ikke glem at disse endringene vil overskrive alt det nåværende designet i butikken din, inkludert rullegardinmenyene!

Jeg synes appen min er perfekt slik! Hva med deg?

Vi sees snart for en ny opplæring!