Smart Tiles Введение
Цвет — самый быстрый способ сгруппировать плитки и сделать панель частью сайта, а не дополнением к нему. У каждой плитки в Smart Tiles есть Цвет фона и Цвет шрифта, и оба выбираются из одной палитры: шесть акцентных цветов, следующих теме сайта, тридцать один предопределённый цвет, чёрный и белый. В этой статье перечислены цвета, объяснено поведение акцентных цветов и предложены способы их сочетания.
Выбор цвета
- Откройте страницу в режиме редактирования и нажмите кнопку … плитки.
- Наведите указатель на Цвет фона или Цвет шрифта.
- Нажмите на цвет в подменю. Рядом с каждым пунктом показан кружок его цвета; текущий цвет отмечен заполненным флажком.
Изменение применяется сразу. Оба меню содержат одни и те же цвета, поэтому любой цвет можно использовать для фона одной плитки и для текста другой.
Новая плитка начинает с цвета фона Акцент 1 и цвета шрифта Белый.
Акцентные цвета
Акцент 1 – Акцент 6 — не фиксированные цвета. Они ссылаются на шесть акцентных цветов содержимого темы, применённой к сайту, поэтому плитка с акцентным цветом меняется вместе с темой: переключите сайт с синей темы на зелёную — и каждая плитка с цветом «Акцент 1» станет зелёной. Панели, построенные на акцентных цветах, поэтому выглядят уместно на любом сайте, куда их копируют, и переживают ребрендинг без редактирования.
Откуда берутся шесть акцентных цветов:
- Современные темы, созданные в Центре администрирования SharePoint или с помощью генератора тем, определяют все шесть акцентов содержимого; у каждой темы свой набор.
- Пользовательские темы могут оставлять часть или все акценты содержимого неопределёнными. Акцент, который тема не определяет, заменяется основным акцентным цветом темы — на таких сайтах Акцент 2 – Акцент 6, как правило, дают тот же цвет, что и Акцент 1.
❗ Важно
Поскольку акцентные цвета зависят от темы, панель, экспортированная с одного сайта, на другом может выглядеть иначе. Если важны точные цвета — например, фирменные, — используйте вместо них предопределённые цвета.
Предопределённые цвета
Предопределённые цвета — это общая цветовая палитра Fluent UI, дизайн-системы Microsoft 365. Они не меняются вместе с темой. Число после названия — оттенок из палитры Fluent UI: 10 — базовый оттенок, 20 и 30 — всё более тёмные, 40 — ещё темнее.
| Название | Значение | Название | Значение |
|---|---|---|---|
| Розово-красный | #750b1c | Голубой 10 | #00b7c3 |
| Красный 20 | #a4262c | Голубовато-синий 20 | #004e8c |
| Красный 10 | #d13438 | Голубовато-синий 10 | #0078d4 |
| Красно-оранжевый | #da3b01 | Синий 10 | #4f6bed |
| Оранжевый 30 | #8e562e | Сине-пурпурный 30 | #5c2e91 |
| Оранжевый 20 | #ca5010 | Сине-пурпурный 20 | #8764b8 |
| Оранжевый 10 | #ffaa44 | Сине-пурпурный 10 | #8378de |
| Желтый 10 | #fce100 | Фиолетовый 20 | #881798 |
| Оранжево-жёлтый 20 | #986f0b | Фиолетовый 10 | #c239b3 |
| Оранжево-жёлтый 10 | #c19c00 | Пурпурно-розовый 20 | #9b0062 |
| Желто-зеленый | #8cbd18 | Пурпурно-розовый 10 | #e3008c |
| Зеленый 20 | #0b6a0b | Серый 40 | #393939 |
| Зеленый 10 | #498205 | Серый 30 | #7a7574 |
| Зелёно-голубой | #00ad56 | Серый 20 | #69797e |
| Голубой 30 | #005b70 | Серый 10 | #a0aeb2 |
| Голубой 20 | #038387 |
Список дополняют ещё два пункта: Черный (#000000) и Белый (#ffffff).
На что влияет цвет шрифта
Цвет шрифта используется для заголовка, описания и значка плитки, если значок взят из набора Стандартный значок, — такие значки рисуются как текст и принимают цвет текста. Значки типов файлов, приложений, Azure и Vitextra, а также собственные изображения сохраняют свои цвета.
Описание рисуется слегка прозрачным, поэтому в том же цвете оно выглядит немного светлее заголовка.
Сочетание цветов
- Контраст прежде всего. Белый текст на «Красный 10», «Зеленый 20», «Голубовато-синий 10» или любом сером читается легко; на «Желтый 10», «Оранжевый 10» или «Серый 10» используйте «Черный». Более светлые базовые оттенки — «Оранжевый 10», «Желтый 10» — лучше подходят для чёрного текста; оттенки 20, 30 и 40 — для белого.
- Одно семейство на панель. Плитки в нескольких оттенках одного семейства — например, «Голубой 10», 20 и 30 — выглядят продуманно; шесть не связанных друг с другом ярких цветов выглядят как тестовая таблица.
- Группируйте по цвету. Дайте всем ссылкам HR один цвет, а всем ссылкам ИТ — другой, и панель объяснит себя без заголовков.
- Акцентные цвета для сайта, предопределённые для бренда. Используйте акцентные цвета для панелей, которые должны сливаться с любой темой сайта, и предопределённые цвета, когда плитки несут фиксированные фирменные цвета.
📝 Заметка
Плитки сами по себе не меняются в тёмной теме: плитка цвета «Белый» остаётся белой на тёмной странице. Акцентные цвета — простой путь к панели, которая работает и в светлой, и в тёмной теме, поскольку тема в каждом случае подставляет подходящий акцент.
💡 Совет
Фотография может заменить цвет фона плитки; см. статью KB10245. Настройка фонового изображения плитки. Наборы значков и их реакция на цвет шрифта описаны в статье KB10243. Выбор значков для плиток.
Подробнее о продукте: https://vitextra.com/ru/products/smart-tiles