Salesforce-Prototyping mit dem UI-Kit des Lightning-Designsystems von Justinmind

Steht bei Ihnen ein Projekt zum Design einer Salesforce-App auf dem Plan? Dann brauchen Sie das Salesforce UI Kit von Justinmind.

Das Salesforce Lightning Design System (SLDS) wird verwendet, um responsive Unternehmens-Webanwendungen für mobile und Desktop-Geräte zu erstellen. Durch das Prototyping dieser Anwendungen mit dem neuen Lightning Design System UI-Kit von Justinmind profitieren Designer von einem schnelleren, klareren und individuelleren Designprozess im Vorfeld der Codierung.

Die neue UI-Bibliothek von Justinmind enthält alles, was Designer benötigen, um Schnittstellen des Lightning Design Systems zu prototypisieren und zu validieren. Sie können kreativ werden und sich dabei an die Prinzipien und die Designsprache von Salesforce Lightning halten.

Mit mehr als 250+ vorgefertigten UI-Elementen können Sie sich auf das gesamte Benutzererlebnis, die Interaktionen und den Benutzerfluss konzentrieren, anstatt wertvolle Designzeit damit zu verbringen, UI-Elemente und Bildschirme von Grund auf neu zu entwerfen.

In diesem Beitrag erfahren Sie, wie die Lightning-Komponenten von Justinmind Designern dabei helfen, die Erstellung von Salesforce-Apps und -Oberflächen zu beschleunigen. Wir haben sogar ein Mini-Tutorial eingefügt, damit Sie sofort mit dem Design von Anwendungen in unserem Prototyping-Tool beginnen können.

Salesforce ist die weltweit führende CRM-Plattform für Unternehmen. Die Salesforce-Software ermöglicht es Produktteams, Unternehmensanwendungen zu entwickeln und bereitzustellen, die sich problemlos in Geschäftsprozesse integrieren lassen und Kunden ansprechen.

Lightning Experience ist eine Benutzeroberfläche von Salesforce, die auf einer Reihe von UI-Elementen, Mustern und Richtlinien basiert, die als Lightning Design System bekannt sind. Wie Christophe Coenraets, Principal Developer Evangelist bei Salesforce, erklärt, konzentriert sich die Lightning Experience auf die Entwicklung von Geschäftsanwendungen. Daher bietet es Designern neben den traditionellen Salesforce-Komponenten auch spezielle Komponenten für die Bearbeitung von Daten.

Mit diesem Designsystem erstellte Apps sind in der Regel skalierbar, anpassbar und für die Cloud konzipiert. Sie automatisieren Geschäftsprozesse, verbessern die Konnektivität mit externen Anwendungen und bieten optimale mobile Erlebnisse.

Wenn Sie sich an die Lightning-Designrichtlinien von Salesforce halten – Klarheit, Effizienz, Konsistenz und Schönheit – und eine einheitliche Designsprache verwenden, können Sie ein konsistentes Erscheinungsbild für alle Ihre Lightning-Apps sowie saubere und intuitive Erlebnisse für die Benutzer schaffen.

Das Besondere am Lightning Design System ist, dass es eine schnelle und effiziente Umsetzung fördert. Da die Infrastruktur und die operative Seite der App-Produktion erledigt sind, können sich die Teams auf das Design und die Entwicklung großartiger Anwendungen konzentrieren. Für Designer bedeutet dies, dass sie mit den vorgefertigten SLDS-Komponenten leistungsstarke Unternehmensanwendungen erstellen können, ohne auch nur einen Hauch von Code schreiben zu müssen.

Da wir gerade von codefreiem Design sprechen, lassen Sie uns einen Blick auf das neue Prototyping Kit von Justinmind für SLDS werfen.

Mit dem Lightning Design System Kit von Justinmind können Sie schnell und einfach Prototypen oder Wireframes für benutzerdefinierte Lightning-Anwendungen erstellen, bevor Sie mit dem Code beginnen. Unsere UI-Komponenten wurden alle im Einklang mit dem Salesforce Lightning Design System designt, so dass Sie die Komponenten nicht von Grund auf neu erstellen müssen.

Wenn Sie mit dem Salesforce UI-Kit von Justinmind wireframing betreiben, haben Sie Zugriff auf über 250 UI-Komponenten, die Ihnen den Einstieg erleichtern. Diese Komponenten sind in acht Kategorien unterteilt:

• Schaltflächen & Navigation – diese Widgets bieten dem Benutzer eine visuelle Ikonographie, die in der Regel zum Aufrufen eines Ereignisses oder einer Aktion verwendet wird.
• Karten & Benachrichtigungen – Karten werden verwendet, um einen Container um eine zusammenhängende Gruppierung von Informationen zu legen. Benachrichtigungen dienen als Feedback- und Bestätigungsmechanismus, der oben rechts auf der Seite eingeblendet wird.
• Komponenten – eine Auswahl von Komponenten (wie Avatare, Abzeichen, Spinner und Pillen) und UI-Mustern (wie Akkordeons, Auswahllisten und Karussells)
• Datentabellen – erweiterte Versionen von HTML-Tabellen, die zur Anzeige von tabellarischen Daten verwendet werden
• Dateien – Panels & Popovers – Dateien stellen Inhalte dar, die als Anhänge hochgeladen werden, Panels zeigen zusätzliche Informationen oder Formulareingaben an und Popovers sind nicht-modale Dialoge
• Feeds – Chats & Kacheln – Felder sind Listen von wiederkehrenden Elementen ähnlicher Art (z.B. Diskussionsfeeds), Chats zeigen Echtzeit- und vergangene Chat-Protokolle zwischen Service-Agenten und Kunden an und Kacheln sind Gruppen zusammengehöriger Informationen mit Datensätzen
• Formulare & Steuerelemente – enthalten HTML-Beschriftungen und Elemente
• Welcome & Setup Assistant – vorgefertigte Bildschirme und Karten (z.B. Willkommensmatte)

Im Grunde alles. Von Zusammenarbeit, Kundenservice und Finanzen bis hin zu IT und Verwaltung, Marketing und Vertrieb – mit Justinmind können Sie ganz einfach eine Vielzahl von Prototypen für Web- und mobile Anwendungen erstellen.

So können Sie z.B. eCommerce- und Einzelhandels-Apps mit Suchfunktionen und Schiebefiltern, Mapping- und Geolocation-Apps mit den Kartenkomponenten oder Recruiting-Apps mit den Avatar- und Badge-Komponenten nachbilden.

Wenn Sie Inspiration brauchen, werfen Sie einen Blick auf die Salesforce AppExchange, um sich Anregungen zu holen. Jede App, die die Lightning Experience unterstützt (auch „Lightning Ready“ genannt), kann mit dem neuen UI-Kit von Justinmind erstellt werden.

Alle Komponenten im Lightning Design System Kit von Justinmind wurden mit SVG-Vektoren erstellt – genau wie das Lightning Design System selbst. SVG-Vektoren sind anpassbar, d.h. Sie können ihre Größe und Farbe verändern, ohne sich um Qualitätsverluste sorgen zu müssen. Wenn Sie sie noch nicht verwendet haben, lesen Sie mehr darüber, warum Designer SVG-Vektoren lieben.

Darüber hinaus wurden alle Komponenten in unserem neuen UI-Kit im Atomic design erstellt. Zerlegen Sie Lightning-Widgets in ihre Bestandteile und bauen Sie sie wieder auf, indem Sie Größe, Farbe, Position usw. an Ihr Design anpassen.

Sind Sie bereit, mit dem Prototyping von Web- und mobilen Unternehmensanwendungen zu beginnen? Folgen Sie einfach den nachstehenden Schritten:

1. Laden Sie das Prototyping-Tool Justinmind herunter
2. Laden Sie das Salesforce Lightning Design von unserer UI Kits Seite herunter
3. Öffnen Sie Justinmind und erstellen Sie einen neuen Webprototyp
4. Importieren Sie das UI-Kit in Justinmind
5. Viel Spaß beim Design von Salesforce-Anwendungen!

Warum versuchen Sie nicht, das Beispiel der Team-App unten zu reproduzieren? Sie benötigen vier Bildschirme: Dashboard, Pinnwand, Ressourcen und Chat. Um einen neuen Bildschirm zu erstellen, gehen Sie zur Palette Bildschirme (oben links im Editor), klicken Sie auf das Symbol ‘+’ und geben Sie Ihrem neuen Bildschirm einen Namen.

Beginnen wir mit dem Wireframing unseres Dashboards.

Um die Hintergrundebenen des Bildschirms und des Textfeldes Ihres dashboards zu erstellen, ziehen Sie zwei Rechteck-Widgets (aus der Basic-Widget-Bibliothek von Justinmind) auf die Leinwand. Ändern Sie die Größe und passen Sie die Farben an, damit sie zu unseren Beispielen passen. Das erste Rectangle (der Hintergrund des Bildschirms) sollte der Größe der Leinwand entsprechen und ein helles Blau (Hex #2BA5FF) mit 90% Transparenz erhalten. Sie können all diese Informationen in der Eigenschaftenpalette ändern.

Das zweite Rechteck (die Kopfzeile) sollte auf 100 x 59 Pixel verkleinert und am oberen Rand der Leinwand platziert werden. Ändern Sie seine Farbe entsprechend unserem Beispiel (Hex #2BA5FF) und lassen Sie die Transparenz unverändert.

Geben Sie Ihrem Bildschirm dann einen Titel. Ziehen Sie ein Text-Widget auf die Leinwand und platzieren Sie es unter der Kopfzeile. Benennen Sie es nach Belieben um.

Beginnen wir mit der Navigation der Website. Wir haben uns für Breadcrumbs entschieden, aber Sie können jede der zusätzlichen Navigationskomponenten verwenden, die in der Salesforce Lightning Design-Bibliothek verfügbar sind (z. B. Registerkarten-Navigation, Menüs oder vertikale Navigation).

Ziehen Sie aus dem Abschnitt Schaltflächen & Navigation der Salesforce Lightning Design-Bibliothek ein Brotkrumen-Widget unter den Titel Ihrer Website. Dies hilft Benutzern, den Pfad eines Datensatzes zu erkennen und zu übergeordneten Elementen zurück zu navigieren.

Als nächstes ziehen Sie ein App-Launcher-Widget (aus dem Abschnitt Komponenten) unter Ihre Breadcrumbs. Von hier aus können die Benutzer eine App auswählen, mit der sie arbeiten möchten.

Ziehen Sie dann ein Split View-Widget aus demselben Bereich der Widget-Bibliothek unter den App-Starter. Die geteilte Ansicht wird verwendet, um zwischen Datensätzen in einer Liste zu navigieren, während Sie auf demselben Bildschirm bleiben. Wir empfehlen, diesem Element eine Hintergrundebene hinzuzufügen, um einen gewissen Kontrast zum Bildschirmhintergrund zu schaffen. Ziehen Sie dazu ein Rechteck auf die Arbeitsfläche und positionieren Sie es unterhalb der geteilten Ansicht (ändern Sie die Reihenfolge mit einem Rechtsklick).

Ziehen Sie ein Widget Zusammenfassung Detail Komplexer Titel (Komponenten) nach rechts auf den Canvas. Dieses Element kann die Details einer Aufgabe oder eines Projekts ein- oder ausblenden und zeigt dabei immer eine Zusammenfassung an. Wir haben in unserem Beispiel einen Fortschrittsbalken (Komponenten) als zusätzliche visuelle Hilfe für die Benutzer hinzugefügt.

Weitere Widgets, die Sie in diesen Bildschirm einfügen können, sind der Datei-Selektor und der Avatar-Kreis, um Ihr Dashboard noch persönlicher zu gestalten.

Dieser Bildschirm ermöglicht es den Teammitgliedern, die Aktualisierungen und Aktivitäten ihrer Kollegen in einer sich ständig aktualisierenden Liste zu sehen – ähnlich wie der News Feed von Facebook. Um loszulegen, geben Sie Ihrem Bildschirm einen Hintergrund, eine Überschrift, einen Titel und eine Reihe von Breadcrumbs wie zuvor.

Wenn Sie wiederholte Arbeit vermeiden möchten, können Sie eine Vorlage mit den am häufigsten verwendeten Inhalten erstellen. Dann wird jeder Bildschirm, auf den Sie diese Vorlage anwenden, alle diese Elemente enthalten. Die Wiederverwendung von Inhalten in Ihren Prototypen hat etwas sehr Praktisches.

Um die Liste der Aktivitäten zu erstellen, haben wir Post-Feed-Widgets verwendet. Um unser Beispiel zu reproduzieren, ziehen Sie die Widgets Post feed, Attachment post feed und Replies post feed aus dem Bereich Feed – Chats & Tiles der Beleuchtungsbibliothek auf die linke Seite des Canvas.

Wenn Sie möchten, dass diese Elemente scrollbar sind, wählen Sie sie alle aus und klicken Sie mit der rechten Maustaste. Wählen Sie die Option “Im dynamischen Panel gruppieren” und gehen Sie dann zur Palette Eigenschaften. Hier wählen Sie im Abschnitt Vertikaler Überlauf die Option “Automatisch scrollen”. Dynamische Panels sind Container-Widgets, die es ermöglichen, dass Gruppen von Elementen gleichzeitig und mit derselben Interaktion arbeiten.

Auf der rechten Seite des Canvas erstellen wir einen Dialog, der Informationen über das ausgewählte Projekt enthält (ähnlich wie der Vorgangsdialog in Atlassian Jira). Ziehen Sie zunächst ein Widget Ladekarte aus dem Abschnitt Karten & Benachrichtigungen der Lightning-Bibliothek auf die linke Seite des Canvas oben. Ziehen Sie dann ein Record Home-Widget (Komponenten) darunter.

Ziehen Sie schließlich vier abgeschnittene Pill-Widgets (Komponenten) unter diese Elemente, die als Tags dienen.

Dieser Bildschirm enthält Ressourcen und Materialien zu ihren Projekten. Er enthält Such- und Filterfunktionen sowie Dateianhänge. Wie zuvor geben Sie Ihrem Bildschirm einen Hintergrund, eine Kopfzeile, einen Titel und eine Reihe von Breadcrumbs.

Um diesen Bildschirm zu erstellen, benötigen Sie eine Reihe von Registerkarten und verschachtelten Registerkarten (Schaltflächen & Navigation) und Datentabellen-Widgets (Datentabellen). Registerkarten werden verwendet, um zusammenhängende Inhalte in einem einzigen Container zu halten, und Datentabellen werden verwendet, um tabellarische Daten anzuzeigen. Benennen Sie die Standarddaten nach Belieben um.

Um die Such- und Filterfunktion zu erstellen, ziehen Sie eine Base Combobox (Formulare & Steuerelemente) über die Registerkarten. Von hier aus können Benutzer eine manuelle Suche nach bestimmten Objekten durchführen sowie Optionen auswählen und deren Auswahl aufheben.

Um Dateianhänge einzubinden, werfen Sie einen Blick in den Bereich Dateien, Panels & Popovers der Lightning-Bibliothek. Dort finden Sie viele verschiedene Arten von Anzeigen für Dateianhänge, aus denen Sie wählen können.

Fügen Sie schließlich eine Reihe von neutralen Schaltflächen (Schaltflächen & Navigation) auf der rechten Seite des Canvas hinzu. Diese dienen als zusätzliche Filterfunktion. Bei uns können die Benutzer nach dem Projekt-/Aufgabenfortschritt filtern.

Und zu guter Letzt, der Chat-Bildschirm. Hier können Sie mit Ihren Kollegen chatten und Kontaktinformationen speichern.

Sobald Sie die Basis dieses Bildschirms erstellt haben (wie zuvor), ziehen Sie ein Base Lookup-Widget (Formulare & Steuerelemente) oben rechts auf den Canvas. Das Lookup-Widget ist ein Kombinationsfeld mit automatischer Vervollständigung, das eine Suche in einem Datenbankobjekt durchführt. Von hier aus können die Benutzer nach Kontakten suchen.

Ziehen Sie darunter eine Reihe von Kachelaufgaben-Widgets (Feeds – Chats & Kacheln). Hier werden die Informationen über die Kontakte angezeigt.

Ziehen Sie schließlich ein Voice-Widget (Komponenten) auf die linke Seite des Canvas. Wir haben das Widget Voice failed verwendet, aber Sie können jedes beliebige der verfügbaren Widgets verwenden. In diesem Bereich wird die jüngste Chataktivität angezeigt.

Und das war’s! Ihre Lightning-App ist jetzt fertig, hurra! Jetzt ist es an der Zeit, einen Blick auf Ihren fertigen Prototyp zu werfen. Klicken Sie dazu oben rechts im Editor von Justinmind auf „Simulieren“. Verwenden Sie die vertikale Navigation auf der rechten Seite des Simulationsfensters, um zwischen Ihren Bildschirmen zu wechseln. Viel Spaß!

Wie Sie sehen, brauchen Sie nur ein paar Lightning-Komponenten per Drag & Drop, um beeindruckende App-Prototypen zu erstellen. Prototyping ist der perfekte Weg, um sich auf das Benutzererlebnis zu konzentrieren und alle sich wiederholenden Aufgaben beim App-Design zu vermeiden.

Die Lightning-Komponenten von Justinmind helfen Ihnen genau dabei. Wenn Sie es also noch nicht getan haben, sollten Sie unbedingt das Lightning Design System UI Kit von Justinmind herunterladen. Sie werden im Handumdrehen Prototypen für Salesforce-Anwendungen und -Oberflächen erstellen können!