ЗначкиIcons

Значки — это визуальное представление поведения или концепции.Icons are the visual representation of a behavior or concept. Они часто используются, чтобы отобразить предназначение элементов управления и команд.They are often used to add meaning to controls and commands. Визуальные элементы, реалистичные или символические, позволяют выполнять навигацию в пользовательском интерфейсе аналогично значкам в среде пользователя.Visuals, either realistic or symbolic, enable the user to navigate the UI the same way signs help users navigate their environment. Эти элементы должны быть простыми, четкими и содержать только необходимые сведения, чтобы пользователи могли быстро проанализировать, какое действие произойдет при выборе элемента управления.They should be simple, clear, and contain only the necessary details to enable customers to quickly parse what action will occur when they choose a control.

Интерфейсы ленты Office отличаются стандартным визуальным стилем.Office ribbon interfaces have a standard visual style. Это поможет обеспечить знакомый пользователям единообразный интерфейс для всех приложений Office.This ensures consistency and familiarity across Office apps. Рекомендации помогут вам создать для своего решения набор ресурсов PNG, полностью совместимых с Office.The guidelines will help you design a set of PNG assets for your solution that fit in as a natural part of Office.

Многие контейнеры HTML содержат элементы управления со значками. Используйте пользовательский шрифт Office UI Fabric для отрисовки значков в стиле Office в своей надстройке. Шрифт значков Fabric содержит ряд глифов для распространенных метафор Office, к которым можно применить необходимые параметры масштабирования, цвета и стиля. Если у вас имеется визуальный язык с собственным набором значков, используйте его на своем полотне HTML. Обеспечение согласованности собственной фирменной символики со стандартным набором значков — важная часть любого языка дизайна. Не допускайте конфликтов с метафорами Office. Это облегчит работу пользователей и поможет избежать путаницы.Many HTML containers contain controls with iconography. Use Office UI Fabric’s custom font to render Office styled icons in your add-in. Fabric’s icon font contains many glyphs for common Office metaphors that you can scale, color, and style to suit your needs. If you have an existing visual language with your own set of icons, feel free to use it in your HTML canvases. Building continuity with your own brand with a standard set of icons is an important part of any design language. Be careful to avoid creating confusion for customers by conflicting with Office metaphors.

Создание значков для команд надстроекDesign icons for add-in commands

С помощью команд надстроек можно добавить кнопки, текст и значки в пользовательский интерфейс Office. Значки и метки для кнопок надстроек должны быть понятны и четко определять действие, которое выполняется при выборе пользователем команды. В этой статье приведены рекомендации, помогающие создавать значки, которые легко интегрируются в Office, и выбирать их стиль.Add-in commands add buttons, text, and icons to the Office UI. Your add-in command buttons should provide meaningful icons and labels that clearly identify the action the user is taking when they use a command. This article provides stylistic and production guidelines that help you design icons that integrate seamlessly with Office.

Принципы создания значков OfficeOffice icon design principles

Выпуск Office 2013 предусматривает использование других значков для клиентов Office на настольных ПК. Самое важное стилистическое изменение — сокращения. Новые значки предусматривают использование только основных смысловых элементов. Вспомогательные элементы, включая перспективу, градиенты и источник света, удалены. Упрощение значков способствует ускорению анализа команд и элементов управления. Придерживайтесь этого стиля, чтобы ваши надстройки максимально соответствовали Office.The Office 2013 release of the Office desktop clients includes refreshed iconography. The overriding stylistic change is reduction. The new icons include only essential communicative elements. Non-essential elements including perspective, gradients, and light source are removed. The simplified icons support faster parsing of commands and controls. Follow this style to best fit with Office.

Принципы создания значков Office:Office icons are based on the following design principles:

  • современная интерпретация коллекции значков Office;Modern interpretation of Office icon collection
  • несмотря на новшества, значки остаются понятными и знакомыми;Fresh yet familiar
  • простота и четкость.Simple, clear, and direct

На следующем изображении показаны значки, к которым применены современные принципы создания.The following image shows icons that apply the modern design principles.

Изображение, на котором показаны старые значки Office и обновленный дизайн в современной интерпретации

РекомендацииBest practices

При создании значков следуйте перечисленным ниже рекомендациям.Follow these guidelines when you create your icons:

ПравильноDo НеправильноDon't
Поддерживайте визуальные изображения простыми и понятными, указывающими на ключевой элемент (элементы) связи.Keep visuals simple and clear, focusing on the key element(s) of the communication. Не используйте артефакты, которые визуально искажают изображение значка.Don't use artifacts that make your icon look messy.
Используйте язык значков Office для представления поведения или концепций.Use the Office icon language to represent behaviors or concepts. Не используйте глифы Office UI Fabric для команд надстроек на ленте Office или в контекстных меню. Значки Fabric имеют собственный стиль, поэтому отличаются от остальных.Don’t repurpose Office UI Fabric glyphs for add-in commands in the Office ribbon or contextual menus. Fabric icons are stylistically different and will not match.
Повторно используйте общие визуальные метафоры Office, например кисть для форматирования или увеличительное стекло для поиска.Reuse common Office visual metaphors such as paintbrush for format or magnifying glass for find. Не используйте повторно визуальные метафоры для различных команд.Don't reuse visual metaphors for different commands. Добавление одинаковых значков для различных действий и концепций может привести к путанице.Using the same icon for different behaviors and concepts can cause confusion.
Перерисуйте свои значки, чтобы уменьшить или увеличить их.Redraw your icons to make them small or larger. Перерисуйте контуры, углы и скругленные края, чтобы повысить четкость линий.Take the time to redraw cutouts, corners, and rounded edges to maximize line clarity. Не изменяйте размеры значков, сжимая или растягивая их.Don't resize your icons by shrinking or enlarging in size. Это может привести к ухудшению визуального качества и непонятному изображению действий.This can lead to poor visual quality and unclear actions. Сложные значки, созданные в большем размере, могут потерять четкость при их уменьшении без перерисовки.Complex icons created at a larger size may lose clarity if resized to be smaller without redraw.
Используйте белую заливку для лучшего восприятия. Для большинства объектов, используемых в значках, необходим белый фон, чтобы они легко читались в темах пользовательского интерфейса Office, а также в режимах высокой контрастности.Use a white fill for accessibility. Most objects in your icons will require a white background to be legible across Office UI themes and in high-contrast modes.
Используйте формат PNG с прозрачным фоном.Use the PNG format with a transparent background.
Избегайте использования в значках локализуемого содержимого, а также типографских символов, индикаторов абзацев без выравнивания и вопросительных знаков.Avoid localizable content in your icons, including typographic characters, indications of paragraph rags, and question marks.

Рекомендации и требования, применяющиеся к размерам значковIcon size recommendations and requirements

Значки Office на рабочем столе являются растровыми изображениями.Office desktop icons are bitmap images. Различные размеры будут отображаться в зависимости от установленного пользователем разрешения экрана и сенсорного режима.Different sizes will render depending on the user's DPI setting and touch mode. Используйте все восемь поддерживаемых размеров, чтобы обеспечить лучшее представление для всех поддерживаемых разрешений и контекстов.Include all eight supported sizes to create the best experience in all supported resolutions and contexts. Ниже перечислены поддерживаемые размеры, из которых обязательными являются три:The following are the supported sizes - three are required:

  • 16 пк (обязательный);16 px (Required)
  • 20 пк;20 px
  • 24 пк;24 px
  • 32 пк (обязательный);32 px (Required)
  • 40 пк;40 px
  • 48 пк;48 px
  • 64 пк (рекомендуется, лучший вариант для компьютера Mac);64 px (Recommended, best for Mac)
  • 80 пк (обязательный).80 px (Required)

Не сжимайте значки, а перерисуйте их для каждого размера.Make sure to redraw your icons for each size rather than shrink them to fit.

Рисунок, на котором показана рекомендация не сжимать значки, а изменить их размер

Структура и схема значкаIcon anatomy and layout

Значки Office обычно состоят из базового элемента с модификаторами действия и концептуальными модификаторами. Модификаторы действия представляют такие понятия, как "добавить", "открыть", "создать" или "закрыть". Концептуальные модификаторы представляют состояние, изменение или описание значка.Office icons are typically comprised of a base element with action and conceptual modifiers overlayed. Action modifiers represent concepts such as add, open, new, or close. Conceptual modifiers represent status, alteration, or a description of the icon.

Чтобы создать команды, соответствующие пользовательскому интерфейсу Office, следуйте рекомендациям по схеме расположения базовых элементов и модификаторов. Благодаря этому ваши команды будут выглядеть профессионально, а надстройка — надежно. Если вы не соблюдаете каких-либо рекомендаций, у вас на то должны быть веские основания.To create commands that align with the Office UI, follow layout guidelines for the base element and modifiers. This ensures that your commands look professional and that your customers will trust your add-in. If you make exceptions to these guidelines, do so intentionally.

На следующем изображении показана схема расположения базовых элементов и модификаторов для значка Office.The following image shows the layout of base elements and modifiers in an Office icon.

Изображение, на котором базовый элемент значка показан в центре, модификатор действия — в левом верхнем углу, а другой модификатор — в нижнем правом углу

  • Размещайте базовые элементы в центре пиксельной рамки, оставляя немного места по краям.Center base elements in the pixel frame with empty padding all around.
  • Модификаторы действия располагайте в верхнем левом углу.Place action modifiers on the top left.
  • Концептуальные модификаторы размещайте в нижнем правом углу.Place conceptual modifiers on the bottom right.
  • Ограничивайте количество элементов в значках. В значках с размером 32 пк не добавляйте более двух модификаторов. В значках с размером 16 пк не добавляйте более одного модификатора.Limit the number of elements in your icons. At 32px, limit the number of modifiers to a maximum of two. At 16px, limit the number of modifiers to one.

###Отступ вокруг базового элементаBase element padding Размещайте базовые элементы единообразно для всех размеров. Если у вас не получается разместить базовые элементы в центре рамки, расположите их в левом верхнем углу, оставив несколько дополнительных пикселей в правом нижнем углу. Чтобы достичь наилучших результатов, воспользуйтесь рекомендациями по определению нужного отступа из приведенной ниже таблицы.Place base elements consistently across sizes. If base elements can't be centered in the frame, align them to the top left, leaving the extra pixels on the bottom right. For best results, apply the padding guidelines listed in the following table.

###МодификаторыModifiers У всех модификаторов должен быть прозрачный контур (1 пк), граничащий с каждым элементом, включая фон. Элементы не должны сильно перекрывать друг друга. Создайте пустое пространство между метками и границами. Размеры модификаторов могут немного отличаться, но используйте указанные ниже числа в качестве отправной точки.All modifiers should have a 1px transparent cutout between each element, including the background. Elements should not directly overlap. Create whitespace between rules and edges. Modifiers can vary slightly in size, but use these dimensions as a starting point.

Размер значкаIcon size Отступ вокруг базового элементаPadding around base element Размер модификатораModifier size
16 пк16px 00 9 пк9px
20 пк20px 1 пк1px 10 пк10px
24 пк24px 1 пк1px 12 пк12px
32 пк32px 2 пк2px 14 пк14px
40 пк40px 2 пк2px 20 пк20px
48 пк48px 3 пк3px 22 пк22px
64 пк64px 5 пк5px 29 пк29px
80 пк80px 5 пк5px 38 пк38px

Цвета значковIcon colors

Примечание

Эти руководства по цветам применяются к значкам ленты, используемым в командах надстроек.These color guidelines are for ribbon icons used in Add-in commands. Эти значки не отрисовываются с помощью Microsoft UI Fabric, и цветовая палитра отличается от палитры, описанной на странице Microsoft UI Fabric | Colors | Shared.These icons are not rendered with Microsoft UI Fabric and the color palette is different from the palette described at Microsoft UI Fabric | Colors | Shared.

Значки Office имеют ограниченную цветовую палитру. Чтобы обеспечить хорошую интеграцию значков в пользовательский интерфейс Office, используйте цвета, перечисленные в приведенной ниже таблице. Рекомендации по использованию цветов:Office icons have a limited color palette. Use the colors listed in the following table to guarantee seamless integration with the Office UI. Apply the following guidelines to the use of color:

  • Используйте цвет, чтобы передать значение, а не для украшения. Цвет должен выделять или подчеркивать действие, состояние или элемент, которые явно отличают метку.Use color to communicate meaning rather than for embellishment. It should highlight or emphasize an action, status, or an element that explicitly differentiates the mark.
  • По возможности используйте только один дополнительный цвет кроме серого. Применяйте не больше двух дополнительных цветов.If possible, use only one additional color beyond gray. Limit additional colors to two at the most.
  • Используйте цвета единообразно для всех размеров значков. Цветовые палитры для значков Office незначительно отличаются в зависимости от размера значков. Значки с размером 16 пк и меньше немного темнее, а значки с размером 32 пк и больше — ярче. Если не учитывать эти незначительные корректировки, цвета могут варьироваться в зависимости от размеров значка.Colors should have a consistent appearance in all icon sizes. Office icons have slightly different color palettes for different icon sizes. 16px and smaller icons are slightly darker and more vibrant than 32px and larger icons. Without these subtle adjustments, colors appear to vary across sizes.
Название цветаColor name RGBRGB Шестнадцатеричный кодHex ЦветColor КатегорияCategory
Серый цвет текста (80)Text Gray (80) 80, 80, 8080, 80, 80 #505050#505050 Изображение серого цвета текста (80) ТекстText
Серый цвет текста (95)Text Gray (95) 95, 95, 9595, 95, 95 #5F5F5F#5F5F5F Изображение серого цвета текста (95) ТекстText
Серый цвет текста (105)Text Gray (105) 105, 105, 105105, 105, 105 #696969#696969 Изображение серого цвета текста (105) ТекстText
Темно-серый (32)Dark Gray 32 128, 128, 128128, 128, 128 #808080#808080 Изображение темно-серого цвета (32) 32 и больше32 and above
умеренно серый (32)Medium Gray 32 158, 158, 158158, 158, 158 #9E9E9E#9E9E9E Изображение умеренно серого цвета (32) 32 и больше32 and above
Светло-серый (ВСЕ)Light Gray ALL 179, 179, 179179, 179, 179 #B3B3B3#B3B3B3 Изображение светло-серого цвета (для всех размеров) Все размерыAll sizes
Темно-серый (16)Dark Gray 16 114, 114, 114114, 114, 114 #727272#727272 Изображение темно-серого цвета (16) 16 и меньше16 and below
Умеренно серый (16)Medium Gray 16 144, 144, 144144, 144, 144 #909090#909090 Изображение умеренно серого цвета (16) 16 и меньше16 and below
Синий (32)Blue 32 77, 130, 18477, 130, 184 #4d82B8#4d82B8 Изображение синего цвета (32) 32 и больше32 and above
Синий (16)Blue 16 74, 125, 17774, 125, 177 #4A7DB1#4A7DB1 Изображение синего цвета (16) 16 и меньше16 and below
Желтый (ВСЕ)Yellow ALL 234, 194, 130234, 194, 130 #EAC282#EAC282 Изображение желтого цвета для всех размеров Все размерыAll sizes
Оранжевый (32)Orange 32 231, 142, 70231, 142, 70 #E78E46#E78E46 Изображение оранжевого цвета (32) 32 и больше32 and above
Оранжевый (16)Orange 16 227, 142, 70227, 142, 70 #E3751C#E3751C Изображение оранжевого цвета (16) 16 и меньше16 and below
Розовый (ВСЕ)Pink ALL 230, 132, 151230, 132, 151 #E68497#E68497 Изображение розового цвета для всех размеров Все размерыAll sizes
Зеленый (32)Green 32 118, 167, 151118, 167, 151 #76A797#76A797 Изображение зеленого цвета (32) 32 и больше32 and above
Зеленый (16)Green 16 104, 164, 144104, 164, 144 #68A490#68A490 Изображение зеленого цвета (16) 16 и меньше16 and below
Красный (32)Red 32 216, 99, 68216, 99, 68 #D86344#D86344 Изображение красного цвета (32) 32 и больше32 and above
Красный (16)Red 16 214, 85, 50214, 85, 50 #D65532#D65532 Изображение красного цвета (16) 16 и меньше16 and below
Сиреневый (32)Purple 32 152, 104, 185152, 104, 185 #9868B9#9868B9 Изображение сиреневого цвета (32) 32 и больше32 and above
Сиреневый (16)Purple 16 137, 89, 171137, 89, 171 #8959AB#8959AB Изображение сиреневого цвета (16) 16 и меньше16 and below

Значки в режимах высокой контрастностиIcons in high contrast modes

Значки Office предназначены для использования в режимах высокой контрастности. Элементы переднего плана хорошо различимы на фоновых изображениях, что улучшает читаемость текста и позволяет применять перекрашивание. В режимах высокой контрастности в Office все пиксели красного, зеленого и синего цвета со значением менее 190 в значке перекрашиваются в черный цвет. Все остальные пиксели отображаются белыми. Другими словами, оцениваются все каналы RGB, в которых значения 0–189 отображаются черным цветом, а значения 190–255 — белым. В других темах с высокой контрастностью используемое пороговое значение также равно 190, но применяются другие правила. Например, в белой теме с высокой контрастностью все пиксели со значением больше 190 становятся непрозрачными, тогда как остальные пиксели остаются прозрачными. Чтобы улучшить читаемость при использовании параметров высокой контрастности, следуйте приведенным рекомендациям:Office icons are designed to render well in high contrast modes. Foreground elements are well differentiated from backgrounds to maximize legibility and enable recoloring. In high contrast modes, Office will recolor any pixel of your icon with a red, green, or blue value less than 190 to full black. All other pixels will be white. In other words, each RGB channel is assessed where 0-189 values are black and 190-255 values are white. Other high-contrast themes recolor using the same 190 value threshold but with different rules. For example, the high-contrast white theme will recolor all pixels greater than 190 opaque but all other pixels as transparent. Apply the following guidelines to maximize legibility in high-contrast settings:

  • Старайтесь разграничивать элементы переднего и заднего планов с учетом порогового значения 190.Aim to differentiate foreground and background elements along the 190 value threshold.
  • Следуйте стилям оформления значков Office.Follow Office icon visual styles.
  • Используйте для значков цвета из нашей палитры.Use colors from our icon palette.
  • Не рекомендуется использовать градиенты.Avoid the use of gradients.
  • Избегайте больших блоков цветов с похожими значениями.Avoid large blocks of color with similar values.

См. такжеSee also

  • Рекомендации по разработке надстроекAdd-in development best practices

  • Команды надстроек для Excel, Word и PowerPointAdd-in commands for Excel, Word, and PowerPoint

  • Ваш логотип или торговая марка могут и не указывать на функции определенной команды надстройки. Торговые знаки не всегда можно легко узнать, если они обозначены значками меньшего размера, а также когда к ним применены модификаторы. Торговые знаки часто не соответствуют стилям значков ленты Office, поэтому по-разному привлекают внимание пользователей в среде, где существует множество различных товарных знаков.Avoid relying on your logo or brand to communicate what an add-in command does. Brand marks aren't always recognizable at smaller icon sizes and when modifiers are applied. Brand marks often conflict with Office ribbon icon styles, and can compete for user attention in a saturated environment.