Så här ställer du in den globala stilen för din app

Hej och välkommen till ditt GoodBarber-backoffice!

Idag ska vi prata om ett mycket kraftfullt verktyg för design av din app, Global Style-menyn.

Med Global Style kan du hantera den allmänna designen av din applikation från en enda meny.

De färger, teckensnitt och effekter som väljs i den här menyn tillämpas på varje avsnitt i applikationen.

Var dock försiktig! Varje ändring som görs från den här menyn kommer att tillämpas på ALLA delar av din app.

Låt oss se hur det ser ut.

Jag går till menyn Min app > Design > Global design

Jag klickar på Global stil.

Det första du ska göra är att välja ett färgtema.

Ett färgtema är en kombination av färger som passar ihop på ett harmoniskt sätt. Global Style erbjuder ett bibliotek med färgteman.

För att välja från biblioteket klickar jag på "Ändra färgtema".

Som du ser har jag ett val.

Om jag istället vill ändra mitt nuvarande tema klickar jag på Edit och sedan längst ner på sidan på Create a new theme.

Jag behöver bara välja mina färger;

Typografidelen nu.

Det finns en hierarki för visning av text i applikationen.

8 nivåer används för att visa titlar, undertexter och stycke-text.

Jag definierar teckenstorleken.

Typsnittet för varje nivå.

Beroende på vilka teckensnitt som väljs kan jag också välja alternativet.

Låt oss gå vidare till knapparna.

För de delar av din app som uppmanar användarna att utföra åtgärder väljer jag formen på de knappar jag vill använda.

Jag kan förhandsgranska resultatet genom att klicka här.

Det finns flera nivåer av hierarki när det gäller knapparna i din app. Knapparnas utformning beror på appens färgtema, för att respektera harmonin föreslås flera variationer för varje tema.

Här är de olika typerna av design för varje hierarkisk nivå:

- Nivå 1: färgad knappbakgrund, ingen kontur.

- Nivå 2: genomskinlig knappbakgrund, färgad kontur och text.

- Nivå 3: genomskinlig knappbakgrund, ingen kontur.

Sedan svävningseffekterna på bilderna (finns bara på PWA desktop)

Och slutligen ytterligare element som bakåtikonen som visas i sidhuvudet under navigeringen i appen. Du kan också ställa in den här ikonen när du utformar din header.

Här tillämpar jag mina modifieringar.

Glöm inte att dessa ändringar kommer att skriva över all nuvarande design av din butik, inklusive dina rullgardinssektioner!

Jag tycker att min app är perfekt så här! Hur är det med dig?

Vi ses snart för en ny handledning!