SAP 成都 C4C 小李探花：浅谈 Fiori Design Guidelines

关注

发布于: 2021 年 05 月 24 日

Jerry: 我和周帅认识不久，自去年 7 月 SAP 成都研究院 Cloud for Customer(以下简称为 C4C)开发团队组建至今，根据这段时间和周帅愉快的合作经历，我觉得如果把周帅比作我读过的小说里的一位主人公，我认为是古龙《风云第一刀》中的主角李寻欢。

李寻欢出身名门，“一门七进士，父子三探花”，连其宿敌上官惊鸿也曾当面吐槽：“你本是三代探花，风流翰林，名第高华，天之骄子，又何苦偏偏要到这肮脏江湖中来做浪子？”

周帅也是出身名校，美国研究生毕业，在美国 SAP 实习过，做的也不是我们这些普通程序猿做的脏活累活，而是高大上的人机交互设计工作。

李寻欢是《风云第一刀》书中第一高帅富。小李飞刀在百晓生兵器谱排第三，在古龙笔下“谁的刀快谁就牛逼”的江湖里，这个排名相当于现在的福布斯全球富豪榜第三位。

书中没有提到李寻欢师承何处，一登场他的飞刀，轻功，内力等技能就点满了，而周帅的交互设计技能也没有人教，是在美国大学里自学习得。

古龙很少在书中花笔墨对人物外貌进行正面描写，我复制一段孙小红眼中的李寻欢：

而周帅在成都 SAP 研究院同事中绝对是鹤立鸡群的存在，超过 190 的身高，我每次和他对话得仰着头，费劲。最近周帅又换了个光头的发型。这个非常依赖颜值的发型得贝克汉姆陈冠希吴彦祖这类人物才 hold 得住，而周帅驾驭得轻车熟路，无怪乎深受 SAP 成都 C4C 开发团队所有女同事的喜爱。

古龙笔下的高帅富主角们身边是不缺美人的，比如“彩蝶双飞翼，盗帅夜留香”的楚香帅。而李寻欢作为一位浊世佳公子, 无论行至何处，一颗心始终在林诗音身上。有文为证：

而周帅，虽然漂泊了 4 个城市，换了 3 个办公地，但始终对 SAP 情有独钟。虽然期间身处机会无数的美国 Palo Alto 和互联网公司云集的北京，周帅对 SAP 的挚爱从未动摇，这份坚持正如李寻欢手中永远雕刻不完的那个林诗音的木像。

下面是周帅的正文。

大家好，我叫周帅，是 SAP Hybris C4C 团队的一名交互设计师。我这五年常住了四个城市，换了三个办公地，横跨了两个国家，就职于一家公司。

我本科和研究生学的都是工业设计专业，然而在北卡的两年研究生学习中，我发现了交互设计比工业设计更吸引我，便选修了一些相关的课程，到处参加专业性的讲座，也自学了许多相关的技能。在较短时间内完成了工业设计到交互设计的转型。

我是 2015 年年底作为实习设计师加入 SAP Palo Alto 的，当时是在 SAP Hybris C4C 交互设计组实习。

由于签证到期，于 16 年 5 月回国，在北京 SAP 干了一年左右的前端开发。去年 C4C 在中国正式成立开发团队之后，我作为交互设计师重返了 C4C，也从北京搬来了成都。

正文：世界上一些著名的大型科技公司都有自己的设计语言(Design Language)，从最初苹果的 Human Interface Guideline(HIG), 到后来居上的谷歌 Material Design, 再到去年新鲜出炉的微软 Fluent Design。这些设计语言已经深度融入并改变了人们日常对电子设备的使用习惯。在这些设计语言中，当然也有我们 SAP 独创的设计语言：获得过红点设计大奖的 Fiori Design。

Fiori 的问世与 SAP 创始人之一 Hasso Plattner 对设计的重视有关。早在 2005 年，他便在斯坦福大学捐资成立了 Hasso Plattner Institute(HPI) of Design, 也就是后来大名鼎鼎的 d.school。d.school 能在全世界率先把设计思维(Design Thinking)作为一个正式的方法论向工科学生传授，并且 Hasso 积极将其融入 SAP 的 DNA 中，也是由于他看中了设计思维的发展潜力及设计的力量。现在我们普遍采用的设计先行的开发流程(Design-Led Development Process)便源于此。他当时说过 SAP 有些产品既不实用也不吸引客户，而我们还在销售它们，这在云计算时代行不通。这最终也促成了 Fiori 的诞生。

Fiori 致力于建立标准的现代化企业级用户体验，通过仅给客户提供他们真正所需的内容，使他们对自己的业务有完全的掌控。这个核心目标体现在五个设计原则中：基于用户角色，可适配不同设备，流畅直观的体验，简单和令人愉悦。

SAP Fiori 1.0 是在 2013 年正式推出的，一经面世便备受关注，并很快应用在了 SAPS/4HANA, Success Factors, Ariba 移动端以及 C4C 等解决方案中。所谓的 Fiori 1.0 是指所使用的 SAP UI5 控件版本介于 1.26 到.1.38 之间的样式，大概长下面这个样子?。

而从 2016 年 10 月开始，控件版本升到 1.40 之后，Fiori 正式进入了 2.0 时代。画风更加唯美的同时，也进一步增强了灵活性和空间的利用。比如用户处理主线任务的可以兼顾追踪其他区域的动态，提升了导航特性，通过”viewport”可以做到跨界面交互，以及可以跨屏查看个人设置等等。因为本文是通识介绍，所以在此就不详细介绍设计的细节了。

Fiori 是 SAP 的 Global Design 团队打造的设计语言，像是一个总纲，提供整体的原则及使用规范层面上的指导，但不针对具体的某个产品。

所以我们 C4C 成都组所属的 SAP C4C 产品线就拥有一支专属的设计团队。团队内部还细分为针对业务的设计师，针对框架的设计师，视觉设计师和用户研究可用性测试的设计师。大部分设计师在硅谷，有三个在班加罗尔，我一个在成都，是针对框架的设计师。

上图是 C4C 产品现在的主页，乍一看是不是像极了 Fiori 1.0 界面？没错，作为 SAP 家族重要成员之一，C4C 的确使用了大量的 Fiori 标准控件，这样能确保我们的产品与众多其他 SAP 产品保持样式的一致性，从而令用户对 SAP 拥有更统一的认知。然而由于一些特有的业务场景需要，C4C 也有很多自己增强的控件。比如上图左侧黑色的导航列表，就是继承了标准控件的 C4C 特有控件。这么做可以进一步丰富了产品的特性，但同时也增加了日后维护成本。比如我们最近在做的主题升级，开发人员和设计师就耗费了很大精力对控件逐个定位并修改样式。我们设计团队也意识到了这个问题，现在正在组织编写 C4C 自己的设计规范，把 C4C 产品里所有使用到的控件都囊括在内，与 UI5 标准控件清晰的区分开。设计规范也将详细规定何时何地使用何种控件，并提供详细视觉设计稿，以便开发人员准确理解，避免歧义。

我们内部把这个界面叫做 RUI(Responsive User Interface)，因为它可以适配手机，平板，笔记本和台式机，也可以同时在 app 和浏览器上使用。

C4C 大概是在 2015 年逐渐采用 RUI 设计的，那么 C4C 在此之前长什么样呢？请看下图。

是不是一股复古风扑面而来？我们内部管它叫 UX3 或者 html5。因为它使用的是 html5 框架，因此不支持 app 端的使用。虽然不如 RUI 好看，但目前它的配置功能比 RUI 要齐全，所以很多客户现在还在使用这个版本。不过在不远的将来，RUI 会具备 UX3 所有的功能，而且目前我们也已停止针对 UX3 的新功能开发，它会逐渐的被 RUI 取代。而这还不是 C4C 最老的版本，下图才是。