Explore SAP Fiori for iOS | SAP Fiori for iOS Design Guidelines

Accessibility

SAP Fiori for iOS aims to help you create applications that can be used by a wide range of people and to provide an optimal and pleasant experience for every user, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Our components are flexible, readable, adapt to different screen sizes, and support a wide [...]

Category: Foundation

Adaptive Design

Intro SAP Fiori for iOS supports adaptive layouts that allow you to create a great user experience with your app. This dynamically rearranges and resizes your content in response to changes in the device’s orientation or when using the app on different devices. iOS defines two size classes: regular and compact. The regular size class [...]

Category: Foundation

Animation

No image available

In Fiori for iOS, we are using consistent animations. There are four types of animation we usually use in Fiori for iOS apps. Push Modal Zoom In / Out Dissolve Push The 'push' transition eases a new screen element onto the display from the side while sliding out the prior screen to the opposite side. Push transition is [...]

Category: Foundation

Attachments

The attachment control allows users to upload files such as image, audio, video, and text files as well as PDF, CSV, and presentation files. Tapping on the add attachment button (+) allows users to upload files from photo library or other supported apps. The attachment control should not be used for uploading profile images. The [...]

Category: UI Components

Banners

Banners maybe used to provide feedback to the user the result of an action that the user triggered or a message from the system. The most commonly usage of banners is to communicate errors, offline and synchronization status. Banners may also be used for in-app notifications. The message on the banner should be short and [...]

Category: UI Components

Barcode Scanner

The barcode scanner allows users to quickly locate an object by scanning a barcode via the device’s built-in camera. It is also used when users need to efficiently manage business objects in a lengthy list report. Structure The barcode scanner comes in a full-screen modal that includes a navigation bar, scan window, and alignment box. [...]

Category: UI Components

Branding

SAP customers may require designs customized to their specific use cases—designs that extend beyond the patterns and controls provided by SAP Fiori for iOS and the SAP SDK. More specifically, customers may wish to preserve their brand identity while using SAP products. SAP Fiori for iOS acknowledges this need and provides the flexibility to have [...]

Category: Foundation

Buttons

A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action. Structure Buttons consists of a center-aligned label contained within a filled or outlined rectangular background. Styles There are several different types of buttons and each is designed for [...]

Category: UI Components

Calendar

The Calendar View provides a visual overview of a week, a month, or multiple months. Usage Dos Use Calendar View to display a visual overview of a week, a month, multiple months, or a range of selected dates. Use Calendar View to visually present correlations between two dates. For instance: consecutive holidays, flight ticket prices in peak [...]

Category: UI Components

Chart

The chart floorplan displays data using a full-width chart. In this floorplan, users can select chart items to see specific values, drill in to explore more details, and adjust a variety of chart criteria using filter options. Structure A. Chart Title The chart title should display the name of the chart, the name(s) of the [...]

Category: UI Components

Chart Cards

The chart card displays a thumbnail view of a chart, with key information shown. Users can tap it to navigate to the full interactive chart view. Structure Basic Structure Chart cards can include variations of the following elements. However, what is displayed should match the overall content of the chart pattern that it will navigate [...]

Category: UI Components

Chart Content Table View Cell

The chart content table view cell is a full-width view that provides a visual representation of one or more datasets. While it is visually similar to the chart pattern, there are two major differences: 1) The chart content table view cell is placed within the content area of a screen, whereas the chart pattern is [...]

Category: UI Components

Chart Types

SAP Fiori for iOS supports nine chart types: horizontal bar, column, stacked column, line, combination (column + line) charts, waterfall charts, scatter and bubble and area charts. Depending on the type of data in your app and how users will use the chart, it is important to select a chart type that will best meet [...]

Category: Patterns

Collection View

The collection view is a container that displays items in a grid. It previews a sample of content by presenting it in a highly visual layout and should not be used to display only text. Therefore, a collection view container should be populated with content that contains images, to provide a more visual viewing experience. Collection views are [...]

Category: UI Components

Collection View Cell

The collection view cell is an object within the collection view. It displays content with images to provide a more visual viewing experience. For guidance on how a collection view cell can be used within the collection view, see Collection View. Structure A collection view cell consists of a mix of image views (A.) and [...]

Category: UI Components

Colors

Color plays a significant role in SAP Fiori for iOS apps. It communicates the importance of and associations between content and provides users direction to help them complete their tasks. Color Palette Color schemes have been chosen for SAP Fiori for iOS to bring on-screen content to the fore. Please review the light and dark color [...]

Category: Foundation

Contact Cell

The contact cell is a table view cell which fits inside the table view container. It is used to give quick access to the various methods of communicating with a contact. It is commonly found in an object and object details floorplan. Structure A. Detail Image A detail image or avatar can be used on the [...]

Category: UI Components

Create & Edit

The create and edit pattern is used to generate or update objects and is presented to the user via a modal. It is typically triggered by the create or edit actions on the navigation bar. The pattern may include a variety of combination of form cells to allow users to input information related to the [...]

Category: Patterns

Data Table

A data table is a range of labeled columns and rows used to present numbers, text, or even images. Generally, data tables are a grid layout of columns and rows. Data tables are available only on regular screen sizes. On compact screen sizes, the data is displayed in the table view of object cells. [...]

Category: UI Components

Design Led Development Process

No image available

A Binding Development Process The Design Led Development Process (DLD) helps to ensure projects provide a great user experience. The process has three main phases – Discover, Design, and Develop – each of which ends with a D-Gate (Design Gate) that must be passed before the next phase can start. For more details on the standard DLD [...]

Category: Resources

Error Handling

Errors are used to communicate to the user that something did not go the way it was intended to in the app. An error could occur either at the app level or at the user level. It's important to present the appropriate type of error message and when possible, provide instructions to help the user [...]

Category: Patterns

Feedback

Feedback provides users with timely responses to actions and information on the state or condition of the content. There are primarily two types of classification: system feedback and user-triggered feedback. System feedback include the network activity indicator and the loading indicator, and as the name suggests, these are both system-generated. User-triggered feedback includes the progress indicator, processing indicator, and toast message, each of which provides [...]

Category: Patterns

Filter Feedback Bar

Filter feedback bar is a horizontal bar that appears above a list of content. It uses interactive buttons to communicate which filters have been applied to the list, and allows users to quickly apply frequently-used filters. It is typically used in List Report or Work List floorplans. Usage Do’s Use filter feedback bar when there [...]

Category: Patterns

Filter Form Cell

A filter form cell control is used to filter one or more values under a filter category. It is commonly used in the filter pattern for sorting and grouping. Avoid using a filter form cell if the text is too long or if the number of values is more than 8. Use the list picker [...]

Category: UI Components

Form Cell with Buttons

The form cell with buttons component allows the user to quickly select from a small set of values. It is typically used in the create and edit pattern, or occasionally in the filter pattern. Structure A. Label The label describes the intent of the selection. B. Buttons The buttons have a selected state and an [...]

Category: UI Components

Header Chart

The Header Chart displays simple chart data inside an object header. It gives at-a-glance information about the object it is connected to, and it is supported in both compact and regular widths. This chart type can be used only in the Object Header. Usage Dos Use the header chart when simple data, such as a trend, is [...]

Category: UI Components

Hierarchy

The hierarchy pattern is a combination of the hierarchy view and a list report. A combination of these views allows for a wider range of functionality in different kinds of workflows. For example, the hierarchy pattern can be utilized in a create use case. Structure List Report A list report within the hierarchy pattern has [...]

Category: Patterns

Hierarchy View

The hierarchy view presents hierarchical data in a way that shows the relationship between parent and child objects. It serves as an entry point for a user to see where an object lives in a larger hierarchical structure. For single level data sets, it is recommended to use a list report. To learn more, see [...]

Category: UI Components

Iconography

Iconography is essential to creating a cohesive and enjoyable app experience. Icons play a crucial role in communicating actions, information, feedback, and navigation. By providing a comprehensive icon library, our goal is to enhance the accessibility and overall ease of use of our customers’ apps. The SAP Fiori for iOS Design System makes use of Apple's SF [...]

Category: Foundation

Inline Errors

Inline validation provides error feedback in response to user's data input in a Create or Edit form of a business object. The errors maybe critical in which case, the user should not be allowed to proceed until fixed or it maybe informative still allowing the user to complete editing. The error should be placed under the [...]

Category: UI Components

Key Value Cell

The key value cell is a table view cell which fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels for context. Structure The structure of this cell type is simple. There is a key label at the top and a value below. Key [...]

Category: UI Components

KPI Header

The KPI header displays numerical data the user needs to keep track of during the day. It is typically used in an overview pattern to provide the user with contextual information. Structure The KPI header is a container that includes multiple KPIs that are important to the user. There are several different ways to [...]

Category: UI Components

KPIs

Key performance indicators (KPIs) are measurable values that are used to evaluate the success of an organization, an individual, a group, or a particular activity. KPIs are also used to highlight the current value of an object or as a summary of the object. KPIs can be used in a header, in the content area [...]

Category: UI Components

List Picker

A list picker allows for the selection of one or more options among values within a defined category. Use a list picker when there are more than 8 values to select from within a single category or when the size and nature of the available options are dynamic and unpredictable. Structure A list picker includes: [...]

Category: UI Components

List Report

The list report displays a large list of items of the same object type and allows users to take actions on them. This floorplan provides the functions of searching, sorting, filtering, and grouping the data in the large list. Use the list report when there is a large list of items and the data is [...]

Category: Patterns

Map

The map component is designed to display different business objects in the context of where it they are located as well as give a visual indication of what type the object is (point, polyline or polygon). It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative [...]

Category: UI Components

Modals

A modal is used for completing a task, updating content, or selecting filters. It helps the user to focus on the current task by providing relevant properties. The create pattern and filter pattern is generally presented in modals. A modal typically slides up from the bottom of the screen and will remain open until the user [...]

Category: Foundation

Navigation

A proper navigation style offers a fast and clear path for users to finish their tasks. When designing an app, the first step should always be to evaluate the content structure of the app, and to then select the navigation style that will provide the clearest and most efficient user experience. Hierarchical Navigation Hierarchical navigation [...]

Category: Foundation

Object

The object pattern (object page) is a collection of attributes surrounding one particular business object. It includes a header area, a content area, and an optional action area. In most cases, users can drill down into specific attributes within the object page. Structure Navigational Hierarchy The object pattern is often used in the middle of a workflow to show a [...]

Category: Patterns

Object Card

The object card gives a preview of an object. It is highly customizable so as to accommodate a wide variety of uses and work best when used in a collection view with clear distinctions between groups. Structure A. Icon Stack A set of up to 3 vertically stacked icons can be displayed on the far left. [...]

Category: UI Components

Object Cell

The object cell is a table view cell that fits inside the table view container. It is highly customizable so as to accommodate a wide variety of uses. It is intended to be used to preview information about an object and can be tapped to navigate to a full view of that object’s information, usually displayed [...]

Category: UI Components

Object Header

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It connects to the iOS status bar and the navigation bar via a seamless background, and is visually separated from the content area below. Because the object header provides the first glimpse of the object [...]

Category: UI Components

OCR Scanner

The OCR scanner is used as an alternative way of input when the user is completing a form. The scanner recognizes and picks up specific text from an object or document, and enter it into the form for the user. Structure The OCR Scanner comes within a full-screen modal that includes a navigation bar, [...]

Category: UI Components

Offline

Mobile applications do not always have the network connectivity needed to access real-time data. To accommodate fo this, provide an offline solution with your applications which will enable your user to complete their job regardless of network connectivity. As best practice, an offline-enabled Fiori application should be syncing data with the server regularly. The task [...]

Category: Patterns

Onboarding

In enterprise, onboarding is the process of activating an existing user account and getting the user up and running with the app. Existing user accounts are typically assigned by an admin or the IT department. The onboarding process can vary depending on the configuration of the app by the admin or the IT department in [...]

Category: Patterns

Overview

The overview pattern is a hub that provides previews of larger bodies of information sourced from different parts of the app. It contains details important to the user and provides quick access to items relevant to the user’s tasks. Use the overview pattern if you want to highlight information that matters to the user. This [...]

Category: Patterns

Pickers

A picker is used for selecting a single value by scrolling through a short list of predictable values. It’s commonly used for selecting dates, time, or the combination of both. Structure A picker includes the elements below: A. Table cell The table cell displays a label and a selected value. The selected value will be [...]

Category: UI Components

Preview Table View

Preview Table Views are used to display a preview of a list and are populated with Table View Cells, which include Object Cells and Contact Cells. Multiple Preview Table Views can be stacked in a single-screen layout to provide quick access to different information. They are commonly found in the Overview and Object screens. The lists displayed in a preview [...]

Category: Patterns

Profile & Settings

Profile is a modal view which is a container that holds various user and app specific settings and allows the user to customize their app experience. Structure A. Profile header (Optional) Profile header can contain items that provide more information about the user such as a profile image, user’s name, job title etc. If a [...]

Category: Patterns

Profile Header

The profile header helps the user recognize and learn more about a person. It may also allow the user to quickly contact that person without needing to drill down into his/her contact details. It is usually used in an object pattern or profile and settings screen. Structure The profile header is comprised of several [...]

Category: UI Components

Rating Control

The rating control is used to indicate an average rating for an object. It also allows for users to set their own rating on a numeric scale from 1 (lowest) to 5 (highest). Types The rating control has two distinct types: Display: shows the rating in a small read only format. It is designed to [...]

Category: UI Components

SAP Fiori Design Principles

No image available

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise. Design Principles The design [...]

Category: Foundation

Search

The search pattern is used to locate information or objects within a large collection of values. There are two types of search: global and local. A global search is used to search universally through the contents of an app. A local search is a subset of global search and is used to find information within a specific list. Global [...]

Category: Patterns

Search Bar

The search bar is used to locate objects within a large collection of items. It is usually used in a list report pattern or list picker to allow the user to quickly navigate to an object. Structure The search bar is composed of the following elements: A. Prompt Text Prompt text is included to provide context [...]

Category: UI Components

Search to Select

Search to select is a control used to search and select multiple items from a large collection of values. Usage Do Use the search to select control to choose one or more items from a set. Don'ts Don't use the local search component to find and select multiple values. Do Don't Structure A. Search Field [...]

Category: UI Components

Sibling Navigation

In the apps that designed with hierarchical navigation, the Sibling navigation pattern can help users easily navigate in the sequence of child objects. Usage Dos Use when you have a sequence of objects, such as instructional steps, work orders, or hardware components list. Don'ts Don’t use to replace hierarchical navigation. Sibling navigation, as its name suggests, [...]

Category: Patterns

Slider

Sliders display a continuous range of values along a track. The minimum and maximum values are established and the user may use the thumb to select a single value between the minimum and maximum values. They are typically found in create and filter modals. A slider control can be used when selecting a precise value [...]

Category: UI Components

Sort & Filter

The filter pattern allows users to narrow down results from a long list by setting some criteria. Users are able to reset the filter to go back to the complete list of results. Sorting and grouping are also integrated as part of the filter pattern. Structure The filter pattern is made up of reusable and [...]

Category: Patterns

Stencils

No image available

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included. Download the San Francisco fonts here. Download SF Symbols here. What's New in V5.0 Regular Replaced existing vector based icons with SF Symbols [...]

Category: Resources

Switches

The switch control is used to toggle two mutually exclusive states, on and off. Switches are used to control the availability of related UI elements on the current screen and must always be used in a table cell. Types Switch without further selection The label in the cell to describe what the toggle is for. [...]

Category: UI Components

Text Input

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern. Types There are three types of text input components: title form cell, text field, and note form cell. Title Form Cell A title form cell allows the user to enter a small [...]

Category: UI Components

Time and Date Formats

There are many different time and date format conventions, with no “right” approach for all situations. Conventions also vary widely around the world, and it would be counterproductive to formalize a single, unified approach to representing time and date across Fiori for iOS. That said, there are best practices to consider. Instead of a list [...]

Category: Patterns

Timeline

The Timeline displays a list of items (objects, events, or posts) in chronological order. The information on the timeline view are presented as tappable cells, and are focused on the most important information about the object. The timeline view can be filtered or searched. Structure The Timeline contains a chronological axis, with timestamps on the left and object [...]

Category: UI Components

Timeline Preview

The timeline preview cell provides the user with a glimpse of upcoming objects, events, or posts using a horizontal timeline sorted by chronological order. The objects in the timeline preview cell are read-only and tapping on a cell navigates the user to the full timeline view. Anatomy A. Cell Header Provide a meaningful title to the timeline cell. B. Object [...]

Category: UI Components

Typography

The default font for iOS is San Francisco (SF). San Francisco has two variants: SF Pro Display and SF Pro Text. SF Pro Display is used for font size 20 pts or above whereas SF Pro Text is used for font size 19 pts and below. To learn more about typography, see the iOS Human Interface Guidelines. Dynamic Type SAP [...]

Category: Foundation