Shulou(Shulou.com)05/31 Report--

This article is about how to analyze SAP Fiori Design Guidelines. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

Preface

I didn't know Fiori before the SAP internship, just as I didn't know Ant Design before the ant internship. One is that I am ill-informed, and the other is that these are enterprise-level design specifications, not that the job needs should not be used. Unfortunately, I didn't use Fiori's design system during my SAP internship, so I had to read online materials and "hearsay" when I needed to study it.

It is difficult to make a design specification, it is difficult to be large and comprehensive, and it is difficult to be small and sophisticated. In my opinion, Fiori is a large and comprehensive design specification, and Material Design System is a small and refined design specification, both of which are worth learning from. But if you want to study (not just understand) the design code in depth, Fiori is a good textbook, and his website is the most comprehensive and detailed website I have ever seen. I can't help but sigh at the seriousness of the Germans.

Reasons for Fiori development

First of all, it is not difficult to understand why SAP should develop a set of Fiori system. Although enterprise software does not require so much beauty of the interface, with the evolution of the times, customers have higher and higher requirements for the interactive interface. When users talk about the interface of SAP, the first feeling is ugly, so SAP began to seek transformation, painful transformation, and invested a lot of manpower and material resources to develop the front-end technical framework of SAPUI5. Based on this framework, a whole set of new user interaction system, namely SAP Fiori, is developed.

Evolution of SAP UI system

Comparing the evolution of the SAP UI system, we can see that although the current Fiori 2.0 is not so beautiful and stunning and easy to use, it is a qualitative breakthrough compared with previous GUI versions.

In 1992, SAP GUI, SAP's earliest UI system.

SAP has the foresight to launch SAP GUI, which is actually the earliest BS framework, but this B is SAP's own client rather than a standard browser, but follows a three-tier framework. This tool develops quickly, runs quickly, but the page is rigid, SAP page development needs to follow a specific pattern, but this is also because SAP is aimed at specific enterprise customers, because the number of applications in an enterprise is often more than an Internet site, in order to facilitate a unified style, and to facilitate customers to learn quickly, but also to facilitate rapid development, such a design is reasonable. The concept of pattern has been continued in SAP, all programs require templating, and styles can always be developed rapidly.

In the era of Web 2.0, SAP Web Dynpro basically continues the style of the previous version.

In 2013, SAP Fiori 1. 0, a new user interaction system based on SAPUI5 technology framework

In October 2016, SAP Fiori 2.0, this version of user experience design concept won the 2015 Red Dot Design concept Award in the Red Dot interaction Design Competition. Concept video link

Fiori defines the official definition of SAP Fiori: "SAP Fiori is the new user experience (UX) for SAP software that applies modern design principles. SAP solutions, such as the SAP Business Suite powered by SAP HANA, are using the SAP Fiori UX to provide a personalized, responsive, and simple user experience." Grasp a few keywords, modern design principles is in line with the current front-end design trend, such as simplification, planarization, personalized is more personalized, more user-centered, each user interface is different, responsive can adapt to different terminals, simple user experience is also the ultimate goal, let users use the simplest, clear at a glance. Quote from: SAP Fiori

Let's take a detailed look at how Fiori implements the definition to comply with modern design principles, personalized, and responsive.

Fiori website framework

The following picture is the website framework of Fiori. The Fiori Design Guidelines in the title refers to the right half of the following image. I think the content on the right is for designers (including designers, product managers, etc.), while the content on the left is mainly for developers.

In fact, starting to look at the Fiori Design Guidelines website, there will be a sense of bewilderment, opening one link after another, jumping around, but after understanding the logical structure of the site, it will be much clearer.

The main practical information of Guidelines website is Foundation, General Concepts, Layouts, UI Elements. The Foundation module mainly describes the definition, design concept, design method, responsiveness and adaptability of Fiori, which are the most basic and important concepts. General Concepts is a typical and general design concept of Fiori system, such as its most distinctive Launchpad, and the process of adding, deleting, modifying and querying interfaces within the interface. Layouts, Floorplans and Frameworks is about the layout, floor plan and frame of a single interface. UI Elements is about detailing each component.

The aforementioned look at this site is confused because all its content is strung together, for example, when explaining a component, if it involves principles or other component content, it will give you a hyperlink so that you can jump over to see the details, so often a page, there will be a lot of hyperlinks jump to design principles, basic concepts, various components, and some development code pages.

Foundation module

First interpret the Foundation module. Two of the most distinctive contents are Design Principles and Responsive vs. Adaptive

Fiori's Design Principles has five points, as shown in the following figure.

Delightful, coherent, simple can be seen in the design principles of other design specifications, but role-based, adaptive is the most prominent in Fiori, and is by far the best done in the design specifications.

In the past, SAP software was based on business, and then there will be many operational roles in this business, facing the same software and interface content. Now SAP emphasizes experience first, dividing the previous business module into simple, single task module, which is more individual, simple and efficient. Personality means that different task modules are displayed according to different work roles, rather than everyone in the past sees the same business module. Business module (product manager perspective) becomes task module (user role perspective). The best embodiment of the role-based design principle in the interface is its Launchpad, as shown in the following figure.

This principle is extracted from a wide range of insights into the various roles of today's workforce. SAP Fiori provides the right information at the right time to reflect the way it actually works.

In the Launchpad of Fiori 2.0, a new area has been added on the left and right sides, which is equivalent to expanding the use of the entire desktop. This design concept is called "Viewport Concept".

On the right side of the screen is "Notification Area", which feels like the notification center in iOS. The message or Workflow reminder will be reflected here. Its function is to help me remind my boss: don't you approve my reimbursement as soon as possible, waiting for a baby?

On the left is called "Me Area", with some recently used Apps or some custom user menus, and the App Finder for search is also here.

The large area in the middle is called the workspace and is the place where users handle their daily business.

Such a design pattern allows users to focus on core tasks without missing out on other aspects of dynamics. The feeling of taking care of everything. Quote from three minutes to understand the design concept behind Fiori

Adaptive adaptability principle refers to adapt to a variety of use scenarios and devices, combined with Responsive vs. Adaptive to analyze. Fiori proposed Responsive Design responsive design and Adaptive Design adaptive design. Responsiveness is easy to understand, that is, the design and development of the page can be adjusted according to user behavior and device environment (including system platform, screen size, screen orientation, etc.). The adaptability is that when the responsive design can not meet some special use scenarios, we need to design for different devices, and adjust the complexity of the design according to the specific equipment. Specific can be combined with the official website case to understand. To simply understand responsiveness is to set up nodes to hide or deform the content. Adaptability is to adjust the design complexity directly, and some content can be deleted according to the situation.

General Concepts and Layouts, Floorplans and Frameworks module

General Concepts and Layouts, Floorplans and Frameworks module explain in detail the typical and general design concepts and layouts of Fiori. Careful study will find that Fiori design specifications are really detailed, comprehensive, many concepts, such as Action Placement, about global operations and local operations, in fact, when designing the page, we all have this awareness, but do not see other design specifications will be summarized into specifications (maybe I do not know enough, if there is, please let me know).

UI Elements module

I also summarized how Fiori explains a component. General design specifications involve the following dimensions when presenting components, but there is no doubt that Fiori is the most detailed of them. In particular, the Guidelines section analyzes all the situations that may be encountered in the business, and the most amazing thing is that if your business scenario is not suitable for this component, it will also help you analyze which component suits your needs, and then attach a link. Then most of the components will list the presentation methods on different devices, which is really a practical implementation of the Adaptive principle.

Summary and evaluation

I always feel that I have strayed from the topic, the topic is how to evaluate Fiori, and what I have written above is how to interpret Fiori. But I believe we all have a studious heart, there is no harm in watching more, ha. It's really time for some questions.

Fiori is the design specification extracted and precipitated by SAP from its huge business modules, which successfully serves the complex and huge ERP system of SAP. There is no doubt about its practical and commercial application ability.

SAP has been transformed from the original GUI system to the current Fiori system. At present, all the new products and old product iterations of SAP are using the Fiori system, which can be said to be a complete change. The great significance of Fiori to SAP is self-evident.

Fiori is not a simple list of design specifications, but a huge network of design systems. Its Design Principles, Concepts, Layouts, UI Elements and other contents are closely linked and closely related. I admire the huge investment of Fiori designers.

Fiori has put forward many concepts and design concepts with its own characteristics, such as user-based principles, Design-Led Development Process, Launchpad, Multi-Device Support: Responsive vs. Adaptive,Mobile First and so on, which can be said to be the essence of SAP extracted and precipitated from its own business modules. By the way, after studying Fiori, I know that Design-Led Development Process (DDP) proposed by Fiori is a concrete derivation of DesignThinking. DesignThinking is a set of design methods jointly developed by Hasso Plattner (one of the founders of Stanford Stanford d.school) and IDEO, and Hasso Plattner is the evangelist of SAP's design methods, so SAP is actually one of the first companies to promote the use of DesignThinking. Detailed description of DDP Design method

Because there is a lot of content presented, and the website framework is built in accordance with its own specifications, Fiori is not as clear and easy to understand as other design specifications, and the learning cost is relatively high.

The above is how to analyze SAP Fiori Design Guidelines, the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.