Smart Tiles Einführung
Farbe ist der schnellste Weg, Kacheln zu gruppieren und ein Panel wie einen Teil der Website wirken zu lassen statt wie einen Zusatz. Jede Kachel in Smart Tiles hat eine Hintergrundfarbe und eine Schriftfarbe, beide aus derselben Palette gewählt: sechs Akzentfarben, die dem Design der Website folgen, einunddreißig vordefinierte Farben, Schwarz und Weiß. Dieser Artikel listet die Farben auf, erklärt das Verhalten der Akzentfarben und schlägt vor, wie sie sich kombinieren lassen.
Eine Farbe auswählen
- Öffnen Sie die Seite im Bearbeitungsmodus und klicken Sie auf die …-Schaltfläche der Kachel.
- Zeigen Sie auf Hintergrundfarbe oder Schriftfarbe.
- Klicken Sie im Untermenü auf eine Farbe. Jeder Eintrag zeigt einen Kreis in seiner Farbe; die aktuelle Farbe ist mit einem ausgefüllten Kontrollkästchen markiert.
Die Änderung wird sofort übernommen. Beide Menüs enthalten dieselben Farben, sodass jede Farbe für den Hintergrund einer Kachel und den Text einer anderen verwendet werden kann.
Eine neue Kachel beginnt mit Akzent 1 als Hintergrund und Weiß als Schriftfarbe.
Akzentfarben
Akzent 1 bis Akzent 6 sind keine festen Farben. Sie verweisen auf die sechs Inhaltsakzentfarben des auf die Website angewendeten Designs, sodass sich eine Kachel mit Akzentfarbe zusammen mit dem Design ändert: Wechseln Sie die Website vom blauen zum grünen Design, und jede Akzent-1-Kachel wird mit ihr grün. Mit Akzentfarben erstellte Panels wirken daher auf jeder Website, auf die sie kopiert werden, wie zu Hause und überstehen ein Rebranding ohne Bearbeitung.
Woher die sechs Akzentfarben stammen:
- Moderne Designs, die im SharePoint Admin Center oder mit dem Designgenerator erstellt wurden, definieren alle sechs Inhaltsakzente; jedes Design hat seinen eigenen Satz.
- Benutzerdefinierte Designs können einige oder alle Inhaltsakzente undefiniert lassen. Ein Akzenteintrag, den das Design nicht definiert, fällt auf die primäre Akzentfarbe des Designs zurück – auf solchen Websites ergeben Akzent 2 bis Akzent 6 typischerweise alle dieselbe Farbe wie Akzent 1.
❗ Wichtig
Da Akzentfarben vom Design abhängen, kann ein von einer Website exportiertes Panel auf einer anderen anders aussehen. Wenn die exakten Farben wichtig sind – etwa bei Unternehmensfarben –, verwenden Sie stattdessen die vordefinierten Farben.
Vordefinierte Farben
Die vordefinierten Farben sind die gemeinsame Farbpalette von Fluent UI, dem Designsystem von Microsoft 365. Sie ändern sich nicht mit dem Design. Die Zahl hinter einem Namen ist die Schattierung aus der Fluent-UI-Palette: 10 ist der Grundton, 20 und 30 sind zunehmend dunkler, 40 noch dunkler.
| Name | Wert | Name | Wert |
|---|---|---|---|
| Rosarot | #750b1c | Zyan 10 | #00b7c3 |
| Rot 20 | #a4262c | Cyanblau 20 | #004e8c |
| Rot 10 | #d13438 | Cyanblau 10 | #0078d4 |
| Rotorange | #da3b01 | Blau 10 | #4f6bed |
| Orange 30 | #8e562e | Blaumagenta 30 | #5c2e91 |
| Orange 20 | #ca5010 | Blaumagenta 20 | #8764b8 |
| Orange 10 | #ffaa44 | Blaumagenta 10 | #8378de |
| Gelb 10 | #fce100 | Magenta 20 | #881798 |
| Orange-Gelb 20 | #986f0b | Magenta 10 | #c239b3 |
| Orange-Gelb 10 | #c19c00 | Magentarosa 20 | #9b0062 |
| Gelbgrün | #8cbd18 | Magentarosa 10 | #e3008c |
| Grün 20 | #0b6a0b | Grau 40 | #393939 |
| Grün 10 | #498205 | Grau 30 | #7a7574 |
| Grüntürkis | #00ad56 | Grau 20 | #69797e |
| Zyan 30 | #005b70 | Grau 10 | #a0aeb2 |
| Zyan 20 | #038387 |
Zwei weitere Einträge vervollständigen die Liste: Schwarz (#000000) und Weiß (#ffffff).
Worauf sich die Schriftfarbe auswirkt
Die Schriftfarbe wird für den Titel, die Beschreibung und das Symbol der Kachel verwendet, wenn das Symbol aus dem Satz Standardsymbol stammt – diese Symbole werden als Text gezeichnet und übernehmen die Farbe des Textes. Dateityp-, App-, Azure- und Vitextra-Symbole sowie eigene Bilder behalten ihre eigenen Farben.
Die Beschreibung wird leicht transparent gezeichnet, sodass sie in derselben Farbe etwas heller erscheint als der Titel.
Farben kombinieren
- Kontrast zuerst. Weißer Text auf Rot 10, Grün 20, Cyanblau 10 oder einem beliebigen Grau ist gut lesbar; auf Gelb 10, Orange 10 oder Grau 10 verwenden Sie Schwarz. Die helleren Grundtöne – Orange 10, Gelb 10 – eignen sich besser für schwarzen Text; die Schattierungen 20, 30 und 40 für weißen.
- Eine Familie pro Panel. Kacheln in mehreren Schattierungen einer Familie – zum Beispiel Zyan 10, 20 und 30 – wirken bewusst gewählt; sechs unzusammenhängende leuchtende Farben wirken wie ein Testbild.
- Nach Farbe gruppieren. Geben Sie allen HR-Links eine Farbe und allen IT-Links eine andere, und das Panel erklärt sich ohne Überschriften von selbst.
- Akzent für die Website, vordefiniert für die Marke. Verwenden Sie Akzentfarben für Panels, die sich in jedes Design der Website einfügen sollen, und vordefinierte Farben, wenn die Kacheln feste Unternehmensfarben tragen.
📝 Hinweis
Kacheln ändern sich bei einem dunklen Design nicht von selbst: Eine weiße Kachel bleibt auf einer dunklen Seite weiß. Akzentfarben sind der einfache Weg zu einem Panel, das in hellen und dunklen Designs funktioniert, da das Design in beiden Fällen einen passenden Akzent liefert.
💡 Tipp
Ein Foto kann die Hintergrundfarbe einer Kachel ersetzen; siehe KB10245. Ein Hintergrundbild für eine Kachel festlegen. Die Symbolsätze und ihre Reaktion auf die Schriftfarbe sind in KB10243. Symbole für Kacheln auswählen beschrieben.
Weitere Informationen zum Produkt: https://vitextra.com/de/products/smart-tiles
