Design anpassen

Entwirf einzigartige Designs mit dem Designer

Dokumentation Ändern des Designs Design anpassen

UI anpassen

Wenn du deine App mit Zappter erstellst, ist das UI sauber, schlank, professionell und unverwechselbar. Aber wenn du ein eigenes Design brauchst, das deine Markensprache spricht oder komplett einzigartig unter anderen sein willst, hat Zappter ein Werkzeug, um diese Aufgabe zu erledigen, den Designer.

Design Editor

Admin > Anpassen > Inhalt. Klicke, um die App zu bearbeiten. Sobald du drin bist, wähle das Design-Symbol.

Der Designer öffnet den Inhalt, der mit Zappter Standard-UI-Elementen bestückt ist, ohne jegliche Designanpassungen.

Schichten & Explorer: Repräsentiert jedes UI-Element der App. Die UI-Elemente Background, Header, Space und Bottom Bar sind allgemein und obligatorisch. Andere sind diejenigen, die du nach deinen Bedürfnissen auf deinen Inhalt gelegt hast, wie z.B. E-Commerce, Kategorie, etc.
Stileigenschaften: Hier stellst du das Styling (CSS) des im Layers & Explorer ausgewählten UI-Elements ein

Schichten & Explorer

Dies repräsentiert jedes UI-Element des Bildschirms. Es repräsentiert zwei Arten von Elementen, 1) Gemeinsame Elemente 2) Elemente aus deinem aktuellen Design.

Gemeinsame Elemente: Background, Header, Space, Bottom bar, da diese für jedes Design verfügbar sind (obligatorisch)
Andere Elemente: UIs wie dein E-Commerce, Buchungen, Texte oder alles, was du auf deinen Content gelegt hast, um deine Anforderungen zu erfüllen.

UI-Elemente werden hervorgehoben, wenn du mit der Maus über sie fährst. Nachfolgend findest du die oben beschriebenen UI-Elemente:

Hintergrund & Kopfzeile:

Space & Bottom Bar:

Du kannst die Farben und Schriftarten oder jedes andere Attribut jedes Elements in den Stileigenschaften ändern. Vermeide es jedoch, die Stileigenschaften zu verwenden, um die Farben und Schriftarten der üblichen UI-Elemente zu ändern und folge den entsprechenden Optionen, die im Abschnitt Kopfzeile, Hintergrund und untere Leiste besprochen wurden . Es hilft, sie jederzeit dynamisch zu ändern, ohne ein Redesign oder eine UI-Anpassung vornehmen zu müssen.

Die anderen vier UI-Elemente, die unten markiert sind, sind Featured Products, Organic Limes, Passion Fruits, und - - diese sind von den Nutzern erstellte Inhalte, die den Bedürfnissen entsprechen.

Schritte zum Anpassen eines UI-Elements

Unten, ein Standard UI eines 'article' UI-Elements, hervorgehoben in Layers & Explorer für ein besseres Verständnis der vier entscheidenden Schritte bei der Anpassung:

1. setze auf die Vererbung für das UI-Element. Bio-Limetten in diesem Beispiel.

Favorit: Macht ein UI-Element zum Favoriten
Vererbung: Wenn du ein UI-Element anpasst, z.B. Artikel, möchtest du sicherstellen, dass alle zukünftigen Artikel-UIs wie das von dir angepasste aussehen. Dies wird erreicht, indem du es mit "Vererbung" an markierst (wenn der kleine pyramidenartige Button gelb ist, bedeutet das "Vererbung" an. Wenn er grau ist, hast du die Vererbung nicht aktiviert)
Zurücksetzen / Wiederherstellen: Wenn du ein UI-Element anpasst, kann es Situationen geben, in denen du alles von einem frischen Standard-UI neu starten musst. Dies wird für diesen Zweck verwendet
Öffnen Button: Für einige UI-Elemente, wie z.B. Kategorien, gibt es diese Option, da Kategorie-UIs andere Elemente enthalten können
Expandieren-Button: Erweitert das UI-Element, um jedes der darin enthaltenen Objekte sichtbar zu machen

2. Erweitere das übergeordnete UI-Element mit dem 'Expand'-Button und du siehst alle untergeordneten UI-Elemente, die dieses einzelne UI-Element bilden, in diesem Beispiel den Artikel.

3. Ändere die Stileigenschaften eines Elements, indem du es markierst und den Stil auf der rechten Seite einstellst. Im folgenden Beispiel ist 'picture' ein untergeordnetes UI-Element des übergeordneten Elements, Organic Limes.

Um die Objekte anzupassen, lies den Abschnitt, UI Style Properties, der mehr über die Styling-Eigenschaften erklärt.

Beispiel: Im Folgenden wird eine einfache Stiländerung angewendet, um das Standard-UI des Artikels in ein individuelles Design zu ändern:

Artikelbreite 100% auto
Umrandung 0 bis 50%
Schatten Unschärfe 10 hinzugefügt 50% schwarze Farbe
Fotobreite 60%
Foto Rand von links 20%
Button Container 100%
Button Container Rand von unten 10px

4. Wenn du mit der Anpassung des Stils fertig bist, speichere die Änderungen. Von nun an wird jedes Mal, wenn du ein UI-Element (in unserem Beispiel ein Artikel) zu deinem Inhalt hinzufügst, dieses aufgrund der Vererbung ein angepasstes UI haben; dies soll die Konsistenz in der gesamten App sicherstellen.

UI Style Eigenschaften

In diesem Abschnitt geht es um die Verwendung des Zappter Designers, um CSS-Style-Attribute zu setzen. Wenn du mit CSS-Styling vertraut bist, kannst du diesen Abschnitt überspringen.

Um das Verständnis zu vereinfachen, werden erst ein paar Eigenschaften auf einmal besprochen, und dann die nächsten.

Das Layout - Versteckt, Block, Inline: Als Standardwerte beibehalten
Ausrichten: Ausrichtung des ausgewählten Objekts innerhalb seines übergeordneten Containers

Sichtbarkeit: Sichtbarkeit
Grösse: Die Breite und die Höhe des ausgewählten Objekts innerhalb seines übergeordneten Containers. Der Standardwert ist z.B. 50px für das Bild der Kategorie. Unten wird die Breite auf 46% gesetzt, um fast die Hälfte der Breite des Parent zu nehmen

Aber wenn du 2 Objekte in der gleichen Reihe auf mehr als 50% machst, wird es eines der Objekte nach unten schieben. Das liegt daran, dass andere Objekte innerhalb des Containers auch Platz wegnehmen
Vergewissere dich, dass du die Breite der anderen Objekte so änderst, dass sie alle zusammen innerhalb von 100% der Breite des Parentes kommen

Farben: Vermeide es, Farben mit dieser Option einzustellen, da Zappter eine Funktion bietet, mit der du die Farben dynamisch einstellen kannst. Siehe den Abschnitt 'Farben & Schriftarten' für weitere Details
Hintergrundbild: Lege ein Hintergrundbild für ein Objekt fest, falls das zutreffend ist. Bitte beachte und ändere die untenstehende Einstellung:

Allerdings kannst du hier noch die Schriftgröße und das andere Styling einstellen.

Padding: Dies ist der Abstand zwischen dem Inhalt eines Objekts und seinem Rand
Margin (Rand): Dies ist der Raum außerhalb des Objekts oder der Raum zwischen den Objekten
Border Radius: Dies ist der Radius der Ecken des Objekts. Im Artikelbeispiel wurde der Randradius des Bildes an allen Seiten auf 50% gesetzt, damit das Bild rund aussieht

Reduziere ihn auf 0 (Null), um scharfe Kanten zu haben, die nach Box aussehen.

Umrandung: Fügt dem Objekt einen Rahmen hinzu
Schatten: Verleiht dem ausgewählten Objekt einen Schatteneffekt:

Obere Leiste, Hintergrund, Untere Leiste

Anpassen der oberen Leiste

Admin > Design > App Obere Leiste:

Tabs unter Einstellungen

Warenkorb: Anpassen des Warenkorbs
Menü: Anpassen des Menüs

Tabs unter Design

Logo: Logo anzeigen/ausblenden

Anpassen des Hintergrunds

Admin > Design > Farben:

Popups: Anpassen der App-Popups

Anpassen der unteren Leiste

Admin > Design > Untere Leiste:

Tabsunter Einstellungen

Allgemein: Leiste anzeigen/ausblenden
Login: Text und Verhalten des Anmeldebildschirms anpassen
Registrieren: Aktiviere/Deaktiviere die Selbstregistrierung für Benutzer
Passwort vergessen: Passe das Hintergrundbild auf dem Passwort vergessen-Bildschirm an
Profil: Anpassen des Profilbildschirms
Home-Button: Anpassen des Home-Buttons
Bestellungen: Anpassen des Bestellsymbols in der unteren Leiste
Zahlungen: Aktiviere die Verwaltung von Kreditkarten mit dem Profil
QR-Codes: Aktiviere/Deaktiviere und passe die QR-Code-Option in der unteren Leiste an
Chat: Aktiviere/deaktiviere und passe das Chat-Verhalten an
Profil-QR-Code: Profil-QR-Codes aktivieren/deaktivieren

Tabs unter Design

Farben: Lege die Farbe der unteren Leiste fest, sowie die Farbe für das Standard-Icon und das aktive Icon
Popups: Lege die Farben der Popups fest und gib an, ob sie modal sind

Schriftarten & Farben

Wenn du die Benutzeroberfläche anpasst, stellst du normalerweise nur die Schriftgröße ein. Und dann wählst du die Schriftart und ihre Größe in dieser Option aus. Das sorgt für die Einfachheit und die Freiheit, die du hast, wenn du dich entscheidest, deine Schriftart und -farbe zu ändern, ohne dich durch die gesamte Anpassung zu arbeiten.

Neue Schriftarten hinzufügen

Admin > Design > Schriftart:

Scanne durch die Liste der verfügbaren Schriftarten und aktiviere sie. Der Simulator auf der rechten Seite reflektiert sofort deine Änderungen

Neue Schriftarten hinzufügen

1. Klicke auf die Schaltfläche '+ Neuer Font'.

2. entweder du lädst eine gespeicherte Web-Schrift hoch oder du konvertierst die konventionelle Schriftart in eine Web-Schriftart mit dieser Option:

Web-Font hochladen:

Neu hinzugefügte Web-Schriftart:

Konvertiere eine reguläre Schriftart:

Haftungsausschluss: 'Transfonter.org' ist eine externe Quelle. Das untenstehende Interface und die erklärten Schritte sind möglicherweise nicht identisch.

Benutze den Button 'Add Fonts', um deine reguläre Font-Datei hinzuzufügen.
Benutze den 'Convert'-Button, um sie in eine Web-Font zu konvertieren, dabei wird auch die Zip-Datei der Schrift heruntergeladen
Verwende die Option 'Upload Web-Font', um die gespeicherte Schriftdatei hochzuladen

Nächster Schritt
Typografie Typografie

Zuletzt aktualisiert am 05.07.2022 23:37

Help Center

Dokumentation

Allgemein

Videos

Beliebt

Business Module

Neu

Weitere Anleitungen

Design anpassen

Entwirf einzigartige Designs mit dem Designer

UI anpassen

Obere Leiste, Hintergrund, Untere Leiste

Schriftarten & Farben