Direkt zum Inhalt

Atlas UI Framework bringt Design Thinking in die Low-Code-App-Entwicklung

Mendix 7. Atlas-Release: Design Thinking in die Low-Code-App-Entwicklung einbringen

UI-Design-Blog-Hintergrund

Ich freue mich, Ihnen unsere nächste Veröffentlichung vorstellen zu dürfen: die Mendix Atlas-VeröffentlichungDie steigenden Standards von B2E und B2B App-Nutzer fordern IT-Leiter in Unternehmen dazu auf, den durchdachten Usability-Ansatz von High-End-Consumer-Apps zu übernehmen. Obwohl User Experience Design für erfolgreiche Apps entscheidend ist, fehlen vielen IT-Organisationen die Ressourcen, um eine durchgängig gute UX für ihr gesamtes App-Portfolio bereitzustellen.

Mendix Mit Atlas können Sie einen Design-Thinking-Ansatz anwenden auf Low-Code-App-Entwicklung. Jetzt können Unternehmensanalysten und Entwickler schnell, einfach und iterativ ansprechende Multi-Channel-Benutzeroberflächen erstellen, die der Designsprache Ihres Unternehmens entsprechen.

Der Mendix Atlas Release besteht aus drei Elementen, die sich nahtlos integrieren lassen, um Entwicklern und Unternehmen einen benutzerorientierten Ansatz für das UI-Design zu ermöglichen:

  1. Atlas UI Framework (Beta)
  2. Web Modeler (Beta)
  3. Mendix Applikation

Lassen Sie uns jeden einzelnen Punkt genauer untersuchen.

Atlas-Benutzeroberflächen-Framework

Atlas UI ist eine Designsprache für Enterprise-Apps und zugleich ein Framework zur Gestaltung Ihrer eigenen Corporate-Design-Sprache. Die volle Leistungsfähigkeit von Atlas UI steht Ihnen zur Verfügung als Mendix Entwickler. Dazu gehören viele brandneue und vorgestaltete Seitenvorlagen, die Ihnen einen Vorsprung bei der App-Entwicklung verschaffen. Darüber hinaus führt Atlas UI ein neues Konzept namens Bausteine ​​sowie Designeigenschaften ein.

Atlas-UI-Diagramm

Zusammenfassend besteht das Atlas UI Framework aus fünf Designelementen:

  1. Navigationslayouts: beim Bau eines Mendix App, als erstes wählen Sie ein Navigationslayout. Diese Layouts bilden den Rahmen, in dem Ihre dynamischen Seiten untergebracht sind, und sorgen für eine einheitliche Struktur in Ihrer gesamten App.
  2. Page Templates: Seitenvorlagen sind vorgefertigte Sammlungen von Bausteinen, die unverändert verwendet oder mit benutzerdefinierten Bausteinen und Widgets erweitert werden können.
  3. Bausteine: Bausteine ​​sind Benutzeroberflächenelemente mit einem einzigen Zweck, die aus mehreren Widgets und Stilen bestehen. Mehrere Bausteine ​​werden normalerweise zusammen auf einer Seite verwendet. Ziehen Sie einen Baustein per Drag-and-Drop auf eine der jeweiligen Mobil-, Tablet- und responsiven Seiten, um gängige UI-Muster zu implementieren und so die Entwicklung benutzerdefinierter Seiten erheblich zu beschleunigen.
  4. Widgets: Widgets sind kleine Benutzeroberflächenelemente (Warnungen, Schaltflächen, Diagramme usw.), die zur Erweiterung vorhandener Bausteine ​​verwendet werden.
  5. 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.

Screenshot des Anwendungsdesigns

Lassen Sie sich von unserem Atlas Framework inspirieren von alle Designelemente erkunden. Oder erstellen Sie Ihre eigene Designsprache auf Basis von Atlas, indem Sie die Atlas-Referenz-App aus unserem App Store herunterladen. Mit dieser App können Sie Ihre eigenen Anpassungen erstellen und diese im Kontext aller Designelemente von Atlas UI testen.

Verwenden der Atlas-Benutzeroberfläche im Web Modeler

Ein Design-Thinking-Ansatz erfordert eine gezielte und häufige Zusammenarbeit zwischen Business-Analysten und Entwicklern. Die Zusammenarbeit wird durch den Web Modeler, der jetzt öffentlich als Betaversion verfügbar ist, wesentlich einfacher. Der WYSIWYG-Seiteneditor dieses Modelers macht die Entwicklung schöner Seiten einfacher und schneller. Sie müssen nicht mehr raten, wie die Seite in Ihrer bereitgestellten App aussehen wird: Sie liegt direkt vor Ihnen.

Atlas-Benutzeroberfläche im Web Modeler

Vorformatierte Widgets können eine große Hilfe sein, aber was, wenn Sie je nach Kontext und Position auf der Seite etwas Flexibilität bei deren Erscheinungsbild benötigen? Sie können Widgets jetzt weiter anpassen, indem Sie ihre Designeigenschaften ändern. Farben, Schriftgröße und viele andere Variablen wie die Widget-Ausrichtung können geändert werden, um das Widget Ihren Wünschen anzupassen, ohne dass Sie CSS-Kenntnisse benötigen.

Apropos Widgets: Die Atlas-Version wird mit einem komplett neuen Satz schöner und einfach zu verwendender benutzerdefinierter Widgets ausgeliefert. Beispielsweise sind Google Maps-Widgets, Zeitreihen und Fortschrittskreise jetzt mit einem einzigen Mausklick im nahtlos integrierten App Store verfügbar. Sie können benutzerdefinierte Widgets ganz einfach von einem einzigen Ort innerhalb des Modellierers aus verwalten.

Diagramm-Screenshot

Damit sich Ihre Apps nahtlos in die bestehende App-Landschaft einfügen, müssen sie in Ihrem Unternehmensstil gestaltet werden. Dadurch wird Ihre App für Ihre Benutzer zum Leben erweckt. Sie können dies direkt vom Web Modeler aus tun. Verwenden Sie den Theme Customizer, um Ihre App mit Ihrem Unternehmenslogo, Ihren Unternehmensfarben, Ihrer Typografie und anderen benutzerdefinierten Branding-Elementen zu gestalten.

Mendix Applikation

Ein treuer Begleiter zu Atlas UI und dem Web Modeler ist das neue Mendix App für Android und iOS verfügbar. Es ist wichtig, dass das Look & Feel Ihrer App stimmt. Mit der Mendix Mit der App können Sie Ihre App-Ideen in jedem Schritt des Entwicklungsprozesses ganz einfach auf Ihrem Mobilgerät testen. Scannen Sie dazu einfach den QR-Code im Web Modeler. Außerdem können Sie gemeinsam mit Ihren Teammitgliedern und Kollegen an Ideen für bestehende oder neue Anwendungen arbeiten.

Darüber hinaus Mendix Die App enthält Vorzeige-Apps für Atlas UI und andere Apps, die mit dem Mendix Plattform. Oftmals möchten Sie wissen, wie eine bestimmte Seitenvorlage, ein bestimmter Baustein oder ein bestimmtes Widget auf einem realen Gerät aussieht und sich anfühlt. Aus dem Showcase der Mendix App können Sie die Atlas UI-Referenz-App laden und den vollständigen Katalog aller verfügbaren Seitenvorlagen, Bausteine ​​und Widgets durchsuchen. So können Sie die Umfangreiche mobile Funktionen von Atlas UI - alles bequem von Ihrem Gerät aus.Beispiel für Responsive Design

Schauen Sie sich unbedingt auch die anderen Beispiel-Apps im Showcase an. Wir haben mehrere schöne Beispiel-Apps zur Verfügung, die die Fähigkeiten der Mendix Plattform. Und diese Beispiele beschränken sich nicht nur auf groß-Seiten ansehen - Jede App verfügt auch über einige „Smart-App“-Funktionen. Probieren Sie beispielsweise die Chat-Funktion in der Kundenportal-App aus, um mit einem Bot zu chatten, der in eine Mendix Anwendung.

Der Mendix App ist verfügbar für iOS und Android.

-

Mit Atlas sind Sie nun in der Lage, die hohen Anforderungen äußerst kritischer Endbenutzer zu erfüllen. Jeder kann nun schnell ansprechende, äußerst benutzerfreundliche Multi-Channel-Apps erstellen. Nutzen Sie Design Thinking, um eng mit Fachexperten dort zusammenzuarbeiten, wo es am wichtigsten ist: bei der Erfüllung von Geschäftsanforderungen und der Schaffung großartiger Benutzererlebnisse. Dabei wird Ihre App stets der Designsprache Ihres Unternehmens entsprechen, die UX-Experten für Sie vordefiniert haben. Sie können das Benutzererlebnis Ihrer App gestalten – und den Erfolg Ihres Unternehmens!

Ich freue mich darauf, all die großartigen Innovationen zum Leben zu erwecken, wenn Sie anfangen, die leistungsstarken neuen Tools in unserer Atlas-Version zu verwenden!

Wählen Sie Ihre Sprache