The SAP Fiori Design Guidelines for web applications have been updated. The latest version covers new features implemented with SAPUI5 releases 1.73 and 1.74, as well as updates to the guidelines for existing UI elements and patterns.
New with this edition
Quartz Dark colors
Quartz Dark is our new theme for low-light environments. The article outlines the different types of color usage and the corresponding Quartz Dark colors, as well as accessibility considerations.
Avatar group
You can now visualize teams and other groups using the avatar group control. This new guideline walks you through the options for displaying the members of both small and larger groups.
Different visualizations for an avatar group
Responsive spacing system
A new topic about responsive spacing explains how responsive padding and style sheet classes are used to control padding between elements that are common to all SAP Fiori interfaces.
Updated guidelines for UI elements
We’ve also updated the guidelines for numerous UI elements. Here’s a selection of new features you might find useful.
Indicator for “opened” item
You can now enable a “navigated” indicator for tables and lists to mark the item that was last opened. This is typically required for master-detail scenarios, and is supported for both tables and lists.
“Navigated” indicator for an item (PC Lock) in a responsive table
Color palette – recent colors
The color palette and color palette popover can now display the user’s 5 most recent colors.
Color palette popover with the 5 most recent colors
Swipe actions for lists
You can now offer swipe actions in lists. Different actions can be shown for swipe right and swipe left.
Example: Swipe right to approve an item
Highlight items in responsive tables
In responsive tables, you now have an option to highlight items.
Highlight indicator in a responsive table
New and updated SAP Fiori design stencils
We’re still busy expanding our stencil libraries for Sketch and Axure RP. New stencils for UI elements include the responsive table, message box, multi-combo box, and date picker. We’ve also added stencils for the flexible column layout and overview page floorplans. For a list of all updated stencils, see What’s New in Sketch Stencil Version 1.74 and What’s New in Axure RP Stencil Version 1.74.
What else is new?
For a complete overview of all new and updated content with this guideline version, see What’s New in Guideline Version 1.74.
This post originally appeared at https://experience.sap.com/news/out-now-sap-fiori-design-guidelines-version-1-74/ and https://medium.com/sap-design/out-now-sap-fiori-design-guidelines-version-1-74-bfa78b7cc5ab.
- SAP Managed Tags:
