Connector SDK UI-Endpunkt-Icons

Endpunkt- und Aktivitätsicons

Die Studio-Benutzeroberfläche 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 Komponenten-Palette 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, gegen den 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 im 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 in der Studio-Benutzeroberfläche sowohl grafisch als auch ästhetisch richtig 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 den ein weißes Logo angewendet wird. Weiße Schrift wird zur Laufzeit von der Studio-Benutzeroberfläche 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.

Icon-Größen, Dateityp und Farbregeln

Es werden zwei Icons benötigt: ein Endpoint-Icon und ein Aktivitäts-Icon.

Beide Icons 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 (Endpoint-Icon) und 42 Pixeln (Aktivitäts-Icon).

Ein Icon muss als SVG-Datei gespeichert werden.

Die Icons sollten, um mit der Ästhetik von Studio übereinzustimmen, folgenden 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.

• Gradient: Wird auf das Aktivitäts-Icon angewendet, mit der hellen Farbe oben und der dunklen Farbe unten.

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

• Platzierung: Die Icons 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.

Endpoint-Icon

Das Endpoint-Icon besteht aus einer Reihe von Ordnern mit einem weißen Logo oben. Der hinterste Ordner ist in der dunklen Farbe und der vorderste Ordner 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 Endpoint-Icon mit hinzugefügten Richtlinien, die die Grenzen für die Platzierung des Icons anzeigen:

Aktivitäts-Icon

Das Aktivitäts-Icon ist ein solider Gradient, helle Farbe oben und dunkle Farbe unten. Das Logo kann dasselbe sein wie das im Endpoint-Icon verwendete oder ein anderes, je nach Bedarf. In den meisten Fällen wird es jedoch dasselbe wie das im Endpoint-Aktivitäts-Icon 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 in Studio.