![]() These icons are not rendered with Fluent UI and the color palette is different from the palette described at Microsoft UI Fabric | Colors | Shared. These color guidelines are for ribbon icons used in Add-in commands. Modifiers can vary slightly in size, but use these dimensions as a starting point. Create whitespace between rules and edges. ![]() ModifiersĪll modifiers should have a 1 px transparent cutout between each element, including the background. For best results, apply the padding guidelines listed in the table in the following section. If base elements can't be centered in the frame, align them to the top left, leaving the extra pixels on the bottom right. Place base elements consistently across sizes. At 16 px, limit the number of modifiers to one. At 32 px, limit the number of modifiers to a maximum of two. Limit the number of elements in your icons.Place conceptual modifiers on the bottom right.Place action modifiers on the top left.Center base elements in the pixel frame with empty padding all around.The following image shows the layout of base elements and modifiers in an Office icon. If you make exceptions to these guidelines, do so intentionally. ![]() This ensures that your commands look professional and that your customers will trust your add-in. To create commands that align with the Office UI, follow layout guidelines for the base element and modifiers. Conceptual modifiers represent status, alteration, or a description of the icon. Office icons are typically comprised of a base element with action and conceptual modifiers overlaid. Action modifiers represent concepts such as add, open, new, or close. Make sure to redraw your icons for each size rather than shrink them to fit. The following are the supported sizes - three are required.įor an image that is your add-in's representative icon, see Create effective listings in AppSource and within Office for size and other requirements. Include all eight supported sizes to create the best experience in all supported resolutions and contexts. Different sizes will render depending on the user's DPI setting and touch mode. Icon size recommendations and requirements Use the PNG format with a transparent background.Īvoid localizable content in your icons, including typographic characters, indications of paragraph rags, and question marks. Brand marks often conflict with Office app ribbon icon styles, and can compete for user attention in a saturated environment. Brand marks aren't always recognizable at smaller icon sizes and when modifiers are applied. Most objects in your icons will require a white background to be legible across Office UI themes and in high-contrast modes.Īvoid relying on your logo or brand to communicate what an add-in command does. Complex icons created at a larger size may lose clarity if resized to be smaller without redraw. This can lead to poor visual quality and unclear actions. Take the time to redraw cutouts, corners, and rounded edges to maximize line clarity.ĭon't resize your icons by shrinking or enlarging in size. Redraw your icons to make them small or larger. ![]() Using the same icon for different behaviors and concepts can cause confusion. Reuse common Office visual metaphors such as paintbrush for format or magnifying glass for find.ĭon't reuse visual metaphors for different commands. Fabric Core icons are stylistically different and will not match. Use the Office icon language to represent behaviors or concepts.ĭon’t repurpose Fabric Core glyphs for add-in commands in the Office app ribbon or contextual menus. Keep visuals simple and clear, focusing on the key elements of the communication.ĭon't use artifacts that make your icon look messy. Best practicesįollow these guidelines when you create your icons. Follow this style to best fit with Office perpetual clients. The simplified icons support faster parsing of commands and controls. Non-essential elements including perspective, gradients, and light source are removed. The Fresh icons include only essential communicative elements. If you would prefer that your icons match the Monoline style of Microsoft 365, see Monoline style icon guidelines for Office Add-ins. The Office 2013+ (perpetual) versions of Office use Microsoft's Fresh style iconography.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |