Sådan indstiller du den globale stil i din app

Hej og velkommen til dit GoodBarber-backoffice!

I dag skal vi tale om et ultrakraftigt værktøj til design af din app, Global Style-menuen.

Global Style giver dig mulighed for at styre det generelle design af din applikation fra en enkelt menu.

De farver, skrifttyper og effekter, der vælges i denne menu, anvendes på alle dele af applikationen.

Men vær forsigtig! Alle ændringer, der foretages i denne menu, vil blive anvendt på ALLE dele af din app.

Lad os se, hvordan det ser ud.

Jeg går til menuen Min app > Design > Globalt design

Jeg klikker på Global stil.

Det første, du skal gøre, er at vælge et farvetema.

Et farvetema er en kombination af farver, der passer harmonisk sammen. Global Style tilbyder et bibliotek med farvetemaer.

For at vælge fra biblioteket klikker jeg på "Skift farvetema".

Som du kan se, har jeg et valg.

Hvis jeg i stedet vil ændre mit nuværende tema, klikker jeg på Edit, og nederst på siden klikker jeg på Create a new theme.

Jeg skal bare vælge mine farver;

Nu til den typografiske del.

Der er et hierarki for visning af tekst i applikationen.

8 niveauer bruges til at vise titler, undertekster og afsnitstekst.

Jeg definerer skriftstørrelsen.

Skrifttypen for hvert niveau.

Afhængigt af de valgte skrifttyper kan jeg også vælge indstillingen.

Lad os gå videre til knapperne.

For de dele af din app, der beder brugerne om at udføre handlinger, vælger jeg formen på de knapper, jeg vil anvende.

Jeg kan se en forhåndsvisning af resultatet ved at klikke her.

Der er flere niveauer af hierarki for knapperne i din app. Knappernes design afhænger af appens farvetema, og for at respektere harmonien foreslås der flere variationer for hvert tema.

Her er de forskellige typer design for hvert hierarkisk niveau:

- Niveau 1: farvet knapbaggrund, ingen kontur.

- Niveau 2: gennemsigtig knapbaggrund, farvet kontur og tekst.

- Niveau 3: gennemsigtig knapbaggrund, ingen kontur.

Derefter hover-effekterne på billederne (kun til stede på PWA-desktop)

Og endelig de ekstra elementer som tilbage-ikonet, der vises i overskriften under navigationen i appen. Du kan også indstille dette ikon, når du designer din header.

Her anvender jeg mine ændringer.

Glem ikke, at disse ændringer vil overskrive hele det nuværende design af din butik, inklusive dine drop down-sektioner!

Jeg synes, at min app er perfekt på denne måde! Hvad med dig?

Vi ses snart til en ny tutorial!