Jump-Start HubSpot UI Extensions with Design Patterns

Hallo zusammen, ich bin Brook von HubSpot. Heute spreche ich über die spannende neue Vorlage für Entwurfsmuster, die ihr für UI Erweiterungen herunterladen könnt. Diese Entwurfsmuster wurden entwickelt, um euch eine Grundlage für ein gutes Design eurer App Karten und UI Erweiterungen zu bieten, damit sie benutzerfreundlicher werden und zum Markenstil von HubSpot passen. Um diese zu verwenden, könnt ihr sie mit Hilfe unserer HubSpot CLI Befehle direkt in eure lokale Umgebung herunterladen. Ich bin also in meinem Code Editor und habe ein Terminal geöffnet. Überprüft Befindet ihr euch in einem Verzeichnis mit einer HubSpot YAML Konfigurationsdatei. Falls nicht, führt ihr hsnit aus und verknüpft euer lokales Verzeichnis mit eurem HubSpot Konto. Ich habe die Konfigurationsdatei bereits hier, daher führe ich einfach den Befehl aus, mit dem ich diese Vorlagen herunterladen kann. Alle diese Informationen befinden sich in unserem GitHub Repository, das unten in der Beschreibung verlinkt ist. Schaut euch also unbedingt die Beschreibung dieses Videos an, um den Link zum GitHub Repository zu erhalten. Ich füge einfach diesen Befehl in mein Terminal ein. Das ist hs project create und er enthält flex für die Vorlagenquelle, das Ziel, den Namen und die Vorlage, die wir auswählen möchten. Nachdem wir das eingegeben haben, klicken wir auf Enter. Es dauert nur einen Moment, bis der Bild in meinem lokalen Verzeichnis ausgeführt wird. Ihr seht hier den Ordner Design Patterns. Jetzt müssen wir die Paketabhängigkeiten installieren. Wechseln wir also mit cd in den Ordner Design Patterns, dann in den Ordner Source, dann in den Ordner und schließlich in den Ordner Extensions. Von hier aus führe ich jetzt einfach npm install aus. Sobald diese installiert sind, ist alles in Ordnung. Werfen wir also einen Blick in diesen Ordner und sehen, welche Entwurfsmuster verfügbar sind. Wenn wir also unseren Ordner Entwurfsmuster öffnen, indem wir auf die Karotte klicken, dann auf den Quellordner und schließlich auf den Ordner Erweiterungen, sehen Sie, dass, dass wir hier eine ganze Reihe von Erweiterungen haben. Wir haben also ein Schaltflächenmodal, ein Schaltflächenpanel, eine Formula Aktion, ein Formula Modal, ein mehrstufiges Formula und eine Tabelle. All diese Erweiterungen werden in einem einzigen Projekt gerendert. Es handelt sich jedoch um einzelne Karten. Wenn Sie dies also in Ihr HubSpot Konto hochladen, müssen Sie diese Karten einzeln zu Ihrer Kontaktdatensatzseite hinzufügen. Nachdem wir nun die Abhängigkeiten heruntergeladen haben, laden wir dies in unser HubSpot Konto hoch. Führen wir also in unserem Terminal den Befehl HS Project Upload aus. Daraufhin wird gefragt, ob wir es in diesem Konto erstellen möchten. Ja, das möchten wir. Dadurch wird es erstellt und bereitgestellt. Automatischer Build und Deployment Ihres Codes via HS project upload sofort einsatzfähig. Nachdem dies nun implementiert ist, wechseln wir zu unserem HubSpot Account, um uns all diese Entwurfsmuster in Aktion anzusehen. Wir befinden uns in unserem HubSpot Account. In der Hauptnavigation. Gehen wir zu CRM und klicken dann auf Kontakte. Klicken wir nun auf einen beliebigen Kontakt. Ich klicke auf Dennis. In der mittleren Spalte sehen Sie, dass wir bereits einen Tab namens Benutzerdefiniert haben. Klicken wir also oben rechts auf Datensatz anpassen. Dadurch gelangen wir zur Seite zur Datensatzanpassung ganz schnell. Wir klicken auf Standardansicht. Sie können auch Teamansichten erstellen. Wenn Sie also möchten, dass Sie für verschiedene Teams wie Ihr Vertriebsteam, Ihr Marketingteam oder Ihr Serviceteam unterschiedlich sind, können Sie sie so anpassen, dass Sie nur die benötigten Informationen anzeigen. Wechseln wir nun zu unserem Tab Benutzerdefiniert. Entfernen wir einfach die Karten, die ich hier bereits habe. Klicken wir dann auf Karten hinzufügen. Alle Karten, die Sie über UI Erweiterungen erstellen, befinden sich unter dem Kartentyp Apps. Klicken wir also auf den Kartentyp Apps. Jetzt haben wir hier eine Menge Apps. Wenn wir nach unten scrollen, können Sie erkennen, dass dies die Karten aus den Entwurfsmustern sind, da darunter steht, dass dies das Entwurfsmuster ist. Wir haben also die modale Karte für die Schaltfläche, die Karte für das Schaltflächenfeld, die Karte für Formularaktionen, das modale Formular, das mehrstufige Formular und die Karte für Tabellenbeispiele. Wie gesagt, das sind alles einzelne Karten in dieser Karte. Nachdem wir das haben, klicken wir einfach auf das X und dann auf Speichern und Beenden. Nachdem wir das gespeichert haben, können wir einfach auf diese Zurück Schaltfläche hier klicken und wir gelangen direkt zurück zur Kontaktseite. Großartig. Jetzt können wir alle Entwurfsmusterkarten sehen, die wir haben. Bei der ersten der modalen Karte für die Schaltfläche klicken wir auf Öffnen und hier wird dir gezeigt, wie das aussehen könnte, wenn du ein modales Fenster geöffnet hast und alles linksbündig ist. Klicke jetzt auf die Xbox. Als nächstes haben wir dasselbe Formular, aber dieses Mal wird nicht das modale Fenster geöffnet, sondern die Seitenleiste. Wenn wir hier klicken und die Seitenleiste öffnen, sehen wir, dass wieder alles linksbündig ausgerichtet ist. Wir können auch einfach auf die Schaltfläche X klicken. Als nächstes haben wir die Aktionsmuster für Formulare. Hier wird dir ein einfaches Formular gezeigt und wie du eines erstellen kannst. In diesem Formular sind die Beschriftungen klar gekennzeichnet. Du hast deine E Mail Adresse zusammen mit einigen Beschreibungsinformationen und diese kleinen Infofelder, die du für ein Pop up verwenden kannst, um weitere Informationen zu erhalten. Alles ist linksbündig ausgerichtet. Wir haben auch sekundäre Informationen, die dir bei Bedarf weitere Informationen zu diesem Formular liefern. Die Schaltfläche Senden ist derzeit in einem Zustand, in dem du nicht darauf klicken kannst, da das Formular keine Informationen enthält. Das nächste Entwurfsmuster ist für modale Formulare. HubSpot empfiehlt daher Formulare in Overlays modale Fenster Panels, um die Hauptansicht übersichtlich zu halten. Daher empfehlen wir, Formulare in ein Dialogfeld oder ein modales Fenster einzufügen. Klicken wir nun auf diese Schaltfläche, um das Formular anzuzeigen. Es handelt sich um dasselbe Formular, das Sie in Formular Aktion 1 gesehen haben, doch dieses wird im modalen Fenster angezeigt, damit es nicht mehr Platz einnimmt. Klicken Sie nun auf Abbrechen. Dadurch wird das Formular ebenfalls geschlossen. Der nächste Schritt ist für Formulare mit mehreren Schritten. Wenn Sie über ein Formular mit mehreren Schritten verfügen, empfehlen wir Ihnen auf jeden Fall, es in ein modales Fenster oder ein Paneel einzufügen, da es für einen Benutzer je nach Anzahl der Schritte sehr überwältigend sein kann, alle Schritte auf dieser einen Seite ausführen zu müssen. Wenn wir es also in einem Dialogfeld platzieren, ist die Navigation etwas einfacher. Klicken Sie also auf Formular anzeigen. Daraufhin wird es in der Panelansicht angezeigt und dann werden Sie sehen, dass wir hier einen Tracker haben, der Ihnen anzeigt, wie weit Sie in diesem Formular sind, was wirklich praktisch ist. Sie können erst fortfahren, wenn Sie die Angaben hier ausgefüllt haben. Das führt Nutzer Schritt für Schritt durch komplexe Prozesse, ohne den Bildschirm zu überfüllen. Und zum Schluss haben wir noch das Tabellenbeispiel. Tabellen können viele Informationen enthalten. Daher empfehlen wir, beim Erstellen einer Tabelle eine Seitennummerierung hinzuzufügen, damit die Tabelle nicht zu lang wird. Hier sehen Sie, dass wir etwa vier Optionen anzeigen und dann haben Sie die Seitennummerierung, die am unteren Rand verläuft. Wenn Sie also mehrere Datensätze haben, wird diese durchgegangen. Wir haben auch diese praktischen kleinen Aktionsschaltflächen. Wenn Sie also eine Aktion benötigen, können Sie eine Aktionsschaltfläche hinzufügen, die Ihnen weitere Informationen zu den möglichen Aktionen anzeigt. Sie können beispielsweise den Datensatz in dieser Zeile aktualisieren oder etwas anderes tun. Auf diese Weise wird die Tabelle einfach übersichtlicher. Außerdem ist hier alles linksbündig ausgerichtet, sodass es leicht zu lesen ist. Und genau darum geht es bei den Entwurfsmustern. Wir haben außerdem unser Figma Design Kit aktualisiert, um all diese Entwurfsmuster aufzunehmen. Wenn Sie also Dinge visuell betrachten möchten, können Sie das Figma Design Kit verwenden, um diese zu betrachten. Sehen wir uns nun das Kit an, um zu zeigen, wo diese zu finden sind. Um den Link zum Figma Design Kit zu erhalten, klicken Sie einfach auf das Feld in der Beschreibung. Der Link wird direkt für Sie angezeigt. Wenn Sie lediglich darauf klicken, wird er in Figma geöffnet. Sie benötigen kein kostenpflichtiges Figma Konto, um dies zu sehen. Sie benötigen lediglich ein kostenloses Konto. Registrieren Sie sich für ein kostenloses Figma Konto. Erstellen Sie einen Entwurf und speichern Sie ihn. Anschließend können Sie nach Belieben damit herumspielen. Aber gehen wir hinein. Sie sehen, dass wir in diesem Design Kit mehrere verschiedene Seiten haben. Dann können Sie fortfahren und es gibt einen Abschnitt mit der Bezeichnung Entwurfsmuster. Dort sehen Sie, dass wir Funktionen für Schaltflächen haben. Wir empfehlen stets, die Schaltflächen linksbündig auszurichten und die primäre Schaltfläche ganz links zu platzieren. Dann haben wir noch unsere Formulare. Bei Formularen empfehlen wir vertikale Formulare. Als nächstes haben wir unsere mehrstufigen Formulare. Auch hier empfehlen wir, diese in einem Bereich zu platzieren, damit man Ihnen leichter folgen kann und jeder Schritt beschriftet ist. Und schließlich unsere Tabellen auch. Bei Tabellen sie sollten nicht zu lang sein. Integrieren Sie Aktionsschaltflächen für Fenster und Seitenleisten. Fügen Sie eine Paginierung hinzu, damit die Tabelle nicht zu lang wird. Oder fügen Sie einen Bildlauf hinzu, wenn Sie viele Spalten in diese Tabelle einfügen müssen. So Verwenden Sie die HubSpot Entwurfsmuster für UI Erweiterungen. Sie können diese jetzt herunterladen und sofort verwenden. Sie können sie als Startervorlage für alle Ihre Projekte verwenden, um Ihre Fortschritte zu beschleunigen. Lassen Sie mich in den Kommentaren unten wissen, was Sie davon halten. Vergessen Sie wie immer nicht, den YouTube Kanal von HubSpot Developers zu liken und zu abonnieren. Wir sehen uns dann in einem anderen Video. Tschüss zusammen. Tschüss.