Рекомендации по новым значкам стиля для надстроек Office
В Office 2016 и более поздних версиях используется новая иконография стилей Майкрософт. Если вы предпочитаете, чтобы значки соответствовали стилю Monoline в Microsoft 365, см. статью Рекомендации по значкам монолинейного стиля для надстроек Office.
Стиль визуального элемента Office Fresh
Значки Fresh содержат только важные коммуникативные элементы. Вспомогательные элементы, включая перспективу, градиенты и источник света, удалены. Упрощение значков способствует ускорению анализа команд и элементов управления. Следуйте этому стилю, чтобы наилучшим образом соответствовать клиентам Office с бессрочной лицензией.
Лучшие методики
Следуйте этим рекомендациям при создании значков.
| Правильно | Неправильно |
|---|---|
| Оставьте визуальные элементы простыми и понятными, сосредоточившись на ключевых элементах взаимодействия. | Не используйте артефакты, которые визуально искажают изображение значка. |
| Используйте язык значков Office для представления поведения или концепций. | Не переназначайте глифы Fabric Core для команд надстроек на ленте приложения Office или в контекстных меню. Значки Fabric Core стилистически отличаются и не будут совпадать. |
| Повторно используйте общие визуальные метафоры Office, например кисть для форматирования или увеличительное стекло для поиска. | Не используйте повторно визуальные метафоры для различных команд. Добавление одинаковых значков для различных действий и концепций может привести к путанице. |
| Перерисуйте свои значки, чтобы уменьшить или увеличить их. Перерисуйте контуры, углы и скругленные края, чтобы повысить четкость линий. | Не изменяйте размеры значков, сжимая или растягивая их. Это может привести к ухудшению визуального качества и непонятному изображению действий. Сложные значки, созданные в большем размере, могут потерять четкость при их уменьшении без перерисовки. |
| Используйте белую заливку для лучшего восприятия. Для большинства объектов, используемых в значках, необходим белый фон, чтобы они легко читались в темах пользовательского интерфейса Office, а также в режимах высокой контрастности. | Ваш логотип или торговая марка могут и не указывать на функции определенной команды надстройки. Торговые знаки не всегда можно легко узнать, если они обозначены значками меньшего размера, а также когда к ним применены модификаторы. Фирменные знаки часто конфликтуют со стилями значков ленты приложения Office и могут конкурировать за внимание пользователей в насыщенной среде. |
| Используйте формат PNG с прозрачным фоном. | Нет |
| Избегайте использования в значках локализуемого содержимого, а также типографских символов, индикаторов абзацев без выравнивания и вопросительных знаков. | Нет |
Рекомендации и требования, применяющиеся к размерам значков
Значки Office на рабочем столе являются растровыми изображениями. Различные размеры будут отображаться в зависимости от установленного пользователем разрешения экрана и сенсорного режима. Используйте все восемь поддерживаемых размеров, чтобы обеспечить лучшее представление для всех поддерживаемых разрешений и контекстов. Ниже приведены поддерживаемые размеры. Требуется три.
- 16 пк (обязательный);
- 20 пк;
- 24 пк;
- 32 пк (обязательный);
- 40 пк;
- 48 пк;
- 64 пк (рекомендуется, лучший вариант для компьютера Mac);
- 80 пк (обязательный).
Важно!
Изображение, представляющее собой значок вашей надстройки, см. в статье Создание эффективных списков в AppSource и в Office , чтобы узнать о размере и других требованиях.
Не сжимайте значки, а перерисуйте их для каждого размера.
Структура и схема значка
Значки Office обычно состоят из базового элемента с наложенными модификаторами действия и концептуальными модификаторами. Модификаторы действия представляют такие понятия, как "добавить", "открыть", "создать" или "закрыть". Концептуальные модификаторы представляют состояние, изменение или описание значка.
Чтобы создать команды, соответствующие пользовательскому интерфейсу Office, следуйте рекомендациям по схеме расположения базовых элементов и модификаторов. Благодаря этому ваши команды будут выглядеть профессионально, а надстройка — надежно. Если вы не соблюдаете каких-либо рекомендаций, у вас на то должны быть веские основания.
На следующем изображении показана схема расположения базовых элементов и модификаторов для значка Office.
- Размещайте базовые элементы в центре пиксельной рамки, оставляя немного места по краям.
- Модификаторы действия располагайте в верхнем левом углу.
- Концептуальные модификаторы размещайте в нижнем правом углу.
- Ограничивайте количество элементов в значках. При 32 пикселях ограничьте количество модификаторов максимум двумя. При 16 пикселях ограничьте количество модификаторов до одного.
Отступ вокруг базового элемента
Размещайте базовые элементы единообразно для всех размеров. Если у вас не получается разместить базовые элементы в центре рамки, расположите их в левом верхнем углу, оставив несколько дополнительных пикселей в правом нижнем углу. Для достижения наилучших результатов примените рекомендации по заполнению, перечисленные в таблице в следующем разделе.
Модификаторы
Все модификаторы должны иметь прозрачный вырез 1 пикселей между каждым элементом, включая фон. Элементы не должны перекрываться напрямую. Создайте пустое пространство между метками и границами. Размеры модификаторов могут немного отличаться, но используйте указанные ниже числа в качестве отправной точки.
| Размер значка | Отступ вокруг базового элемента | Размер модификатора |
|---|---|---|
| 16 пикселей | 0 | 9 пикселей |
| 20 пк; | 1 пк | 10 пкс |
| 24 пк; | 1 пк | 12 пикселей |
| 32 пикселей | 2 пк | 14 пкс |
| 40 пк; | 2 пк | 20 пк; |
| 48 пк; | 3 пк | 22 пикселей |
| 64 пикселей | 5 пк | 29 пикселей |
| 80 пикселей | 5 пк | 38 пикселей |
Цвета значков
Примечание.
Эти руководства по цветам применяются к значкам ленты, используемым в командах надстроек. Эти значки не отображаются в пользовательском интерфейсе Fluent, и цветовая палитра отличается от палитры, описанной в microsoft UI Fabric | Цвета | Общий доступ.
Значки Office имеют ограниченную цветовую палитру. Чтобы обеспечить хорошую интеграцию значков в пользовательский интерфейс Office, используйте цвета, перечисленные в приведенной ниже таблице. Примените следующие рекомендации по использованию цвета.
- Используйте цвет, чтобы передать значение, а не для украшения. Цвет должен выделять или подчеркивать действие, состояние или элемент, которые явно отличают метку.
- По возможности используйте только один дополнительный цвет кроме серого. Применяйте не больше двух дополнительных цветов.
- Используйте цвета единообразно для всех размеров значков. Цветовые палитры для значков Office незначительно отличаются в зависимости от размера значков. Значки размером 16 пикселей и меньше немного темнее и более яркие, чем значки размером 32 пикселей и больше. Если не учитывать эти незначительные корректировки, цвета могут варьироваться в зависимости от размеров значка.
| Название цвета | RGB | Hex | Цвет | Категория |
|---|---|---|---|---|
| Серый цвет текста (80) | 80, 80, 80 | #505050 |
|
Текст |
| Серый цвет текста (95) | 95, 95, 95 | #5F5F5F |
|
Текст |
| Серый цвет текста (105) | 105, 105, 105 | #696969 |
|
Текст |
| Темно-серый (32) | 128, 128, 128 | #808080 |
|
32 пикселей и выше |
| умеренно серый (32) | 158, 158, 158 | #9E9E9E |
|
32 пикселей и выше |
| Светло-серый (ВСЕ) | 179, 179, 179 | #B3B3B3 |
|
Все размеры |
| Темно-серый (16) | 114, 114, 114 | #727272 |
|
16 пикселей и ниже |
| Умеренно серый (16) | 144, 144, 144 | #909090 |
|
16 и меньше |
| Синий (32) | 77, 130, 184 | #4d82B8 |
|
32 пикселей и выше |
| Синий (16) | 74, 125, 177 | #4A7DB1 |
|
16 пикселей и ниже |
| Желтый (ВСЕ) | 234, 194, 130 | #EAC282 |
|
Все размеры |
| Оранжевый (32) | 231, 142, 70 | #E78E46 |
|
32 пикселей и выше |
| Оранжевый (16) | 227, 142, 70 | #E3751C |
|
16 пикселей и ниже |
| Розовый (ВСЕ) | 230, 132, 151 | #E68497 |
|
Все размеры |
| Зеленый (32) | 118, 167, 151 | #76A797 |
|
32 пикселей и выше |
| Зеленый (16) | 104, 164, 144 | #68A490 |
|
16 пикселей и ниже |
| Красный (32) | 216, 99, 68 | #D86344 |
|
32 пикселей и выше |
| Красный (16) | 214, 85, 50 | #D65532 |
|
16 пикселей и ниже |
| Сиреневый (32) | 152, 104, 185 | #9868B9 |
|
32 пикселей и выше |
| Сиреневый (16) | 137, 89, 171 | #8959AB |
|
16 пикселей и ниже |
Значки в режимах высокой контрастности
Значки Office предназначены для использования в режимах высокой контрастности. Элементы переднего плана хорошо различимы на фоновых изображениях, что улучшает читаемость текста и позволяет применять перекрашивание. В режимах высокой контрастности в Office все пиксели красного, зеленого и синего цвета со значением менее 190 в значке перекрашиваются в черный цвет. Все остальные пиксели отображаются белыми. Другими словами, оцениваются все каналы RGB, в которых значения 0–189 отображаются черным цветом, а значения 190–255 — белым. В других темах с высокой контрастностью используемое пороговое значение также равно 190, но применяются другие правила. Например, в белой теме с высокой контрастностью все пиксели со значением больше 190 становятся непрозрачными, тогда как остальные пиксели остаются прозрачными. Примените следующие рекомендации, чтобы повысить удобочитаемость в параметрах высокой контрастности.
- Старайтесь разграничивать элементы переднего и заднего планов с учетом порогового значения 190.
- Следуйте стилям оформления значков Office.
- Используйте для значков цвета из нашей палитры.
- Не рекомендуется использовать градиенты.
- Избегайте больших блоков цветов с похожими значениями.
См. также
Office Add-ins