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

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最老的版本，下图才是。

我们称之为Silverlight，因为用的是微软的Silverlight框架。这大概是2011-2012年C4C刚成立时的版本。而就在不久前，官宣停止对这个版本的维护，因此这个版本已经正式退出历史舞台。

我们用倒序的方式看了C4C的演化史，而这三个只是大阶段，每个阶段内都在根据客户的反馈及我们的调研结果不停地进行UX的优化。而一切设计的初衷就是让我们产品的用户用的舒适满意，并吸引更多的客户购买我们的产品。