SAP Fiori for iOS supports the auto layout and adaptivity concepts that allow you to create a great user experience for all devices on iOS and iPadOS platforms. The concepts provide a mechanism that helps dynamically rearrange and resize content in response to changes in the device’s orientation or when using the app on different screen sizes.
iOS defines 2 main size classes: regular and compact. These classes apply to both horizontal and vertical space. The regular size class is associated with expansive space, in most cases referring to iPad, while the compact size class is associated with constrained space, in most cases referring to iPhone.
Object Floorplan on different devices
The adaptivity concept defines how the UI changes and adapts to different devices and orientations. There are 2 main size classes: Compact and Regular. These size classes affect horizontal and vertical space separately.
Same design viewed on different devices
Same design rotated from landscape to portrait
2. Regular Width
This variant defines that full-width components have 20pt layout margins by default. The spacing between UI elements inside the components generally is larger than the compact width variant.
With the expansive horizontal space in Regular Width, we recommend considering using 2 sub-classes: Readable Width and Full-width Regular
UI component height adapts to the availability of space of the current screen. There are 3 variants when applying the main size clasess on vertical space.
- Compact Height
- Regular Height – iPhone
- Regular Height – iPad
1. Compact Height
Compact Height layout variant is only available on landscape orientation in a limited number of iPhone devices. Inner paddings and spacings between UI elements need to be descreased and allow more content to show on the screen.
2. Regular Height – iPhone
This variant is specific to iPhone devices that allows the Regular Height size class. It is a default height class for all components.
3. Regular Height – iPad
This variant is specific to iPad devices. This only applies to some of the components that requires more space.
Modality is a method to present content in a temporary mode. With Adaptive Design, Modality on iPhone and iPad devices will adapt to the screen sizes and utilze the available space.
When designing applications in SAP Fiori for iOS, be sure to keep adaptive layout in mind. Designing apps that support adaptive layout can help to save development time down the road and provide users with a coherent and well-considered experience.
Here are some tips:
- Consider how the app design would behave in both portrait and landscape modes early in the design process.
- Design with screen rotation and device size in mind.
- Evaluate how components and floorplans will change based on adaptivity.