SAP Fiori 和 SAP UI5 的区别和联系

最近好几个朋友向我提问,在交流的过程中,发现这些朋友对 SAP Fiori 和 SAP UI5 这两个概念的区别,还是理解得似是而非,所以专门写了一篇文章解释。

本文我不想复制粘贴 SAP 官网上的解释,而是举一些现实生活中的例子,帮助大家理解二者的区别。

汽车的设计和实现

任何一个优秀的汽车品牌(比如奔驰和宝马),往往都有自己独树一帜的设计风格和使用体验。在汽车设计开始之前,首先会进行市场研究,确定目标消费者和功能需求。汽车设计团队根据市场调研的结果,创建一个汽车的初步概念,并逐步细化,确定设计细节,比如车身形状,内部布局,引擎大小和类型,以及其他系统和组件。汽车设计团队最后交付的产出,是一份汽车设计规范。

流水线上的汽车制造工程师们,拿着这份设计规范就可以开工了。

可以想象,汽车公司招聘网站上对于汽车设计师和汽车制造工程师这两个职位,要求的核心技能肯定大相径庭。

房屋的设计和修建

优秀的房地产开发商,其房屋户型设计和小区绿化,都有自己鲜明的特色,具备很高的可辨识度。不少辗转在多家大开发商之间,反复比较过的刚需购房者,甚至只需要到样板间一逛,就能分辨出该房间出自哪家开发商之手。

房屋建筑设计工程师起草房屋设计蓝图,并以此为基础进行更详细的设计,包括结构设计、机电设计、室内设计等。设计阶段结束后会生成详细的图纸和规格书,用于指导建筑的施工。最终开发商拿着设计团队给出的图纸规格书,对施工工作进行招标。

中标的承包商签订合同后,指挥工人开始盖房。

SAP Fiori 和 SAP UI5

有了以上的铺垫,我们可以进行下面的类比。

  • SAP Fiori 类比为汽车设计规格图纸,SAP UI5 类比成汽车制造流水线,所需的原材料和流水线上的工人。
  • SAP Fiori 类比成房屋设计规格图纸,SAP UI5 类比成按照图纸进行施工的工人,以及盖房的各种原材料。

再比如,如果我们把 SAP Fiori 比作是一种风格统一、设计讲究的家具系列,那么 SAP UI5 就像是制造这些家具的木材和工具。你可以用这些木材和工具制造出各种风格和设计的家具,但是如果你想制造出 SAP Fiori 风格的家具,你就需要遵循一定的设计准则和原则。

在这个比喻中,SAP UI5 提供了开发者需要的所有工具和材料,例如预定义的用户界面控件、数据模型、数据绑定等等,这些都是制造家具的木材和工具。而 SAP Fiori 作为一种设计准则,它规定了家具的形状、样式、大小、色彩等等,以确保所有的家具都有统一的风格和高质量的用户体验。

更具体的说,SAP Fiori 是一套设计原则/设计理念/设计指南/设计规范/设计语言/设计系统/用户体验风格,简而言之就是一套详尽的规范文档。

SAP Fiori 旨在为客户提供一种简约,直观,易于使用,个性化和一致性的用户界面。

所谓简约,意味着 Fiori 致力于最大限度减少用户的工作负担,使用户可以快速轻松地完成工作任务。简约的用户界面避免了不必要的复杂性和混乱的布局,能帮助用户更加集中注意力在要完成的业务操作上。

所谓直观,即用户应该能够不需要通过大量的培训和指导,就能快速地理解如何操作应用界面。此外,应用应该提供明确的反馈,以便提示用户其操作是否成功,以及下一步应该做什么。

所谓个性化,也就是角色化的用户体验。这意味着每个应用都是针对特定的业务角色和任务设计的。这种设计进一步增强了应用的直观性,因为此时界面只会显示与特定角色和任务相关的信息和功能。用户可以根据其角色和需要,个性化应用的界面,使其更加符合实际的业务操作需求。

所谓一致性,即提供一致的用户体验。这意味着无论用户在哪个平台(移动设备,桌面,平板电脑等)上使用 SAP Fiori 应用,用户界面和体验都应该是相同的。这种一致性可以帮助用户快速熟悉新的应用,使学习曲线变得平缓,并提高用户的生产力。

比如一个用户一旦熟悉了 Sales Order 应用的操作界面后,不需要进行任何学习,就能立即上手 Service Order 应用的操作,因为这些应用都遵循了 Fiori 的设计准则,具有一致的操作体验。

以上我们对 SAP Fiori 的规范内容进行了概要介绍。SAP Fiori 只负责定义这些规范,却并不关心其规范背后的具体技术实现。理论上 SAP Fiori 应用可以采用包括但不限于 SAP UI5 的任何开发框架来构建。夸张一点地说,哪怕不用任何框架,直接一行行手写 JavaScript 和 HTML 代码,这也完全 OK. 只要按照这份文档定义的规范进行开发的应用,就能称之为 SAP Fiori 应用。

SAP UI5 只是用来构建 SAP Fiori 应用的工具之一。就像一个家具制造者可以用相同的木材和工具制造出各种不同风格的家具一样,SAP UI5 本身只是一个前端开发框架,理论上开发人员可以用它来构建符合任何设计语言的应用,比如用来开发 SAP Fiori 应用。当然理论上也可以用来开发任何类型的 Web 应用程序,比如符合 Google Material Design 设计语言的应用,开发符合微软 Fluent Design 设计语言的应用。

从上图可以看出,SAP UI5 只是众多 Web Technologies 技术之一。除了 SAP UI5 之外,当然还可以选择 Angular,React 和 Vue(虽然在上图没有列出)来开发 SAP Fiori 应用。

Jerry 之前的这些文章,就介绍过采用 Vue 和 React 框架开发 SAP Fiori 应用的方式:

之所以很多朋友容易把 SAP Fiori 和 SAP UI5 混为一谈,是因为 SAP S/4HANA 这个旗舰级产品,里面包含的 Fiori App(Application 的缩写,中文意思即应用),全部采用 SAP UI5 这个工具开发而成。SAP UI5 在 Fiori 应用开发技术领域固然占据了统治地位,但我们绝不能将这两个概念混为一谈。

SAP Fiori 和 SAP Fiori App

前面说过,SAP Fiori 是一套设计系统,除了包含我们上面讨论过的相对抽象的各种设计准则外,还包括 SAP 发布的按照这套设计准则,采用 SAP UI5 开发而成的标准应用。

下面是一些例子:

这些 SAP Fiori App,需要提供一个统一的入口给用户访问,这个入口就叫做 Fiori Launchpad.

Fiori 应用部署到 SAP On-Premises 服务器之后,需要完成一些配置才能启用,比如依赖的 OData 服务的激活,角色和权限控制相关的设置,Launchpad Designer 的使用等等。这些 Fiori 应用的部署和实施的相关知识,广义上也算 SAP Fiori 的一部分。

在 SAP 内部,不同团队都在为 SAP Fiori 的不断充实和完善做出自己的贡献。

  • 根据用户各种渠道的使用反馈,以及不断从设计业界借鉴最新的理念和方法论,将其融入到 Fiori 设计准则中去的,是 SAP Fiori Design 团队的设计师们。这些专家大多拥有人机交互和用户体验等相关学位,科班出身;
  • 根据 Fiori 设计准则,定义出应用 UI 设计稿(Mockup) 的,是应用开发团队的 UX 设计师们;
  • 拿着 UI 设计稿,使用开发框架编写应用代码的,是开发团队的程序员们(笔者就是其中一员)。

这些角色分工不同,技能需求也不同,但最终目标都只有一个,交付符合 SAP Fiori 规范的 SAP 应用程序供客户使用。

总结 - 弄清楚自己到底想学 SAP Fiori 的哪一块?

因此,当有朋友给我说,自己想学 SAP Fiori 时,我会问他下面这些问题:

  • 你是想学 SAP Fiori 的那套设计准则?
  • 你是想学 SAP Fiori 应用的配置和部署?
  • 你是想学 SAP UI5 的开发技术?

根据这些朋友的回答,我才能够和他们做进一步的沟通。

猜你喜欢

转载自blog.csdn.net/i042416/article/details/131697542