Design icons for add-in commands ​

简介:

Office icon design principles

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 icons are based on the following design principles: 

  • Modern interpretation of Office icon collection 

  • Fresh yet familiar 

  • Simple, clear, and direct 

The following image shows icons that apply the modern design principles.

Image showing old Office icons and the refreshed modern interpretation of the icons

Icon guidelines

Follow these guidelines when you create your icons: 

  • Stick to the 1px grid and use a bitmap editing tool for best results.  

  • Redraw, don't resize. As you resize your icons for larger or smaller sizes, take the time to redraw cutouts, corners, and rounded edges to maximize line clarity. 

  • Remove artifacts that make your icon look messy.

  • Don't reuse Office UI Fabric icons in the Office ribbon or contextual menu. Fabric icons are stylistically different and will not match. 

  • 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.

  • 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.  

  • Use the PNG format with a transparent background. 

  • Avoid localizable content in your icons, including typographic characters, indications of paragraph rags, and question marks. 

  • Don't reuse visual metaphors for different commands. Using the same icon for different actions can cause confusion. 

  • Make your button labels clear and succinct. Use a combination of visual and textual information to convey meaning. 

Icon size recommendations and requirements

Office 2016 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 px (Required)

  • 20 px

  • 24 px

  • 32 px (Required)

  • 40 px

  • 48 px

  • 64 px (Recommended, best for Mac)

  • 80 px (Required) 

Make sure to redraw your icons for each size rather than shrink them to fit.

Illustration that shows the recommendation to resize icons rather than shrink icons

Icon anatomy and layout

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. 

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.

The following image shows the layout of base elements and modifiers in an Office icon.

Image showing an icon base element in the center with a modifier on the lower right and an action modifier on the upper left

  • 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.

  • 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.

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.

Icon size Padding around base element
16px 0
20px 1px
24px 1px
32px 2px
40px 2px
48px 3px
64px 5px
80px 5px

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 Modifier size
16px 9px
20px 10px
24px 12px
32px 14px
40px 20px
48px 22px
64px 29px
80px 38px

Icon colors

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.

  • 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 RGB Hex Color Category
Text Gray (80) 80, 80, 80 #505050 Text gray 80 color image Text
Text Gray (95) 95, 95, 95 #5F5F5F Text gray 95 color image Text
Text Gray (105) 105, 105, 105 #696969 Text gray 105 color image Text
Dark Gray 32 128, 128, 128 #808080 Dark gray 32 color image 32 and above
Medium Gray 32 158, 158, 158 #9E9E9E Medium gray 32 color image 32 and above
Light Gray ALL 179, 179, 179 #B3B3B3 Light gray all color image All sizes
Dark Gray 16 114, 114, 114 #727272 Dark gray 16 color image 16 and below
Medium Gray 16 144, 144, 144 #909090 Medium gray 16 color image 16 and below
Blue 32 77, 130, 184 #4d82B8 Blue 32 color image 32 and above
Blue 16 74, 125, 177 #4A7DB1 Blue 16 color image 16 and below
Yellow ALL 234, 194, 130 #EAC282 Yellow all color image All sizes
Orange 32 231, 142, 70 #E78E46 Orange 32 color image 32 and above
Orange 16 227, 142, 70 #E3751C Orange 16 color image 16 and below
Pink ALL 230, 132, 151 #E68497 Pink all color image All sizes
Green 32 118, 167, 151 #76A797 Green 32 color image 32 and above
Green 16 104, 164, 144 #68A490 Green 16 color image 16 and below
Red 32 216, 99, 68 #D86344 Red 32 color image 32 and above
Red 16 214, 85, 50 #D65532 Red 16 color image 16 and below
Purple 32 152, 104, 185 #9868B9 Purple 32 color image 32 and above
Purple 16 137, 89, 171 #8959AB Purple 16 color image 16 and below

Icons in high contrast modes

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:

  • Aim to differentiate foreground and background elements along the 190 value threshold.

  • 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










本文转自 h2appy  51CTO博客,原文链接:http://blog.51cto.com/h2appy/2066011,如需转载请自行联系原作者
目录
相关文章
|
7月前
|
前端开发 图形学
Could you provide some examples of when Canvas or SVG would be the better choice for a web application?
Could you provide some examples of when Canvas or SVG would be the better choice for a web application
|
Java
IDEA-解决Command line is too long. Shorten command line for SpringBootMainApplication or also for App
IDEA-解决Command line is too long. Shorten command line for SpringBootMainApplication or also for App
90 0
|
图形学 Windows
Unity报错之 No Sprite Editor Window registered. Please download 2D Sprite package from Package Manager
Unity2019操作对图集进行操作编辑出错:No Sprite Editor Window registered. Please download 2D Sprite package from Package Manager.
1239 0
Unity报错之 No Sprite Editor Window registered. Please download 2D Sprite package from Package Manager
|
jenkins 持续交付 iOS开发
iOS Jenkins打包报错The stickers icon set or app icon set named "AppIcon" did not have any applicable ...
iOS Jenkins打包报错The stickers icon set or app icon set named "AppIcon" did not have any applicable ...
313 0
|
Java 数据库
IDEA不能运行 Add Configuration/Press the + button to create a new Configuration which cannot be loaded
IDEA不能运行 Add Configuration/Press the + button to create a new Configuration which cannot be loaded
IDEA不能运行 Add Configuration/Press the + button to create a new Configuration which cannot be loaded
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as t
vue.js报错如下: - Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
5655 1
|
Web App开发 JavaScript 前端开发
Is server side rendering a good choice for React application
Single page application like react provides a wonderful user experience, however, it comes with two issues: For user who accesses the website at first time, there is no cache of javascript files in
1526 0