Oberflächendesign

Wie kann ich umfangreiche Benutzeroberflächen entwerfen?

Benutzeroberflächen werden durch die Kombination einer Drag-and-Drop-Oberfläche mit einem WYSIWYG-Seiteneditor erstellt. Unsere Mendix Die Studio Pro-Umgebung kann mit dem Atlas-Benutzeroberfläche Framework, das vollständig responsive ist, Open-Source, und erweiterbare Designsprache, die einen designorientierten Ansatz zum Erstellen von Benutzeroberflächen ermöglicht.

Gängige Seitenmuster wie durchsuchbare Listen, Datenansichten, Dashboards und Assistenten werden als Startervorlagen bereitgestellt, die die Entwicklung beschleunigen und eine konsistente, standardisierte Benutzeroberfläche auf mehreren Geräten gewährleisten.

• Navigationslayouts

  Beim Bau eines Mendix App wählen Sie zunächst ein Navigationslayout aus. Diese Layouts bilden den Rahmen, in dem Ihre dynamischen Seiten untergebracht sind, und sorgen für eine einheitliche Struktur in Ihrer gesamten App.

  Navigationslayouts werden mit dem Plattform-Layout-Editor erstellt, mit dem Sie die für Ihre Seiten benötigten Layoutmuster erstellen können.

  Layouts verwenden bestimmte Steuerelemente – wie Layoutraster, Inhaltsplatzhalter, Bildlaufcontainer, verschiebbare Menüleisten und Snippets – um die erforderlichen Seitenlayoutmuster zentral zu definieren, die beim Erstellen der Benutzeroberfläche Ihrer Anwendung verwendet werden.

• Page Templates

  Seitenvorlagen sind vorgefertigte Sammlungen von Bausteinen, die unverändert verwendet oder mit benutzerdefinierten Bausteinen und Widgets erweitert werden können.

• Bausteine

  Bausteine ​​sind UI-Elemente für einen einzigen Zweck, die aus mehreren Widgets und Stilen bestehen. Mehrere Bausteine ​​werden normalerweise zusammen auf einer Seite verwendet. Sie können einen Baustein auf eine der jeweiligen Mobil-, Tablet- oder responsiven Seiten ziehen, um gängige UI-Muster zu implementieren, was die Entwicklung benutzerdefinierter Seiten erheblich beschleunigt.

• Widgets

  Widgets sind kleine Benutzeroberflächenelemente (z. B. Warnungen, Schaltflächen, Diagramme), die zur Erweiterung vorhandener Bausteine ​​verwendet werden.

  Mendix bietet viele Widgets out of the box, und es gibt Hunderte von Open-Source-Widgets in der Mendix Marketplace. Sie können auch Ihre eigenen Widgets mit JavaScript erstellen, wie im Abschnitt Wie kann ich die Mendix Frontend? of Front-End.

• Design Eigenschaften

  Sie können Widgets weiter anpassen, indem Sie ihre Designeigenschaften ändern. Farben, Text und viele andere Variablen können geändert werden, um Widgets von Fall zu Fall anzupassen, wenn Stil oder Platzierung nicht ganz stimmen. Designentwickler können ihre eigenen (Unternehmens-)Designeigenschaften implementieren, sodass andere Benutzer das Erscheinungsbild von Widgets problemlos an die Marke des Unternehmens anpassen können.

Was UI-Elemente tun Mendix Sofort einsatzbereit bereitstellen?

Mendix bietet eine wachsende Liste sofort einsatzbereiter Widgets. Dies ist eine Auswahl der gängigsten:

• Menü-Widgets – ermöglicht dem Endbenutzer die Navigation durch die Anwendung (z. B. Menüleiste, Navigationsbaum)
  

• Daten-Widgets – zentral für den Bau von Formen in Mendix damit der Endbenutzer Daten in der Anwendung anzeigen und bearbeiten kann (z. B. Datenansicht, Datenraster, auch allgemeine Eingabe-Widgets wie Textfeld und Optionsfeld)
  

• Layout-Widgets – bilden das Rückgrat der Benutzeroberfläche und werden typischerweise bei Layouts verwendet (z. B. Layout-Container, Titel)
  

• Allgemeine Widgets – häufig auf jeder Seite, in jedem Layout und in jedem Snippet zu finden (z. B. Beschriftung, Bild)

• Container-Widgets – kann andere Widgets enthalten (z. B. Tabelle,
  Gruppenfeld)
  

• Eingabe-Widgets – ermöglicht die Anzeige und Bearbeitung der Werte von Attributen und Assoziationen (z. B. Textfeld, Datumsauswahl)
  

• Datei-Widgets – ermöglicht das Arbeiten mit Dateien, einschließlich in Dateien gespeicherter Bilder
  

• Schaltflächen-Widgets – diese Buttons lösen Aktionen aus (zum Beispiel Speichern-Button, Seite schließen-Button, Microflow-Button)
  

• Visualisierungs-Widgets – mehr grafische Widgets (zum Beispiel Diagramm, Karte)

Neue Widgets werden ständig erstellt, sowohl vom Kern Mendix Entwicklungsteam und unsere Community von Entwicklern, die die standardmäßig verfügbaren Tools verwenden. Verfügbare Widgets finden Sie im Mendix Marketplace und laden Sie sie zur Verwendung in Ihrer Anwendung herunter.

Wie kann ich das Erscheinungsbild meiner Apps anpassen?

Der Mendix Das Frontend verwendet das Atlas UI-Framework, um responsive Seiten oder native mobile Seiten darzustellen. Das Framework basiert auf einem Standarddesign, das vollständig angepasst werden kann. Mit dem Tool „Theme Customizer“ können Sie ganz einfach ein Logo hochladen, das zur Bestimmung der Farben Ihrer Marke verwendet wird. Die verschiedenen Farben, Schriftarten und Größeneinstellungen können schnell konfiguriert und in der Vorschau angezeigt werden.

Daneben Mendix verwendet Sass um das Styling zu definieren. Die Plattform enthält eine Konfigurationsdatei mit vielen Variablen, die zum Konfigurieren und Optimieren des Designs verwendet werden können. Die Konfiguration ist so eingerichtet, dass sie durch die Bereitstellung benutzerdefinierter Sass-Dateien einfach geändert und erweitert werden kann. Es ist auch möglich, das Styling direkt mit benutzerdefiniertem CSS zu erweitern. Das Styling kann auch geteilt werden, wie im nächsten Abschnitt über das Erstellen konsistenter Benutzererlebnisse erläutert wird.

Weitere Informationen finden Sie in der Sammlung von Anleitungen zur Atlas-Benutzeroberfläche in England, Mendix Dokumentation.

Für native mobile Appsbasiert das Styling auf JavaScript. Weitere Informationen finden Sie unter Natives Styling.

Wie schneidet Mendix Wiederverwendung von Designmustern und -elementen unterstützen?

Atlas UI fördert die Wiederverwendung von Elementen und Layouts, indem es einen mehrschichtigen und komponentenbasierten Ansatz für das Anwendungsdesign ermöglicht. Darüber hinaus ermöglicht Atlas UI Ihren UX-Designern, sofort einsatzbereite Komponenten zu erweitern, eigene Bausteine ​​zusammenzustellen, benutzerdefinierte Widgets zu erstellen und standardmäßige Designeigenschaften zu überschreiben.

Neue und verbesserte Designelemente werden automatisch in allen Anwendungen verbreitet, in denen das jeweilige Element verwendet wird.

Nachfolgend werden die wichtigsten Arten der Wiederverwendung beschrieben.

Snippets

Snippets sind Fragmente des Seitendesigns, die Designelemente, Widgets und Daten enthalten. Snippets werden zentral auf Modellebene erstellt und verwaltet und können auf mehreren Seiten innerhalb einer Anwendung wiederverwendet werden.

Dieses Video zeigt, wie Sie ein Snippet-Call-Widget in Ihrem App-Projekt verwenden:

Layouts, Navigation und Seitenvorlagen

Layouts sind Drahtgitter-Seitendesigns, die Widgets, Navigationsplatzhalter und Branding in einem zentralen Repository wiederverwendbarer Komponenten kombinieren. Layouts können so gestaltet werden, dass sie bestimmte Formfaktoren unterstützen, um ein einheitliches Benutzererlebnis auf allen Geräten zu schaffen. Nach der Erstellung werden die Layouts zur Entwurfszeit auf Anwendungsseiten angewendet.