Connector SDK UI-Endpunkt-Icons

Endpunkt- und Aktivitätsicons

Die Benutzeroberfläche des Integration Studio für einen mit dem Jitterbit Connector SDK erstellten Connector verwendet Icons in der Benutzeroberfläche, um den Endpunkt und seine Aktivitäten darzustellen.

Im Komponentenpalette repräsentieren Icons sowohl den konfigurierten Endpunkt als auch seine Aktivitäten. Dieser Screenshot des Dropbox-Connectors zeigt, wie verschiedene Icons verwendet werden:

Ein Icon (ein Ordner) wird für die Verbindung verwendet, während ein anderes Icon für die Aktivitäten verwendet wird. Es ist möglich, für jede Aktivität ein anderes Icon zu haben, obwohl ein gemeinsames Thema von Farben und Formen für einen Endpunkt empfohlen wird. Da der Text, der die Aktivität beschreibt, über dem Icon liegt, ist es am besten, die untere Hälfte des Icons in einer einheitlichen Farbe zu belassen, damit der weiße Text, der bis zu zwei Zeilen einnehmen kann, einen soliden Hintergrund hat, vor dem er erscheint.

Beachten Sie, dass nicht konfigurierte Endpunkte im Vergleich zu den konfigurierten Endpunkten leicht grau dargestellt werden. Vergleichen Sie die beiden Amazon S3-Icons in diesem Bild:

In einer Operation repräsentieren Icons die Aktivitäten des Dropbox-Connectors:

Wie in dem JSON-Schema des Connectors zu sehen ist, können Sie Icons für die Verbindung und jede der Aktivitäten definieren (gemeinsam als Endpunkt bezeichnet). Icons werden im SVG-Format definiert und als Pfad zu einer SVG-Datei bereitgestellt.

Um im Integration Studio UI—sowohl grafisch als auch ästhetisch—ordentlich zu funktionieren, müssen Icons spezifische Konventionen in ihrem Design und ihrer Erstellung folgen.

Wie aus diesen Beispielen ersichtlich ist, besteht das Designmuster für ein Icon aus einem farbigen Hintergrund, auf dem ein weißes Logo aufgebracht ist. Weißer Text wird zur Laufzeit von der Benutzeroberfläche des Integration Studio hinzugefügt, um die Aktivitäten zu kennzeichnen. Aus diesem Grund muss im Design eines Icons Platz gelassen werden, um diesen Text unterzubringen, der bis zu zwei Zeilen einnehmen kann.

Symbolgrößen, Dateityp und Farbregeln

Es werden zwei Symbole benötigt: ein Endpunkt-Symbol und ein Aktivitäts-Symbol.

Beide Symbole haben die gleiche Größe (90 Pixel mal 90 Pixel), mit dem Logo in einer maximalen Breite von 74 Pixeln und maximalen Höhen von 38 Pixeln (Endpunkt-Symbol) und 42 Pixeln (Aktivitäts-Symbol).

Ein Symbol muss als SVG-Datei gespeichert werden.

Die Symbole sollten, um mit der Ästhetik von Integration Studio übereinzustimmen, diesen Farbregeln folgen:

• Logo-Farbe: Weiß. Keine Ausnahmen.

• Helle Farbe: Die Hauptmarkenfarbe, vorzugsweise so gewählt, dass sie weißen Text darüber unterstützt.

• Dunkle Farbe: Dunklerer Farbton der hellen Farbe. Typischerweise bedeutet dies, die Helligkeit auf 80 % des ursprünglichen Wertes zu reduzieren.

• Verlauf: Auf das Aktivitäts-Symbol angewendet, mit der hellen Farbe oben und der dunklen Farbe unten.

• Größenanpassung: Die Symbole müssen innerhalb der Richtlinien passen, wie in den Beispielbildern unten gezeigt.

• Platzierung: Die Symbole sollten entweder mathematisch oder optisch für die horizontale Achse zentriert und dann vertikal in den Richtlinien zentriert werden, wie in den Beispielbildern unten gezeigt.

Endpunkt-Symbol

Das Endpunkt-Symbol besteht aus einer Reihe von Ordnern mit einem weißen Logo oben. Der hinterste Ordner ist in der dunklen Farbe und der vorderste Ordner ist in der hellen Farbe. Diese Farben können mithilfe der verschiedenen Ebenen von Vorlagen zugewiesen werden.

Das Logo muss mit einem transparenten Hintergrund erstellt werden, damit beim Platzieren auf den Ordnerbildern die Farben um das Logo herum und durch das Logo hindurch angemessen angezeigt werden.

Dieses Bild zeigt ein Endpunkt-Symbol mit hinzugefügten Richtlinien, die die Grenzen für die Platzierung des Symbols anzeigen:

Aktivitäts-Symbol

Das Aktivitäts-Symbol ist ein solider Verlauf, helle Farbe oben und dunkle Farbe unten. Das Logo kann dasselbe sein wie das im Endpunkt-Symbol oder ein anderes, je nach Bedarf. In den meisten Fällen wird es jedoch dasselbe wie das im Endpunkt-Aktivität sein, aber höher platziert, um Platz unten für die Aktivitätsbeschriftungen zu lassen.

Der minimale Abstand am unteren Rand sollte 40 Pixel (50 % der Höhe) betragen.

Wie beim Endpunkt-Icon muss das Logo mit einem transparenten Hintergrund erstellt werden, damit die Farben beim Platzieren auf den Ordnerbildern um das Logo herum und durch das Logo hindurch angemessen angezeigt werden.

Dieses Bild zeigt ein Aktivitäts-Icon mit hinzugefügten Richtlinien, die die Grenzen für die Platzierung des Icons anzeigen:

Badges

Icons können mit einem Beta- oder einem Veraltet-Badge in der oberen linken Ecke angezeigt werden. Diese können für die Endpunkt- und die Aktivitäts-Icons festgelegt werden und werden konfiguriert, indem entsprechende Eigenschaften zu den Metadaten eines Endpunkts oder einer Aktivität hinzugefügt werden.

• Um ein Beta-Badge hinzuzufügen, setzen Sie die isPreview-Eigenschaft auf true:

"isPreview": true,

• Um ein Veraltet-Badge hinzuzufügen, setzen Sie die isDeprecated-Eigenschaft auf true:

"isDeprecated": true,

Um beispielsweise einen Dropbox-Endpunkt und dessen Fetch mit einem Beta-Badge zu versehen:

{
  "name": "Dropbox",
  "isPreview": true,
  "endpoint": {},
  "activities": {
    "fetch": {
      "displayName": "Fetch File",
      "isPreview": true,
      "properties": []
    }
  }
}

Um einen Dropbox-Endpunkt und dessen Fetch-Aktivität mit einem Veraltet-Badge zu versehen:

{
  "name": "Dropbox",
  "isDeprecated": true,
  "endpoint": {},
  "activities": {
    "fetch": {
      "displayName": "Fetch File",
      "isDeprecated": true,
      "properties": []
    }
  }
}

Arbeitsbeispiele

Die oben gezeigten Beispiele sind als SVG-Dateien verfügbar:

• Endpunkt-Icon: endpoint.svg
• Aktivitäts-Icon: activity.svg

Siehe die adapter.json Datei des Dropbox-Connectors für ein funktionierendes Beispiel mit Icon-Dateien.

Für Beispiele verschiedener Logos und Farbgestaltungen siehe die aktuelle Auswahl an verfügbaren Connectors im Integration Studio.