Fiori 2.0:
Eine Benutzeroberfläche für alle Anwendungen


Markus Kronenwett
Consultant
<style>
/* Webflow Blog Styles */
:root {
--content-max-width: 1500px;
--bg-color: #ffffff;
--font-sans: Inter, sans-serif;
--font-display: 'Mona Sans', sans-serif;
--font-sans-stretch: normal;
--font-display-stretch: normal;
}
.blog-content {
font-family: var(--font-sans);
font-stretch: var(--font-sans-stretch);
color: #000000;
line-height: 1.2;
}
figcaption, .video-caption {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 0.875rem;
font-weight: 500;
font-style: normal;
color: #000000;
line-height: 1.5;
letter-spacing: 0;
margin: 0.5rem 0 0 0;
text-align: center;
}
/* Image Widths and Galleries */
.offset-block {
padding-left: 50px;
}
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
font-family: var(--font-display);
font-stretch: var(--font-display-stretch);
}
.blog-content p a, .blog-content li a, .blog-content .text-link {
color: #f0567f;
text-decoration: underline;
font-weight: 500;
transition: color 0.2s ease;
}
.blog-content p a:hover, .blog-content li a:hover, .blog-content .text-link:hover {
color: #f0567f;
}
.blog-content h1 {
font-family: 'Mona Sans Expanded', sans-serif;
font-stretch: 125%;
font-size: 48px;
line-height: 1.2;
margin: 0 0 1rem 0;
color: #000000;
font-weight: 700;
letter-spacing: 0;
}
.blog-content h2 {
font-family: 'Mona Sans Expanded', sans-serif;
font-stretch: 125%;
font-size: 36px;
line-height: 1.2;
margin: 0 0 0.75rem 0;
color: #000000;
font-weight: 500;
letter-spacing: 0;
}
.blog-content h3 {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 26px;
line-height: 1.2;
margin: 0 0 0.5rem 0;
color: #000000;
font-weight: 700;
letter-spacing: 0;
}
.blog-content h4 {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 23px;
line-height: 1.1;
margin: 0 0 0.75rem 0;
color: #000000;
font-weight: 700;
letter-spacing: 0;
}
.blog-content h5 {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 23px;
line-height: 1.1;
margin: 0 0 0.75rem 0;
color: #000000;
font-weight: 700;
letter-spacing: 0;
}
.blog-content h6 {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 20px;
line-height: 1.2;
margin: 0 0 0.75rem 0;
color: #000000;
font-weight: 700;
letter-spacing: 0;
}
.blog-content .kpi-text {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 2.125rem;
line-height: 1.2;
margin: 0 0 1rem 0;
color: #000000;
font-weight: 700;
text-align: center;
}
.blog-content p {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 20px;
margin: 0 0 1rem 0;
line-height: 1.2;
color: #000000;
font-weight: 500;
}
.blog-content .text-bodyBold {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 20px;
margin: 0 0 1rem 0;
line-height: 1.2;
color: #000000;
font-weight: 700;
}
.blog-content ul {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 20px;
margin: 0 0 1rem 0;
line-height: 1.2;
color: #000000;
font-weight: 500;
}
.blog-content p a, .blog-content li a, .blog-content h1 a, .blog-content h2 a, .blog-content h3 a, .blog-content h4 a {
color: #f0567f;
text-decoration: underline;
font-weight: 500;
transition: all 0.2s ease-in-out;
}
.blog-content p a:hover, .blog-content li a:hover, .blog-content h1 a:hover, .blog-content h2 a:hover, .blog-content h3 a:hover, .blog-content h4 a:hover {
color: #f0567f;
}
.blog-content blockquote {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 22px;
font-style: italic;
font-weight: 400;
border-left: 0px solid #0066cc;
background-color: #f2f5f8;
padding: 0px;
margin: 1.5rem 0;
color: #000000;
}
.blog-content q {
font-family: 'Mona Sans', sans-serif;
font-stretch: normal;
font-size: 20px;
font-style: italic;
font-weight: 400;
border-left: 0px solid #94a3b8;
background-color: #f2f5f8;
padding: 0px;
quotes: "«" "»" "‹" "›";
color: #000000;
}
.custom-container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 60px 60px 70px 70px;
}
.custom-button:hover {
background-color: #fdc300 !important;
color: #000000 !important;
transform: scale(1.03) !important;
}
.faq-item {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 1rem;
}
.faq-question {
font-weight: bold;
color: #1a1a1a;
margin-bottom: 0.5rem;
}
.faq-answer {
color: #333333;
}
.box-style-standard {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
color: #333333;
margin: 1.5rem 0;
}
.box-style-info {
background-color: #eff6ff;
border: 1px solid #3b82f6;
border-radius: 8px;
padding: 20px;
color: #1e40af;
margin: 1.5rem 0;
}
.box-style-warning {
background-color: #fffbeb;
border: 1px solid #f59e0b;
border-radius: 8px;
padding: 20px;
color: #92400e;
margin: 1.5rem 0;
}
@media (max-width: 991px) {
.offset-block { padding-left: 20px; }
.blog-content h1 { font-size: 44px; }
.blog-content h2 { font-size: 34px; }
.blog-content h3 { font-size: 24px; }
.blog-content h4 { font-size: 22px; }
.blog-content h5 { font-size: 22px; }
.blog-content h6 { font-size: 19px; }
.blog-content p { font-size: 18px; }
.blog-content .text-bodyBold { font-size: 18px; }
.blog-content ul { font-size: 19px; }
.blog-content .kpi-text { font-size: 1.8rem; }
.blog-content blockquote { font-size: 21px; }
.blog-content q { font-size: 19px; }
figcaption, .video-caption { font-size: 0.875rem; }
.custom-container { padding: 40px 40px 40px 40px; }
}
@media (max-width: 767px) {
.offset-block { padding-left: 15px; }
.blog-content h1 { font-size: 38px; }
.blog-content h2 { font-size: 28px; }
.blog-content h3 { font-size: 22px; }
.blog-content h4 { font-size: 21px; }
.blog-content h5 { font-size: 21px; }
.blog-content h6 { font-size: 18px; }
.blog-content p { font-size: 16px; }
.blog-content .text-bodyBold { font-size: 16px; }
.blog-content ul { font-size: 18px; }
.blog-content .kpi-text { font-size: 1.5rem; }
.blog-content blockquote { font-size: 20px; }
.blog-content q { font-size: 18px; }
figcaption, .video-caption { font-size: 0.875rem; }
.custom-container { padding: 15px 15px 15px 15px; }
}
/* Blog Lightbox */
.blog-lightbox-trigger { text-decoration: none !important; }
.blog-lightbox-trigger img { transition: opacity 0.2s ease; }
.blog-lightbox-trigger:hover img { opacity: 0.85; }
.blog-lightbox-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85); z-index: 99999; display: flex;
align-items: center; justify-content: center; cursor: zoom-out;
animation: blogLbFadeIn 0.2s ease;
}
.blog-lightbox-overlay img {
max-width: 90vw; max-height: 90vh; border-radius: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5); object-fit: contain;
}
@keyframes blogLbFadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
<div class="blog-content">
<section style="background-color: #f2f5f8; width: 100%; margin-top: 0px; margin-bottom: 20px;">
<div class="custom-container" style="background-color: transparent;">
<div class="offset-block">
<p style="text-align: left;">Mit dem neuen Release 1610 von SAP S/4HANA hat SAP auch das Designkonzept für die Benutzeroberflächen nochmals überarbeitet und bietet Anwendern unter dem Namen Fiori 2.0 eine ganz neue, individualisierte Benutzererfahrung. Mithilfe von Kacheln können Nutzer über eine personalisierte Oberfläche auf alle benötigten Anwendungen zugreifen.</p>
<p class="text-bodyBold" style="text-align: left;">Gleiches Look & Feel für alle Anwendungen</p>
<p style="text-align: left;">Zentrale Einstiegsplattform ist das SAP Fiori Launchpad. Von hier aus lassen sich alle Anwendungen unter SAP S/4HANA ansteuern – SAP Fiori Apps ebenso wie klassische SAP-GUI- und WebDynpro-Anwendungen. Mit Fiori 2.0 hat SAP nämlich alle Oberflächen – auch die seiner klassischen Anwendungen – harmonisiert und vereinheitlicht.</p>
</div>
<figure style="text-align: center; margin: 1.5rem 0;"><a href="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3f9ff6195c36a6d9c875_Fiori-Launchpad-1.png" class="blog-lightbox-trigger" onclick="event.preventDefault();var o=document.createElement('div');o.className='blog-lightbox-overlay';o.innerHTML='<img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3f9ff6195c36a6d9c875_Fiori-Launchpad-1.png" alt="">';o.onclick=function(){this.remove()};document.body.appendChild(o)" style="display: block; cursor: zoom-in;"><img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3f9ff6195c36a6d9c875_Fiori-Launchpad-1.png" alt="Das SAP Fiori Launchpad ist die webbasierte Einstiegsplattform für alle Anwendungen unter SAP S/4HANA." class="blog-img-e3685cdc-5ebb-41d0-873b-77a59f394475" style="max-width: 100%; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"></a><figcaption>Das SAP Fiori Launchpad ist die webbasierte Einstiegsplattform für alle Anwendungen unter SAP S/4HANA.</figcaption></figure>
<div class="offset-block">
<p class="text-bodyBold" style="text-align: left;">Sämtliche Anwendungen, Objekte und Mitteilungen auf einen Blick</p>
<p style="text-align: left;">Was genau bedeutet das für Anwenderunternehmen von SAP S/4HANA? Zunächst einmal ist das Ansichtsfenster von SAP S/4HANA nun dreigeteilt. SAP spricht von einem Viewport-Konzept, das man sich wie eine aufgeklappte Tafel vorstellen kann. Links befindet sich ein personalisierter Bereich (Me Area) mit Anwender-spezifischen Informationen, in der Mitte die Übersichtsseite (Homepage) für einen schnellen Einstieg in alle wichtigen Anwendungen. Auf der rechten Seite werden aktuelle Mitteilungen angezeigt (Notification Area). Anwender können ganz einfach zwischen den einzelnen Bereichen hin- und herwechseln, um sich beispielsweise die Mitteilungen im Detail anzusehen.</p>
</div>
<figure style="text-align: center; margin: 1.5rem 0;"><a href="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa10ba0c2251af960de_Viewport.png" class="blog-lightbox-trigger" onclick="event.preventDefault();var o=document.createElement('div');o.className='blog-lightbox-overlay';o.innerHTML='<img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa10ba0c2251af960de_Viewport.png" alt="">';o.onclick=function(){this.remove()};document.body.appendChild(o)" style="display: block; cursor: zoom-in;"><img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa10ba0c2251af960de_Viewport.png" alt="Das Viewport-Konzept zeigt User-spezifische Informationen (links) und System-spezifische Informationen (rechts) in unterschiedlichen Bereichen des erweiterten Bildschirms an. In der Mitte befindet sich die Homepage, die als Startpunkt für die Nutzung von SAP S/4HANA dient." class="blog-img-e36380ab-2e92-4a92-b378-452de559fbde" style="max-width: 100%; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"></a><figcaption>Das Viewport-Konzept zeigt User-spezifische Informationen (links) und System-spezifische Informationen (rechts) in unterschiedlichen Bereichen des erweiterten Bildschirms an. In der Mitte befindet sich die Homepage, die als Startpunkt für die Nutzung von SAP S/4HANA dient.</figcaption></figure>
<div class="offset-block">
<p class="text-bodyBold" style="text-align: left;">Individuelle Benutzeroberflächen erleichtern den Einstieg</p>
<p style="text-align: left;">Den personalisierten Bereich auf der linken Seite kann der Nutzer an seine persönlichen Bedürfnisse anpassen. Hier kann er Kacheln auf der Übersichtsseite anpassen oder verschieben, App-Einstellungen ändern und die Homepage mit persönlichen Angaben und einem Bild versehen. Häufig genutzte und zuletzt verwendete Apps werden in einer übersichtlichen Liste angezeigt. Zudem bietet dieser Bereich eine komfortable App-Suche an.</p>
</div>
<figure style="text-align: center; margin: 1.5rem 0;"><a href="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa3f6195c36a6d9c916_Me-Area.png" class="blog-lightbox-trigger" onclick="event.preventDefault();var o=document.createElement('div');o.className='blog-lightbox-overlay';o.innerHTML='<img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa3f6195c36a6d9c916_Me-Area.png" alt="">';o.onclick=function(){this.remove()};document.body.appendChild(o)" style="display: block; cursor: zoom-in;"><img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa3f6195c36a6d9c916_Me-Area.png" alt="Me Area: Hier kann der Anwender die Einstellungen für seine Oberfläche ändern, Apps starten oder nach Apps suchen." class="blog-img-393b81a1-8b94-4306-8430-d26c2b7e5643" style="max-width: 100%; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"></a><figcaption>Me Area: Hier kann der Anwender die Einstellungen für seine Oberfläche ändern, Apps starten oder nach Apps suchen.</figcaption></figure>
<div class="offset-block">
<p class="text-bodyBold" style="text-align: left;">Wichtige Aufgaben stets im Blick behalten</p>
<p style="text-align: left;">Auf der rechten Seite bekommt der Anwender Mitteilungen angezeigt, die ihn an wichtige Tasks und erinnern oder seine Aufmerksamkeit auf unvorhergesehene Entwicklungen richten. Mit einem Klick gelangt er auf die Quelle der Benachrichtigung und kann die entsprechende Aufgabe erledigen. Genauso gut kann er auch im „Notification Area“ selbst den Status einzelner Mitteilungen bearbeiten – etwa, wenn er die Bearbeitung einer Aufgabe aufschieben möchte. Zusätzlich lassen sich Mitteilungen nach Datum, Wichtigkeit oder Aufgabe filtern.</p>
</div>
<figure style="text-align: center; margin: 1.5rem 0;"><a href="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa3834e217bfb660aa0_Notifications.png" class="blog-lightbox-trigger" onclick="event.preventDefault();var o=document.createElement('div');o.className='blog-lightbox-overlay';o.innerHTML='<img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa3834e217bfb660aa0_Notifications.png" alt="">';o.onclick=function(){this.remove()};document.body.appendChild(o)" style="display: block; cursor: zoom-in;"><img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa3834e217bfb660aa0_Notifications.png" alt="Der rechte Bereich ist für Mitteilungen, Push-Nachrichten und die Erinnerung an wichtige Tasks reserviert." class="blog-img-f9e6e862-4c06-4d74-a6ef-a43db18f17f4" style="max-width: 100%; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"></a><figcaption>Der rechte Bereich ist für Mitteilungen, Push-Nachrichten und die Erinnerung an wichtige Tasks reserviert.</figcaption></figure>
<div class="offset-block">
<p class="text-bodyBold" style="text-align: left;">Kacheln sorgen für einen schnellen Überblick</p>
<p style="text-align: left;">Die Homepage in der Mitte schließlich bietet Nutzern einen schnellen Einstieg in täglich benötigte Anwendungen und Tasks in Form von Kacheln. Die Kacheln lassen sich beliebig anordnen, verschieben und gruppieren. Je nach Rolle und Aufgabengebiet kann der User sie schnell und einfach an seine persönlichen Bedürfnisse anpassen.</p>
</div>
<figure style="text-align: center; margin: 1.5rem 0;"><a href="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa445440f0fdf888142_Homepage.png" class="blog-lightbox-trigger" onclick="event.preventDefault();var o=document.createElement('div');o.className='blog-lightbox-overlay';o.innerHTML='<img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa445440f0fdf888142_Homepage.png" alt="">';o.onclick=function(){this.remove()};document.body.appendChild(o)" style="display: block; cursor: zoom-in;"><img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa445440f0fdf888142_Homepage.png" alt="Die Homepage ist der Startpunkt für die Nutzung von SAP S/4HANA." class="blog-img-736030ed-785e-453c-bdd9-ba0ae756549b" style="max-width: 100%; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"></a><figcaption>Die Homepage ist der Startpunkt für die Nutzung von SAP S/4HANA.</figcaption></figure>
<div class="offset-block">
<p class="text-bodyBold" style="text-align: left;">Rollenspezifische Übersichtsseiten zeigen, wo Handlungsbedarf besteht</p>
<p style="text-align: left;">Über die Homepage gelangt der Anwender aus dem Fachbereich, beispielsweise aus dem Einkauf, auf eine sogenannte Übersichtsseite (Overview Page), die alle Informationen bündelt, die er für seine tägliche Arbeit braucht: wichtige Informationen, aktuelle Verkaufszahlen, tiefergehende Analysen, offene Tasks. Von hier aus kann er auch auf täglich benötigte Anwendungen zugreifen. Die angezeigten Informationen lassen sich wiederum filtern oder priorisieren, damit die Seite nur wirklich relevante Informationen bereitstellt.</p>
</div>
<figure style="text-align: center; margin: 1.5rem 0;"><a href="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa530ebb4f43531b797_Overview-Page.png" class="blog-lightbox-trigger" onclick="event.preventDefault();var o=document.createElement('div');o.className='blog-lightbox-overlay';o.innerHTML='<img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa530ebb4f43531b797_Overview-Page.png" alt="">';o.onclick=function(){this.remove()};document.body.appendChild(o)" style="display: block; cursor: zoom-in;"><img src="https://cdn.prod.website-files.com/68ffbb1d2a6455e8202f8d3e/69dc3fa530ebb4f43531b797_Overview-Page.png" alt="Die Übersichtsseite – hier ein Beispiel für einen Mitarbeiter aus dem Einkauf. Die Inhalte lassen sich per Filter auf bestimmte Lieferanten oder Vorgänge begrenzen." class="blog-img-d3db6634-503e-4c02-84cc-cf26807a0fc6" style="max-width: 100%; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"></a><figcaption>Die Übersichtsseite – hier ein Beispiel für einen Mitarbeiter aus dem Einkauf. Die Inhalte lassen sich per Filter auf bestimmte Lieferanten oder Vorgänge begrenzen.</figcaption></figure>
<div class="offset-block">
<p style="text-align: left;">Einen schnellen Einstieg in die Neuerungen von Fiori 2.0 bietet außerdem ein englischsprachiges Video von SAP.</p>
</div>
<div style="text-align: center;"><div style="position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; border-radius: 8px; margin: 1.5rem 0;">
<iframe src="https://www.youtube-nocookie.com/embed/Io9HfoVkGVU?rel=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></div>
</div>
</section>
</div>
Weitere Beiträge

Neues Design & neue Website

Neues Logo. Klarer Inhalt. Bereit für die Zukunft: Unser neues Corporate Design & unsere neue Website
12.05.2026
|
Innovabee

Joule im Job: 4 Must-knows zu SAP Joule for Consultants
30.04.2026
|
KI & Joule

KI im Arbeitsalltag: Wie SAP Joule, Cloud ERP und Microsoft Office zusammenspielen
29.04.2026
|
KI & Joule






