Freigeben über

Entwerfen eines SharePoint-Webpartsymbols

Webpartsymbole sollen einfach, repräsentativ und symbolisch sein. Jedes Symbol wird auf ein minimalistisches Design verkleinert, um die wichtigsten Attribute darzustellen. Symbole werden in der Toolbox auf SharePoint-Seiten und optional im Store angezeigt. Beispiele für Symbolformen sind quadratisch, kreisförmige, vertikale und horizontale Formen.

Beispiele für Symbole

Raster mit einfachem Rand

Webpartsymbole werden mit 32 x 32 px angezeigt, jedoch mit doppelter Größe oder 64 x 64 px entworfen. Erstellen Sie Symbole mit 100 %, um sicherzustellen, dass die Pixel korrekt sind.

Webpart-Symbolraster

Layout

Entwerfen Sie Symbole im 64 x 64 px-Containerbereich. Dadurch wird sichergestellt, dass das Symbol richtig gerendert wird.

Raster-Beispiel für 64 px-Webpartsymbole

Formen

Nicht alle Symbole oder Logos werden als perfektes Quadrat erstellt. In diesem Leitfaden wird erklärt, wie Sie verschiedene Symbolformen innerhalb des Rasters vereinheitlichen und in proportionaler Größe anzeigen. Stellen Sie sicher, dass das Symbol je nach Form entweder die volle Breite oder vollständige Höhe des Rasters ausfüllt.

Beispiel für das Ausrichten von Symbolen verschiedener Formen im Raster

Pixelklarheit

Versuchen Sie, die Verzerrung von Symbolen zu vermeiden, indem Sie die Kanten an der X- und Y-Achse ausrichten. Verwenden Sie nach Möglichkeit Ganzzahlen.

Beispiele für ein nicht auf die Pixel ausgerichtetes und ein auf die Pixel ausgerichtetes Symbol

Farben und Hintergründe

Das Symbol ist die visuelle Darstellung Ihres Webparts und dessen Funktion. Mit Symbolen können Sie das grundlegende Konzept des Webparts einfach und nachdrücklich kommunizieren.

Webpartsymbole können eine Farbe enthalten oder komplett farbig sein. Die meisten Symbole wirken am besten, wenn Sie die vereinfachten Formen und dünne 2-Pixel-Linien ähnlich wie bei den Symbolen der Office-Benutzeroberfläche Fabric verwenden. In einigen Fällen müssen Sie möglicherweise ein Markensymbol oder Logo eines Unternehmens komplett farbig darstellen. Wenn eine einfarbige Version des Symbols verfügbar ist, sollten Sie diese Version verwenden.

Beispiele für Symbole mit einer Farbe, zwei Farben oder komplett farbige Symbole

Exportieren Ihrer Symbole

Exportieren Sie Symbole als SVGs mit 64 x 64 px und transparentem Hintergrund.

Das Symbolraster finden Sie im SharePoint-Design-Toolkit.