We are always working on improving our mobile design system and mobile technology offerings to give you everything you need for designing mobile business applications. We have not only made updates to our existing UI components based on the valuable feedback from app teams, but we have also introduced new ones to enhance the possibilities for creating a truly enjoyable user experience. One of the major accomplishments in this release was the introduction of a new card system for SAP Fiori on Android and iOS. This card system offers improved customization and flexibility, as well as adaptable sizing options to fit various screen sizes and layouts.

Mobile Card System

Mobile Card System for SAP Fiori for Android and iOS

The new card system for native applications revolutionizes the way cards are used, providing a convenient way to display content from different sources. It consists of a toolkit of nested components that allow you to create a variety of cards that meet SAP product requirements.  Whether you need list items, KPIs, or a data table, each card’s flexible header, body, and footer seamlessly transform a single container into various card types.

The flexible card container allows a variety of cards to be created for any use case

See our updated Design Guidelines to find out more:

SAP Fiori for Android Card Guidelines | SAP Fiori for iOS Card Guidelines

New in SAP Fiori for Android 7.1

Let’s take a look at some of the release highlights of SAP Fiori for Android 7.1:

Design Tokens

Design Token Hierarchy

Design tokens are our new cross-platform solution to managing color across iOS and Android. Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity. Additionally, design tokens help to maintain visual consistency, scale design decisions, and are simple to maintain and update.

See Design Tokens to find out more.

Calendar

Calendar view on mobile

The calendar view provides a visual overview of a week, a month, or multiple months. It can filter and display different types of content, such as events, agendas, or schedules, based on the time dimension.

For more information, check out the Calendar article in the SAP Fiori for Android Design Guidelines.

Illustrated Message

Empty state example on mobile

Illustrated messages communicate empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. They are flexible and adaptive. Use an illustrated message when you want to improve the user experience for one or more message states in your application.

See Illustrated Message for more details.

Status Info Label

Status info label example

The new status info label component displays short bits of information complementary to the object, either in a horizontal row or a vertical stack. It is a flexible combination of an icon and a text label.

Refer to Status Info Label for more details.

Step Progress Indicator

Step progress indicator in horizontal view

The new step progress indicator component is a progress indicator for tracking and displaying a user’s state in a user flow. It allows the user to navigate to another step in both the horizontal view and the vertical “All Steps” view. It also supports dynamic steps such as sub-steps or indeterminate steps.

Find out more about this new component in the Step Progress Indicator guideline article.

Tags

Sample tags in a card

Tags are new components that are used to display quick and useful category labels to users. They are nested, non-actionable components in cards, object headers, and object cells.

See Tags to learn more about this component.

Rating Control

Rating controls in a list

The rating control can be used in various contexts to provide insight regarding the opinions and preferences of an object. Currently, the rating control is display-only.

Check out the Rating Control article to learn more about this new component.

New in SAP Fiori for iOS 10.0

Next, let’s take a look at some of the release highlights of SAP Fiori for iOS 10.0:

Design Tokens

Token groups (left) with Token types (right)

Figure 9: Design tokens

Design tokens are our new cross-platform solution to managing color across iOS and Android. Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity. Additionally, design tokens help to maintain visual consistency, scale design decisions, and are simple to maintain and update.

See Design Tokens to find out more.

Filter Feedback Bar

Filter feedback bar example

Figure 10: Filter feedback bar example

The filter feedback bar is a horizontal bar that appears above a list of content. The Filter buttons now come with more style variations and a modal sheet in case more complex filters are applied using the filter feedback bar.

Refer to Filter Feedback Bar for more details.

Illustrated Message

Illustrated message on compact (left) and regular (right)

The illustrated message is a new type of feedback component that helps to inform users about various system states and suggests actions they can take to resolve an issue.

Check out the Illustrated Message guideline article.

Inline Validation

Example of multiline hint text (left) and success and warning messages (right)

Inline validation provides static information to a user or provides temporary feedback in response to a user’s input and is commonly used with form cell in forms.

Inline success messages and warning messages are now available in addition to error messages. Hint text is also enhanced for multiline messages.

See Inline Validation to learn more about this pattern.

Key Value Table View Cell

Key value table view cell examples

The new key value table view cell component is an uneditable read-only table view cell that fits inside the table view container. It may also contain actionable text in certain use cases.

For more information, check out the Key Value Table View Cell article in the SAP Fiori for iOS guidelines.

Skeleton Loading

Skeleton loading examples

Skeleton loading is a new progress indicator that is used when a screen or part of a screen is loading. It is best used when the structure and layout of a container are known, such as a page or card, and the system requires time to fetch and display the actual data.

See Skeleton Loading for more information.

Mobile Design Guidelines

SAP Fiori Mobile Design Guidelines for Android and iOS

A detailed documentation on component anatomy, behavior, and interactions allows you to use components that match your use case. Crosslinks to Google’s Material Design Guidelines for Android and Apple’s Human Interface Guidelines for iOS, as well as links to development documentation, help you navigate to these resources. Additionally, you can find a feedback function on each guideline article that allows you to provide feedback.

SAP Fiori for Android Design Guidelines | SAP Fiori for iOS Design Guidelines

Figma UI Design Kits

Figma UI Design Kit

With the updated SAP Fiori for Android and iOS Figma UI design kits, it’s now easier than ever to use the latest components and patterns in your mobile design. By using the design kits, you can quickly create a consistent user experience that enables app implementations at scale.

SAP Fiori for Android 7.0 UI Design Kits | SAP Fiori for iOS 9.2 UI Design Kits

SAP Fiori Mentor App

SAP Fiori Mentor App for Android and iOS

The SAP Fiori Mentor app is an interactive playground that allows you to explore the flexibility of mobile components and patterns available through the SAP BTP SDKs for Android and iOS. By adjusting component settings within the app, the behavior, interaction, and features of components can be previewed live. If you’re a developer, you can export code samples with predefined settings into your preferred development tool. If you’re a designer, you can easily understand the scope of functionality for a specific component and specify your designs with applicable parameters, and hand over the respective code snippets to your development partners. To provide some tangible examples of the actual UI component usage in apps, the best practices section provides a selection of app design examples. By highlighting specific areas, each app design indicates which UI components are used, so you can deep dive into their additional features.

Apple App Store | Google Play Store

Software Development Kits

SAP BTP SDKs for Android and iOS

The SAP BTP SDK for iOS and SAP BTP SDK for Android include the SAP Fiori framework that contains user interface components. These frameworks are standalone and do not have a dependency on other parts of the SDK. These libraries make it easier to create applications that conform to the SAP Fiori design language. On iOS, the SAP BTP SDK offers “SAP Fiori framework“ and the “Fiori” controls extend Apple’s UIKit/SwiftUI. These controls can be used programmatically or through storyboard files. On Android, the SAP BTP SDK UI components are contained in the “Fiori” library and extend Material Design controls.

SAP BTP SDK for iOS | SAP BTP SDK for Android

Experience matters. Follow our journey as we transform the way we build products for enterprise on www.sap.com/design.