1、U55NW731BBConfigGuideENXXSAP NetWeaver 7.31 July 2014August 2000August 2000EnglishEnglishSAP Fiori Design(U55)SAP AGDietmar-Hopp-Allee 1669190 WalldorfGermanyBuilding Block Configuration GuideCopyright 2014 SAP AG or an SAP affiliate company. All rights reserved.No part of this publication may be re
2、produced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.Natio
3、nal product specifications may vary.These materials are provided by SAP AG and its affiliated companies (SAP Group) for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warra
4、nties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. SAP and other SAP products and services mentioned herein as well as th
5、eir respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Please see for additional trademark information and notices.IconsIconMeaningCautionExampleNoteRecommendationSyntaxTypographic ConventionsType StyleDescriptionExample textWords or characters that ap
6、pear on the screen. These include field names, screen titles, pushbuttons as well as menu names, paths and options.Cross-references to other documentation.Example textEmphasized words or phrases in body text, titles of graphics and tables.EXAMPLE TEXTNames of elements in the system. These include re
7、port names, program names, transaction codes, table names, and individual key words of a programming language, when surrounded by body text, for example, SELECT and INCLUDE.Example textScreen output. This includes file and directory names and their paths, messages, source code, names of variables an
8、d parameters as well as names of installation, upgrade and database tools.EXAMPLE TEXTKeys on the keyboard, for example, function keys (such as F2) or the ENTER key.Example textExact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation.Va
9、riable user entry. Pointed brackets indicate that you replace these words and characters with appropriate entries.ContentFiguresSAP Fiori Design: Configuration Guide1PurposeThe purpose of this document is to describe the best practices in the user experience (UX) according to SAP Fiori design. You c
10、an use these best practices to design and develop your own user interfaces incorporating the look-and-feel of SAP Fiori. This document outlines the basic principles of the SAP Fiori user experience;framework for the SAP Fiori layout;layout of selected app types based upon the SAP Fiori principles;co
11、ntrols and patterns that are used in these app types.This document is aimed equally at UX designers as well as developers of user interfaces.For a complete checklist of items relevant for SAP Fiori refer to the configuration guide SAP Fiori Checklist (building block U58). This checklist can be used
12、as a reference source during UX design and development and as a verification tool during the sign-off process.This document concentrates on use cases for transactional app types that can be run using any database. This may be on SAP NetWeaver 7.31 or SAP NetWeaver 7.4 (with an SAP HANA data base or
13、another data base). This document does not provide any guidance on use cases that specifically require an SAP HANA database. SAP Fiori Guidelines provides comprehensive information for designing and developing SAP Fioridesigned apps. 2PreparationPrerequisitesBefore working with this document, you sh
14、ould be familiar with topics covered in preceding building blocks. The preceding building blocks are listed in the section Solution Overview of the Configuration Guide to Implementing SAP Fiori Design Rapid-Deployment Solution V2.This guide provides best practices for designing and developing user i
15、nterfaces according to SAP Fiori principles. As such this document does not have specific pre-requisites. However, SAP Fiori user interfaces are built using the SAP UI Development Toolkit for HTML5 (also referred to as SAPUI5). Therefore developers should certainly be familiar with the SAPUI5 toolki
16、t. This is covered in the configuration guide SAPUI5 General Configuration (building block U50). This document also includes links to further SAPUI5 documentation.Technical documentation for SAPUI5 is available in the UI development toolkit for HTML5 Demo Kit. 3SAP Fiori DesignThe following sections
17、 provide in-depth information on the following topics:SAP Fiori Principles This describes the principles that have been identified as central to the UX for SAP Fiori and that are included in every user interface that is developed according to SAP Fiori.App FrameworkThis describes the set of user int
18、erface patterns that have been specified for SAP Fiori. These patterns embody the principles for the SAP Fiori UX and can be used as a template for developing further user interfaces.Application TypesThis describes selected types of apps for SAP Fiori design, according to specific use cases. Control
19、sThis section describes selected controls that are within the most commonly used app types.PatternsThis section describes selected patterns that are within the most commonly used app types.Additionally the Appendix provides detailed information on specifications for topics such as typography, colors
20、, and icons.SAP Fiori PrinciplesPeople Centric DesignSAP Fiori-designed apps are not structured along the transactions that users carry out. Instead, the SAP Fiori paradigm focuses on people and their goals when using the apps. This requires a very different approach to design, which is fully descri
21、bed in From Transactions to Apps. Five Core PrinciplesSAP Fiori has five core principles. Each user interface must include all of the following principles in order to be regarded as designed according to SAP Fiori:Role-basedResponsiveSimpleCoherentDelightfulFigure 1: SAP Fiori UX Design PrinciplesFi
22、ori Design Principles illustrates the main aspects of these principles, which are explained in more depth in the following sections.Role-basedThe user interfaces cover the most frequently used activities that a user carries out. The user interfaces are designed to match how people work, rather than
23、forcing people to change the way they work to fit the user interface. ResponsiveThe user interface is designed and developed for a consistent experience on many devices.A responsive user interface caters forMultiple form factors, for smartphone, tablet and desktop;Multiple interaction styles, for to
24、uch or keyboard;Multiple technologies, for iOS, Android, Windows, Mac, or PC;Moreover this is achieved with a single code-line.SimpleThe user interface is focused on user experience. This is more important than including multiple features and functions.A simple user interface covers one use case for
25、 one user with a maximum of three screens. This makes the important aspects of each use case really easy to learn and use. Coverage of all or most of the tasks that a user has to carry out is achieved by many user interfaces for individual use cases, not one complicated user interface that attempts
26、to cover all functions. CoherentUser interfaces provide the same user experience across all use cases. This is achieved by identifying best practices and incorporating these in all user interfaces. DelightfulUser interfaces offer low barriers to adoption. User interfaces which are delightful are Eas
27、y to adopt: the user interfaces can be run on the releases with largest installed base with no upgrade; Easy to adapt: the user interfaces can be themed, personalized, and extended;Easy to deploy: the user interface has no footprint and requires little administration;Easy to introduce: the user inte
28、rface requires no training;Easy to grow: the portfolio of user interfaces can be added to by SAP and partners. App FrameworkThe design principles for SAP Fiori have been taken by SAP to determine best practices for user interface layout for different types of use cases using SAP Fiori. SAP Fiori has
29、 a simple user interface hierarchy. The launchpad is the entry point for the user, providing entry points to the user to their processes.The user interfaces for one business process are referred to as an app. All the users apps are presented in the form of tiles on the Homepage, which forms the hear
30、t of the Launchpad. Most apps designs are based on one of the two basic templates:Master/Detail;Full Screen.In the context of this document the term app refers to the user interface and the related software to conduct a specific business process within an SAP system. These apps are multi-channel, th
31、erefore although they can be run on a smartphone or tablet, this should not be confused with an app dedicated to be downloaded onto and used on a mobile device.Within each app there may be one or more screens (according to the simple principle, a maximum of three screens). For each pattern the layou
32、t of each screen and the screen order is defined according to the best practices for SAP Fiori.Full ScreenThe full screen template affords maximum flexibility while still providing the look and feel of SAP Fiori.The template for the full screen does not present a pre-defined hierarchy of content and
