▼【迪森微课堂】第三十期之SAP Fiori3.0新时代于2019年5月16日晚上22点在SAP业界人士的热烈赞赏声中完美落幕，大家反响热烈，受益匪浅。

 

▼为了便于进一步学习和分享，我们对本期内容进行了整理和总结，形成干货奉献给大家，希望大家都能不断充电提高，在我们热爱的SAP事业道路上持续加速前进。

 

本期嘉宾简介：

 

1  SAP UX的方向：数字化转型

 

 

Fiori作为SAP提升用户体验的革新化产品，自2013年发布以来发展不断。这次我们就以Fiori 3.0为主来看一下Fiori近期的一些创新。

 

2  SAP Fiori版本更迭

 

 

回望过去，Fiori自2013年发布，只针对移动场景发布了一些self-service的应用，之后从财务模块开始扩展到专业应用场景，需要应对的业务流程在不断复杂化，但是Fiori仍旧遵循最重要的基本原则，例如只为用户提供最重要的信息，保持多设备兼容等。从Fiori 2.0开始，技术上提出了Fiori Elements用来提供模板进行快速Fiori项目实施，并扩展到移动端原生框架，并推出会话型UI，即CoPilot。

 

Fiori作为一种设计语言，扩展应用到S/4 HANA以外的其他应用当中，但是由于各个应用的接纳发展程度不同，造成了不同产品UX仍存在的极大差异性。

 

3  SAP Fiori 3.0

 

 

Fiori 3.0在设计决策初期引入产品Team共同决策，目的之一就实现SAP全解决方案无缝统一的设计体验。理想化的目标是用户在使用系统的时候，例如从S/4HANA中跳转到Concur中，感受不到产品的切换，统一的用户体验。

 

Fiori 3.0的定位是，主旨CoPilot作为新的UX方式；承上启下的了解当前业务环境，能够帮助用户推动工作流；连接和集成的，和各应用系统之间无缝集成。

 

各产品之间基于设计达成一致决定，包括：部分通用功能，例如统一使用CoPilot，全局化设定，Shellbar等，统一术语和功能一致性，统一颜色主题及含义，统一字体库（使用SAP 72字体库）和常用图标，统一动态切换方式及Branding显示。

 

Current Shell Designs

通过Fiori 3.0，要将现阶段差异很大的Shell进行清理，采用相同的设计，通过不同的技术实现。

 

Shell压缩到单条，包括Logo，产品名称，次级描述，CoPilot呼出按钮，搜索，当前应用针对性功能，通知栏按钮，用户Profile，产品跳转按钮。通过点击产品跳转按钮可以看到当前用户有权限的所有产品。

 

 Current Structure

 

页面结构也将统一，统一视觉设计及互动设计。不同的页面布局和导航方式，在一定程度上会保留。对于不同应用，有时导航栏仍会保留，例如销售云在左侧定义了全局可见的导航栏。

 

Current Home Content

 

主页内容也将统一。将提供一个可选的Feature Group区域，通过机器学习根据当前用户的基本信息、权限、最近使用、频繁使用等信息动态显示最有可能需要用户注意的内容，以保持主页总对用户强相关。

 

4  未来Fiori Launchpad的愿景

 

 

当前在各产品间统一的设计将逐步推行实施。未来的Fiori Launchpad愿景希望提供一个Central Fiori Launchpad，打开产品间界限，即在主页中直接显示某一个应用系统内部的细节信息，并且支持直接跳转，从而真正实现跨产品的整合的用户体验。

 

5  SAP Fiori Elements：Analytical List Page

 

 

Fiori Element中的Analytical List Page主要用于分析，针对处理日常操作的业务人员而非专业分析人员，体现了Fiori强调的embedded analysis。

 

最上侧区域为快速显示的分析图表， 兼具快速筛选功能。主数据显示部分可以切换显示分析图表及传统表单，也具有筛选功能。

 

6  SAP Fiori Elements：Flexible Column Layout

 

 

Fiori Element中的Flexible Column Layout，用于替换之前的Master-Detail Page。显示方式为是Master-Detail-Detail，三级显示。其中每一列，指的就是一个层级的信息。针对不同设备显示方式不同，可以通过按钮切换调整每一列的大小，或全屏及退出全屏等，以扩大当前最主要进行操作的级别。

 

7  SAPUI5与Fiori 3.0

 

 

SAPUI5 1.65版本在SAP云平台发布，Fiori 3.0的新主题Quartz可以使用。兼容2.0主题，开发者通过Fiori Elements或者SAPUI5或者Open UI5进行的应用开发，在Quartz主题下都可以正常使用，不需调整。但如果是自开发的Control，或者是自定义的CSS（这些都是SAP不推荐的），那么就需要检查在新主题下是否显示效果是否还正常。尤其需要检查手机端的显示效果，因为在3.0的主题下，显示Cozy模式的间距被压缩。

 

Shellbar控件也已在UI5的SDK中发布，在1.64版本时期是Experimental测试阶段，自1.65版本之后已经正式可用，在SDK中有Sample可以查看。

 

8  什么是SAP CoPilot？

 

SAP CoPilot为Fiori 3.0下提出的惟一的电子助理，简单易用并可以和其他机器人集成，旨在帮助用户更容易更快速的完成工作。

 

功能包括，提供会话式用户体验，支持自然语言分析，了解业务上下文，通过机器学习进行自学习，可以跨应用跨产品使用，可以扩展支持自开发及非SAP产品。

 

Current CoPilot

 

Fiori 3.0中的CoPilot将切换为全屏幕显示，并用卡片方式提供结果，将不同数据源的信息提供在相同视图，以提供更丰富信息，并且支持在卡片上进行互动。目的是一切业务都可以通过CoPilot完成，仅当fallback的时候才跳出CoPilot。

 

9  SAPUI5 Web Components

 

 

UI5 Web Components是在SAPUI5 1.63版本更新的时候提出的一套遵循Web Components标准的轻量级可重用的UI元素，可帮助开发者使用SAPUI5以外的其他前端框架（如Angular，React，Vue）来开发满足Fiori 3.0设计原则的应用。UI5 Web Component不是建在UI5之上的，更不是UI5的替代品，而被定位为UI5的补充。尤其适合当前已经有一套前台网页系统的企业应用，如果使用UI5重开发成本过高，可以使用UI5 Web Component在原有框架下进行替换。

 

10  SAP Fiori Fundamentals

 

SAP Fiori Fundamentals是一个轻量级的展现层实现，作为实现Fiori前台用户体验和底层UI实现框架的解耦合的关键。从技术层面上说，SAP Fiori Fundamentals不是一种新的UI技术或者框架，而是一系列stylesheets和HTML标签的集合，从而让UI开发人员可以使用其喜欢的UI框架，例如Angular，React，Vue等进行开发，同时自动保证开发出的应用仍具有Fiori的风格和用户体验。

 

通过这种解释允许SAP开发人员根据实际项目需要，灵活选择最佳UI框架来开发Fiori应用。定位上，SAP Fiori Fundamentals不是一个新的UI技术，不是用来替代UI5的。

 

UI5 Web Component和SAP Fiori Fundamentals就将作为实现SAP全线产品One UX的两种重要的技术手段。

 

11  SAP Fiori学习路径

 

 

 

声明：本文为原创文章，版权归作者所有；迪森公众平台欢迎原创好文踊跃投稿，如需投稿请发邮件至：public@decision-it.com

 

服务指南

如需了解更多SAP课程资讯、项目咨询运维，请拨打迪森官方咨询热线： 400-600-8756

 

【迪森微课堂】

SAP圈内最接地气的纯技术交流、纯干货分享平台，全球SAP顾问与业界顶尖名师的聚集地，是SAP顾问进阶的官方桥梁。

 

【如何加入迪森微课堂】

请即刻关注迪森官方微信公众平台，第一时间获得迪森最新动态，秒抢宝贵席位！