Smart Tiles Inleiding
Kleur is de snelste manier om tegels te groeperen en een paneel bij de site te laten passen. Elke tegel in Smart Tiles heeft een Achtergrondkleur en een Tekstkleur, beide gekozen uit hetzelfde palet: zes accentkleuren die het sitethema volgen, eenendertig vooraf gedefinieerde kleuren, zwart en wit. Dit artikel geeft een overzicht van de kleuren, legt uit hoe accentkleuren werken en geeft suggesties voor kleurcombinaties.
Een kleur kiezen
- Open de pagina in de bewerkingsmodus en klik op de knop … van de tegel.
- Wijs Achtergrondkleur of Tekstkleur aan.
- Klik op een kleur in het submenu. Bij elke optie staat een cirkel in de betreffende kleur; de huidige kleur wordt aangegeven met een ingevuld selectievakje.
De wijziging wordt onmiddellijk toegepast. Beide menu's bevatten dezelfde kleuren. Elke kleur kan dus worden gebruikt voor de achtergrond van de ene tegel en de tekst van een andere.
Een nieuwe tegel heeft standaard Accent 1 als achtergrondkleur en Wit als tekstkleur.
Accentkleuren
Accent 1 tot en met Accent 6 zijn geen vaste kleuren. Ze verwijzen naar de zes inhoudsaccentkleuren van het thema dat op de site is toegepast. Een tegel met een accentkleur verandert dus mee met het thema: als u het blauwe thema van de site vervangt door het groene, worden alle tegels met Accent 1 ook groen. Panelen met accentkleuren passen daardoor bij elke site waarnaar ze worden gekopieerd en hoeven bij een nieuwe huisstijl niet te worden aangepast.
De zes accentkleuren worden als volgt bepaald:
- Moderne thema's die in het SharePoint-beheercentrum of met de themagenerator zijn gemaakt, definiëren alle zes inhoudsaccenten. Elk thema heeft een eigen set.
- Aangepaste thema's kunnen sommige of alle inhoudsaccenten ongedefinieerd laten. Een accent dat niet in het thema is gedefinieerd, valt terug op de primaire accentkleur van het thema. Op zulke sites leveren Accent 2 tot en met Accent 6 doorgaans allemaal dezelfde kleur op als Accent 1.
❗ Belangrijk
Omdat accentkleuren afhankelijk zijn van het thema, kan een paneel dat van de ene site is geëxporteerd er op een andere site anders uitzien. Gebruik vooraf gedefinieerde kleuren als de exacte kleuren van belang zijn, bijvoorbeeld voor huisstijlkleuren.
Vooraf gedefinieerde kleuren
De vooraf gedefinieerde kleuren vormen het gedeelde kleurenpalet van Fluent UI, het ontwerpsysteem van Microsoft 365. Ze veranderen niet met het thema. Het getal na een naam geeft de tint in het Fluent UI-palet aan: 10 is de basistint, 20 en 30 zijn steeds donkerder en 40 is nog donkerder.
| Naam | Waarde | Naam | Waarde |
|---|---|---|---|
| Rozerood | #750b1c | Cyaan 10 | #00b7c3 |
| Rood 20 | #a4262c | Cyaanblauw 20 | #004e8c |
| Rood 10 | #d13438 | Cyaanblauw 10 | #0078d4 |
| Roodoranje | #da3b01 | Blauw 10 | #4f6bed |
| Oranje 30 | #8e562e | Blauw magenta 30 | #5c2e91 |
| Oranje 20 | #ca5010 | Blauw magenta 20 | #8764b8 |
| Oranje 10 | #ffaa44 | Blauw magenta 10 | #8378de |
| Geel 10 | #fce100 | Magenta 20 | #881798 |
| Oranjegeel 20 | #986f0b | Magenta 10 | #c239b3 |
| Oranjegeel 10 | #c19c00 | Magenta-roze 20 | #9b0062 |
| Geelgroen | #8cbd18 | Magenta-roze 10 | #e3008c |
| Groen 20 | #0b6a0b | Grijs 40 | #393939 |
| Groen 10 | #498205 | Grijs 30 | #7a7574 |
| Groen cyaan | #00ad56 | Grijs 20 | #69797e |
| Cyaan 30 | #005b70 | Grijs 10 | #a0aeb2 |
| Cyaan 20 | #038387 |
Twee extra opties maken de lijst compleet: Zwart (#000000) en Wit (#ffffff).
Waarop de tekstkleur van toepassing is
De Tekstkleur wordt gebruikt voor de titel, de beschrijving en het pictogram van de tegel als het pictogram uit de set Standaardpictogram komt. Deze pictogrammen worden als tekst weergegeven en nemen de tekstkleur over. Bestandstype-, app-, Azure- en Vitextra-pictogrammen en aangepaste afbeeldingen behouden hun eigen kleuren.
De beschrijving wordt enigszins transparant weergegeven en lijkt daardoor iets lichter dan de titel in dezelfde kleur.
Kleuren combineren
- Contrast voorop. Witte tekst op Rood 10, Groen 20, Cyaanblauw 10 of Grijs 40 is goed leesbaar; gebruik Zwart op Geel 10, Oranje 10 of Grijs 10. De lichtere basistinten - Oranje 10 en Geel 10 - zijn geschikter voor zwarte tekst; de tinten 20, 30 en 40 voor witte tekst.
- Eén kleurfamilie per paneel. Tegels in verschillende tinten van één familie, bijvoorbeeld Cyaan 10, 20 en 30, vormen een samenhangend geheel. Zes felle kleuren zonder onderling verband doen denken aan een testbeeld.
- Groeperen op kleur. Geef alle HR-koppelingen één kleur en alle IT-koppelingen een andere. Zo is het paneel ook zonder koppen duidelijk.
- Accentkleuren voor de site, vooraf gedefinieerde kleuren voor het merk. Gebruik accentkleuren voor panelen die bij elk sitethema moeten passen en vooraf gedefinieerde kleuren als de tegels vaste huisstijlkleuren gebruiken.
📝 Opmerking
Tegels passen zich niet vanzelf aan een donker thema aan: een witte tegel blijft wit op een donkere pagina. Accentkleuren bieden een eenvoudige manier om een paneel te maken dat in lichte en donkere thema's werkt, omdat het thema in beide gevallen een passend accent levert.
💡 Tip
Een foto kan de achtergrondkleur van een tegel vervangen; zie KB10245. Een achtergrondafbeelding voor een tegel instellen. De pictogramsets en hun reactie op de tekstkleur worden beschreven in KB10243. Pictogrammen voor tegels kiezen: de sets Standaard, Bestandstype, App, Azure en Vitextra.
Meer informatie over het product: https://vitextra.com/nl/products/smart-tiles
